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 | 798 +++++++++++++++++++++++++-------------------------------
1 files changed, 354 insertions(+), 444 deletions(-)
diff --git a/src/views/mdc/base/MasterControlWorkshopSignage.vue b/src/views/mdc/base/MasterControlWorkshopSignage.vue
index 30196c6..69ef55e 100644
--- a/src/views/mdc/base/MasterControlWorkshopSignage.vue
+++ b/src/views/mdc/base/MasterControlWorkshopSignage.vue
@@ -29,22 +29,32 @@
<div>鏁板瓧鍖栬溅闂存櫤鑳界鐞嗙郴缁�</div>
</div>
<div class="workshop-bg">
- <div class="navigate-container" style="left: 5%;">
- <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
- <template v-if="index<5">
- <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
- <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
- {{item.label}}
+ <div class="navigate-container" style="top:0;left: 5%;">
+ <div @click="navigateTo(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]}"
+ class="navigate-item-index">
+ {{item.productionOrder+1}}
+ </div>
+ <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
+ class="navigate-item-label">
+ {{item.productionName}}
</div>
</template>
</div>
</div>
- <div class="navigate-container" style="bottom:5%;right: 5%;">
- <div @click="navigateTo(item)" v-for="(item,index) in navigateList" :key="index" class="navigate-item">
- <template v-if="index>=5">
- <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-index">{{index+1}}</div>
- <div :style="{backgroundColor:item.backgroundColor}" class="navigate-item-label">
- {{item.label}}
+ <div class="navigate-container" style="bottom:0;right: 5%;">
+ <div @click="navigateTo(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]}"
+ class="navigate-item-index">
+ {{item.productionOrder+1}}
+ </div>
+ <div :style="{backgroundColor:productionLineBackgroundColorList[item.productionOrder%4]}"
+ class="navigate-item-label">
+ {{item.productionName}}
</div>
</template>
</div>
@@ -80,6 +90,7 @@
<script>
import * as echarts from 'echarts'
+ import api from '@/api/mdc'
export default {
name: 'MasterControlWorkshopSignage',
@@ -90,56 +101,15 @@
firstEnterDevicePixelRatio: null,
currentDevicePixelRatio: null,
leftColChart1: '',
+ leftColChart1Data: '',
leftColChart2: '',
+ leftColChart2Data: '',
leftColChart3: '',
+ leftColChart3Data: '',
leftColChart4: '',
- navigateList: [
- {
- label: '1024鍚庣鍔犲伐绾�',
- id: '1',
- backgroundColor: '#0000FF'
- },
- {
- label: '1024鍓嶇鍔犲伐绾�',
- id: '2',
- backgroundColor: '#FF8E00'
- },
- {
- label: '鍓嶆墭鏋跺姞宸ョ嚎',
- id: '3',
- backgroundColor: '#DE1439'
- },
- {
- label: '80浼犲姩澹充綋鍔犲伐绾�',
- id: '4',
- backgroundColor: '#006500'
- },
- {
- label: '80鍑忛�熷櫒澹充綋鍔犲伐绾�',
- id: '5',
- backgroundColor: '#0000FF'
- },
- {
- label: '绠变綋鍔犲伐绾�',
- id: '6',
- backgroundColor: '#FF8E00'
- },
- {
- label: '宸�熷櫒杞存壙搴у姞宸ョ嚎',
- id: '7',
- backgroundColor: '#DE1439'
- },
- {
- label: '鍒跺姩鍣ㄦ椿濉炲姞宸ョ嚎',
- id: '8',
- backgroundColor: '#006500'
- },
- {
- label: '涓皬浠跺姞宸ョ嚎',
- id: '9',
- backgroundColor: '#0000FF'
- }
- ],
+ leftColChart4Data: '',
+ productionLineList: [],
+ productionLineBackgroundColorList: ['#0000FF', '#FF8E00', '#DE1439', '#006500'],
switchList: [
{
label: 'MES',
@@ -165,49 +135,103 @@
rightColChart1: '',
rightColChart2: '',
rightColChart3: '',
+ rightColChart2And3Data: '',
+ rightColChart2CarouselTime: null,
+ rightColChart3CarouselTime: null,
rightColChart4: '',
+ rightColChart4Data: '',
rightColChart4CarouselTime: null
}
},
mounted() {
this.firstEnterDevicePixelRatio = window.devicePixelRatio
window.addEventListener('resize', this.handleWindowResize)
+ this.getProductionListByApi()
this.getChartDataByApi()
},
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: {
+ getProductionListByApi() {
+ api.getProductionLineListApi()
+ .then(res => {
+ if (res.success) this.productionLineList = res.result
+ })
+ },
+
getChartDataByApi() {
this.getLeftColChart1DataByApi()
this.getLeftColChart2DataByApi()
this.getLeftColChart3DataByApi()
this.getLeftColChart4DataByApi()
// this.getRightColChart1DataByApi()
- this.getRightColChart2DataByApi()
- this.getRightColChart3DataByApi()
+ this.getRightColChart2And3DataByApi()
this.getRightColChart4DataByApi()
},
getLeftColChart1DataByApi() {
this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
- this.drawLeftColChart1()
+ api.getYesterdayOverviewApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.leftColChart1Data = [
+ {
+ 'name': '浜у搧鍚堟牸鐜�',
+ 'count': res.result.passRate ? res.result.passRate : 0
+ },
+ {
+ 'name': '璁惧鍒╃敤鐜�',
+ 'count': res.result.utilizationRate ? res.result.utilizationRate : 0
+ },
+ {
+ 'name': '璁″垝瀹屾垚鐜�',
+ 'count': res.result.planCompleteRate ? res.result.planCompleteRate : 0
+ }
+ ]
+ this.drawLeftColChart1()
+ }
+ })
},
getLeftColChart2DataByApi() {
this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
- this.drawLeftColChart2()
+ api.getTodayProductionProgressApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.leftColChart2Data = res.result
+ this.drawLeftColChart2()
+ }
+ })
},
getLeftColChart3DataByApi() {
this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
- this.drawLeftColChart3()
+ api.getTodayProductPassRateApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.leftColChart3Data = res.result
+ this.drawLeftColChart3()
+ }
+ })
},
getLeftColChart4DataByApi() {
this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
- this.drawLeftColChart4()
+ api.getTeamCompletionCountApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.leftColChart4Data = res.result
+ this.drawLeftColChart4()
+ }
+ })
},
getRightColChart1DataByApi() {
@@ -215,46 +239,34 @@
this.drawRightColChart1()
},
- getRightColChart2DataByApi() {
+ getRightColChart2And3DataByApi() {
this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
- this.drawRightColChart2()
- },
-
- getRightColChart3DataByApi() {
this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
- this.drawRightColChart3()
+ api.getTodayEquipmentWorkEfficiencyApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.rightColChart2And3Data = res.result
+ this.drawRightColChart2()
+ this.drawRightColChart3()
+ }
+ })
},
getRightColChart4DataByApi() {
this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
- this.drawRightColChart4()
+ api.getMonthEquipmentUtilizationRateApi()
+ .then(res => {
+ // console.log('res', res)
+ if (res.success) {
+ this.rightColChart4Data = res.result
+ this.drawRightColChart4()
+ }
+ })
},
/* 缁樺埗宸︿晶绗竴涓浘琛� */
drawLeftColChart1() {
- const data = [
- {
- 'number': null,
- 'name': '浜у搧鍚堟牸鐜�',
- 'count': 1,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': null,
- 'name': '璁惧鍒╃敤鐜�',
- 'count': 0.89,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': null,
- 'name': '璁″垝瀹屾垚鐜�',
- 'count': 0.95,
- 'planCount': null,
- 'rateCount': null
- }
- ]
const yAxisData = []
const option = {
radar: [
@@ -373,7 +385,7 @@
]
}
- data.forEach((item, index) => {
+ this.leftColChart1Data.forEach((item, index) => {
yAxisData.push(parseFloat(item.count * 100 > 100 ? 100 : item.count * 100))
option.radar[1].indicator[index].num = item.count * 100 > 100 ? 100 : item.count * 100
})
@@ -383,101 +395,22 @@
/* 缁樺埗宸︿晶绗簩涓浘琛� */
drawLeftColChart2() {
- const data1 = [
- {
- 'number': 'A_1',
- 'name': '鍓嶇鍓�',
- 'count': 190
- },
- {
- 'number': 'A_2',
- 'name': '1024鍚庣',
- 'count': 180
- },
- {
- 'number': 'A_3',
- 'name': '宸�熷櫒',
- 'count': 200
- },
- {
- 'number': 'A_4',
- 'name': '杞存壙搴�',
- 'count': 100
- },
- {
- 'number': 'A_5',
- 'name': '80鍑�',
- 'count': 200
- },
- {
- 'number': 'A_6',
- 'name': '80浼�',
- 'count': 90
- },
- {
- 'number': 'A_7',
- 'name': '1024鍓�',
- 'count': 200
- }
- ]
- const data2 = [
- {
- 'number': 'A_1',
- 'name': '鍓嶇鍓�',
- 'count': 165
- },
- {
- 'number': 'A_2',
- 'name': '1024鍚庣',
- 'count': 166
- },
- {
- 'number': 'A_3',
- 'name': '宸�熷櫒',
- 'count': 167
- },
- {
- 'number': 'A_4',
- 'name': '杞存壙搴�',
- 'count': 90
- },
- {
- 'number': 'A_5',
- 'name': '80鍑�',
- 'count': 100
- },
- {
- 'number': 'A_6',
- 'name': '80浼�',
- 'count': 55
- },
- {
- 'number': 'A_7',
- 'name': '1024鍓�',
- 'count': 171
- }
- ]
const xAxisData = []
const seriesData1 = []
const seriesData2 = []
- data1.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
- seriesData1.push({
- value: item.count == null ? '' : item.count,
- hostType: (item.number == null ? '' : item.number)
- })
- })
- data2.forEach(item => {
- seriesData2.push({
- value: item.count == null ? '' : item.count,
- hostType: (item.number == null ? '' : item.number)
- })
+ this.leftColChart2Data.forEach(item => {
+ xAxisData.push(item.productName == null ? '' : item.productName)
+ seriesData1.push({ value: item.planCount == null ? '' : item.planCount })
+ seriesData2.push({ value: item.completionCount == null ? '' : item.completionCount })
})
const option = {
tooltip: {
show: true,
- trigger: 'item',
- formatter: params => `${params.name}锛�${params.value}浠禶
+ trigger: 'axis',
+ formatter: params => {
+ // console.log('params', params)
+ return params[0].name + '<br>' + `${params[0].seriesName}锛�${params[0].value}浠禶 + '<br>' + `${params[1].seriesName}锛�${params[1].value}浠禶
+ }
},
legend: {
show: false,
@@ -544,7 +477,7 @@
},
series: [
{
- name: '鍒╃敤鐜�',
+ name: '璁″垝閲�',
type: 'bar',
barWidth: '35%',//鏌卞浘瀹藉害
data: [],
@@ -579,7 +512,7 @@
}
},
{
- name: '鍒╃敤鐜�',
+ name: '瀹屾垚閲�',
type: 'bar',
barWidth: '35%',//鏌卞浘瀹藉害
data: [],
@@ -675,11 +608,10 @@
]
const xAxisData = []
const seriesData = []
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
+ this.leftColChart3Data.forEach(item => {
+ xAxisData.push(item.productionName == null ? '' : item.productionName)
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: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
})
})
const option = {
@@ -884,65 +816,11 @@
/* 缁樺埗宸︿晶绗洓涓浘琛� */
drawLeftColChart4() {
- const data = [
- {
- 'number': 'A_1',
- 'name': '鍓嶇鐝�',
- 'count': 54,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_2',
- 'name': '鍚庣鐝�',
- 'count': 55,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_3',
- 'name': '80浼犵彮',
- 'count': 56,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_4',
- 'name': '80鍑忕彮',
- 'count': 57,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_5',
- 'name': '鎵樻灦鐝�',
- 'count': 58,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_6',
- 'name': '杞存壙搴曞骇鐝�',
- 'count': 59,
- 'planCount': null,
- 'rateCount': null
- },
- {
- 'number': 'A_7',
- 'name': '宸�熷櫒鐝�',
- 'count': 90,
- 'planCount': null,
- 'rateCount': null
- }
- ]
const xAxisData = []
const seriesData = []
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
- seriesData.push({
- value: item.count == null ? '' : item.count,
- hostType: (item.number == null ? '' : item.number)
- })
+ this.leftColChart4Data.forEach(item => {
+ xAxisData.push(item.clazz == null ? '' : item.clazz)
+ seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
})
const option = {
tooltip: {
@@ -1376,12 +1254,98 @@
]
const xAxisData = []
const seriesData = []
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
- 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)
- })
+ 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 })
})
const option = {
tooltip: {
@@ -1418,6 +1382,7 @@
color: '#fff',
// rotate: 45,
margin: 15,
+ interval: 0,
fontSize: '55%',
formatter(value) {
const data = xAxisData
@@ -1476,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.
@@ -1576,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)
},
/* 缁樺埗鍙充晶绗笁涓浘琛� */
@@ -1659,12 +1552,97 @@
]
const xAxisData = []
const seriesData = []
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
- 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)
- })
+ 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 })
})
const option = {
tooltip: {
@@ -1700,6 +1678,7 @@
axisLabel: {
color: '#fff',
// rotate: 45,
+ interval: 0,
margin: 15,
fontSize: '55%',
formatter(value) {
@@ -1735,7 +1714,6 @@
show: false
}
},
-
series: [
{
name: '鍒╃敤鐜�',
@@ -1760,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.
@@ -1860,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)
},
/* 缁樺埗鍙充晶绗洓涓浘琛� */
@@ -2111,12 +2017,9 @@
]
)
]
- data.forEach(item => {
- xAxisData.push(item.name == null ? '' : item.name)
- 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)
- })
+ this.rightColChart4Data.forEach(item => {
+ xAxisData.push(item.date == null ? '' : item.date)
+ seriesData.push({ value: item.utilizationRate })
})
const option = {
tooltip: {
@@ -2246,7 +2149,14 @@
},
navigateTo(record) {
- const url = this.$router.resolve(`/SubControlWorkshopSignage/${record.id}`).href
+ const url = this.$router.resolve({
+ path: '/SubControlWorkshopSignage',
+ query: {
+ productionId: record.id,
+ productionName: record.productionName,
+ productionOrder: record.productionOrder + 1
+ }
+ }).href
window.open(url, '_blank')
},
@@ -2321,7 +2231,7 @@
.workshop-bg {
position: relative;
height: 60%;
- background-image: url("../../../assets/yt_background.jpg");
+ background-image: url("../../../assets/yt_background.png");
background-size: 100% 100%;
background-repeat: no-repeat;
--
Gitblit v1.9.3