From 26358d4a0cfa9706bc265249e5f7136f134d6f01 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 05 九月 2025 10:05:53 +0800
Subject: [PATCH] mdc首页车间级看板调整样式及功能
---
src/views/dashboard/IndexSignage.vue | 112 ++++++++++++++++++++++++-------------------------------
1 files changed, 49 insertions(+), 63 deletions(-)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index 949d5f3..0b3598c 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -160,8 +160,7 @@
this.runningStateChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
@@ -180,8 +179,7 @@
this.efficiencyChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentUtilizationStatisticsApi()
.then(res => {
@@ -199,14 +197,12 @@
this.techConditionChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
this.warrantyMalfunctionChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentTechnologyStatusAndReportRepairEquipmentListApi()
.then(res => {
@@ -281,8 +277,7 @@
this.barChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentOEEStatistics()
.then(res => {
@@ -299,8 +294,7 @@
this.doubleBarChart.showLoading({
text: '鏁版嵁鍔犺浇涓� ...',
color: '#0696e1', // 鍔犺浇鍔ㄧ敾棰滆壊
- textColor: 'rgba(0, 0, 0, .45)',
- maskColor: 'transparent' // 閬僵灞�
+ textColor: 'rgba(0, 0, 0, .45)'
})
signageApi.getEquipmentMonthStatisticsApi()
.then(res => {
@@ -413,6 +407,7 @@
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
drawEfficiencyChart() {
+ const data = this.efficiencyData
const colorArray = [
{
top: '#EA967B',
@@ -431,14 +426,11 @@
bottom: '#8DCCEF'
}
]
- const data = this.efficiencyData
- const defaultData = []
const dataMax = data.length > 0 ? +data.sort((x, y) => +y.value - +x.value)[0].value : 0
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
@@ -482,7 +474,7 @@
},
show: true,
min: 0,
- max: 'dataMax',
+ max: dataMax,
interval: yAxisInterval,
type: 'value',
axisTick: {
@@ -795,14 +787,6 @@
/* 缁樺埗鍗曟煴鍥� */
drawBarChart() {
- const defaultData = []
- const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
- 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))
- console.log('bar', this.barChartData)
let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE']
let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF']
const option = {
@@ -1061,47 +1045,49 @@
show: false
}
}],
- series: [{
- type: 'bar',
- barWidth: 20,
- barGap: '0%',
- itemStyle: { barBorderRadius: 4 },
- name: 'OEE',
- data: this.doubleBarChartData.oeeList,
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
- },
- position: 'top',
- textStyle: {
- color: 'rgba(0,0,0,.45)',
- fontSize: 10
+ series: [
+ {
+ type: 'bar',
+ barWidth: 20,
+ barGap: '0%',
+ itemStyle: { barBorderRadius: 4 },
+ name: 'OEE',
+ data: this.doubleBarChartData.oeeList,
+ label: {
+ show: true,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'top',
+ textStyle: {
+ color: 'rgba(0,0,0,.45)',
+ fontSize: 10
+ }
+ }
+ },
+ {
+ type: 'bar',
+ barWidth: 20,
+ barGap: '0%',
+ itemStyle: { barBorderRadius: 4 },
+ name: 'TEEP',
+ data: this.doubleBarChartData.utilizationList,
+ label: {
+ show: true,
+ lineHeight: 10,
+ formatter: params => {
+ if (+params.value === 0) return ''
+ else return params.value
+ },
+ position: 'inside',
+ textStyle: {
+ color: 'rgba(0,0,0,.45)',
+ fontSize: 10
+ }
}
}
- }, {
- type: 'bar',
- barWidth: 20,
- barGap: '0%',
- itemStyle: { barBorderRadius: 4 },
- name: 'TEEP',
- data: this.doubleBarChartData.utilizationList,
- label: {
- show: true,
- lineHeight: 10,
- formatter: params => {
- if (+params.value === 0) return ''
- else return params.value
- },
- position: 'inside',
- textStyle: {
- color: 'rgba(0,0,0,.45)',
- fontSize: 10
- }
- }
- }
]
}
this.doubleBarChart.setOption(option, true)
--
Gitblit v1.9.3