From f7cc97f27910c7d570f07df5d0dbd29d3f06049c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期六, 12 十月 2024 15:14:27 +0800
Subject: [PATCH] 1、调整导航栏为侧边模式时的项目标题 2、调整页面顶部栏颜色 3、解决设备报警页面由于缩放引起的组件遮挡文字问题 4、总控车间看板右侧图表调整为自动轮播 5、分控车间看板每日生产计划仅展示3项，完整表格在右上角查看更多中查看
---
src/views/mdc/base/MasterControlWorkshopSignage.vue | 392 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 215 insertions(+), 177 deletions(-)
diff --git a/src/views/mdc/base/MasterControlWorkshopSignage.vue b/src/views/mdc/base/MasterControlWorkshopSignage.vue
index 8ee1d78..69ef55e 100644
--- a/src/views/mdc/base/MasterControlWorkshopSignage.vue
+++ b/src/views/mdc/base/MasterControlWorkshopSignage.vue
@@ -136,6 +136,8 @@
rightColChart2: '',
rightColChart3: '',
rightColChart2And3Data: '',
+ rightColChart2CarouselTime: null,
+ rightColChart3CarouselTime: null,
rightColChart4: '',
rightColChart4Data: '',
rightColChart4CarouselTime: null
@@ -149,6 +151,8 @@
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
+ if (this.rightColChart2CarouselTime) clearInterval(this.rightColChart2CarouselTime)
+ if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
},
methods: {
@@ -1250,6 +1254,95 @@
]
const xAxisData = []
const seriesData = []
+ const colorList = [
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+
+ { offset: 0, color: '#4A7DBD' },
+ { offset: 1, color: '#31557B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#BD4D4A' },
+ { offset: 1, color: '#7B3031' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#94AF52' },
+ { offset: 1, color: '#637A39' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#7B61A4' },
+ { offset: 1, color: '#52416B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#4AAAC6' },
+ { offset: 1, color: '#29697B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#F79642' },
+ { offset: 1, color: '#9C5D29' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+
+ { offset: 0, color: '#4A7DBD' },
+ { offset: 1, color: '#31557B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#BD4D4A' },
+ { offset: 1, color: '#7B3031' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#94AF52' },
+ { offset: 1, color: '#637A39' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#7B61A4' },
+ { offset: 1, color: '#52416B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#4AAAC6' },
+ { offset: 1, color: '#29697B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#F79642' },
+ { offset: 1, color: '#9C5D29' }
+ ]
+ )
+ ]
+
this.rightColChart2And3Data.forEach(item => {
xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
seriesData.push({ value: item.openRate })
@@ -1289,6 +1382,7 @@
color: '#fff',
// rotate: 45,
margin: 15,
+ interval: 0,
fontSize: '55%',
formatter(value) {
const data = xAxisData
@@ -1347,94 +1441,6 @@
itemStyle: {
barBorderRadius: '',
color: function(params) {
- const colorList = [
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
-
- { offset: 0, color: '#4A7DBD' },
- { offset: 1, color: '#31557B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#BD4D4A' },
- { offset: 1, color: '#7B3031' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#94AF52' },
- { offset: 1, color: '#637A39' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#7B61A4' },
- { offset: 1, color: '#52416B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#4AAAC6' },
- { offset: 1, color: '#29697B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#F79642' },
- { offset: 1, color: '#9C5D29' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
-
- { offset: 0, color: '#4A7DBD' },
- { offset: 1, color: '#31557B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#BD4D4A' },
- { offset: 1, color: '#7B3031' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#94AF52' },
- { offset: 1, color: '#637A39' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#7B61A4' },
- { offset: 1, color: '#52416B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#4AAAC6' },
- { offset: 1, color: '#29697B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#F79642' },
- { offset: 1, color: '#9C5D29' }
- ]
- )
- ]
return colorList[params.dataIndex]
// build a color map as your need.
@@ -1447,11 +1453,27 @@
}
}
}
+ ],
+ dataZoom: [
+ {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 9 // 涓�娆℃�у睍绀哄嚑涓�
+ }
]
}
option.xAxis.data = xAxisData
option.series[0].data = seriesData
this.rightColChart2.setOption(option, true)
+
+ this.rightColChart2CarouselTime = setInterval(() => {
+ xAxisData.push(xAxisData.shift())
+ seriesData.push(seriesData.shift())
+ colorList.push(colorList.shift())
+ this.$nextTick(() => {
+ this.rightColChart2.setOption(option, true)
+ })
+ }, 3000)
},
/* 缁樺埗鍙充晶绗笁涓浘琛� */
@@ -1530,6 +1552,94 @@
]
const xAxisData = []
const seriesData = []
+ const colorList = [
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+
+ { offset: 0, color: '#4A7DBD' },
+ { offset: 1, color: '#31557B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#BD4D4A' },
+ { offset: 1, color: '#7B3031' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#94AF52' },
+ { offset: 1, color: '#637A39' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#7B61A4' },
+ { offset: 1, color: '#52416B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#4AAAC6' },
+ { offset: 1, color: '#29697B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#F79642' },
+ { offset: 1, color: '#9C5D29' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+
+ { offset: 0, color: '#4A7DBD' },
+ { offset: 1, color: '#31557B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#BD4D4A' },
+ { offset: 1, color: '#7B3031' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#94AF52' },
+ { offset: 1, color: '#637A39' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#7B61A4' },
+ { offset: 1, color: '#52416B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#4AAAC6' },
+ { offset: 1, color: '#29697B' }
+ ]
+ ),
+ new echarts.graphic.LinearGradient(
+ 0, 0, 1, 0,
+ [
+ { offset: 0, color: '#F79642' },
+ { offset: 1, color: '#9C5D29' }
+ ]
+ )
+ ]
this.rightColChart2And3Data.forEach(item => {
xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
seriesData.push({ value: item.utilizationRate })
@@ -1568,6 +1678,7 @@
axisLabel: {
color: '#fff',
// rotate: 45,
+ interval: 0,
margin: 15,
fontSize: '55%',
formatter(value) {
@@ -1603,7 +1714,6 @@
show: false
}
},
-
series: [
{
name: '鍒╃敤鐜�',
@@ -1628,94 +1738,6 @@
itemStyle: {
barBorderRadius: '',
color: function(params) {
- const colorList = [
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
-
- { offset: 0, color: '#4A7DBD' },
- { offset: 1, color: '#31557B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#BD4D4A' },
- { offset: 1, color: '#7B3031' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#94AF52' },
- { offset: 1, color: '#637A39' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#7B61A4' },
- { offset: 1, color: '#52416B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#4AAAC6' },
- { offset: 1, color: '#29697B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#F79642' },
- { offset: 1, color: '#9C5D29' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
-
- { offset: 0, color: '#4A7DBD' },
- { offset: 1, color: '#31557B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#BD4D4A' },
- { offset: 1, color: '#7B3031' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#94AF52' },
- { offset: 1, color: '#637A39' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#7B61A4' },
- { offset: 1, color: '#52416B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#4AAAC6' },
- { offset: 1, color: '#29697B' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#F79642' },
- { offset: 1, color: '#9C5D29' }
- ]
- )
- ]
return colorList[params.dataIndex]
// build a color map as your need.
@@ -1728,11 +1750,27 @@
}
}
}
+ ],
+ dataZoom: [
+ {
+ show: false,
+ startValue: 0, // 浠庡ご寮�濮嬨��
+ endValue: 9 // 涓�娆℃�у睍绀哄嚑涓�
+ }
]
}
option.xAxis.data = xAxisData
option.series[0].data = seriesData
this.rightColChart3.setOption(option, true)
+
+ this.rightColChart3CarouselTime = setInterval(() => {
+ xAxisData.push(xAxisData.shift())
+ seriesData.push(seriesData.shift())
+ colorList.push(colorList.shift())
+ this.$nextTick(() => {
+ this.rightColChart3.setOption(option, true)
+ })
+ }, 3000)
},
/* 缁樺埗鍙充晶绗洓涓浘琛� */
--
Gitblit v1.9.3