From 7c38e9cf9fd161a0e296a047e904eeaf65d96f9f Mon Sep 17 00:00:00 2001 From: qushaowei <qushaowei@163.com> Date: 星期二, 16 四月 2024 09:25:05 +0800 Subject: [PATCH] 校验修改 --- src/views/dashboard/IndexSignage.vue | 112 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 70 insertions(+), 42 deletions(-) diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue index 2832ed4..ff2faab 100644 --- a/src/views/dashboard/IndexSignage.vue +++ b/src/views/dashboard/IndexSignage.vue @@ -1,22 +1,15 @@ <template> <div class="page-container"> - <!--<div class="page-title">--> - <!--<slot name="index_signage_nav"></slot>--> - <!--<!–<dv-decoration-11 class="workshop-nav" v-for="item in workshopList">–>--> - <!--<!–{{item.workshopName}}–>--> - <!--<!–</dv-decoration-11>–>--> - <!--</div>--> <div class="content-container"> <div style="width: 25%" class="left-col"> <dv-border-box-9 style="padding: 30px 20px 0"> - <!--<div class="first-title">M D C 鍏� 缃� 鎬� 鏁� : 6 0 3 鍙�</div>--> <div id="running_state_chart" style="width:100%;height: 300px"></div> <div id="efficiency_chart" style="width: 100%;height: 465px"></div> </dv-border-box-9> </div> + <div style="width: 42%" class="middle-col"> <dv-border-box-9 style="padding: 30px 20px 0"> - <!--<div class="first-title">璁� 澶� 鍙� 璐� 鎬� 鏁� : 1 0 2 2 鍙�</div>--> <div style="display: flex"> <div id="tech_condition_chart" style="width:50%;height: 340px;"></div> <div id="warranty_malfunction_chart" style="width:50%;height: 340px;"></div> @@ -64,6 +57,7 @@ </div> </dv-border-box-9> </div> + <div style="width: 32%"> <dv-border-box-9 style="padding: 30px 0 20px"> <div id="bar_chart" style="width:100%;height: 280px"></div> @@ -93,7 +87,7 @@ { value: '0', name: '杩愯' } ], efficiencyChart: '', - efficiencyData:[], + efficiencyData: [], techConditionChart: '', techConditionData: [ { value: '0', name: '鍚堟牸' }, @@ -112,7 +106,32 @@ nextNextMonthMaintenancePlanNum: 0, twoMaintenanceChartData: [['-', '-', '-']], barChart: '', - barChartData: [], + barChartData: [ + { + 'value': '32', + 'name': '401', + 'productionCode': '125487318', + 'productionId': '1729419336207761409' + }, + { + 'value': '23', + 'name': '406', + 'productionCode': '4212152142', + 'productionId': '1729419361201618945' + }, + { + 'value': '11', + 'name': '407', + 'productionCode': '321321345', + 'productionId': '1729419381665628161' + }, + { + 'value': '44', + 'name': '408', + 'productionCode': '536341343', + 'productionId': '1729670118396067842' + } + ], doubleBarChart: '', doubleBarChartData: {}, efficiencyChartConfig: {}, @@ -136,7 +155,7 @@ this.getWarrantyMalfunctionDataByApi() this.getMonthMaintenanceNumByApi() this.getTwoMaintenanceChartDataByApi() - this.getBarChartDataByApi() + // this.getBarChartDataByApi() this.getDoubleBarChartDataByApi() }, @@ -731,10 +750,11 @@ /* 缁樺埗鍗曟煴鍥� */ drawBarChart() { this.barChart = this.$echarts.init(document.getElementById('bar_chart')) + const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100] const option = { title: { show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true - text: 'OEE杞﹂棿', // 涓绘爣棰樻枃鏈� + text: '', // 涓绘爣棰樻枃鏈� x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊� y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊� textStyle: { @@ -748,6 +768,10 @@ trigger: 'axis', axisPointer: { type: 'shadow' + }, + 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)', @@ -765,7 +789,7 @@ nameLocation: 'middle', nameGap: 40, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺� type: 'category', - data: this.barChartData.map(item => item.name), + data: this.barChartData.map(item => item.productionId), axisLine: { lineStyle: { color: '#FFFFFF' @@ -776,7 +800,10 @@ interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆� rotate: this.barChartData.length >= 6 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴� inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶� - margin: 6 // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 + margin: 6, // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈 + formatter: value => { + return `${this.barChartData.find(item => item.productionId === value).name}` + } }, axisTick: { show: true, @@ -784,9 +811,8 @@ } }], yAxis: [{ - name: '鏁伴噺', - nameLocation: 'middle', - nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺� + name: '%', + max: 100, axisLabel: { formatter: '{value}', color: '#e2e9ff' @@ -814,7 +840,7 @@ itemStyle: { color: '#55D6A5' }, - showBackground: true, + zlevel: 1, label: { show: true, lineHeight: 10, @@ -828,9 +854,34 @@ fontSize: 18 } } - }] + }, + { + name: '鑳屾櫙', + type: 'bar', + barWidth: '15%', + barGap: '-100%', + data: defaultData, + itemStyle: { + color: '#11294d' + } + }] } + option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE杞﹂棿` this.barChart.setOption(option, true) + + 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 } + }) + }) }, /* 缁樺埗鍙屾煴鍥� */ @@ -1033,13 +1084,6 @@ flex-wrap: wrap; color: #fff; margin-bottom: 10px; - - .workshop-nav { - width: 120px; - height: 40px; - font-size: 12px; - cursor: pointer; - } } .content-container { @@ -1047,23 +1091,7 @@ display: flex; justify-content: space-between; - .left-col { - .first-title { - color: #00A8AC; - font-size: 20px; - text-align: center; - font-weight: bold; - } - } - .middle-col { - .first-title { - color: #00A8AC; - font-size: 20px; - text-align: center; - font-weight: bold; - } - .support-plan-container { display: flex; justify-content: space-around; -- Gitblit v1.9.3