From a892616db370b2185bc546a11c873df1137cc7e0 Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期一, 01 九月 2025 09:44:01 +0800 Subject: [PATCH] 1、设备事故登记表以及三不放过原则分析报表导出及批量打印功能 2、调整首页看板及图表样式 --- src/views/dashboard/IndexSignage.vue | 412 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 248 insertions(+), 164 deletions(-) diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue index 0761ee4..949d5f3 100644 --- a/src/views/dashboard/IndexSignage.vue +++ b/src/views/dashboard/IndexSignage.vue @@ -24,7 +24,7 @@ </div> </div> </div> - <div style="padding: 0 55px;margin-top: 10px"> + <div style="padding: 0 55px;margin-top : 10px"> <dv-scroll-board :config="maintenanceConfig" style="width:100%;height:220px"/> </div> </dv-border-box-9> @@ -51,6 +51,7 @@ import signageApi from '@/api/signage' import moment from 'moment' import SignageModal from './modules/SignageModal' + import * as echarts from 'echarts' export default { name: 'IndexSignage', @@ -90,25 +91,25 @@ planTime: '鏈湀涓変繚璁″垝', planValueLabel: 'thisMonthMaintenancePlanNum', backgroundColor: '#719D8E', - apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList' + code: 'bysbzs' }, { planTime: '鏈湀瀹屾垚', planValueLabel: 'thisMonthMaintenanceRealNum', backgroundColor: '#409EFF', - apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList' + code: 'bwc' }, { planTime: '涓嬫湀涓変繚璁″垝', planValueLabel: 'nextMonthMaintenancePlanNum', backgroundColor: '#A8985D', - apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList' + code: 'xysb' }, { planTime: '涓嬩笅鏈堜笁淇濊鍒�', planValueLabel: 'nextNextMonthMaintenancePlanNum', backgroundColor: '#58D9F9', - apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList' + code: 'xxysb' } ], thisMonthMaintenancePlanNum: 0, @@ -145,8 +146,6 @@ getChartDataByApi() { this.getRunningStateDataByApi() this.getEfficiencyDataByApi() - // this.getTechConditionDataByApi() - // this.getWarrantyMalfunctionDataByApi() this.getTechConditionAndWarrantyMalfunctionDataByApi() this.getThirdMaintenanceConditionByApi() this.getTwoMaintenanceChartDataByApi() @@ -162,7 +161,7 @@ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) signageApi.getEquipmentStatusStatisticsApi() .then(res => { @@ -182,7 +181,7 @@ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) signageApi.getEquipmentUtilizationStatisticsApi() .then(res => { @@ -201,38 +200,50 @@ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) this.warrantyMalfunctionChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi() .then(res => { if (res.success && res.result) { this.techConditionData = [ { - value: res.result.jszt.find(item => item.code === 'QUALIFIED').value, + value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'QUALIFIED').value : 0, name: '鍚堟牸', technologyStatus: 'QUALIFIED' }, { - value: res.result.jszt.find(item => item.code === 'PROHIBITED').value, + value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, name: '绂佺敤', technologyStatus: 'PROHIBITED' }, { - value: res.result.jszt.find(item => item.code === 'RESTRICTED').value, + value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0, name: '闄愮敤', technologyStatus: 'RESTRICTED' } ] this.warrantyMalfunctionData = [ - { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '鎶ヤ慨', isStop: '' }, - { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '鍋滄満', isStop: '2' }, - { value: res.result.bxqk.find(item => item.code === 'run').value, name: '杩愯', isStop: '1' } + { + value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0, + name: '鎶ヤ慨', + code: 'bx' + }, + { + value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0, + name: '鍋滄満', + code: 'stop' + }, + { + value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, + name: '杩愯', + code: 'run' + } ] this.techConditionChartRequireFinished = true this.warrantyMalfunctionChartRequireFinished = true @@ -271,7 +282,7 @@ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) signageApi.getEquipmentOEEStatistics() .then(res => { @@ -289,7 +300,7 @@ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'rgba(0,0,0,.05)' // 閬僵灞� + maskColor: 'transparent' // 閬僵灞� }) signageApi.getEquipmentMonthStatisticsApi() .then(res => { @@ -304,7 +315,7 @@ getWorkshopProblemChartDataByApi() { signageApi.getWorkshopProblemListApi() .then(res => { - if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime]) + if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.createTime, item.content]) this.drawWorkshopProblemChart() }) }, @@ -342,7 +353,7 @@ icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', + color: 'rgba(0,0,0,.45)', fontSize: 14, padding: [0, 0, 0, 0] }, @@ -361,13 +372,13 @@ color: [ '#686869', '#AA6349', - '#EAEA7C', + '#FFFF88', '#5D975D' ], label: { position: 'outside', show: true, - color: 'inherit', + color: 'rgba(0,0,0,.45)', // textBorderColor: 'inherit', // textBorderWidth: 1, fontSize: 16, @@ -380,7 +391,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.runningStateData } @@ -399,6 +413,24 @@ /* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */ drawEfficiencyChart() { + const colorArray = [ + { + top: '#EA967B', + bottom: '#F8E18B' + }, + { + top: '#62AC75', + bottom: '#A8D07C' + }, + { + top: '#32ACBF', + bottom: '#7BCAC5' + }, + { + top: '#7196CE', + bottom: '#8DCCEF' + } + ] const data = this.efficiencyData const defaultData = [] const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0 @@ -457,10 +489,10 @@ show: false }, splitLine: { - show: false + show: true } }, - yAxis: [{ + yAxis: { type: 'category', inverse: true, triggerEvent: true, @@ -485,32 +517,59 @@ show: false }, data: data.map(item => item.productionCode) - }, { - type: 'category', - inverse: true, - axisTick: 'none', - axisLine: 'none', - show: true, - axisLabel: { - textStyle: { - color: '#ffffff', - fontSize: '14' - }, - formatter: function(value) { - return `${value}%` - } - }, - data: data - }], + }, series: { name: 'TEEP', type: 'bar', zlevel: 1, itemStyle: { - barBorderRadius: 100, - color: '#5070DD' + color: function(params) { + let num = colorArray.length + return { + type: 'linear', + colorStops: [{ + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }, { + offset: 1, + color: colorArray[params.dataIndex % num].top + }, { + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }, { + offset: 1, + color: colorArray[params.dataIndex % num].top + }, { + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }, { + offset: 1, + color: colorArray[params.dataIndex % num].top + }, { + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }, { + offset: 1, + color: colorArray[params.dataIndex % num].top + }, { + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }, { + offset: 1, + color: colorArray[params.dataIndex % num].top + }, { + offset: 0, + color: colorArray[params.dataIndex % num].bottom + }] + } + } }, - barWidth: 12, + label: { + show: true, + position: 'inside', + color: '#fff' + }, + barWidth: 18, data: data } } @@ -574,7 +633,7 @@ icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', + color: 'rgba(0,0,0,.45)', fontSize: 14, padding: [0, 0, 0, 0] }, @@ -597,7 +656,7 @@ label: { position: 'outside', show: true, - color: 'inherit', + color: 'rgba(0,0,0,.45)', // textBorderColor: 'inherit', // textBorderWidth: 1, fontSize: 16, @@ -610,7 +669,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.techConditionData } @@ -621,10 +683,8 @@ this.techConditionChart.on('click', params => { this.modalTitle = `鎶�鏈姸鎬侊紙${params.name}锛塦 - this.modalDataApiParams = { - technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus - } - this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByTechnologyStatus' + this.modalDataApiParams = { technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus } + this.modalDataApiUrl = '/eam/equipment/list' this.modalVisible = true }) }, @@ -662,7 +722,7 @@ icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', + color: 'rgba(0,0,0,.45)', fontSize: 14, padding: [0, 0, 0, 0] }, @@ -680,12 +740,12 @@ color: [ '#00CED1', '#B85B38', - '#EAEA7C' + '#FFFF88' ], label: { position: 'outside', show: true, - color: 'inherit', + color: 'rgba(0,0,0,.45)', // textBorderColor: 'inherit', // textBorderWidth: 1, fontSize: 16, @@ -698,7 +758,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.warrantyMalfunctionData } @@ -709,10 +772,8 @@ this.warrantyMalfunctionChart.on('click', params => { this.modalTitle = `鎶ヤ慨鏁呴殰锛�${params.name}锛塦 - this.modalDataApiParams = { - isStop: this.warrantyMalfunctionData.find(item => item.name === params.name).isStop - } - this.modalDataApiUrl = '/eam/calibrationOrder/showEquipmentByReportRepair' + this.modalDataApiParams = { code: this.warrantyMalfunctionData.find(item => item.name === params.name).code } + this.modalDataApiUrl = '/eam/home/repairList' this.modalVisible = true }) }, @@ -722,9 +783,9 @@ this.maintenanceConfig = { indexHeader: '搴忓彿', header: ['杞﹂棿', '鏃ユ湡', '鍐呭'], - headerBGC: '#266C86', - oddRowBGC: '#0A2732', - evenRowBGC: '#003B51', + headerBGC: '#46B7E3', + oddRowBGC: '#0383AF', + evenRowBGC: '#0395C9', data: this.twoMaintenanceChartData, index: true, columnWidth: [100, 300, 300, 300], @@ -741,6 +802,9 @@ else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛� const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠� this.barChartData.forEach(item => defaultData.push(yAxisMax)) + console.log('bar', this.barChartData) + let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE'] + let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF'] const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true @@ -762,113 +826,124 @@ formatter: function(params) { return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' + '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%' - }, - // backgroundColor: 'rgba(9, 24, 48, 0.5)', - borderColor: 'rgba(75, 253, 238, 0.4)', - textStyle: { - // color: '#CFE3FC' - }, - borderWidth: 1 + } }, grid: { top: '15%', left: '10%' }, - xAxis: [{ - name: '', - nameLocation: 'middle', - nameGap: 40, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺� - type: 'category', - data: this.barChartData.map(item => item.productionId), + xAxis: { + data: this.barChartData.map(item => item.name), + axisTick: { + show: false + }, axisLine: { + show: true, lineStyle: { - color: '#FFFFFF' + color: 'rgba(0,0,0,.45)' } }, axisLabel: { - show: true, // 鏄惁鏄剧ず鍒诲害鏍囩锛岄粯璁ゆ樉绀� - interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆� - rotate: this.barChartData.length >= 6 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴� - inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶� - margin: 10, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 - formatter: value => { - return `${this.barChartData.find(item => item.productionId === value).name}` - }, - fontSize: 14 - }, - axisTick: { show: true, - alignWithLabel: true - } - }], - yAxis: [{ + rotate: 20, + margin: 25, + textStyle: { + fontSize: 14, + color: 'rgba(0,0,0,.45)', + align: 'center' + } + }, + interval: 0 + }, + yAxis: { name: '%', - min: 0, - max: yAxisMax, - interval: yAxisInterval, - axisLabel: { - formatter: '{value}', - color: '#fff', - fontSize: 14 + splitLine: { + show: false }, axisTick: { show: false }, axisLine: { - show: false, + show: true, lineStyle: { - color: '#FFFFFF' + color: 'rgba(0,0,0,.45)' } }, - splitLine: { - show: false, - lineStyle: { - color: 'rgba(255,255,255,0.12)' - } - } - }], - series: [{ - type: 'bar', - data: this.barChartData, - barWidth: this.barChartData.length > 5 ? '40%' : 30, - itemStyle: { - color: '#2E8BDA' - }, - zlevel: 1, - label: { - show: false, - lineHeight: 10, - formatter: params => { - if (+params.value === 0) return '' - else return params.value - }, - position: 'top', + axisLabel: { + show: true, + margin: 10, textStyle: { - color: '#fff', - fontSize: 16 + fontSize: 14, + color: 'rgba(0,0,0,.45)' } } }, + series: [ { - name: '鑳屾櫙', - type: 'bar', - barWidth: this.barChartData.length > 5 ? '40%' : 30, - barGap: '-100%', - data: defaultData, + type: 'pictorialBar', + symbolSize: [26, 10], + symbolOffset: [0, -5], + z: 12, itemStyle: { - color: '#11294d' - } + color: function(params) { + return barBottomColor[params.dataIndex % barBottomColor.length] + } + }, + label: { + show: true, + position: 'top', + fontSize: 12, + color: 'rgba(0,0,0,.45)' + }, + symbolPosition: 'end', + data: this.barChartData + }, + { + type: 'pictorialBar', + symbolSize: [26, 10], + symbolOffset: [0, 5], + z: 12, + itemStyle: { + color: function(params) { + return barTopColor[params.dataIndex % barTopColor.length] + } + }, + data: this.barChartData + }, + { + type: 'bar', + itemStyle: { + color: function(params) { + return new echarts.graphic.LinearGradient( + 0, 0, 0, 1, + [{ + offset: 1, + color: barTopColor[params.dataIndex % barTopColor.length] + }, + { + offset: 0, + color: barBottomColor[params.dataIndex % barBottomColor.length] + } + ] + ) + }, + opacity: .9 + }, + z: 16, + barWidth: 26, + barGap: '-100%', + data: this.barChartData }] } + option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE` this.barChart.setOption(option, true) this.barChart.hideLoading() this.barChart.on('click', params => { let productionId - // 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖 - if (params.seriesIndex === 0) productionId = params.data.productionId - else productionId = params.name + console.log('params', params) + productionId = params.data.productionId this.$router.push({ name: 'mdc-base-OEEAnalysis', @@ -880,7 +955,7 @@ /* 缁樺埗鍙屾煴鍥� */ drawDoubleBarChart() { const option = { - color: ['#4992FF', '#4DC0B1'], + color: ['#1890FF', '#2EC35C'], tooltip: { confine: true, formatter: function(params) { @@ -918,13 +993,14 @@ type: 'category', data: this.doubleBarChartData.dateList, axisLine: { + show: true, lineStyle: { - color: 'rgba(255,255,255,0.45)' + color: 'rgba(0,0,0,.45)' } }, axisLabel: { fontSize: 14, - color: '#fff' + color: 'rgba(0,0,0,.45)' }, axisTick: { show: true @@ -934,13 +1010,16 @@ { name: '%', nameTextStyle: { - color: '#fff' + color: 'rgba(0,0,0,.45)' }, type: 'value', min: 0, minInterval: 1, axisLine: { - show: true + show: true, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, axisTick: { show: true @@ -954,14 +1033,17 @@ }, axisLabel: { fontSize: 14, - color: '#fff', + color: 'rgba(0,0,0,.45)', fontFamily: 'Bebas' } }, { type: 'value', axisLine: { - show: true + show: true, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, axisTick: { show: false @@ -973,7 +1055,7 @@ fontSize: 14, formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀� fontFamily: 'Bebas', - color: '#6A93B9' + color: 'rgba(0,0,0,.45)' }, splitArea: { show: false @@ -981,31 +1063,33 @@ }], series: [{ type: 'bar', - barWidth: 15, - itemStyle: { barBorderRadius: 100 }, + barWidth: 20, + barGap: '0%', + itemStyle: { barBorderRadius: 4 }, name: 'OEE', data: this.doubleBarChartData.oeeList, label: { - show: false, + show: true, lineHeight: 10, formatter: params => { if (+params.value === 0) return '' else return params.value }, - position: 'inside', + position: 'top', textStyle: { - color: '#fff', - fontSize: 12 + color: 'rgba(0,0,0,.45)', + fontSize: 10 } } }, { type: 'bar', - barWidth: 15, - itemStyle: { barBorderRadius: 100 }, + barWidth: 20, + barGap: '0%', + itemStyle: { barBorderRadius: 4 }, name: 'TEEP', data: this.doubleBarChartData.utilizationList, label: { - show: false, + show: true, lineHeight: 10, formatter: params => { if (+params.value === 0) return '' @@ -1013,8 +1097,8 @@ }, position: 'inside', textStyle: { - color: '#fff', - fontSize: 12 + color: 'rgba(0,0,0,.45)', + fontSize: 10 } } } @@ -1028,14 +1112,14 @@ drawWorkshopProblemChart() { this.problemConfig = { indexHeader: '搴忓彿', - header: ['闂鍐呭', '鏃堕棿'], - headerBGC: '#83B883', - oddRowBGC: '#556955', - evenRowBGC: '#556955', + header: ['鏃堕棿', '闂鍐呭'], + headerBGC: '#A5CCE6', + oddRowBGC: '#6B9FCD', + evenRowBGC: '#5A7D9A', data: this.workshopProblemChartData, index: true, - columnWidth: [100, 300, 150], - align: ['center'] + columnWidth: [100, 200, 300], + align: ['center', 'center', 'center'] } }, @@ -1045,7 +1129,8 @@ */ openMaintenanceModal(record) { this.modalTitle = record.planTime - this.modalDataApiUrl = record.apiUrl + this.modalDataApiParams = { code: record.code } + this.modalDataApiUrl = '/eam/home/maintenanceList' this.modalVisible = true }, @@ -1056,7 +1141,6 @@ } else { this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / this.firstEnterClientWidth)) + '%') } - console.log('pieChartRadius', this.pieChartRadius) this.$nextTick(() => { if (this.runningStateChartDataRequireFinished) this.drawRunningStateChart(this.currentPageProductionId) if (this.techConditionChartRequireFinished) this.drawTechConditionChart() -- Gitblit v1.9.3