From 6259ba7f06da37499ad6a9b35da95d2b980ba7a7 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期六, 23 八月 2025 18:43:55 +0800
Subject: [PATCH] mdc首页按照新设计方案重新开发
---
src/views/dashboard/IndexSignage.vue | 263 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 182 insertions(+), 81 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 0761ee4..34bda83 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -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',
@@ -304,7 +305,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 +400,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 +487,10 @@
show: false
},
splitLine: {
- show: false
+ show: true
}
},
- yAxis: [{
+ yAxis: {
type: 'category',
inverse: true,
triggerEvent: true,
@@ -485,32 +515,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
}
}
@@ -619,14 +676,14 @@
this.techConditionChart.setOption(option, true)
this.techConditionChart.hideLoading()
- 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.modalVisible = true
- })
+ // 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.modalVisible = true
+ // })
},
/* 缁樺埗璁惧鎶ヤ慨鏁呴殰楗煎浘 */
@@ -707,14 +764,14 @@
this.warrantyMalfunctionChart.setOption(option, true)
this.warrantyMalfunctionChart.hideLoading()
- 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.modalVisible = true
- })
+ // 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.modalVisible = true
+ // })
},
/* 缁樺埗杞﹂棿淇濆吇婊氬姩琛� */
@@ -723,8 +780,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 +791,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 +840,7 @@
data: this.barChartData.map(item => item.productionId),
axisLine: {
lineStyle: {
- color: '#FFFFFF'
+ color: 'rgba(0,0,0,.45)'
}
},
axisLabel: {
@@ -808,7 +866,6 @@
interval: yAxisInterval,
axisLabel: {
formatter: '{value}',
- color: '#fff',
fontSize: 14
},
axisTick: {
@@ -817,7 +874,7 @@
axisLine: {
show: false,
lineStyle: {
- color: '#FFFFFF'
+ color: 'rgba(0,0,0,.45)'
}
},
splitLine: {
@@ -827,28 +884,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 +932,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 +1012,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 +1029,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 +1052,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 +1074,7 @@
fontSize: 14,
formatter: '{value}%', // 鍙充晶Y杞存枃瀛楁樉绀�
fontFamily: 'Bebas',
- color: '#6A93B9'
+ color: 'rgba(0,0,0,.45)'
},
splitArea: {
show: false
@@ -981,8 +1082,8 @@
}],
series: [{
type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: 100 },
+ barWidth: 20,
+ itemStyle: { barBorderRadius: 4 },
name: 'OEE',
data: this.doubleBarChartData.oeeList,
label: {
@@ -1000,8 +1101,8 @@
}
}, {
type: 'bar',
- barWidth: 15,
- itemStyle: { barBorderRadius: 100 },
+ barWidth: 20,
+ itemStyle: { barBorderRadius: 4 },
name: 'TEEP',
data: this.doubleBarChartData.utilizationList,
label: {
@@ -1028,13 +1129,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']
}
},
@@ -1044,9 +1145,9 @@
* @param record 鐐瑰嚮褰撳墠涓変繚淇℃伅
*/
openMaintenanceModal(record) {
- this.modalTitle = record.planTime
- this.modalDataApiUrl = record.apiUrl
- this.modalVisible = true
+ // this.modalTitle = record.planTime
+ // this.modalDataApiUrl = record.apiUrl
+ // this.modalVisible = true
},
re_drawPieChart() {
--
Gitblit v1.9.3