From 4dda1f6c996b493477dd7e48714b87e84e25063c Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期一, 10 三月 2025 09:08:48 +0800
Subject: [PATCH] 1、调整车间看板页面设备编号背景色随设备状态变化 2、调整车间看板页面设备编号与设备图片之间的距离 3、调整车间看板页面布局方式，将左侧图表区域宽度固定，若内容超出屏幕则增加横向滚动条
---
src/views/mdc/base/WorkshopSignage.vue | 157 +++++++++++++++++++---------------------------------
1 files changed, 58 insertions(+), 99 deletions(-)
diff --git a/src/views/mdc/base/WorkshopSignage.vue b/src/views/mdc/base/WorkshopSignage.vue
index 6db29b2..7a124a2 100644
--- a/src/views/mdc/base/WorkshopSignage.vue
+++ b/src/views/mdc/base/WorkshopSignage.vue
@@ -5,7 +5,7 @@
<div class="left-col">
<div class="col-content">
<div class="content-title">{{workshopDetails.workshopName}}#璁惧鎯呭喌</div>
- <workshop-device-overview :currentProductionId="currentProductionId"
+ <workshop-device-overview ref="workshopDeviceOverviewRef" :currentProductionId="currentProductionId"
:equipmentStatusList="equipmentStatusList" :toDecimal2NoZero="toDecimal2NoZero"/>
</div>
<div class="col-content">
@@ -15,22 +15,25 @@
</div>
<div class="col-content">
<div class="content-title">璁惧鍛ㄥ埄鐢ㄧ巼瓒嬪娍</div>
- <week-utilization-rate-trend :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
+ <week-utilization-rate-trend ref="weekRateTrendRef" :currentProductionId="currentProductionId"
+ :toDecimal2NoZero="toDecimal2NoZero"/>
</div>
<div class="col-content">
<div class="content-title">璁惧鏃ュ埄鐢ㄧ巼瓒嬪娍</div>
- <day-utilization-rate-trend :currentProductionId="currentProductionId" :toDecimal2NoZero="toDecimal2NoZero"/>
+ <day-utilization-rate-trend ref="dayRateTrendRef" :currentProductionId="currentProductionId"
+ :toDecimal2NoZero="toDecimal2NoZero"/>
</div>
<div class="col-content">
<div class="content-title">璁惧鎶ヨ淇℃伅</div>
- <device-alarm-info/>
+ <device-alarm-info ref="deviceAlarmInfoRef" :currentProductionId="currentProductionId"/>
</div>
</div>
<!--鍙充晶鎷栨嫿鍖哄煙-->
<div class="right-col">
- <device-drag-layout :currentProductionId="currentProductionId" :equipmentStatusList="equipmentStatusList"
- :getImgView="getImgView"/>
+ <device-drag-layout ref="deviceDragLayoutRef" :currentProductionId="currentProductionId"
+ :equipmentStatusList="equipmentStatusList"
+ :getImgView="getImgView" @handleTimeIntervalForShortOpen="handleTimeIntervalForShortOpen"/>
</div>
</div>
</div>
@@ -54,7 +57,7 @@
MonthUtilizationRateTrend,
DayUtilizationRateTrend,
WeekUtilizationRateTrend,
- WorkshopDeviceOverview,
+ WorkshopDeviceOverview
},
data() {
return {
@@ -82,20 +85,37 @@
statusImage: require('@/assets/WorskhopSignage/stateImg_gray.gif')
}
],
- deviceList: [],
- isShowGuideline: false,
- guidelineXTop: 0,
- guidelineYLeft: 0,
- isSwitchChecked: false,
- isHasResizeOrDragDevice: false
+ timeIntervalForShortTime: null,
+ timeIntervalForLongTime: null
}
},
created() {
if (!this.$route.params.productionId) return
+ // 鍦ㄦ澶勮幏鍙栬矾鐢卞弬鏁版槸涓轰簡浼犻�掑弬鏁扮粰瀛愮粍浠讹紝鑻ユ斁鍦╩ounted涓垯鏃犳硶浼犻�掔粰瀛愮粍浠�
this.currentProductionId = this.$route.params.productionId
},
mounted() {
+ if (!this.$route.params.productionId) return
+ // 鍦╩ounted涓璋冪敤姝ゆ柟娉曟槸涓轰簡鑾峰彇dom鍏冪礌
this.getWorkshopDetailsByApi()
+
+ this.timeIntervalForShortTime = setInterval(() => {
+ this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
+ this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
+ this.$refs.deviceDragLayoutRef.getDeviceListByApi()
+ }, 1000 * 60)
+
+ this.timeIntervalForLongTime = setInterval(() => {
+ this.$refs.weekRateTrendRef.getChartDataByApi()
+ this.$refs.dayRateTrendRef.getChartDataByApi()
+ }, 1000 * 60 * 60)
+ },
+ beforeDestroy() {
+ if (this.timeIntervalForShortTime || this.timeIntervalForLongTime) {
+ clearInterval(this.timeIntervalForShortTime)
+ clearInterval(this.timeIntervalForLongTime)
+ this.timeIntervalForShortTime = this.timeIntervalForLongTime = null
+ }
},
methods: {
// 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅
@@ -107,6 +127,24 @@
let workshopDrawingArea = document.querySelector('.right-col')
workshopDrawingArea.style.backgroundImage = `url(${this.getImgView(that.workshopDetails.backgroundImage)})`
})
+ },
+
+ /**
+ * 鎺у埗鐭湡瀹氭椂浠诲姟寮�鍚笌鍏抽棴
+ * @param checked 鍙充笅瑙掑姛鑳絪witch寮�鍏崇姸鎬�
+ */
+ handleTimeIntervalForShortOpen(checked) {
+ if (checked) {
+ clearInterval(this.timeIntervalForShortTime)
+ this.timeIntervalForShortTime = null
+ console.log('鏆傚仠璁℃椂鍣�', this.timeIntervalForShortTime)
+ } else {
+ this.timeIntervalForShortTime = setInterval(() => {
+ this.$refs.workshopDeviceOverviewRef.getDeviceStatusCountByApi()
+ this.$refs.deviceAlarmInfoRef.getDeviceAlarmInfoByApi()
+ this.$refs.deviceDragLayoutRef.getDeviceListByApi()
+ }, 1000 * 60)
+ }
},
// 淇濈暀涓や綅灏忔暟
@@ -131,7 +169,6 @@
<style lang="less">
.full-screen {
- width: 100%;
height: 1080px;
background-color: #000;
display: flex;
@@ -143,12 +180,15 @@
width: 100%;
height: 100%;
display: flex;
- justify-content: space-between;
+ /*justify-content: space-between;*/
align-items: center;
overflow: auto;
+ flex-wrap: nowrap;
.left-col {
- flex: 1;
+ width: 412px;
+ flex-shrink: 0;
+ /*flex: 1;*/
height: 100%;
display: flex;
padding: 0.5%;
@@ -196,95 +236,14 @@
.right-col {
position: relative;
+ flex-shrink: 0;
width: 1500px;
- height: 1080px;
+ height: 100%;
/*background-image: url("../../../assets/WorskhopSignage/103.png");*/
background-color: #000;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
-
- .single-device {
- position: absolute;
- border: 1px solid transparent;
- padding: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-between;
- cursor: default;
-
- &:active {
- border: 1px solid #1890ff;
- }
-
- .device-status {
- width: 100%;
- height: 100%;
- display: flex;
- -webkit-align-items: flex-end;
- -moz-align-items: flex-end;
- -ms-align-items: flex-end;
-
- .device-image {
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 100%;
- height: 100%;
- position: relative;
- margin-bottom: 10px;
-
- .status-image {
- position: absolute;
- top: 25%;
- left: 25%;
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 50%;
- height: 50%;
- }
- }
- }
-
- & > div:last-child {
- color: #fff;
- font-weight: bold;
- font-size: 0.6vw;
- }
- }
-
- .guideline {
- position: absolute;
- border: 1px dashed #fff;
- }
-
- .guidelineX {
- width: 9999px;
- left: 0;
- }
-
- .guidelineY {
- top: 0;
- height: 9999px;
- }
-
- form {
- position: absolute;
- right: 0;
- bottom: 0.5%;
-
- label {
- color: #fff;
- }
-
- .ant-switch {
- background-color: #999;
- }
-
- .ant-switch-checked {
- background-color: #1890FF;
- }
- }
}
}
}
--
Gitblit v1.9.3