From 47ad515964b18ed9b6bea66b7298be1e95ad4de5 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 24 十月 2024 15:22:27 +0800
Subject: [PATCH] 1、新增设备综合效率分析以及报警分析页面 2、新增总控车间看板跳转第三方页面及外部应用功能 3、调整分控车间看板每日生产计划表格一直显示3条记录
---
src/views/mdc/base/MasterControlWorkshopSignage.vue | 438 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 250 insertions(+), 188 deletions(-)
diff --git a/src/views/mdc/base/MasterControlWorkshopSignage.vue b/src/views/mdc/base/MasterControlWorkshopSignage.vue
index 8ee1d78..ab55d40 100644
--- a/src/views/mdc/base/MasterControlWorkshopSignage.vue
+++ b/src/views/mdc/base/MasterControlWorkshopSignage.vue
@@ -30,7 +30,7 @@
</div>
<div class="workshop-bg">
<div class="navigate-container" style="top:0;left: 5%;">
- <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
+ <div @click="navigateToSubWorkshopSignage(item)" v-for="item in productionLineList" :key="item.id"
class="navigate-item">
<template v-if="item.productionOrder<5">
<div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
@@ -45,7 +45,7 @@
</div>
</div>
<div class="navigate-container" style="bottom:0;right: 5%;">
- <div @click="navigateTo(item)" v-for="item in productionLineList" :key="item.id"
+ <div @click="navigateToSubWorkshopSignage(item)" v-for="item in productionLineList" :key="item.id"
class="navigate-item">
<template v-if="item.productionOrder>=5">
<div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
@@ -61,7 +61,7 @@
</div>
</div>
<div class="switch-container">
- <div @click="activeIndex=index" class="switch-item" v-for="(item,index) in switchList" :key="index"
+ <div class="switch-item" v-for="(item,index) in switchList" :key="index" @click="navigateToOthers(item,index)"
:style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
{{item.label}}
</div>
@@ -113,29 +113,46 @@
switchList: [
{
label: 'MES',
- index: 0
+ index: 0,
+ isNavigateToWeb: true,
+ webUrl: 'http://172.16.52.71:8081',
+ batPath: ''
},
{
label: '鍒�鍏风鐞�',
- index: 1
+ index: 1,
+ isNavigateToWeb: true,
+ webUrl: 'http://172.16.52.99/tms',
+ batPath: ''
},
{
- label: '鏁呴殰',
- index: 2
+ label: '璁惧璇婃柇',
+ index: 2,
+ isNavigateToWeb: false,
+ webUrl: '',
+ batPath: 'yituoSBZD://'
},
{
- label: '3D',
- index: 3
+ label: '涓夌淮鐩戞帶',
+ index: 3,
+ isNavigateToWeb: false,
+ webUrl: '',
+ batPath: 'yituoVR://'
},
{
label: '瀹夐槻',
- index: 4
+ index: 4,
+ isNavigateToWeb: false,
+ webUrl: '',
+ batPath: 'yituoAF://'
}
],
rightColChart1: '',
rightColChart2: '',
rightColChart3: '',
rightColChart2And3Data: '',
+ rightColChart2CarouselTime: null,
+ rightColChart3CarouselTime: null,
rightColChart4: '',
rightColChart4Data: '',
rightColChart4CarouselTime: null
@@ -149,6 +166,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 +1269,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 +1397,7 @@
color: '#fff',
// rotate: 45,
margin: 15,
+ interval: 0,
fontSize: '55%',
formatter(value) {
const data = xAxisData
@@ -1347,94 +1456,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 +1468,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 +1567,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 +1693,7 @@
axisLabel: {
color: '#fff',
// rotate: 45,
+ interval: 0,
margin: 15,
fontSize: '55%',
formatter(value) {
@@ -1603,7 +1729,6 @@
show: false
}
},
-
series: [
{
name: '鍒╃敤鐜�',
@@ -1628,94 +1753,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 +1765,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)
},
/* 缁樺埗鍙充晶绗洓涓浘琛� */
@@ -2110,7 +2163,7 @@
return s
},
- navigateTo(record) {
+ navigateToSubWorkshopSignage(record) {
const url = this.$router.resolve({
path: '/SubControlWorkshopSignage',
query: {
@@ -2122,6 +2175,15 @@
window.open(url, '_blank')
},
+ navigateToOthers(record, index) {
+ this.activeIndex = index
+ if (record.isNavigateToWeb && record.webUrl) {
+ window.open(record.webUrl, '_blank')
+ } else {
+ window.location.href = record.batPath
+ }
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
* 璋冩暣鍥捐〃灏哄浠ラ�傚簲鍒嗚鲸鐜�
--
Gitblit v1.9.3