From b417dc5912e77367694095411121fddf665c1d7e Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 18 四月 2024 17:51:33 +0800
Subject: [PATCH] 修复因样式导致的登出账号后登录页面样式混乱问题
---
src/views/dashboard/WorkshopSectionSignage.vue | 228 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 170 insertions(+), 58 deletions(-)
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index 3a76eb1..83d0428 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,8 +147,11 @@
maintenanceOverdueNum: 0,
nextMonthMaintenancePlanNum: 0,
nextNextMonthMaintenancePlanNum: 0,
- lineChart: '',
- lineChartData: {},
+ first7DaysEfficiencyChart: '',
+ first7DaysEfficiencyData: {
+ dataList: [],
+ mdcEquipmentList: []
+ },
gaugeChart1: '',
gaugeChart2: '',
gaugeChart3: '',
@@ -164,30 +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.lineChartCarouselTime) clearInterval(this.lineChartCarouselTime)
+ 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: '绂佺敤' },
@@ -200,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: '鍋滄満' },
@@ -235,6 +254,13 @@
/* 璋冪敤鎺ュ彛鑾峰彇璁惧杩愯鐘舵�� */
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
@@ -243,26 +269,67 @@
},
/* 璋冪敤鎺ュ彛鑾峰彇鍓�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 => {
- console.log('res=', res)
if (res.success) this.gaugeChartData = res.result
- this.drawGaugeChart(res.result.productionId)
+ 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 => {
if (res.success) {
@@ -277,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
@@ -362,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
@@ -440,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
@@ -520,6 +577,7 @@
]
}
this.runningStateChart.setOption(option, true)
+ this.runningStateChart.hideLoading()
this.runningStateChart.on('click', params => {
this.$router.push({
@@ -529,35 +587,35 @@
})
},
- /* 缁樺埗鎶樼嚎鍥� */
- drawLineChart() {
- this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
- this.lineChartData.equipmentIdList.forEach(item => {
- if (!this.lineChartData.dataList.map(item => item.equipmentId).includes(item)) {
+ /* 缁樺埗鍓�7澶╁埄鐢ㄧ巼鏌卞浘 */
+ drawFirst7DaysEfficiencyDataChart() {
+ this.first7DaysEfficiencyData.mdcEquipmentList.forEach(item => {
+ if (!this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId).includes(item)) {
const equipmentIdObj = {
- equipmentId: item,
+ equipmentId: item.equipmentId,
+ equipmentName: item.equipmentName,
openRate: 0,
startRate: 0,
utilizationRate: 0
}
- this.lineChartData.dataList.push(equipmentIdObj)
+ this.first7DaysEfficiencyData.dataList.push(equipmentIdObj)
}
})
- const equipmentIdList = this.lineChartData.dataList.map(item => item.equipmentId)
+ const equipmentIdList = this.first7DaysEfficiencyData.dataList.map(item => item.equipmentId)
const newData = {
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澶╁埄鐢ㄧ巼(%)'
@@ -569,7 +627,7 @@
seriesData = newData.yAxis.map((item1, index1) => {
return {
name: item1.name,
- type: 'line',
+ type: 'bar',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
@@ -577,6 +635,9 @@
},
lineStyle: {
width: 2
+ },
+ markPoint: {
+ show: true
},
yAxisIndex: 1,
data: item1.value // 鎶樼嚎鍥剧殑鏁版嵁
@@ -618,7 +679,6 @@
}
},
xAxis: {
- triggerEvent: true,
data: newData.xAxis || [],
axisLabel: {
interval: 0,
@@ -669,6 +729,7 @@
type: 'value',
position: 'right',
splitNumber: 5,
+ max: 100,
axisLabel: {
show: true,
color: '#fff'
@@ -696,17 +757,40 @@
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()
- if (this.lineChartData.equipmentIdList.length <= 7) return
- this.lineChartCarouselTime = setInterval(() => {
+ 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.lineChart.setOption(option, true)
+ this.first7DaysEfficiencyChart.setOption(option, true)
})
- }, 3000)
+ }, 30000)
},
/* 缁樺埗浠〃鐩樺浘琛� */
@@ -804,12 +888,12 @@
/* 缁樺埗鍒╃敤鐜囦华琛ㄧ洏鍥捐〃 */
drawGaugeChart1(opt) {
- this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
const option = Object.assign({}, opt)
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
@@ -834,6 +918,7 @@
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
@@ -858,6 +943,7 @@
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
@@ -882,17 +968,14 @@
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-StatisticsChart',
- params: {
- isEquipment: false,
- productionId: this.gaugeChartData.productionId,
- tierName: this.gaugeChartData.productionName
- }
+ name: 'mdc-base-OEEAnalysis',
+ params: { isEquipment: false, productionId: this.gaugeChartData.productionId }
})
}
})
@@ -900,7 +983,6 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- this.barChart = this.$echarts.init(document.getElementById('bar_chart'))
const xAisData = this.barChartData.map(item => item.name)
const option = {
height: 260,
@@ -960,7 +1042,7 @@
}],
yAxis: [
{
- // name: '鏁伴噺',
+ name: '%',
// nameLocation: 'middle',
// nameGap: 30, // x杞磏ame涓庢í鍧愭爣杞寸嚎鐨勯棿璺�
position: 'left',
@@ -1024,7 +1106,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())
@@ -1035,15 +1127,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()
@@ -1128,6 +1236,10 @@
color: #fff;
}
+ /deep/ .ant-select {
+ color: #fff;
+ }
+
/deep/ .ant-input {
border: 1px solid #689ACA;
color: #fff;
--
Gitblit v1.9.3