From f19f50623dc0e0ec49b849594e9bf74f3a06adf6 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 10 Nov 2022 10:39:46 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E8=AE=BE=E5=A4=87=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/EquipmentManager/HomePage.vue | 186 ++++-------------- .../components/EquipmentAnalysisBox.vue | 44 ++--- .../EquipmentManager/components/TechyBox.vue | 4 +- .../components/charts/pl-JDL-Chart.vue | 9 +- 4 files changed, 70 insertions(+), 173 deletions(-) diff --git a/src/views/EquipmentManager/HomePage.vue b/src/views/EquipmentManager/HomePage.vue index e8e6d14..d542a6b 100644 --- a/src/views/EquipmentManager/HomePage.vue +++ b/src/views/EquipmentManager/HomePage.vue @@ -42,10 +42,10 @@ -
-
- -

+
+ + + > 各产线稼动率 -

+ --> + 各产线稼动率
@@ -143,124 +143,6 @@ import { import { mapGetters } from 'vuex' import screenfull from 'screenfull' -const equipmentExceptionSVG = ` - setting tools - - - - - - - - - - - - - - - -` -const equipmentAlarmSVG = ` - hatplus - - - - - - - - - - - - - - - - - - - -` -const equipmentOrderSVG = ` - 编组 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -` -const equipmentAnalysisSVG = ` - analysis - - - - - - - - - - - - - - - - - - - - - - - -` export default { name: 'EquipmentManageHome', components: { @@ -281,10 +163,6 @@ export default { props: {}, data() { return { - equipmentExceptionSVG, - equipmentAlarmSVG, - equipmentOrderSVG, - equipmentAnalysisSVG, equipmentExceptionProps, equipmentExceptionDatalist, equipmentAlarmProps, @@ -379,7 +257,7 @@ export default { } .row-1, -.row-2, +/* .row-2, */ .row-3 { height: 30%; } @@ -395,7 +273,7 @@ export default { } .row-3 { - flex: 0; + flex: 1; } .equipment-exception { @@ -417,32 +295,52 @@ export default { display: grid; } -.columns-2 { - grid-template-columns: 1fr 3fr; - /* gap: 8px; */ - gap: 0.5vw; +.equipment-analysis__inner { + height: calc(100% - 32px); + display: flex; + gap: calc(8px * var(--beilv)); +} + +.pl-jdl { + padding: calc(8px * var(--beilv)) calc(16px * var(--beilv)); + height: calc(191px * var(--beilv)); + width: calc(245px * var(--beilv)); + display: flex; + flex-direction: column; +} + +.pl-jdl__title { + font-size: calc(15px * var(--beilv)); + line-height: calc(18px * var(--beilv)); + color: #01cfcc; +} + +.eqs-oee-mtbr-btbf { + flex: 1; + height: calc(191px * var(--beilv)); + overflow: hidden; + overflow-y: scroll; } .grid-2-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; - /* gap: 4px; */ - gap: 0.6vh 0.3vw; + gap: calc(8px * var(--beilv)) calc(4px * var(--beilv)); } .product-line-selection { border: none; outline: none; - border-radius: 2px 4px 4px 2px; + border-radius: calc(4px * var(--beilv)); background: #31878c45; /* opacity: 0.29; */ color: white; position: absolute; - padding: 0.5vh; - width: 5vw; - font-size: 12px; - line-height: 18px; - top: calc(1vh + 8px); - left: calc(5vw + 32px); + padding: calc(4px * var(--beilv)); + width: calc(114px * var(--beilv)); + font-size: calc(12px * var(--beilv)); + line-height: calc(18px * var(--beilv)); + top: calc(24px * var(--beilv)); + left: calc(140px * var(--beilv)); } diff --git a/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue b/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue index cb64904..b1bbca4 100644 --- a/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue +++ b/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue @@ -52,12 +52,11 @@ const ProgreeBar = { 'div', { style: { - height: '0.5vh', + height: '100%', width: '100%', - borderRadius: '8px', + borderRadius: 'calc(8px * var(--beilv))', position: 'relative', background: '#1E2D4590', - // background: 'red', overflow: 'hidden' } }, @@ -71,7 +70,7 @@ const ProgreeBar = { top: 0, width: this.process + '%', height: '100%', - borderRadius: '8px', + borderRadius: 'calc(8px * var(--beilv))', background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})` } }, @@ -114,10 +113,10 @@ export default { } .equipment-analysis-box__title { - font-size: 1.25vh; - line-height: 2vh; - letter-spacing: 1px; - width: 3vw; + font-size: calc(14px * var(--beilv)); + line-height: calc(18px * var(--beilv)); + letter-spacing: calc(1px * var(--beilv)); + width: 30%; overflow-wrap: break-word; align-self: center; text-align: center; @@ -130,12 +129,9 @@ export default { .param-name { opacity: 70%; text-align: right; - /* font-size: 12px; - line-height: 14px; - width: 36px; */ - font-size: 1vh; - line-height: 1.2; - width: 2vw; + font-size: calc(12px * var(--beilv)); + line-height: calc(14px * var(--beilv)); + width: 20%; } .param-value { opacity: 70%; @@ -143,20 +139,22 @@ export default { /* font-size: 12px; line-height: 14px; width: 24px; */ - font-size: 1vh; - line-height: 1.2; - width: 1.5vw; + font-size: calc(12px * var(--beilv)); + line-height: calc(14px * var(--beilv)); + width: 15%; } .param-list::before { content: ''; position: absolute; - left: -11px; - top: 10%; - width: 1px; - /* height: 100%; */ - height: 80%; - background: linear-gradient(to bottom, transparent, #ffffff8c, transparent); + left: calc(-10px * var(--beilv)); + width: 2px; + height: 100%; + background: linear-gradient(to bottom, transparent, #455670, transparent); +} + +.progress-bar { + height: calc(8px * var(--beilv)); } .flex { diff --git a/src/views/EquipmentManager/components/TechyBox.vue b/src/views/EquipmentManager/components/TechyBox.vue index e8e0a62..e421ad3 100644 --- a/src/views/EquipmentManager/components/TechyBox.vue +++ b/src/views/EquipmentManager/components/TechyBox.vue @@ -11,10 +11,10 @@ export default {} diff --git a/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue b/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue index bbc4f6a..a1625a6 100644 --- a/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue +++ b/src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue @@ -34,7 +34,7 @@ export default { }, axisLine: { lineStyle: { - color: '#ffffff3d' + color: '#5982B233' } }, axisLabel: { @@ -47,17 +47,18 @@ export default { type: 'value', splitLine: { lineStyle: { - color: '#ffffff3d' + color: '#5982B233' } }, axisLine: { lineStyle: { - color: '#ffffff3d' + color: '#5982B233' } }, axisLabel: { color: '#ffffff9d' - } + }, + axisTick: { show : false } } ], series: [