From be590d48f66806716c990bdce18d0ed90bf18797 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期二, 04 三月 2025 15:52:28 +0800
Subject: [PATCH] 420项目： 1、大屏车间管理页面新增及编辑时随意输入车间名称调整为选择已有车间 2、增加车间看板拖拽及缩放功能权限功能 3、实现车间看板设备状态数量及图表数据由后台驱动 4、车间看板页面月、周、日利用率图表数据由后台驱动 5、车间看板页面报警信息列表数据由后台驱动 6、车间看板页面调整右侧设备状态判定，同时加入异常状态展示（设备编号背景色变为红色）
---
src/views/mdc/base/modules/WorkshopSignage/DayUtilizationRateTrend.vue | 367 +++-------------------------------------------------
1 files changed, 21 insertions(+), 346 deletions(-)
diff --git a/src/views/mdc/base/modules/WorkshopSignage/DayUtilizationRateTrend.vue b/src/views/mdc/base/modules/WorkshopSignage/DayUtilizationRateTrend.vue
index bc95202..30ddbc4 100644
--- a/src/views/mdc/base/modules/WorkshopSignage/DayUtilizationRateTrend.vue
+++ b/src/views/mdc/base/modules/WorkshopSignage/DayUtilizationRateTrend.vue
@@ -4,11 +4,15 @@
<script>
import * as echarts from 'echarts'
+ import signageApi from '@/api/signage'
export default {
name: 'DayUtilizationRateTrend',
components: {},
props: {
+ currentProductionId: {
+ type: String
+ },
toDecimal2NoZero: {
type: Function
}
@@ -20,57 +24,26 @@
}
},
mounted() {
- this.getChartDataByApi()
window.addEventListener('resize', this.handleWindowResize)
+ if (!this.currentProductionId) return
+ this.getChartDataByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
methods: {
getChartDataByApi() {
+ const that = this
this.chartContainer = this.$echarts.init(document.getElementById(this.chartContainerId))
- this.initChart()
+ signageApi.getDayUtilizationRateApi(this.currentProductionId)
+ .then(res => {
+ console.log('res==========', res)
+ if (!res.success) return
+ that.initChart(res.result)
+ })
},
- initChart() {
- const data = [
- {
- 'number': 'A_1',
- 'name': '1-D鐗圭宸ヨ壓',
- 'count': 0.4452,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_2',
- 'name': '2-D鏁翠綋鏈哄專',
- 'count': 0.7642,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_3',
- 'name': '3-D鐕冪儳瀹ゆ満鍖�',
- 'count': 0.4523,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_4',
- 'name': '4-D鐒婃帴鏈哄專宸ユ',
- 'count': 0.6987,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_5',
- 'name': '5-D CRIC鍗曞厓',
- 'count': 0.8924,
- 'planCount': null,
- 'rateCount': null
- },
- ]
- const xAxisData = []
+ initChart(dataObj) {
const seriesData = []
const option = {
tooltip: {
@@ -164,306 +137,9 @@
},
//barCategoryGap:'180%',
itemStyle: {
- normal: {
- barBorderRadius: '',
- color: function(params) {
- const colorList = [
- //1-D鐗圭宸ヨ壓鍗曞厓
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#9cc4f6' },
- { offset: 1, color: '#538dd6' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffffa2' },
- { offset: 1, color: '#ffff01' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#97fcc5' },
- { offset: 1, color: '#0bae8d' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffbc85' },
- { offset: 1, color: '#e26c0a' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#fb78ba' },
- { offset: 1, color: '#8f0149' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //鐜欢鍗曞厓
- { offset: 0, color: '#d297ff' },
- { offset: 1, color: '#7030a0' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffe491' },
- { offset: 1, color: '#8f6c00' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffb6b9' },
- { offset: 1, color: '#fd4c53' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#92cbba' },
- { offset: 1, color: '#18a387' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ff5b62' },
- { offset: 1, color: '#a02100' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#b5d5e3' },
- { offset: 1, color: '#1b8bd0' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //涓皬鏈哄專鍗曞厓
- { offset: 0, color: '#ebd3ff' },
- { offset: 1, color: '#e889ff' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#D69123' },
- { offset: 1, color: '#a16900' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //浣庡帇瀵煎悜
- { offset: 0, color: '#d588c8' },
- { offset: 1, color: '#9545AE' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //浣庡帇鍙剁墖 1 4
- { offset: 0, color: '#97abd6' },
- { offset: 1, color: '#6268b2' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#d7dab2' },
- { offset: 1, color: '#b8aa15' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#e9c9b0' },
- { offset: 1, color: '#D9646A' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#a4e3d6' },
- { offset: 1, color: '#01A55E' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
-
- { offset: 0, color: '#2052b1' },
- { offset: 1, color: '#002b73' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //鐩樹欢鍗曞厓
- { offset: 0, color: '#3e71e2' },
- { offset: 1, color: '#0042c8' }
- ]
- ), new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- //缁撴瀯浠跺崟鍏�
- { offset: 0, color: '#99d6cf' },
- { offset: 1, color: '#21bf90' }
- ]
- )
- , new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- // 7-D
- { offset: 0, color: '#99d6cf' },
- { offset: 1, color: '#0ad0bb' }
- ]
- )
- , new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#FF9297' },
- { offset: 1, color: '#FF9297' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#fb78ba' },
- { offset: 1, color: '#ff77dc' }
- ]
- ),
- //涓�鍘�
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#9cc4f6' },
- { offset: 1, color: '#538dd6' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffffa2' },
- { offset: 1, color: '#ffff01' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#0bae8d' },
- { offset: 1, color: '#0bae8d' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#ffbc85' },
- { offset: 1, color: '#e26c0a' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#97abd6' },
- { offset: 1, color: '#842cb2' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#99d6cf' },
- { offset: 1, color: '#0ad0bb' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#FF9297' },
- { offset: 1, color: '#FF9297' }
- ]
- ),
- new echarts.graphic.LinearGradient(
- 0, 0, 1, 0,
- [
- { offset: 0, color: '#fb78ba' },
- { offset: 1, color: '#ff77dc' }
- ]
- )
- ]
- if (params.name == '1-D鐗圭宸ヨ壓' || params.name == '鍘嬫皵鏈轰竴' || params.name == '1-D鐗圭宸ヨ壓鍗曞厓') {
- return colorList[24]
- }
- if (params.name == '2-D鏁翠綋鏈哄專' || params.name == '2-D鏁翠綋鏈哄專鍗曞厓') {
- return colorList[25]
- }
- if (params.name == '3-D鐕冪儳瀹ゆ満鍖�' || params.name == '鐕冪儳瀹ゆ満鍖�' || params.name == '3-D鍘嬫皵鏈烘満鍖ｅ崟鍏�' || params.name == '3-D鍘嬫皵鏈烘満鍖�') {
- return colorList[26]
- }
- if (params.name == '4-D鐒婃帴鏈哄專宸ユ' || params.name == '涓夊伐娈�' || params.name == '鏀灦灏忕幆浠跺崟鍏�' || params.name == '4-D鐒婃帴鏈哄專鍗曞厓') {
- return colorList[27]
- }
- if (params.name == '5-D CRIC鍗曞厓' || params.name == '10-D閮ㄤ欢瑁呴厤鍗曞厓') {
- return colorList[4]
- }
- if (params.name == '6-D椋庢墖鍗曞厓' || params.name == '6-D椋庢墖鏈哄專鍗曞厓') {
- return colorList[28]
- }
- if (params.name == '7-D娑¤疆鏈哄專' || params.name == '7-D娑¤疆鏈哄專鍗曞厓') {
- return colorList[29]
- }
- if (params.name == '8-D绉戠爺宸ユ' || params.name == '绉戠爺宸ユ' || params.name == '8-D绉戠爺鍗曞厓') {
- return colorList[30]
- }
- if (params.name == '10-D閮ㄤ欢瑁呴厤' || params.name == '10-D閮ㄤ欢瑁呴厤鍗曞厓') {
- return colorList[31]
- }
- if (params.name == 'JD-2鍐涘搧鏈哄姞' || params.name == '鍐涘搧鏈哄姞宸ユ' || params.name == '鍥涘伐娈�') {
- return colorList[8]
- }
- if (params.name == '10-D鐢熶骇瀹�' || params.name == 'IGV鍙剁墖') {
- return colorList[9]
- }
-
- if (params.name == '浜斿伐娈�') {
- return colorList[10]
- }
- if (params.name == '鍏伐娈�' || params.name == '涓皬鏈哄專鍗曞厓') {
- return colorList[11]
- }
- if (params.name == '娑¤疆鍙剁墖') {
- return colorList[12]
- }
- if (params.name == '浣庡帇瀵煎悜') {
- return colorList[13]
- }
- if (params.name == '浣庡帇鍙剁墖') {
- return colorList[14]
- }
- if (params.name == '瀵煎悜鍙剁墖') {
- return colorList[15]
- }
- if (params.name == '鍘嬫皵鏈轰簩') {
- return colorList[16]
- }
- if (params.name == '鏁存祦涓�') {
- return colorList[17]
- }
- if (params.name == '鏁存祦浜�') {
- return colorList[19]
- }
- if (params.name == '涓�宸ユ' || params.name == '鐩樹欢鍗曞厓') {
- return colorList[19]
- }
- if (params.name == '浜屽伐娈�' || params.name == '缁撴瀯浠跺崟鍏�') {
- return colorList[20]
- }
- if (params.name == '涓冨伐娈�' || params.name == '鐜欢鍗曞厓') {
- return colorList[5]
- }
- // build a color map as your need.
-
- //return colorList[params.dataIndex]
- }
+ color: params => {
+ const colorList = ['#538dd6', '#ffff01', '#0bae8d', '#e26c0a', '#F6E1BE', '#7030a0', '#0ad0bb', '#FF9297', '#A40035']
+ return colorList[params.dataIndex]
},
emphasis: {
barBorderRadius: 13,
@@ -474,14 +150,13 @@
}
]
}
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
+ dataObj.dataList.forEach(item => {
seriesData.push({
- value: this.toDecimal2NoZero(((item.count == null ? '' : item.count) * 100) > 100 ? 100 : (((item.count == null ? '' : item.count) * 100))),
- hostType: (item.number == null ? '' : item.number)
+ value: item.utilizationRate,
+ hostType: (item.productionName ? item.productionName : '')
})
})
- option.xAxis[0].data = xAxisData
+ option.xAxis[0].data = dataObj.productionList
option.series[0].data = seriesData
this.chartContainer.setOption(option, true)
},
--
Gitblit v1.9.3