From 964ab96fa41fc3f465d3d274fb2121dffd11dc79 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期四, 07 十一月 2024 17:16:44 +0800
Subject: [PATCH] 1、调整总控车间看板右侧图表标题 2、调整分控车间看板刀具寿命管理中的当前寿命颜色标识
---
src/views/mdc/base/MasterControlWorkshopSignage.vue | 300 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 241 insertions(+), 59 deletions(-)
diff --git a/src/views/mdc/base/MasterControlWorkshopSignage.vue b/src/views/mdc/base/MasterControlWorkshopSignage.vue
index 69ef55e..c100666 100644
--- a/src/views/mdc/base/MasterControlWorkshopSignage.vue
+++ b/src/views/mdc/base/MasterControlWorkshopSignage.vue
@@ -23,14 +23,18 @@
<div class="page-title">
<div style="position: relative">
- <img src="../../../assets/image/logo.jpg">
- 涓�鎷栧ぇ鎷栬閰嶅巶
+ <img src="@/assets/logo-yt.png">
+ <span style="cursor: pointer"
+ @dblclick="modalVisible=true">{{isFakeData?fakeData.title:'涓�鎷栧ぇ鎷栬閰嶅巶'}}</span>
</div>
- <div>鏁板瓧鍖栬溅闂存櫤鑳界鐞嗙郴缁�</div>
+ <div style="cursor: pointer" @dblclick="isFakeData = !isFakeData">
+ {{isFakeData?fakeData.subheading:'鏁板瓧鍖栬溅闂存櫤鑳界鐞嗙郴缁�'}}
+ </div>
</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 +49,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]}"
@@ -60,11 +64,17 @@
</div>
</div>
</div>
+
<div class="switch-container">
- <div @click="activeIndex=index" class="switch-item" v-for="(item,index) in switchList" :key="index"
- :style="{backgroundColor:activeIndex===index?'#848284':'#6B6D6B',color:activeIndex==index?'#27A2DB':'#000'}">
- {{item.label}}
+ <div class="switch-item" v-for="(item,index) in switchList" :key="index" @click="navigateToOthers(item,index)"
+ :style="{color:activeIndex==index?'#27A2DB':'#000'}">
+ <img src="@/assets/navigateImg.png">
+ <span>{{item.label}}</span>
</div>
+ </div>
+
+ <div class="page-description">
+ {{isFakeData?fakeData.description:'涓�鎷栧伐鏉愭墍 涓� 鐏电鏅鸿兘 鑱斿悎寮�鍙�'}}
</div>
</div>
<div class="right-col">
@@ -72,32 +82,39 @@
<div class="chart-container" id="right-col-chart1"></div>
</div>
<div class="col-content">
- <div class="content-title">浠婃棩璁惧寮�鏈虹巼(%)</div>
+ <div class="content-title">璁惧浠婃棩寮�鏈虹巼锛�%锛�</div>
<div class="chart-container" id="right-col-chart2"></div>
</div>
<div class="col-content">
- <div class="content-title">浠婃棩璁惧鍒╃敤鐜�(%)</div>
+ <div class="content-title">璁惧浠婃棩鍒╃敤鐜囷紙%锛�</div>
<div class="chart-container" id="right-col-chart3"></div>
</div>
<div class="col-content">
- <div class="content-title">鏈堣澶囧埄鐢ㄧ巼(%)</div>
+ <div class="content-title">璁惧鏈堝埄鐢ㄧ巼锛�%锛�</div>
<div class="chart-container" id="right-col-chart4"></div>
</div>
</div>
</div>
+
+ <SignageModal :fakeData="fakeData" :modalVisible="modalVisible"
+ @closeModal="modalVisible=false" @reloadData="reloadData"></SignageModal>
</div>
</template>
<script>
import * as echarts from 'echarts'
import api from '@/api/mdc'
+ import SignageModal from './modules/MasterControlWorkshopSignage/SignageModal'
export default {
name: 'MasterControlWorkshopSignage',
- components: {},
+ components: { SignageModal },
data() {
return {
- activeIndex: 0,
+ isFakeData: true,
+ fakeData: {},
+ modalVisible: false,
+ activeIndex: null,
firstEnterDevicePixelRatio: null,
currentDevicePixelRatio: null,
leftColChart1: '',
@@ -113,28 +130,45 @@
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: '',
+ rightColChart2Data: '',
+ rightColChart3Data: '',
rightColChart2And3Data: '',
rightColChart2CarouselTime: null,
rightColChart3CarouselTime: null,
@@ -147,7 +181,6 @@
this.firstEnterDevicePixelRatio = window.devicePixelRatio
window.addEventListener('resize', this.handleWindowResize)
this.getProductionListByApi()
- this.getChartDataByApi()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -155,12 +188,66 @@
if (this.rightColChart3CarouselTime) clearInterval(this.rightColChart3CarouselTime)
if (this.rightColChart4CarouselTime) clearInterval(this.rightColChart4CarouselTime)
},
+ watch: {
+ isFakeData: {
+ handler(value) {
+ if (value) {
+ this.getFakeDataByApi()
+ } else {
+ this.getChartDataByApi()
+ }
+ },
+ immediate: true
+ }
+ },
methods: {
getProductionListByApi() {
api.getProductionLineListApi()
.then(res => {
if (res.success) this.productionLineList = res.result
})
+ },
+
+ getFakeDataByApi() {
+ api.getFakeDataApi()
+ .then(res => {
+ console.log('res', res)
+ if (res.success) this.fakeData = res.result
+ this.leftColChart1Data = [
+ {
+ name: '浜у搧鍚堟牸鐜�',
+ count: res.result.passRate / 100
+ },
+ {
+ name: '璁惧鍒╃敤鐜�',
+ count: res.result.utilizationRate / 100
+ },
+ {
+ name: '璁″垝瀹屾垚鐜�',
+ count: res.result.planCompleteRate / 100
+ }
+ ]
+ this.leftColChart2Data = res.result.todayProductionList
+ this.leftColChart3Data = res.result.todayPassRateList
+ this.leftColChart4Data = res.result.todayShiftCountList
+ this.rightColChart2Data = res.result.todayOpenRateList
+ this.rightColChart3Data = res.result.todayUtilizationRateList
+ this.rightColChart4Data = res.result.monthUtilizationRateList
+ this.$nextTick(() => {
+ this.drawLeftColChart1()
+ this.drawLeftColChart2()
+ this.drawLeftColChart3()
+ this.drawLeftColChart4()
+ this.drawRightColChart2()
+ this.drawRightColChart3()
+ this.drawRightColChart4()
+ })
+ })
+ },
+
+ reloadData() {
+ this.modalVisible = false
+ if (this.isFakeData) this.getFakeDataByApi()
},
getChartDataByApi() {
@@ -174,7 +261,6 @@
},
getLeftColChart1DataByApi() {
- this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
api.getYesterdayOverviewApi()
.then(res => {
// console.log('res', res)
@@ -182,15 +268,15 @@
this.leftColChart1Data = [
{
'name': '浜у搧鍚堟牸鐜�',
- 'count': res.result.passRate ? res.result.passRate : 0
+ 'count': res.result.passRate ? res.result.passRate / 100 : 0
},
{
'name': '璁惧鍒╃敤鐜�',
- 'count': res.result.utilizationRate ? res.result.utilizationRate : 0
+ 'count': res.result.utilizationRate ? res.result.utilizationRate / 100 : 0
},
{
'name': '璁″垝瀹屾垚鐜�',
- 'count': res.result.planCompleteRate ? res.result.planCompleteRate : 0
+ 'count': res.result.planCompleteRate ? res.result.planCompleteRate / 100 : 0
}
]
this.drawLeftColChart1()
@@ -199,7 +285,6 @@
},
getLeftColChart2DataByApi() {
- this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
api.getTodayProductionProgressApi()
.then(res => {
// console.log('res', res)
@@ -211,7 +296,6 @@
},
getLeftColChart3DataByApi() {
- this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
api.getTodayProductPassRateApi()
.then(res => {
// console.log('res', res)
@@ -223,7 +307,6 @@
},
getLeftColChart4DataByApi() {
- this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
api.getTeamCompletionCountApi()
.then(res => {
// console.log('res', res)
@@ -240,8 +323,6 @@
},
getRightColChart2And3DataByApi() {
- this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
- this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
api.getTodayEquipmentWorkEfficiencyApi()
.then(res => {
// console.log('res', res)
@@ -254,7 +335,6 @@
},
getRightColChart4DataByApi() {
- this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
api.getMonthEquipmentUtilizationRateApi()
.then(res => {
// console.log('res', res)
@@ -267,6 +347,9 @@
/* 缁樺埗宸︿晶绗竴涓浘琛� */
drawLeftColChart1() {
+ this.leftColChart1 = this.$echarts.init(document.getElementById('left-col-chart1'))
+ console.log('leftColChart1Data', this.leftColChart1Data)
+
const yAxisData = []
const option = {
radar: [
@@ -395,14 +478,26 @@
/* 缁樺埗宸︿晶绗簩涓浘琛� */
drawLeftColChart2() {
+ this.leftColChart2 = this.$echarts.init(document.getElementById('left-col-chart2'))
const xAxisData = []
const seriesData1 = []
const seriesData2 = []
- 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 })
- })
+ if (this.isFakeData) {
+ this.leftColChart2Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData1.push({ value: item.value1 == null ? '' : item.value1 })
+ seriesData2.push({ value: item.value2 == null ? '' : item.value2 })
+ }
+ })
+ } else {
+ 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,
@@ -555,6 +650,7 @@
/* 缁樺埗宸︿晶绗笁涓浘琛� */
drawLeftColChart3() {
+ this.leftColChart3 = this.$echarts.init(document.getElementById('left-col-chart3'))
const data = [
{
'number': 'A_1',
@@ -608,12 +704,24 @@
]
const xAxisData = []
const seriesData = []
- this.leftColChart3Data.forEach(item => {
- xAxisData.push(item.productionName == null ? '' : item.productionName)
- seriesData.push({
- value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
+ if (this.isFakeData) {
+ this.leftColChart3Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({
+ value: this.toDecimal2NoZero(((item.value1 == null ? '' : item.value1) * 100) > 100 ? 100 : (((item.value1 == null ? '' : item.value1) * 100)))
+ })
+ }
})
- })
+ } else {
+ this.leftColChart3Data.forEach(item => {
+ xAxisData.push(item.productionName == null ? '' : item.productionName)
+ seriesData.push({
+ value: this.toDecimal2NoZero(((item.passRate == null ? '' : item.passRate) * 100) > 100 ? 100 : (((item.passRate == null ? '' : item.passRate) * 100)))
+ })
+ })
+ }
+
const option = {
tooltip: {
show: true,
@@ -816,12 +924,22 @@
/* 缁樺埗宸︿晶绗洓涓浘琛� */
drawLeftColChart4() {
+ this.leftColChart4 = this.$echarts.init(document.getElementById('left-col-chart4'))
const xAxisData = []
const seriesData = []
- this.leftColChart4Data.forEach(item => {
- xAxisData.push(item.clazz == null ? '' : item.clazz)
- seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
- })
+ if (this.isFakeData) {
+ this.leftColChart4Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 == null ? '' : item.value1 })
+ }
+ })
+ } else {
+ this.leftColChart4Data.forEach(item => {
+ xAxisData.push(item.clazz == null ? '' : item.clazz)
+ seriesData.push({ value: item.completionCount == null ? '' : item.completionCount })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -1180,6 +1298,7 @@
/* 缁樺埗鍙充晶绗簩涓浘琛� */
drawRightColChart2() {
+ this.rightColChart2 = this.$echarts.init(document.getElementById('right-col-chart2'))
const data = [
{
'number': 'A_1',
@@ -1343,10 +1462,20 @@
)
]
- this.rightColChart2And3Data.forEach(item => {
- xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
- seriesData.push({ value: item.openRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart2Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart2And3Data.forEach(item => {
+ xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
+ seriesData.push({ value: item.openRate })
+ })
+ }
+
const option = {
tooltip: {
show: true,
@@ -1466,6 +1595,7 @@
option.series[0].data = seriesData
this.rightColChart2.setOption(option, true)
+ clearInterval(this.rightColChart2CarouselTime)
this.rightColChart2CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -1478,6 +1608,7 @@
/* 缁樺埗鍙充晶绗笁涓浘琛� */
drawRightColChart3() {
+ this.rightColChart3 = this.$echarts.init(document.getElementById('right-col-chart3'))
const data = [
{
'number': 'A_1',
@@ -1640,10 +1771,19 @@
]
)
]
- this.rightColChart2And3Data.forEach(item => {
- xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
- seriesData.push({ value: item.utilizationRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart3Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart2And3Data.forEach(item => {
+ xAxisData.push(item.equipmentName == null ? '' : item.equipmentName)
+ seriesData.push({ value: item.utilizationRate })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -1763,6 +1903,7 @@
option.series[0].data = seriesData
this.rightColChart3.setOption(option, true)
+ clearInterval(this.rightColChart3CarouselTime)
this.rightColChart3CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -1775,6 +1916,7 @@
/* 缁樺埗鍙充晶绗洓涓浘琛� */
drawRightColChart4() {
+ this.rightColChart4 = this.$echarts.init(document.getElementById('right-col-chart4'))
const data = [
{
'number': 'A_1',
@@ -2017,10 +2159,19 @@
]
)
]
- this.rightColChart4Data.forEach(item => {
- xAxisData.push(item.date == null ? '' : item.date)
- seriesData.push({ value: item.utilizationRate })
- })
+ if (this.isFakeData) {
+ this.rightColChart4Data.forEach(item => {
+ if (item.label) {
+ xAxisData.push(item.label == null ? '' : item.label)
+ seriesData.push({ value: item.value1 })
+ }
+ })
+ } else {
+ this.rightColChart4Data.forEach(item => {
+ xAxisData.push(item.date == null ? '' : item.date)
+ seriesData.push({ value: item.utilizationRate })
+ })
+ }
const option = {
tooltip: {
show: true,
@@ -2131,6 +2282,7 @@
option.series[0].data = seriesData
this.rightColChart4.setOption(option, true)
+ clearInterval(this.rightColChart4CarouselTime)
this.rightColChart4CarouselTime = setInterval(() => {
xAxisData.push(xAxisData.shift())
seriesData.push(seriesData.shift())
@@ -2148,7 +2300,7 @@
return s
},
- navigateTo(record) {
+ navigateToSubWorkshopSignage(record) {
const url = this.$router.resolve({
path: '/SubControlWorkshopSignage',
query: {
@@ -2159,6 +2311,16 @@
}).href
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
+ }
+ },
+
/**
* 绐楀彛灏哄鍙樺寲鏃惰Е鍙�
@@ -2222,8 +2384,9 @@
text-align: center;
img {
+ height: 100%;
+ width: 10%;
position: absolute;
- width: 12%;
left: 12%;
}
}
@@ -2268,8 +2431,27 @@
flex: 1;
text-align: center;
cursor: pointer;
+ position: relative;
+
+ span {
+ position: relative;
+ z-index: 1;
+ }
+ img {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
}
}
+
+ .page-description {
+ text-align: center;
+ color: #fff;
+ font-size: 0.7vw;
+ }
}
.left-col, .right-col {
--
Gitblit v1.9.3