From e205cad00ed14b91f7c7395146941ade750982bb Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 17 一月 2024 15:29:13 +0800
Subject: [PATCH] 1、扭矩配置页面更名为参数配置，增加字段“进给参数” 2、设备监控页面设备表增加状态异常说明字段以及操作列状态反馈功能（具备鉴权功能） 3、设备加工工件报表页面取消分页器及日期字段 4、设备日志页面增加扭矩及进给参数工作曲线 5、设备运行参数报警页面新增至mdc模块数据报表菜单下并完成所有布局及功能实现 6、优化车间看板页面代码，手动设置拖拽区域高度以试图解决进入页面后无法随意拖拽问题（未在现场调试），全屏模式下无法使用功能，从全屏模式切换至普通模式下刷新页面以及优化设备详情弹窗样式
---
src/views/WorkshopSignage.vue | 122 ++++++++++++++++++++++++----------------
1 files changed, 74 insertions(+), 48 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index 81b35a5..c9209c4 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,8 +1,8 @@
<template>
<dv-full-screen-container class="full-screen-container">
- <header class="page-header">
+ <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
{{ workshopDetails.workshopName }}
- <div class="header-right" v-has="'home:saveDevicePositionAndSize'">
+ <div class="header-left" v-has="'home:saveDevicePositionAndSize'" v-if="!isFullScreen">
<a-space>
<span v-if="!isSwitchChecked">寮�鍚姛鑳�</span>
<span v-else>鍏抽棴鍔熻兘</span>
@@ -14,7 +14,14 @@
:disabled="isSwitchChecked"
/>
</a-space>
- <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">淇濆瓨浣嶇疆 </a-button>
+ <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">淇濆瓨浣嶇疆</a-button>
+ </div>
+ <div class="device-status-info">
+ <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
+ <div>{{ item.label }}</div>
+ <div class="status-square" :style="{ backgroundColor: item.color }"></div>
+ <div>{{ getDeviceNumberByStatus(item.value) }}</div>
+ </a-space>
</div>
</header>
@@ -29,15 +36,16 @@
:y="item.coordinateTop"
v-on:resizing="resize($event, index)"
v-on:dragging="resize($event, index)"
- :parentLimitation="true"
- :minw="100"
- :minh="100"
+ :parentLimitation="parentLimitation"
+ :parentH="parentH"
+ :minw="70"
+ :minh="70"
:isDraggable="isDraggable"
:isResizable="isResizable"
:stickSize="6"
>
<div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
- @mouseenter="openDetail(item)">
+ @click="openDetail(item)">
<div class="device-status">
<div
v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
@@ -64,18 +72,12 @@
class="device-image"
></div>
</div>
- <div class="device-id" :style="{ fontSize: item.fontSize + 'px' }">
+ <div class="device-id" id="deviceId"
+ :style="{ fontSize: item.fontSize + 'px',color:workshopDetails.equipmentIdColor }">
{{ item.equipmentId }}
</div>
</div>
</VueDragResize>
- <div class="device-status-info">
- <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
- <div>{{ item.label }}</div>
- <div class="status-square" :style="{ backgroundColor: item.color }"></div>
- <div>{{ getDeviceNumberByStatus(item.value) }}</div>
- </div>
- </div>
</div>
</dv-border-box-8>
@@ -101,11 +103,13 @@
},
data() {
return {
+ pageHeaderHeight: 80,// 椤靛ご楂樺害
workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
isDraggable: false, // 鏄惁寮�鍚嫋鎷�
isResizable: false, // 鏄惁寮�鍚缉鏀�
isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
+ parentH: 5000,//鐖剁骇楂樺害
deviceList: [
// {
// equipmentId: '123213213123232',// 璁惧ID
@@ -139,7 +143,10 @@
value: 22,
color: '#FF0000'
}
- ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
+ ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛夛紝杩涘叆椤甸潰鏃惰绠椾竴娆★紝闄ら潪閲嶆柊鍔犺浇椤甸潰鍚﹀垯娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴﹀垯涓嶅彂鐢熸敼鍙�
+ isFullScreen: false,// 杩涘叆鐪嬫澘椤甸潰鏃舵槸鍚︿负鍏ㄥ睆妯″紡锛屼笉鍖呮嫭姝ｅ父妯″紡杩涘叆鍚庡垏鎹负鍏ㄥ睆妯″紡
+ parentLimitation: false// 鎷栨嫿鍖哄煙鏄惁闄愬埗鍦ㄧ埗鍏冪礌鍖哄煙鍐�
}
},
watch: {
@@ -183,6 +190,10 @@
this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
this.workshopDetails.backgroundImage
)})`
+
+ this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
+ this.parentH = this.windowHeight - this.pageHeaderHeight
+ this.parentLimitation = true // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿
})
},
@@ -267,20 +278,28 @@
},
openDetail(item) {
- if (item.equipmentStatus == 0) {
- // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒");
- this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒')
- return false
+ if (!this.isSwitchChecked) {
+ if (item.equipmentStatus == 0) {
+ this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒')
+ return false
+ }
+ console.log(item)
+ console.log(this.$refs.EquipmentDetailModal)
+ this.$refs.EquipmentDetailModal.initData(item.equId)
+ this.$refs.EquipmentDetailModal.timerModel(item.equId)
+ // this.equipMessageTimer = setInterval(() => {
+ // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
+ // },1000*10)
}
- console.log(item)
- console.log(this.$refs.EquipmentDetailModal)
- this.$refs.EquipmentDetailModal.initData(item.equId)
- this.$refs.EquipmentDetailModal.timerModel(item.equId)
- // this.equipMessageTimer = setInterval(() => {
- // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
- // },1000*10)
},
+ /**
+ * 娴忚鍣ㄥ昂瀵稿彂鐢熸敼鍙樻椂瑙﹀彂
+ */
+ handleWindowSizeChange() {
+ this.isFullScreen = !this.isFullScreen
+ if (!this.isFullScreen) location.reload() // 濡傛灉涓哄叏灞忔ā寮忥紝鍒欏湪鍒囨崲妯″紡鏃堕噸鏂板姞杞介〉闈互閲嶆柊鑾峰彇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ }
},
created() {
if (this.$route.params.id) {
@@ -291,9 +310,19 @@
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
+
+ this.windowHeight =
+ window.innerHeight ||
+ document.documentElement.clientHeight ||
+ document.body.clientHeight
+
+ // 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡
+ if (this.windowHeight === screen.height) this.isFullScreen = true
+
+ window.addEventListener('resize', this.handleWindowSizeChange)
},
beforeDestroy() {
- // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧�
+ // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
clearInterval(this.timingAcquisition)
this.timingAcquisition = null
}
@@ -307,44 +336,32 @@
color: #fff;
.page-header {
- height: 80px;
font-size: 50px;
text-align: center;
position: relative;
- .header-right {
+ .header-left {
width: 450px;
position: absolute;
- right: 0px;
+ left: 0;
top: 35px;
display: flex;
justify-content: space-evenly;
align-items: center;
font-size: 16px;
}
- }
-
- .content-container {
- position: relative;
- width: 100%;
- height: 100%;
- background-repeat: no-repeat;
- background-size: 100% 100%;
.device-status-info {
+ font-size: 16px;
width: 400px;
position: absolute;
- top: 5px;
- right: 5px;
+ top: 40px;
+ right: 40px;
display: flex;
align-items: center;
justify-content: space-between;
.single-status-info {
- width: 60px;
- display: flex;
- align-items: center;
- justify-content: space-between;
.status-square {
width: 14px;
@@ -354,6 +371,12 @@
}
}
}
+ }
+
+ .content-container {
+ width: 100%;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
.single-device {
position: absolute;
@@ -373,13 +396,16 @@
width: 100%;
height: 100%;
display: flex;
- justify-content: space-between;
+ -webkit-align-items: flex-end;
+ -moz-align-items: flex-end;
+ -ms-align-items: flex-end;
.status-image {
background-size: 100% 100%;
background-repeat: no-repeat;
- width: 45px;
- margin-right: 10px;
+ width: 10px;
+ height: 60%;
+ margin-right: 5px;
}
.device-image {
--
Gitblit v1.9.3