From b00ebd6ccb2acb975437af523f00e1f3ea881305 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 15 五月 2024 17:10:51 +0800
Subject: [PATCH] 首页车间级和设备级看板仪表盘图表根据不同类型设置不同仪表盘颜色以及数值范围
---
src/views/dashboard/WorkshopSectionSignage.vue | 397 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 319 insertions(+), 78 deletions(-)
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index e5bf1e1..d552596 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -73,19 +73,21 @@
<div style="width: 38%" class="middle-col">
<dv-border-box-9 style="padding: 15px">
<div id="running_state_chart" style="width:100%;height: 400px;"></div>
- <div id="line_chart" style="width:100%;height: 400px;"></div>
+ <div id="first7DaysEfficiency_chart" style="width:100%;height: 400px;"></div>
</dv-border-box-9>
</div>
<div style="width: 30%" class="right-col">
<dv-border-box-9 style="padding: 15px">
<a-form layout="inline"
- @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
+ @keyup.enter.native="switchToEquipmentSignage">
<a-form-item label="璁惧缂栧彿">
<a-auto-complete
- v-model="equipmentId"
+ @select="handleSelectChange"
placeholder="鍥炶溅閿煡璇�"
:allowClear="true"
+ :filter-option="filterOption"
+ :dataSource="first7DaysEfficiencyData.mdcEquipmentList.map(item=>item.equipmentId)"
size="large"
/>
</a-form-item>
@@ -145,16 +147,21 @@
maintenanceOverdueNum: 0,
nextMonthMaintenancePlanNum: 0,
nextNextMonthMaintenancePlanNum: 0,
- lineChart: '',
- lineChartData: {},
+ first7DaysEfficiencyChart: '',
+ first7DaysEfficiencyData: {
+ dataList: [],
+ mdcEquipmentList: []
+ },
gaugeChart1: '',
gaugeChart2: '',
gaugeChart3: '',
gaugeChart4: '',
- gaugeChartData1: [],
- gaugeChartData2: [],
- gaugeChartData3: [],
- gaugeChartData4: [],
+ gaugeChartData: {
+ utilizationRate: 0,
+ startRate: 0,
+ openRate: 0,
+ overallEquipmentEfficiency: 0
+ },
barChart: '',
barChartData: [],
equipmentId: ''
@@ -162,28 +169,37 @@
},
mounted() {
window.addEventListener('resize', this.handleWindowResize)
- this.drawCharts()
this.getChartDataByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
+ if (this.first7DaysEfficiencyChartCarouselTime) clearInterval(this.first7DaysEfficiencyChartCarouselTime)
},
methods: {
+ /* 璋冪敤鎺ュ彛鑾峰彇鍥捐〃鏁版嵁姹囨�绘柟娉� */
getChartDataByApi() {
this.getTechConditionDataByApi()
this.getWarrantyMalfunctionDataByApi()
this.getRunningStateDataByApi()
this.getMonthMaintenanceNumByApi()
- this.getLineChartDataByApi()
+ this.getFirst7DaysEfficiencyDataByApi()
+ this.getGaugeChartDataByApi()
this.getBarChartDataByApi()
},
/* 璋冪敤鎺ュ彛鑾峰彇鎶�鏈姸鎬� */
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: '绂佺敤' },
@@ -196,9 +212,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: '鍋滄満' },
@@ -231,26 +254,84 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
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)
})
},
/* 璋冪敤鎺ュ彛鑾峰彇鍓�7澶╁埄鐢ㄧ巼 */
- getLineChartDataByApi() {
+ getFirst7DaysEfficiencyDataByApi() {
+ this.first7DaysEfficiencyChart = this.$echarts.init(document.getElementById('first7DaysEfficiency_chart'))
+ this.first7DaysEfficiencyChart.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
signageApi.getEquipmentDayUtilizationStatisticsApi(this.productionCode)
.then(res => {
- if (res.success) this.lineChartData = res.result
- this.drawLineChart()
+ if (res.success) this.first7DaysEfficiencyData = res.result
+ this.drawFirst7DaysEfficiencyDataChart()
})
},
+ /* 璋冪敤鎺ュ彛鑾峰彇璁惧鏁堢巼缁熻 */
+ getGaugeChartDataByApi() {
+ this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
+ this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
+ this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
+ this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
+ this.gaugeChart1.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart2.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart3.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ this.gaugeChart4.showLoading({
+ text: '鏁版嵁鍔犺浇涓� ...',
+ color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
+ textColor: '#fff',
+ maskColor: 'rgba(1, 25, 75, 0.2)' // 閬僵灞�
+ })
+ signageApi.getEquipmentEfficiencyStatisticsApi(this.productionCode)
+ .then(res => {
+ if (res.success) this.gaugeChartData = res.result
+ this.drawGaugeChart()
+ })
+ },
+
+ /* 璋冪敤鎺ュ彛鑾峰彇涓婃湀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.getEquipmentOEEMonthStatisticsApi(this.productionCode)
.then(res => {
- console.log('res=', res)
if (res.success) {
this.barChartData = res.result.map(item => {
return {
@@ -263,18 +344,8 @@
})
},
- /* 缁樺埗鍥捐〃姹囨�绘柟娉� */
- drawCharts() {
- this.drawRunningStateChart()
- this.drawTechConditionChart()
- this.drawWarrantyMalfunctionChart()
- this.drawGaugeChart()
- this.drawBarChart()
- },
-
/* 缁樺埗鎶�鏈姸鎬侀ゼ鍥� */
drawTechConditionChart() {
- this.techConditionChart = this.$echarts.init(document.getElementById('tech_condition_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -322,7 +393,7 @@
center: ['50%', '50%'],
color: [
'#0FC61A',
- '#0DAF15',
+ '#F56436',
'#8B8B8B'
],
label: {
@@ -348,11 +419,11 @@
]
}
this.techConditionChart.setOption(option, true)
+ this.techConditionChart.hideLoading()
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
drawWarrantyMalfunctionChart() {
- this.warrantyMalfunctionChart = this.$echarts.init(document.getElementById('warranty_malfunction_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -426,11 +497,11 @@
]
}
this.warrantyMalfunctionChart.setOption(option, true)
+ this.warrantyMalfunctionChart.hideLoading()
},
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
drawRunningStateChart(productionId) {
- this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
title: {
show: true, // 鏄惁鏄剧ず鏍囬锛岄粯璁や负true
@@ -506,6 +577,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
this.$router.push({
@@ -515,23 +587,35 @@
})
},
- /* 缁樺埗鎶樼嚎鍥� */
- drawLineChart() {
- this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
+ /* 缁樺埗鍓�7澶╁埄鐢ㄧ巼鏌卞浘 */
+ drawFirst7DaysEfficiencyDataChart() {
+ this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
+ if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
+ const equipmentIdObj = {
+ equipmentId: item.equipmentId,
+ equipmentName: item.equipmentName,
+ openRate: 0,
+ startRate: 0,
+ utilizationRate: 0
+ }
+ this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
+ }
+ })
+ const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
const newData = {
- xAxis: this.lineChartData.dateList,
+ xAxis: equipmentIdList,
yAxis: [
{
name: '鍒╃敤鐜�',
- value: this.lineChartData.dataList.map(item => item.utilizationRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.utilizationRate)
},
{
name: '寮�鍔ㄧ巼',
- value: this.lineChartData.dataList.map(item => item.startRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.startRate)
},
{
name: '寮�鏈虹巼',
- value: this.lineChartData.dataList.map(item => item.openRate)
+ value: this.first7DaysEfficiencyData.dataList.map(item => item.openRate)
}
],
yAxisName: '鍓�7澶╁埄鐢ㄧ巼(%)'
@@ -543,7 +627,7 @@
seriesData = newData.yAxis.map((item1, index1) => {
return {
name: item1.name,
- type: 'line',
+ type: 'bar',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
@@ -551,6 +635,9 @@
},
lineStyle: {
width: 2
+ },
+ markPoint: {
+ show: true
},
yAxisIndex: 1,
data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
@@ -592,7 +679,6 @@
}
},
xAxis: {
- triggerEvent: true,
data: newData.xAxis || [],
axisLabel: {
interval: 0,
@@ -643,6 +729,7 @@
type: 'value',
position: 'right',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
color: '#fff'
@@ -664,14 +751,46 @@
}
}
],
- series: seriesData
- // dataZoom: {
- // show: false,
- // startValue: 0, // 浠庡ご寮�濮嬨��
- // endValue: 5 // 涓�娆℃�у睍绀哄嚑涓�
+ series: seriesData,
+ dataZoom: {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 6 // 涓�娆℃�у睍绀哄嚑涓�
+ }
+ // toolbox: {
+ // show: true,
+ // feature: {
+ // mark: { show: true },
+ // magicType: { show: true, type: ['line', 'bar'] },
+ // restore: { show: true },
+ // saveAsImage: { show: true, name: '鍓�7澶╁埄鐢ㄧ巼缁熻鍥�', pixelRatio: 1 }
+ // }
// }
}
- this.lineChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.hideLoading()
+
+ this.first7DaysEfficiencyChart.on('click', params => {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: true,
+ productionId: params.name,
+ tierName: this.first7DaysEfficiencyData.dataList.find(item => item.equipmentId === params.name).equipmentName
+ }
+ })
+ })
+
+
+ // 璁惧鍒楄〃澶т簬7涓椂寮�鍚嚜鍔ㄨ疆鎾�
+ if (this.first7DaysEfficiencyData.mdcEquipmentList.length <= 7) return
+ this.first7DaysEfficiencyChartCarouselTime = setInterval(() => {
+ newData.xAxis.push(newData.xAxis.shift())
+ newData.yAxis.forEach(item => item.value.push(item.value.shift()))
+ this.$nextTick(() => {
+ this.first7DaysEfficiencyChart.setOption(option, true)
+ })
+ }, 30000)
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -686,11 +805,11 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
- fontWeight: 'bold'
+ color: '#1AD8DE'
}
},
tooltip: {
+ trigger: 'item',
formatter: params => {
return params.seriesName + '锛�' + params.value + '%'
}
@@ -740,8 +859,8 @@
lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
color: [ //琛ㄧ洏棰滆壊
[0.3, '#F56436'],//0-30%澶勭殑棰滆壊
- [0.7, '#FFFF40'],//30%-60%澶勭殑棰滆壊
- [1, '#0FC61A']//90%-100%澶勭殑棰滆壊
+ [0.6, '#FFFF40'],//30%-60%澶勭殑棰滆壊
+ [1, '#0FC61A']//60%-100%澶勭殑棰滆壊
],
width: 15//琛ㄧ洏瀹藉害
}
@@ -768,47 +887,139 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
- this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
- option.title.text = '鍒╃敤鐜�'
- option.series[0].name = '鍒╃敤鐜�'
- option.series[0].data = [52]
- this.gaugeChart1.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + `鍒╃敤鐜嘸
+ option.series[0].name = '鍒╃敤鐜�'
+ option.series[0].data = [this.gaugeChartData.utilizationRate]
+ this.gaugeChart1.setOption(option, true)
+ this.gaugeChart1.hideLoading()
+ })
+
+
+ this.gaugeChart1.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鍔ㄧ巼浠〃鐩樺浘琛� */
drawGaugeChart2(opt) {
- this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鍔ㄧ巼'
- option.series[0].name = '寮�鍔ㄧ巼'
- option.series[0].data = [21]
- this.gaugeChart2.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鍔ㄧ巼'
+ option.series[0].name = '寮�鍔ㄧ巼'
+ option.series[0].data = [this.gaugeChartData.startRate]
+ this.gaugeChart2.setOption(option, true)
+ this.gaugeChart2.hideLoading()
+ })
+
+ this.gaugeChart2.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗寮�鏈虹巼浠〃鐩樺浘琛� */
drawGaugeChart3(opt) {
- this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
const option = Object.assign({}, opt)
- option.title.text = '寮�鏈虹巼'
- option.series[0].name = '寮�鏈虹巼'
- option.series[0].data = [74]
- this.gaugeChart3.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('kdl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'days').format('M鏈圖鏃�') + '寮�鏈虹巼'
+ option.series[0].name = '寮�鏈虹巼'
+ option.series[0].data = [this.gaugeChartData.openRate]
+ this.gaugeChart3.setOption(option, true)
+ this.gaugeChart3.hideLoading()
+ })
+
+ this.gaugeChart3.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: {
+ isEquipment: false,
+ productionId: this.gaugeChartData.productionId,
+ tierName: this.gaugeChartData.productionName
+ }
+ })
+ }
+ })
},
/* 缁樺埗OEE浠〃鐩樺浘琛� */
drawGaugeChart4(opt) {
- this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
const option = Object.assign({}, opt)
- option.title.text = 'OEE'
- option.series[0].name = 'OEE'
- option.series[0].data = [88]
- this.gaugeChart4.setOption(option, true)
+
+ signageApi.getGaugeColorByTypeApi('lyl')
+ .then(res => {
+ if (res.success) {
+ const colorRange = res.result.map(item => item = [+item.maximumRange / 100, item.rateParameterColor])
+ option.series[0].axisLine.lineStyle.color = colorRange
+ }
+ })
+ .finally(() => {
+ option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
+ option.series[0].name = 'OEE'
+ option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
+ this.gaugeChart4.setOption(option, true)
+ this.gaugeChart4.hideLoading()
+ })
+
+ this.gaugeChart4.getZr().on('click', params => {
+ // 浠呮湁鐐瑰嚮琛ㄧ洏鍖哄煙鎵嶄細鏈変互涓嬪睘鎬э紝topTarget琛ㄧず瑙﹀彂浜嬩欢瀵硅薄锛宻hape琛ㄧず瑙﹀彂浜嬩欢瀵硅薄鐨勫浘鍍忓睘鎬э紝clockwise琛ㄧず琛ㄧ洏鏄惁浠ラ『鏃堕拡鎺掑垪锛岄粯璁や负true
+ if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
+ })
+ }
+ })
},
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
const xAisData = this.barChartData.map(item => item.name)
const option = {
height: 260,
@@ -821,8 +1032,7 @@
// 涓绘爣棰樻枃鏈牱寮�
fontSize: 18,
fontWeight: 'normal',
- color: '#1AD8DE',
- fontWeight: 'bold'
+ color: '#1AD8DE'
}
},
tooltip: {
@@ -868,7 +1078,7 @@
}],
yAxis: [
{
- // name: '鏁伴噺',
+ name: '%',
// nameLocation: 'middle',
// nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
position: 'left',
@@ -932,6 +1142,17 @@
}
option.title.text = `${moment().subtract(1, 'months').format('M')}鏈圤EE`
this.barChart.setOption(option, true)
+ this.barChart.hideLoading()
+
+ this.barChart.on('click', params => {
+ const productionId = params.name
+ this.$router.push({
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: true, productionId }
+ })
+ })
+
+ // 璁惧鍒楄〃澶т簬6涓椂寮�鍚嚜鍔ㄨ疆鎾�
if (this.barChartData.length <= 6) return
this.barChartCarouselTime = setInterval(() => {
this.barChartData.push(this.barChartData.shift())
@@ -942,15 +1163,31 @@
}, 3000)
},
+ handleSelectChange(value) {
+ this.equipmentId = value
+ },
+
+ filterOption(input, option) {
+ return (
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+ )
+ },
+
+ switchToEquipmentSignage() {
+ if (this.equipmentId) {
+ this.$emit('switchToNextSignage', {
+ signageName: 'Equipment',
+ productionCode: this.equipmentId
+ })
+ }
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
*/
handleWindowResize() {
- if (this.techConditionChart) this.techConditionChart.resize()
- if (this.warrantyMalfunctionChart) this.warrantyMalfunctionChart.resize()
- if (this.runningStateChart) this.runningStateChart.resize()
- if (this.lineChart) this.lineChart.resize()
+ if (this.first7DaysEfficiencyChart) this.first7DaysEfficiencyChart.resize()
if (this.gaugeChart1) this.gaugeChart1.resize()
if (this.gaugeChart2) this.gaugeChart2.resize()
if (this.gaugeChart3) this.gaugeChart3.resize()
@@ -1035,6 +1272,10 @@
color: #fff;
}
+ /deep/ .ant-select {
+ color: #fff;
+ }
+
/deep/ .ant-input {
border: 1px solid #689ACA;
color: #fff;
--
Gitblit v1.9.3