From f02cf09eb0c6933dd5ccc4dac6c6c09c3b5f3d3c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 25 八月 2025 15:17:03 +0800
Subject: [PATCH] 1、根据最新设计方案调整设备管理模块点击弹窗样式 2、mdc公司级首页设备管理模块与点击功能联调
---
src/views/dashboard/IndexSignage.vue | 270 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 183 insertions(+), 87 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 0761ee4..a93745a 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -24,7 +24,7 @@
</div>
</div>
</div>
- <div style="padding: 0 55px;margin-top: 10px">
+ <div style="padding: 0 55px;margin-top : 10px">
<dv-scroll-board :config="maintenanceConfig" style="width:100%;height:220px"/>
</div>
</dv-border-box-9>
@@ -51,6 +51,7 @@
import signageApi from '@/api/signage'
import moment from 'moment'
import SignageModal from './modules/SignageModal'
+ import * as echarts from 'echarts'
export default {
name: 'IndexSignage',
@@ -90,25 +91,25 @@
planTime: '鏈湀涓変繚璁″垝',
planValueLabel: 'thisMonthMaintenancePlanNum',
backgroundColor: '#719D8E',
- apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceList'
+ code: 'bysbzs'
},
{
planTime: '鏈湀瀹屾垚',
planValueLabel: 'thisMonthMaintenanceRealNum',
backgroundColor: '#409EFF',
- apiUrl: '/eam/calibrationOrder/showThisMonthMaintenanceFinishList'
+ code: 'bwc'
},
{
planTime: '涓嬫湀涓変繚璁″垝',
planValueLabel: 'nextMonthMaintenancePlanNum',
backgroundColor: '#A8985D',
- apiUrl: '/eam/calibrationOrder/showNextMonthMaintenanceList'
+ code: 'xysb'
},
{
planTime: '涓嬩笅鏈堜笁淇濊鍒�',
planValueLabel: 'nextNextMonthMaintenancePlanNum',
backgroundColor: '#58D9F9',
- apiUrl: '/eam/calibrationOrder/showNextNextMonthMaintenanceList'
+ code: 'xxysb'
}
],
thisMonthMaintenancePlanNum: 0,
@@ -145,8 +146,6 @@
getChartDataByApi() {
this.getRunningStateDataByApi()
this.getEfficiencyDataByApi()
- // this.getTechConditionDataByApi()
- // this.getWarrantyMalfunctionDataByApi()
this.getTechConditionAndWarrantyMalfunctionDataByApi()
this.getThirdMaintenanceConditionByApi()
this.getTwoMaintenanceChartDataByApi()
@@ -162,7 +161,7 @@
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
@@ -182,7 +181,7 @@
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
signageApi.getEquipmentUtilizationStatisticsApi()
.then(res => {
@@ -201,13 +200,13 @@
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
this.warrantyMalfunctionChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi()
.then(res => {
@@ -230,9 +229,9 @@
}
]
this.warrantyMalfunctionData = [
- { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '鎶ヤ慨', isStop: '' },
- { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '鍋滄満', isStop: '2' },
- { value: res.result.bxqk.find(item => item.code === 'run').value, name: '杩愯', isStop: '1' }
+ { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '鎶ヤ慨', code: 'bx' },
+ { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '鍋滄満', code: 'stop' },
+ { value: res.result.bxqk.find(item => item.code === 'run').value, name: '杩愯', code: 'run' }
]
this.techConditionChartRequireFinished = true
this.warrantyMalfunctionChartRequireFinished = true
@@ -271,7 +270,7 @@
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
signageApi.getEquipmentOEEStatistics()
.then(res => {
@@ -289,7 +288,7 @@
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'rgba(0,0,0,.05)' // 閬僵灞�
+ maskColor: 'transparent' // 閬僵灞�
})
signageApi.getEquipmentMonthStatisticsApi()
.then(res => {
@@ -304,7 +303,7 @@
getWorkshopProblemChartDataByApi() {
signageApi.getWorkshopProblemListApi()
.then(res => {
- if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.content, item.createTime])
+ if (res.success && res.result.length > 0) this.workshopProblemChartData = res.result.map(item => [item.createTime, item.content])
this.drawWorkshopProblemChart()
})
},
@@ -399,6 +398,35 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
+ const colorArray = [
+ {
+ top: '#79CEAA',
+ bottom: '#79CEAA'
+ },
+ {
+ top: '#F589A2',
+ bottom: '#F589A2'
+ },
+ {
+ top: '#6FBF9D',
+ bottom: '#6FBF9D'
+ },
+ {
+ top: '#66DFE2',
+ bottom: '#66DFE2'
+ }, {
+ top: '#A7F0C1',
+ bottom: '#A7F0C1'
+ },
+ {
+ top: '#FAE893',
+ bottom: '#FAE893'
+ },
+ {
+ top: '#F7B7A0',
+ bottom: '#F7B7A0'
+ }
+ ]
const data = this.efficiencyData
const defaultData = []
const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
@@ -457,10 +485,10 @@
show: false
},
splitLine: {
- show: false
+ show: true
}
},
- yAxis: [{
+ yAxis: {
type: 'category',
inverse: true,
triggerEvent: true,
@@ -485,32 +513,59 @@
show: false
},
data: data.map(item => item.productionCode)
- }, {
- type: 'category',
- inverse: true,
- axisTick: 'none',
- axisLine: 'none',
- show: true,
- axisLabel: {
- textStyle: {
- color: '#ffffff',
- fontSize: '14'
- },
- formatter: function(value) {
- return `${value}%`
- }
- },
- data: data
- }],
+ },
series: {
name: 'TEEP',
type: 'bar',
zlevel: 1,
itemStyle: {
- barBorderRadius: 100,
- color: '#5070DD'
+ color: function(params) {
+ let num = colorArray.length
+ return {
+ type: 'linear',
+ colorStops: [{
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }, {
+ offset: 1,
+ color: colorArray[params.dataIndex % num].top
+ }, {
+ offset: 0,
+ color: colorArray[params.dataIndex % num].bottom
+ }]
+ }
+ }
},
- barWidth: 12,
+ label: {
+ show: true,
+ position: 'inside',
+ color: '#fff'
+ },
+ barWidth: 18,
data: data
}
}
@@ -621,10 +676,8 @@
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.modalDataApiParams = { technologyStatus: this.techConditionData.find(item => item.name === params.name).technologyStatus }
+ this.modalDataApiUrl = '/eam/equipment/list'
this.modalVisible = true
})
},
@@ -709,10 +762,8 @@
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.modalDataApiParams = { code: this.warrantyMalfunctionData.find(item => item.name === params.name).code }
+ this.modalDataApiUrl = '/eam/home/repairList'
this.modalVisible = true
})
},
@@ -723,8 +774,8 @@
indexHeader: '搴忓彿',
header: ['杞﹂棿', '鏃ユ湡', '鍐呭'],
headerBGC: '#266C86',
- oddRowBGC: '#0A2732',
- evenRowBGC: '#003B51',
+ oddRowBGC: '#003B51',
+ evenRowBGC: '#0A2732',
data: this.twoMaintenanceChartData,
index: true,
columnWidth: [100, 300, 300, 300],
@@ -734,6 +785,7 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
+ const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
const defaultData = []
const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
let yAxisMax
@@ -782,7 +834,7 @@
data: this.barChartData.map(item => item.productionId),
axisLine: {
lineStyle: {
- color: '#FFFFFF'
+ color: 'rgba(0,0,0,.45)'
}
},
axisLabel: {
@@ -808,7 +860,6 @@
interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
- color: '#fff',
fontSize: 14
},
axisTick: {
@@ -817,7 +868,7 @@
axisLine: {
show: false,
lineStyle: {
- color: '#FFFFFF'
+ color: 'rgba(0,0,0,.45)'
}
},
splitLine: {
@@ -827,28 +878,47 @@
}
}
}],
- series: [{
- type: 'bar',
- data: this.barChartData,
- barWidth: this.barChartData.length > 5 ? '40%' : 30,
- itemStyle: {
- color: '#2E8BDA'
- },
- zlevel: 1,
- label: {
- show: false,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
+ series: [
+ {
+ type: 'bar',
+ data: this.barChartData,
+ barWidth: this.barChartData.length > 5 ? '40%' : 30,
+ itemStyle: {
+ color: function(params) {
+ let num = colorArray.length
+ return colorArray[params.dataIndex % num]
+ }
+ // color: new echarts.graphic.LinearGradient(
+ // 0, 0, 0, 1, [{
+ // offset: 0,
+ // color: '#83bff6'
+ // },
+ // {
+ // offset: 0.5,
+ // color: '#188df0'
+ // },
+ // {
+ // offset: 1,
+ // color: '#188df0'
+ // }
+ // ]
+ // )
},
- position: 'top',
- textStyle: {
- color: '#fff',
- fontSize: 16
+ zlevel: 1,
+ label: {
+ show: false,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'top',
+ textStyle: {
+ color: '#fff',
+ fontSize: 16
+ }
}
- }
- },
+ },
{
name: '鑳屾櫙',
type: 'bar',
@@ -856,9 +926,27 @@
barGap: '-100%',
data: defaultData,
itemStyle: {
- color: '#11294d'
+ color: 'rgba(0,0,0,.05)'
}
}]
+ // aria: {
+ // enabled: true,
+ // decal: {
+ // show: true,
+ // decals: [
+ // {
+ // color: 'rgba(0,0,0,.2)',
+ // dashArrayX: [20, 0],
+ // dashArrayY: [1, 2],
+ // symbol: 'rect',
+ // rotation: Math.PI / 4
+ // },
+ // {
+ // symbol: 'none'
+ // }
+ // ]
+ // }
+ // }
}
option.title.text = moment().subtract(1, 'months').format('M鏈�') + `OEE`
this.barChart.setOption(option, true)
@@ -918,13 +1006,14 @@
type: 'category',
data: this.doubleBarChartData.dateList,
axisLine: {
+ show: true,
lineStyle: {
- color: 'rgba(255,255,255,0.45)'
+ color: 'rgba(0,0,0,.45)'
}
},
axisLabel: {
fontSize: 14,
- color: '#fff'
+ color: 'rgba(0,0,0,.45)'
},
axisTick: {
show: true
@@ -934,13 +1023,16 @@
{
name: '%',
nameTextStyle: {
- color: '#fff'
+ color: 'rgba(0,0,0,.45)'
},
type: 'value',
min: 0,
minInterval: 1,
axisLine: {
- show: true
+ show: true,
+ lineStyle: {
+ color: 'rgba(0,0,0,.45)'
+ }
},
axisTick: {
show: true
@@ -954,14 +1046,17 @@
},
axisLabel: {
fontSize: 14,
- color: '#fff',
+ color: 'rgba(0,0,0,.45)',
fontFamily: 'Bebas'
}
},
{
type: 'value',
axisLine: {
- show: true
+ show: true,
+ lineStyle: {
+ color: 'rgba(0,0,0,.45)'
+ }
},
axisTick: {
show: false
@@ -973,7 +1068,7 @@
fontSize: 14,
formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀�
fontFamily: 'Bebas',
- color: '#6A93B9'
+ color: 'rgba(0,0,0,.45)'
},
splitArea: {
show: false
@@ -981,8 +1076,8 @@
}],
series: [{
type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: 100 },
+ barWidth: 20,
+ itemStyle: { barBorderRadius: 4 },
name: 'OEE',
data: this.doubleBarChartData.oeeList,
label: {
@@ -1000,8 +1095,8 @@
}
}, {
type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: 100 },
+ barWidth: 20,
+ itemStyle: { barBorderRadius: 4 },
name: 'TEEP',
data: this.doubleBarChartData.utilizationList,
label: {
@@ -1028,13 +1123,13 @@
drawWorkshopProblemChart() {
this.problemConfig = {
indexHeader: '搴忓彿',
- header: ['闂鍐呭', '鏃堕棿'],
+ header: ['鏃堕棿', '闂鍐呭'],
headerBGC: '#83B883',
oddRowBGC: '#556955',
evenRowBGC: '#556955',
data: this.workshopProblemChartData,
index: true,
- columnWidth: [100, 300, 150],
+ columnWidth: [100, 200, 300],
align: ['center']
}
},
@@ -1045,7 +1140,8 @@
*/
openMaintenanceModal(record) {
this.modalTitle = record.planTime
- this.modalDataApiUrl = record.apiUrl
+ this.modalDataApiParams = { code: record.code }
+ this.modalDataApiUrl = '/eam/home/maintenanceList'
this.modalVisible = true
},
--
Gitblit v1.9.3