From 1d79d3950a3d8c489ca9ee2c88a50b01e2b5ab6e Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 09 五月 2024 14:54:32 +0800
Subject: [PATCH] 新增首页看板点击图表出现的弹窗组件
---
src/views/dashboard/BranchFactorySignage.vue | 150 ++++++++++++++++++++++++++++++++++++++------------
1 files changed, 114 insertions(+), 36 deletions(-)
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index 4b15280..2fc68ac 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -119,13 +119,14 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
this.getChartDataByApi()
+ this.drawProblemChart()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
getChartDataByApi() {
this.getRunningStateDataByApi()
this.getEfficiencyDataByApi()
@@ -139,15 +140,29 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
getRunningStateDataByApi() {
+ this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
+ this.runningStateChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.runningStateData = res.result.list
- this.drawRunningStateChart(res.result.producitonId)
+ this.drawRunningStateChart(res.result.productionId)
})
},
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鍒╃敤鐜� */
getEfficiencyDataByApi() {
+ this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
+ this.efficiencyChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentUtilizationStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.efficiencyData = res.result
@@ -157,9 +172,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
getTechConditionDataByApi() {
+ this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
+ this.techConditionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentTechnologyStatusListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.techConditionData = [
{ value: res.result[0].qualifiedCount, name: '鍚堟牸' },
{ value: res.result[0].disabledCount, name: '绂佺敤' },
@@ -172,9 +194,16 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧鎶ヤ慨鏁呴殰 */
getWarrantyMalfunctionDataByApi() {
+ this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
+ this.warrantyMalfunctionChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getReportRepairEquipmentListApi(this.productionCode)
.then(res => {
- if (res.success) {
+ if (res.success && res.result) {
this.warrantyMalfunctionData = [
{ value: res.result[0].failurTotalCount, name: '鎶ヤ慨' },
{ value: res.result[0].stopCount, name: '鍋滄満' },
@@ -216,6 +245,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE缁熻 */
getBarChartDataByApi() {
+ this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ this.barChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentOEEStatistics(this.productionCode)
.then(res => {
if (res.success) this.barChartData = res.result
@@ -225,6 +261,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧OEE鍜屽埄鐢ㄧ巼瀵规瘮 */
getDoubleBarChartDataByApi() {
+ this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
+ this.doubleBarChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentMonthStatisticsApi(this.productionCode)
.then(res => {
if (res.success) this.doubleBarChartData = res.result
@@ -232,21 +275,8 @@
})
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawRunningStateChart()
- this.drawEfficiencyChart()
- this.drawTechConditionChart()
- this.drawWarrantyMalfunctionChart()
- this.drawMaintenanceChart()
- this.drawBarChart()
- this.drawDoubleBarChart()
- this.drawProblemChart()
- },
-
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
- this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -323,6 +353,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
console.log('params', params)
@@ -335,7 +366,6 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
- this.efficiencyChart = this.$echarts.init(document.getElementById('efficiency_chart'))
const data = this.efficiencyData
const colorArray = [
{
@@ -366,7 +396,13 @@
bottom: '#F7B7A0'
}
]
- const defaultData = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
+ const defaultData = []
+ const dataMax = +data.sort((x, y) => +y.value - +x.value)[0].value
+ 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
@@ -398,7 +434,7 @@
}
},
xAxis: {
- name: '鍗曚綅',
+ name: '',
nameTextStyle: {
color: '#fff'
},
@@ -409,6 +445,9 @@
}
},
show: true,
+ min: 0,
+ max: 'dataMax',
+ interval: yAxisInterval,
type: 'value',
axisTick: {
show: false
@@ -522,8 +561,9 @@
}
]
}
- option.title.text = `${moment().format('M鏈圖鏃�')}鍒╃敤鐜嘸
+ option.title.text = `${moment().subtract(1, 'days').format('M鏈圖鏃�')}鍒╃敤鐜嘸
this.efficiencyChart.setOption(option, true)
+ this.efficiencyChart.hideLoading()
this.efficiencyChart.on('click', params => {
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
@@ -552,7 +592,6 @@
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
drawTechConditionChart() {
- this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
const option = {
height: 300,
title: {
@@ -601,7 +640,7 @@
center: ['50%', '60%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
@@ -627,11 +666,11 @@
]
}
this.techConditionChart.setOption(option, true)
+ this.techConditionChart.hideLoading()
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
drawWarrantyMalfunctionChart() {
- this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
const option = {
height: 300,
title: {
@@ -706,6 +745,7 @@
]
}
this.warrantyMalfunctionChart.setOption(option, true)
+ this.warrantyMalfunctionChart.hideLoading()
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -719,18 +759,24 @@
rowNum: 1,
data: this.twoMaintenanceChartData,
index: true,
- columnWidth: [100],
+ columnWidth: [100, 300, 300, 300],
align: ['center', 'center', 'center', 'center']
}
},
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
+ const defaultData = []
+ const dataMax = +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value
+ 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))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
- text: 'OEE杞﹂棿', // 涓绘爣棰樻枃鏈�
+ text: '', // 涓绘爣棰樻枃鏈�
x: 'center', // 鏍囬姘村钩瀹夋斁浣嶇疆锛屽彲閫夊�间负'left'銆�'center'銆�'right'鎴栧叿浣撶殑姘村钩鍧愭爣鍊�
y: 'top', // 鏍囬鍨傜洿瀹夋斁浣嶇疆锛屽彲閫夊�间负'top'銆�'bottom'銆�'center'鎴栧叿浣撶殑鍨傜洿鍧愭爣鍊�
textStyle: {
@@ -744,6 +790,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)',
@@ -761,7 +811,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'
@@ -772,7 +822,9 @@
interval: 0, // 鍧愭爣杞村埢搴︽爣绛剧殑鏄剧ず闂撮殧锛屽湪绫荤洰杞翠腑鏈夋晥锛涢粯璁や細閲囩敤鏍囩涓嶉噸鍙犵殑绛栫暐闂撮殧鏄剧ず鏍囩锛涘彲浠ヨ缃垚0寮哄埗鏄剧ず鎵�鏈夋爣绛撅紱濡傛灉璁剧疆涓�1锛岃〃绀恒�庨殧涓�涓爣绛炬樉绀轰竴涓爣绛俱�忥紝濡傛灉鍊间负2锛岃〃绀洪殧涓や釜鏍囩鏄剧ず涓�涓爣绛撅紝浠ユ绫绘帹銆�
rotate: this.barChartData.length >= 5 ? -30 : 0, // 鍒诲害鏍囩鏃嬭浆鐨勮搴︼紝鍦ㄧ被鐩酱鐨勭被鐩爣绛炬樉绀轰笉涓嬬殑鏃跺�欏彲浠ラ�氳繃鏃嬭浆闃叉鏍囩涔嬮棿閲嶅彔锛涙棆杞殑瑙掑害浠�-90搴﹀埌90搴�
inside: false, // 鍒诲害鏍囩鏄惁鏈濆唴锛岄粯璁ゆ湞澶�
- margin: 6 // 鍒诲害鏍囩涓庤酱绾夸箣闂寸殑璺濈
+ formatter: value => {
+ return `${this.barChartData.find(item => item.productionId === value).name}`
+ }
},
axisTick: {
show: true,
@@ -780,12 +832,13 @@
}
}],
yAxis: [{
- name: '鏁伴噺',
- nameLocation: 'middle',
- nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
+ name: '%',
+ min: 0,
+ max: yAxisMax,
+ interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
- color: '#e2e9ff'
+ color: '#fff'
},
axisTick: {
show: false
@@ -810,7 +863,7 @@
itemStyle: {
color: '#55D6A5'
},
- showBackground: true,
+ zlevel: 1,
label: {
show: true,
lineHeight: 10,
@@ -824,14 +877,38 @@
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.hideLoading()
+
+ this.barChart.on('click', params => {
+ console.log('params', params)
+ let productionId
+ // 鐐瑰嚮鐨勬槸鏌变綋鐨勫�硷紝鍚﹀垯鐐瑰嚮鐨勪负鏌变綋鑳屾櫙闃村奖
+ if (params.seriesIndex === 0) productionId = params.data.productionId
+ else productionId = params.name
+
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: false, productionId }
+ })
+ })
},
/* 缁樺埗鍙屾煴鍥� */
drawDoubleBarChart() {
- this.doubleBarChart = this.$echarts.init(document.getElementById('double_bar_chart'))
const option = {
color: ['#409EFF', '#0FC61A'],
tooltip: {
@@ -974,6 +1051,7 @@
]
}
this.doubleBarChart.setOption(option, true)
+ this.doubleBarChart.hideLoading()
},
/* 缁樺埗闂婊氬姩琛� */
--
Gitblit v1.9.3