From f1ce06843ba7498ff0966d506304670e687c29ae Mon Sep 17 00:00:00 2001 From: zhaowei <zhaowei> Date: 星期五, 05 九月 2025 17:47:57 +0800 Subject: [PATCH] 1、mdc首页工段级看板删除二保计划 2、调整mdc首页整体背景颜色 --- src/views/dashboard/IndexSignage.vue | 445 +++++++++++++++++++++++++----------------------------- 1 files changed, 206 insertions(+), 239 deletions(-) diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue index a93745a..6f4b45e 100644 --- a/src/views/dashboard/IndexSignage.vue +++ b/src/views/dashboard/IndexSignage.vue @@ -148,7 +148,7 @@ this.getEfficiencyDataByApi() this.getTechConditionAndWarrantyMalfunctionDataByApi() this.getThirdMaintenanceConditionByApi() - this.getTwoMaintenanceChartDataByApi() + this.getSecondMaintenanceChartDataByApi() this.getBarChartDataByApi() this.getDoubleBarChartDataByApi() this.getWorkshopProblemChartDataByApi() @@ -160,8 +160,7 @@ this.runningStateChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) signageApi.getEquipmentStatusStatisticsApi() .then(res => { @@ -180,8 +179,7 @@ this.efficiencyChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) signageApi.getEquipmentUtilizationStatisticsApi() .then(res => { @@ -199,39 +197,49 @@ this.techConditionChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) this.warrantyMalfunctionChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) 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, - 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' + }, + { + value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0, + name: '绂佺敤', + technologyStatus: 'PROHIBITED' } ] this.warrantyMalfunctionData = [ - { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '鎶ヤ慨', code: 'bx' }, - { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '鍋滄満', code: 'stop' }, - { value: res.result.bxqk.find(item => item.code === 'run').value, name: '杩愯', code: 'run' } + { + value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0, + name: '杩愯', + code: 'run' + }, + { + 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 === 'bx').value : 0, + name: '鎶ヤ慨', + code: 'bx' + } ] this.techConditionChartRequireFinished = true this.warrantyMalfunctionChartRequireFinished = true @@ -255,8 +263,8 @@ }, /* 璋冪敤鎺ュ彛鑾峰彇浜屼繚璁″垝 */ - getTwoMaintenanceChartDataByApi() { - signageApi.getTwoMaintenancePlanListApi() + getSecondMaintenanceChartDataByApi() { + signageApi.getSecondMaintenancePlanListApi() .then(res => { if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.factoryName, item.monthPlan, '浜岀骇淇濆吇']) this.drawMaintenanceChart() @@ -269,8 +277,7 @@ this.barChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) signageApi.getEquipmentOEEStatistics() .then(res => { @@ -287,8 +294,7 @@ this.doubleBarChart.showLoading({ text: '鏁版嵁鍔犺浇涓� ...', color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊 - textColor: 'rgba(0, 0, 0, .45)', - maskColor: 'transparent' // 閬僵灞� + textColor: 'rgba(0, 0, 0, .45)' }) signageApi.getEquipmentMonthStatisticsApi() .then(res => { @@ -341,11 +347,10 @@ icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', - fontSize: 14, - padding: [0, 0, 0, 0] + color: 'rgba(0,0,0,.45)', + fontSize: 14 }, - data: ['鍏虫満', '鎶ヨ', '寰呮満', '杩愯'] + data: ['杩愯', '寰呮満', '鎶ヨ', '鍏虫満'] }, grid: { containLabel: true @@ -354,21 +359,18 @@ { type: 'pie', roseType: 'angle', // 鐜懓鍥� - // selectedMode: "single", radius: this.pieChartRadius, center: ['50%', '60%'], color: [ '#686869', '#AA6349', - '#EAEA7C', + '#FFFF88', '#5D975D' ], label: { position: 'outside', show: true, - color: 'inherit', - // textBorderColor: 'inherit', - // textBorderWidth: 1, + color: 'rgba(0,0,0,.45)', fontSize: 16, formatter: function(params) { if (params.name !== '') { @@ -379,7 +381,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.runningStateData } @@ -398,43 +403,30 @@ /* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */ drawEfficiencyChart() { + const data = this.efficiencyData const colorArray = [ { - top: '#79CEAA', - bottom: '#79CEAA' + top: '#EA967B', + bottom: '#F8E18B' }, { - top: '#F589A2', - bottom: '#F589A2' + top: '#62AC75', + bottom: '#A8D07C' }, { - top: '#6FBF9D', - bottom: '#6FBF9D' + top: '#32ACBF', + bottom: '#7BCAC5' }, { - top: '#66DFE2', - bottom: '#66DFE2' - }, { - top: '#A7F0C1', - bottom: '#A7F0C1' - }, - { - top: '#FAE893', - bottom: '#FAE893' - }, - { - top: '#F7B7A0', - bottom: '#F7B7A0' + 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 let yAxisMax if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1 else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛� const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠� - data.forEach(item => defaultData.push(yAxisMax)) const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true @@ -478,7 +470,7 @@ }, show: true, min: 0, - max: 'dataMax', + max: dataMax, interval: yAxisInterval, type: 'value', axisTick: { @@ -623,17 +615,15 @@ top: 25, orient: 'vertical', right: 0, - // bottom: "0", itemWidth: 14, itemHeight: 14, icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', - fontSize: 14, - padding: [0, 0, 0, 0] + color: 'rgba(0,0,0,.45)', + fontSize: 14 }, - data: ['鍚堟牸', '绂佺敤', '闄愮敤'] + data: ['鍚堟牸', '闄愮敤', '绂佺敤'] }, grid: { containLabel: true @@ -641,7 +631,6 @@ series: [ { type: 'pie', - // selectedMode: "single", radius: this.pieChartRadius, center: ['45%', '60%'], color: [ @@ -652,9 +641,7 @@ label: { position: 'outside', show: true, - color: 'inherit', - // textBorderColor: 'inherit', - // textBorderWidth: 1, + color: 'rgba(0,0,0,.45)', fontSize: 16, formatter: function(params) { if (params.name !== '') { @@ -665,7 +652,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.techConditionData } @@ -715,7 +705,7 @@ icon: 'roundRect', itemGap: 15, textStyle: { - color: 'inherit', + color: 'rgba(0,0,0,.45)', fontSize: 14, padding: [0, 0, 0, 0] }, @@ -727,18 +717,17 @@ series: [ { type: 'pie', - // selectedMode: "single", radius: this.pieChartRadius, center: ['45%', '60%'], color: [ '#00CED1', '#B85B38', - '#EAEA7C' + '#FFFF88' ], label: { position: 'outside', show: true, - color: 'inherit', + color: 'rgba(0,0,0,.45)', // textBorderColor: 'inherit', // textBorderWidth: 1, fontSize: 16, @@ -751,7 +740,10 @@ labelLine: { show: true, length2: 10, - length: 10 + length: 10, + lineStyle: { + color: 'rgba(0,0,0,.45)' + } }, data: this.warrantyMalfunctionData } @@ -773,9 +765,9 @@ this.maintenanceConfig = { indexHeader: '搴忓彿', header: ['杞﹂棿', '鏃ユ湡', '鍐呭'], - headerBGC: '#266C86', - oddRowBGC: '#003B51', - evenRowBGC: '#0A2732', + headerBGC: '#46B7E3', + oddRowBGC: '#0383AF', + evenRowBGC: '#0395C9', data: this.twoMaintenanceChartData, index: true, columnWidth: [100, 300, 300, 300], @@ -785,14 +777,8 @@ /* 缁樺埗鍗曟煴鍥� */ drawBarChart() { - const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0'] - const defaultData = [] - const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0 - let yAxisMax - if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1 - else yAxisMax = Math.ceil(dataMax / 5) * 5 // 璁剧疆鏌卞浘鑳屾櫙闃村奖榛樿鍊硷紝鎬濊矾涓烘暟鎹渶澶у�兼渶鎺ヨ繎鐨勮兘琚�5鏁撮櫎鐨勬暟瀛� - const yAxisInterval = yAxisMax / 5 // 鍚屾椂灏嗗埢搴﹀�煎垎鎴�5浠� - this.barChartData.forEach(item => defaultData.push(yAxisMax)) + let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE'] + let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF'] const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true @@ -814,149 +800,125 @@ 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: '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}', - fontSize: 14 + splitLine: { + show: false }, axisTick: { show: false }, axisLine: { - show: false, + show: true, lineStyle: { color: 'rgba(0,0,0,.45)' } }, - splitLine: { - show: false, - lineStyle: { - color: 'rgba(255,255,255,0.12)' + axisLabel: { + show: true, + margin: 10, + textStyle: { + fontSize: 14, + color: 'rgba(0,0,0,.45)' } } - }], + }, series: [ { - type: 'bar', - data: this.barChartData, - barWidth: this.barChartData.length > 5 ? '40%' : 30, + type: 'pictorialBar', + symbolSize: [26, 10], + symbolOffset: [0, -5], + z: 12, itemStyle: { color: function(params) { - let num = colorArray.length - return colorArray[params.dataIndex % num] + return barBottomColor[params.dataIndex % barBottomColor.length] } - // color: new echarts.graphic.LinearGradient( - // 0, 0, 0, 1, [{ - // offset: 0, - // color: '#83bff6' - // }, - // { - // offset: 0.5, - // color: '#188df0' - // }, - // { - // offset: 1, - // color: '#188df0' - // } - // ] - // ) }, - zlevel: 1, label: { - show: false, - lineHeight: 10, - formatter: params => { - if (+params.value === 0) return '' - else return params.value - }, + show: true, position: 'top', - textStyle: { - color: '#fff', - fontSize: 16 - } - } + fontSize: 12, + color: 'rgba(0,0,0,.45)' + }, + symbolPosition: 'end', + data: this.barChartData }, { - 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: 'rgba(0,0,0,.05)' - } - }] - // aria: { - // enabled: true, - // decal: { - // show: true, - // decals: [ - // { - // color: 'rgba(0,0,0,.2)', - // dashArrayX: [20, 0], - // dashArrayY: [1, 2], - // symbol: 'rect', - // rotation: Math.PI / 4 - // }, - // { - // symbol: 'none' - // } - // ] - // } - // } + 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', @@ -968,12 +930,22 @@ /* 缁樺埗鍙屾煴鍥� */ drawDoubleBarChart() { const option = { - color: ['#4992FF', '#4DC0B1'], + color: ['#1890FF', '#2EC35C'], tooltip: { - confine: true, + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, formatter: function(params) { - return '<span style="font-weight:bolder;">' + params.name + '</span><br/>' + - '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params.color + '"></span>' + params.seriesName + ' : ' + params.value + '%' + let result = '' + params.forEach((item, index) => { + let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}锛�${item.value}%` + if (index === 0) { + result = `<span style="font-weight:bolder;">${item.name}</span>` + } + result += '<br />' + dom + }) + return result } }, grid: { @@ -1074,45 +1046,49 @@ show: false } }], - series: [{ - type: 'bar', - barWidth: 20, - itemStyle: { barBorderRadius: 4 }, - name: 'OEE', - data: this.doubleBarChartData.oeeList, - label: { - show: false, - lineHeight: 10, - formatter: params => { - if (+params.value === 0) return '' - else return params.value - }, - position: 'inside', - textStyle: { - color: '#fff', - fontSize: 12 + series: [ + { + type: 'bar', + barWidth: 20, + barGap: '0%', + itemStyle: { barBorderRadius: 4 }, + name: 'OEE', + data: this.doubleBarChartData.oeeList, + label: { + show: true, + lineHeight: 10, + formatter: params => { + if (+params.value === 0) return '' + else return params.value + }, + position: 'top', + textStyle: { + color: 'rgba(0,0,0,.45)', + fontSize: 10 + } + } + }, + { + type: 'bar', + barWidth: 20, + barGap: '0%', + itemStyle: { barBorderRadius: 4 }, + name: 'TEEP', + data: this.doubleBarChartData.utilizationList, + label: { + show: true, + lineHeight: 10, + formatter: params => { + if (+params.value === 0) return '' + else return params.value + }, + position: 'inside', + textStyle: { + color: 'rgba(0,0,0,.45)', + fontSize: 10 + } } } - }, { - type: 'bar', - barWidth: 20, - itemStyle: { barBorderRadius: 4 }, - name: 'TEEP', - data: this.doubleBarChartData.utilizationList, - label: { - show: false, - lineHeight: 10, - formatter: params => { - if (+params.value === 0) return '' - else return params.value - }, - position: 'inside', - textStyle: { - color: '#fff', - fontSize: 12 - } - } - } ] } this.doubleBarChart.setOption(option, true) @@ -1124,13 +1100,13 @@ this.problemConfig = { indexHeader: '搴忓彿', header: ['鏃堕棿', '闂鍐呭'], - headerBGC: '#83B883', - oddRowBGC: '#556955', - evenRowBGC: '#556955', + headerBGC: '#A5CCE6', + oddRowBGC: '#6B9FCD', + evenRowBGC: '#5A7D9A', data: this.workshopProblemChartData, index: true, columnWidth: [100, 200, 300], - align: ['center'] + align: ['center', 'center', 'center'] } }, @@ -1152,7 +1128,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() @@ -1180,14 +1155,6 @@ <style lang="less" scoped> .page-container { - .page-title { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - color: #fff; - margin-bottom: 10px; - } - .content-container { padding-top: 5px; display: flex; -- Gitblit v1.9.3