From a751e547d67c4f8e2c6fddf958c1559f792515bd Mon Sep 17 00:00:00 2001 From: lyh <925863403@qq.com> Date: 星期五, 27 六月 2025 16:11:50 +0800 Subject: [PATCH] 添加工作流 --- src/views/dashboard/IndexSignage.vue | 291 ++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 183 insertions(+), 108 deletions(-) diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue index 334ba0d..358183e 100644 --- a/src/views/dashboard/IndexSignage.vue +++ b/src/views/dashboard/IndexSignage.vue @@ -15,39 +15,11 @@ <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div> </div> <div class="support-plan-container"> - <!--<div v-for="item in supportPlanList" class="support-plan-item"--> - <!--:style="{background:item.background}">--> - <!--<div>{{item.label}}</div>--> - <!--<div class="plan-value-container">--> - <!--<div class="plan-value">{{item.value}}</div>--> - <!--<div>鍙�</div>--> - <!--</div>--> - <!--</div>--> - <div class="support-plan-item" style="background:#5FE0AF"> - <div>鏈湀涓変繚璁″垝</div> + <div v-for="(item,index) in supportPlanList" :key="index" class="support-plan-item" + :style="{background:item.backgroundColor}" @click="openMaintenanceModal(item)"> + <div>{{item.planTime}}</div> <div class="plan-value-container"> - <div class="plan-value">{{thisMonthMaintenancePlanNum}}</div> - <div>鍙�</div> - </div> - </div> - <div class="support-plan-item" style="background:#409EFF"> - <div>鏈湀瀹屾垚</div> - <div class="plan-value-container"> - <div class="plan-value">{{thisMonthMaintenanceRealNum}}</div> - <div>鍙�</div> - </div> - </div> - <div class="support-plan-item" style="background:#D6BC52"> - <div>涓嬫湀涓変繚璁″垝</div> - <div class="plan-value-container"> - <div class="plan-value">{{nextMonthMaintenancePlanNum}}</div> - <div>鍙�</div> - </div> - </div> - <div class="support-plan-item" style="background:#58D9F9"> - <div>涓嬩笅鏈堜笁淇濊鍒�</div> - <div class="plan-value-container"> - <div class="plan-value">{{nextNextMonthMaintenancePlanNum}}</div> + <div class="plan-value">{{$data[item.planValueLabel]}}</div> <div>鍙�</div> </div> </div> @@ -68,18 +40,29 @@ </dv-border-box-9> </div> </div> + + <SignageModal :modalVisible="modalVisible" :modalTitle=modalTitle :modalDataApiUrl="modalDataApiUrl" + :modalDataApiParams="modalDataApiParams" + @closeModal="modalVisible=false"/> </div> </template> <script> import signageApi from '@/api/signage' import moment from 'moment' + import SignageModal from './modules/SignageModal' export default { name: 'IndexSignage', + components: { SignageModal }, data() { return { + firstEnterClientWidth: null, + pieChartRadius: ['40%', '55%'], + normalPieChartRadius: ['40%', '55%'], + currentPageProductionId: null, runningStateChart: '', + runningStateChartDataRequireFinished: false, runningStateData: [ { value: '0', name: '鍏虫満' }, { value: '0', name: '鎶ヨ' }, @@ -89,35 +72,70 @@ efficiencyChart: '', efficiencyData: [], techConditionChart: '', + techConditionChartRequireFinished: false, techConditionData: [ { value: '0', name: '鍚堟牸' }, { value: '0', name: '绂佺敤' }, { value: '0', name: '闄愮敤' } ], warrantyMalfunctionChart: '', + warrantyMalfunctionChartRequireFinished: false, warrantyMalfunctionData: [ - { value: '12', name: '鎶ヤ慨' }, - { value: '10', name: '鍋滄満' }, - { value: '8', name: '杩愯' } + { value: '0', name: '鎶ヤ慨' }, + { value: '0', name: '鍋滄満' }, + { value: '0', name: '杩愯' } + ], + supportPlanList: [ + { + planTime: '鏈湀涓変繚璁″垝', + planValueLabel: 'thisMonthMaintenancePlanNum', + backgroundColor: '#5FE0AF', + apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList' + }, + { + planTime: '鏈湀瀹屾垚', + planValueLabel: 'thisMonthMaintenanceRealNum', + backgroundColor: '#409EFF', + apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList' + }, + { + planTime: '涓嬫湀涓変繚璁″垝', + planValueLabel: 'nextMonthMaintenancePlanNum', + backgroundColor: '#D6BC52', + apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList' + }, + { + planTime: '涓嬩笅鏈堜笁淇濊鍒�', + planValueLabel: 'nextNextMonthMaintenancePlanNum', + backgroundColor: '#58D9F9', + apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList' + } ], thisMonthMaintenancePlanNum: 0, thisMonthMaintenanceRealNum: 0, nextMonthMaintenancePlanNum: 0, nextNextMonthMaintenancePlanNum: 0, - twoMaintenanceChartData: [['-', '-', '-']], + twoMaintenanceChartData: [], barChart: '', barChartData: [], doubleBarChart: '', doubleBarChartData: {}, + workshopProblemChartData: [], efficiencyChartConfig: {}, maintenanceConfig: {}, - problemConfig: {} + problemConfig: {}, + modalVisible: false, + modalTitle: '', + modalDataApiUrl: '', + modalTableColumns: [], + modalDataApiParams: {} } }, mounted() { + this.firstEnterClientWidth = document.body.clientWidth || document.documentElement.clientWidth window.addEventListener('resize', this.handleWindowResize) + this.re_drawPieChart() this.getChartDataByApi() - this.drawProblemChart() }, beforeDestroy() { window.removeEventListener('resize', this.handleWindowResize) @@ -133,6 +151,7 @@ this.getTwoMaintenanceChartDataByApi() this.getBarChartDataByApi() this.getDoubleBarChartDataByApi() + this.getWorkshopProblemChartDataByApi() }, /* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */ @@ -146,8 +165,12 @@ }) signageApi.getEquipmentStatusStatisticsApi() .then(res => { - if (res.success) this.runningStateData = res.result.list - this.drawRunningStateChart(res.result.productionId) + if (res.success) { + this.runningStateData = res.result.list + this.currentPageProductionId = res.result.productionId + this.runningStateChartDataRequireFinished = true + this.drawRunningStateChart(res.result.productionId) + } }) }, @@ -162,8 +185,10 @@ }) signageApi.getEquipmentUtilizationStatisticsApi() .then(res => { - if (res.success) this.efficiencyData = res.result - this.drawEfficiencyChart() + if (res.success) { + this.efficiencyData = res.result + this.drawEfficiencyChart() + } }) }, @@ -180,12 +205,13 @@ .then(res => { if (res.success && res.result) { this.techConditionData = [ - { value: res.result[0].qualifiedCount, name: '鍚堟牸' }, - { value: res.result[0].disabledCount, name: '绂佺敤' }, - { value: res.result[0].limitedUseCount, name: '闄愮敤' } + { value: res.result[0].qualifiedCount, name: '鍚堟牸', technologyStatus: 'qualified' }, + { value: res.result[0].disabledCount, name: '绂佺敤', technologyStatus: 'disabled' }, + { value: res.result[0].limitedUseCount, name: '闄愮敤', technologyStatus: 'limitedUse' } ] + this.techConditionChartRequireFinished = true + this.drawTechConditionChart() } - this.drawTechConditionChart() }) }, @@ -202,12 +228,13 @@ .then(res => { if (res.success && res.result) { this.warrantyMalfunctionData = [ - { value: res.result[0].failurTotalCount, name: '鎶ヤ慨' }, - { value: res.result[0].stopCount, name: '鍋滄満' }, - { value: res.result[0].noStopCount, name: '杩愯' } + { value: res.result[0].failurTotalCount, name: '鎶ヤ慨', isStop: '' }, + { value: res.result[0].stopCount, name: '鍋滄満', isStop: '2' }, + { value: res.result[0].noStopCount, name: '杩愯', isStop: '1' } ] + this.warrantyMalfunctionChartRequireFinished = true + this.drawWarrantyMalfunctionChart() } - this.drawWarrantyMalfunctionChart() }) }, @@ -235,7 +262,7 @@ getTwoMaintenanceChartDataByApi() { signageApi.getTwoMaintenancePlanListApi() .then(res => { - if (res.success && res.result) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content]) + if (res.success && res.result.length > 0) this.twoMaintenanceChartData = res.result.map(item => [item.centerName, item.maintenanceDate, item.content]) this.drawMaintenanceChart() }) }, @@ -251,8 +278,10 @@ }) signageApi.getEquipmentOEEStatistics() .then(res => { - if (res.success) this.barChartData = res.result - this.drawBarChart() + if (res.success && res.result && res.result.length > 0) { + this.barChartData = res.result + this.drawBarChart() + } }) }, @@ -267,8 +296,19 @@ }) signageApi.getEquipmentMonthStatisticsApi() .then(res => { - if (res.success) this.doubleBarChartData = res.result - this.drawDoubleBarChart() + if (res.success) { + this.doubleBarChartData = res.result + this.drawDoubleBarChart() + } + }) + }, + + /* 璋冪敤鎺ュ彛鑾峰彇杞﹂棿闂鍒楄〃*/ + getWorkshopProblemChartDataByApi() { + signageApi.getWorkshopProblemListApi() + .then(res => { + if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime]) + this.drawWorkshopProblemChart() }) }, @@ -320,7 +360,7 @@ type: 'pie', roseType: 'angle', // 鐜懓鍥� // selectedMode: "single", - radius: ['40%', '55%'], + radius: this.pieChartRadius, center: ['50%', '60%'], color: [ '#8B8B8B', @@ -431,7 +471,7 @@ } }, xAxis: { - name: '鍗曚綅', + name: '', nameTextStyle: { color: '#fff' }, @@ -496,7 +536,7 @@ data: data }], series: [{ - name: '鍒╃敤鐜�', + name: 'TEEP', type: 'bar', zlevel: 1, itemStyle: { @@ -558,14 +598,13 @@ } ] } - option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸 + option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}TEEP` this.efficiencyChart.setOption(option, true) this.efficiencyChart.hideLoading() this.efficiencyChart.on('click', params => { // 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰� if (params.componentType === 'series') { // 鏌辩姸浣撹烦杞粺璁″垎鏋愰〉闈㈠睍绀哄搴斿眰绾ф暟鎹� - console.log('seriesParams===========', params) let productionId let tierName // 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖 @@ -576,13 +615,11 @@ productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId tierName = this.efficiencyData.find(item => item.productionCode === params.name).name } - console.log('productionId', productionId) this.$router.push({ name: 'mdc-base-StatisticsChart', params: { isEquipment: false, productionId, tierName } }) } else { - console.log('yAxisParams===========', params) this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value }) } }) @@ -634,11 +671,11 @@ { type: 'pie', // selectedMode: "single", - radius: ['40%', '55%'], + radius: this.pieChartRadius, center: ['45%', '60%'], color: [ '#0FC61A', - '#0DAF15', + '#F56436', '#8B8B8B' ], label: { @@ -665,6 +702,15 @@ } this.techConditionChart.setOption(option, true) this.techConditionChart.hideLoading() + + 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.modalVisible = true + }) }, /* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */ @@ -713,7 +759,7 @@ { type: 'pie', // selectedMode: "single", - radius: ['40%', '55%'], + radius: this.pieChartRadius, center: ['45%', '60%'], color: [ '#24F2F5', @@ -744,6 +790,15 @@ } this.warrantyMalfunctionChart.setOption(option, true) this.warrantyMalfunctionChart.hideLoading() + + 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.modalVisible = true + }) }, /* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */ @@ -756,7 +811,7 @@ evenRowBGC: '#295562', data: this.twoMaintenanceChartData, index: true, - columnWidth: [100], + columnWidth: [100, 300, 300, 300], align: ['center', 'center', 'center', 'center'] } }, @@ -764,6 +819,7 @@ /* 缁樺埗鍗曟煴鍥� */ drawBarChart() { const defaultData = [] + const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0'] const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value let yAxisMax if (dataMax === 0) yAxisMax = 1 // 鑻ユ暟鎹腑鏈�澶у�间负0锛屽垯灏嗚儗鏅粯璁ゅ�艰缃负1 @@ -819,10 +875,11 @@ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆� rotate: this.barChartData.length >= 6 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴� inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶� - margin: 6, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 + margin: 10, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 formatter: value => { return `${this.barChartData.find(item => item.productionId === value).name}` - } + }, + fontSize: 14 }, axisTick: { show: true, @@ -836,7 +893,8 @@ interval: yAxisInterval, axisLabel: { formatter: '{value}', - color: '#e2e9ff' + color: '#fff', + fontSize: 14 }, axisTick: { show: false @@ -857,48 +915,51 @@ series: [{ type: 'bar', data: this.barChartData, - barWidth: '15%', + barWidth: this.barChartData.length > 5 ? '40%' : 30, itemStyle: { - color: '#55D6A5' + color: function(params) { + let num = colorArray.length + return colorArray[params.dataIndex % num] + }, + barBorderRadius: 100 }, zlevel: 1, label: { - show: true, + show: false, lineHeight: 10, formatter: params => { if (+params.value === 0) return '' else return params.value }, - position: 'inside', + position: 'top', textStyle: { color: '#fff', - fontSize: 18 + fontSize: 16 } } }, { name: '鑳屾櫙', type: 'bar', - barWidth: '15%', + barWidth: this.barChartData.length > 5 ? '40%' : 30, barGap: '-100%', data: defaultData, itemStyle: { - color: '#11294d' + color: '#11294d', + barBorderRadius: 100 } }] } - option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE杞﹂棿` + option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE` this.barChart.setOption(option, true) this.barChart.hideLoading() this.barChart.on('click', params => { - console.log('params', params) let productionId // 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖 if (params.seriesIndex === 0) productionId = params.data.productionId else productionId = params.name - console.log('productionId', productionId) this.$router.push({ name: 'mdc-base-OEEAnalysis', params: { isEquipment: false, productionId } @@ -909,7 +970,7 @@ /* 缁樺埗鍙屾煴鍥� */ drawDoubleBarChart() { const option = { - color: ['#409EFF', '#0FC61A'], + color: ['#66DFE2', '#79CEAA'], tooltip: { confine: true, formatter: function(params) { @@ -941,7 +1002,7 @@ } } }, - data: ['OEE', '鍒╃敤鐜�'] + data: ['OEE', 'TEEP'] }, xAxis: { type: 'category', @@ -952,7 +1013,7 @@ } }, axisLabel: { - fontSize: 12, + fontSize: 14, color: '#fff' }, axisTick: { @@ -968,9 +1029,6 @@ type: 'value', min: 0, minInterval: 1, - splitArea: { - show: false - }, axisLine: { show: true }, @@ -985,7 +1043,7 @@ } }, axisLabel: { - fontSize: 12, + fontSize: 14, color: '#fff', fontFamily: 'Bebas' } @@ -1002,10 +1060,10 @@ show: false }, axisLabel: { - fontSize: 12, + fontSize: 14, formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀� fontFamily: 'Bebas', - color: '#fff' + color: '#6A93B9' }, splitArea: { show: false @@ -1014,11 +1072,11 @@ series: [{ type: 'bar', barWidth: 15, - itemStyle: { barBorderRadius: [3, 3, 0, 0] }, + itemStyle: { barBorderRadius: 100 }, name: 'OEE', data: this.doubleBarChartData.oeeList, label: { - show: true, + show: false, lineHeight: 10, formatter: params => { if (+params.value === 0) return '' @@ -1033,11 +1091,11 @@ }, { type: 'bar', barWidth: 15, - itemStyle: { barBorderRadius: [3, 3, 0, 0] }, - name: '鍒╃敤鐜�', + itemStyle: { barBorderRadius: 100 }, + name: 'TEEP', data: this.doubleBarChartData.utilizationList, label: { - show: true, + show: false, lineHeight: 10, formatter: params => { if (+params.value === 0) return '' @@ -1057,29 +1115,43 @@ }, /* 缁樺埗闂婊氬姩琛� */ - drawProblemChart() { + drawWorkshopProblemChart() { this.problemConfig = { indexHeader: '搴忓彿', - header: ['鏃堕棿', '闂鍐呭'], + header: ['闂鍐呭', '鏃堕棿'], headerBGC: '#86D186', oddRowBGC: '#7CBF7C', evenRowBGC: '#7CBF7C', - data: [ - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'], - // ['2024骞�3鏈�23鍙�', '澶у娉ㄦ剰瀹夊叏闂'] - ], + data: this.workshopProblemChartData, index: true, - columnWidth: [100, 300, 300], + columnWidth: [100, 300, 150], align: ['center'] } + }, + + /** + * 鐐瑰嚮涓変繚灞曠ず鏍忓悗鎵撳紑寮圭獥 + * @param record 鐐瑰嚮褰撳墠涓変繚淇℃伅 + */ + openMaintenanceModal(record) { + this.modalTitle = record.planTime + this.modalDataApiUrl = record.apiUrl + this.modalVisible = true + }, + + re_drawPieChart() { + const clientWidth = document.body.clientWidth || document.documentElement.clientWidth + if (this.firstEnterClientWidth != 1920) { + this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / 1920)) + '%') + } 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() + if (this.warrantyMalfunctionChartRequireFinished) this.drawWarrantyMalfunctionChart() + }) }, /** @@ -1087,6 +1159,8 @@ * 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜� */ handleWindowResize() { + this.re_drawPieChart() + if (this.runningStateChart) this.runningStateChart.resize() if (this.efficiencyChart) this.efficiencyChart.resize() if (this.techConditionChart) this.techConditionChart.resize() @@ -1127,6 +1201,7 @@ padding: 5px 20px; font-size: 20px; margin-bottom: 10px; + cursor: pointer; .plan-value-container { display: flex; -- Gitblit v1.9.3