From 1e1e70da5288f47d8770ba2e7f22f3362e5b577c Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 08 十二月 2023 17:16:35 +0800
Subject: [PATCH] 1、全局修改密码弹窗中的新密码校验长度与数据字典password_length设置保持一致 2、报警分析页面优化过快点击多次表格行时图表内容出现数据残留以及加载图表应设置加载中动画，若不设置用户在查询时短时间内不清楚有无数据 3、车间看板以及设备监控页面设备详情弹窗右上角增加关闭按钮、设备详情弹窗透明度加深、设备详情弹窗图表表盘指针对比色加强、调整设备详情弹窗中描述列表子项标题对齐方式由左对齐改为右对齐，锁定运行数据描述列表子项数值宽度，超出部分隐藏出现省略号，悬浮出现气泡卡片 4、设备利用率、设备开动率、班次利用率页面表格前三列增加表头，依次为公司、车间、工段以及表格有关时间值调整为若小时或分钟为0则不显示 5、设备综合效率分析页面表格数据默认每页最多显示10条改为20条 6、设备加工工件报表页面完成布局及功能实现
---
src/views/WorkshopSignage.vue | 246 +++++++++++++++++++++++++++++++++++-------------
1 files changed, 177 insertions(+), 69 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index d13018c..5dc5cb2 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,62 +1,86 @@
<template>
<dv-full-screen-container class="full-screen-container">
- <header class="page-header">
- {{workshopDetails.workshopName}}
- <div class="header-right" v-has="'home:saveDevicePositionAndSize'">
+ <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
+ {{ workshopDetails.workshopName }}
+ <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
<a-space>
<span v-if="!isSwitchChecked">寮�鍚姛鑳�</span>
<span v-else>鍏抽棴鍔熻兘</span>
- <a-switch checked-children="寮�" un-checked-children="鍏�" @change="handleSwitchChange"
- v-model="isSwitchChecked" :disabled="isSwitchChecked"/>
+ <a-switch
+ checked-children="寮�"
+ un-checked-children="鍏�"
+ @change="handleSwitchChange"
+ v-model="isSwitchChecked"
+ :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>
<dv-border-box-8>
<div class="content-container" ref="deviceContainerRef">
- <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
- :h="item.vh" :x="item.coordinateLeft" :y="item.coordinateTop"
- v-on:resizing="resize($event,index)"
- v-on:dragging="resize($event,index)"
- :parentLimitation="true"
- :minw="100"
- :minh="100"
- :isDraggable="isDraggable"
- :isResizable="isResizable"
- :stickSize="6"
+ <VueDragResize
+ v-for="(item, index) in deviceList"
+ :key="item.equipmentId"
+ :w="item.vw"
+ :h="item.vh"
+ :x="item.coordinateLeft"
+ :y="item.coordinateTop"
+ v-on:resizing="resize($event, index)"
+ v-on:dragging="resize($event, index)"
+ :parentLimitation="true"
+ :minw="70"
+ :minh="70"
+ :isDraggable="isDraggable"
+ :isResizable="isResizable"
+ :stickSize="6"
>
- <div class="single-device"
- :style="{width: item.vw+ 'px',height:item.vh+'px'}">
+ <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
+ @click="openDetail(item)">
<div class="device-status">
- <div v-if="item.equipmentStatus==2||item.equipmentStatus==1"
- :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
- <div v-if="item.equipmentStatus==22" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
- class="status-image"></div>
- <div v-if="item.equipmentStatus==0" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
- class="status-image"></div>
- <div v-if="item.equipmentStatus==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
- class="status-image"></div>
<div
- :style="{backgroundImage:`url(${getImgView(item.equipmentImage)||require('@/assets/8.png')})`}"
- class="device-image"></div>
+ v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
+ :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 22"
+ :style="{ backgroundImage: `url(${require('@/assets/red.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 0"
+ :style="{ backgroundImage: `url(${require('@/assets/gray.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 3"
+ :style="{ backgroundImage: `url(${require('@/assets/green.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/8.png')})` }"
+ class="device-image"
+ ></div>
</div>
- <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
- {{item.equipmentId}}
+ <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>
+
+ <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
</dv-full-screen-container>
</template>
@@ -64,13 +88,25 @@
import VueDragResize from 'vue-drag-resize'
import api from '@/api/mdc'
import { getFileAccessHttpUrl } from '@/api/manage'
+ import EquipmentDetailModal from './mdc/base/modules/WorkshopSignage/EquipmentDetailModal'
+ import { message } from 'ant-design-vue'
+
+ message.config({
+ maxCount: 3
+ })
export default {
components: {
- VueDragResize
+ VueDragResize,
+ EquipmentDetailModal
},
data() {
return {
+ pageHeaderHeight: 80,// 椤靛ご楂樺害
+ taskBarHeight: window.screen.height - window.screen.availHeight,// 灞忓箷搴曢儴浠诲姟鏍忛珮搴�
+ utilsBarHeight: window.outerHeight - window.innerHeight,// 娴忚鍣ㄥ伐鍏锋爮楂樺害
+ normalPageHeight: 0,
+ fullScreenPageHeight: 0,
workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
isDraggable: false, // 鏄惁寮�鍚嫋鎷�
isResizable: false, // 鏄惁寮�鍚缉鏀�
@@ -109,7 +145,8 @@
value: 22,
color: '#FF0000'
}
- ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
+ ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ isFullscreen: false
}
},
watch: {
@@ -136,7 +173,7 @@
*/
getDeviceListByApi(id) {
console.log('閲嶆柊鍒锋柊')
- api.getDeviceListInWorkshopSignagePageApi(id).then(res => {
+ api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
if (res.result && res.result.length > 0) {
this.deviceList = res.result
}
@@ -148,9 +185,20 @@
* @param id 杞﹂棿Id
*/
getWorkshopDetailsByApi(id) {
- api.getWorkshopDetailByWorkshopIdApi(id).then(res => {
+ api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
this.workshopDetails = res.result
- this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(this.workshopDetails.backgroundImage)})`
+ this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
+ this.workshopDetails.backgroundImage
+ )})`
+
+ this.fullScreenPageHeight = `calc(100% - ${this.pageHeaderHeight}px)`
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+
+ if (this.isFullscreen) {
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+ } else {
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
})
},
@@ -171,7 +219,7 @@
saveDevicePositionAndSizeByApi() {
console.log('瑙﹀彂淇濆瓨')
if (this.isOperatingDevice) {
- api.saveDevicePositionAndSizeApi(this.deviceList).then(res => {
+ api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
if (res.code === 200) {
this.$notification.success({
message: '娑堟伅',
@@ -192,7 +240,6 @@
description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�'
})
}
-
},
/**
@@ -222,7 +269,7 @@
* @returns {number} 璁惧鏁伴噺
*/
getDeviceNumberByStatus(value) {
- return this.deviceList.filter(item => item.equipmentStatus === value).length
+ return this.deviceList.filter((item) => item.equipmentStatus === value).length
},
/**
@@ -233,22 +280,83 @@
this.isOperatingDevice = true
this.isResizable = !this.isResizable
this.isDraggable = !this.isDraggable
+ },
+
+ openDetail(item) {
+ if (!this.isSwitchChecked) {
+ if (item.equipmentStatus == 0) {
+ // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒");
+ 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)
+ }
+ },
+
+ onResize() {
+ // 鍒╃敤灞忓箷鍒嗚鲸鐜囧拰window瀵硅薄鐨勫唴楂樺害鏉ュ垽鏂吋瀹笽E
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+ console.log(winFlag) // true鍏ㄥ睆 false涓嶆槸鍏ㄥ睆
+ console.log('浠诲姟鏍忛珮搴�', this.taskBarHeight)
+ console.log('宸ュ叿鏍忛珮搴�', this.utilsBarHeight)
+
+ //鍏ㄥ睆鍒欏浘绾哥洅瀛愬彲瑙嗛珮搴﹀噺鍘婚〉澶撮珮搴︼紝姝ｅ父绐楀彛鍒欏噺鍘婚〉澶淬�佸睆骞曞簳閮ㄤ换鍔℃爮浠ュ強娴忚鍣ㄥ伐鍏锋爮楂樺害
+ if (winFlag) {
+ console.log('瑙﹀彂鍏ㄥ睆')
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+
+ } else {
+ console.log('鍏抽棴鍏ㄥ睆')
+ // 濡傛灉鍒锋柊椤甸潰閲嶆柊鍔犺浇鍚庨粯璁ゅ浜庡叏灞忔ā寮忥紝鍒欏伐鍏锋爮楂樺害涓鸿礋鏁帮紝鍥犳闇�瑕侀��鍑哄叏灞忔ā寮忔椂閲嶇疆宸ュ叿鏍忛珮搴�
+ this.utilsBarHeight = window.outerHeight - window.innerHeight
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
}
+
},
created() {
if (this.$route.params.id) {
this.getDeviceListByApi(this.$route.params.id)
this.getWorkshopDetailsByApi(this.$route.params.id)
}
+
+
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+
+ // window.addEventListener('resize', this.onResize)
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
},
beforeDestroy() {
- // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧�
+ // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
clearInterval(this.timingAcquisition)
this.timingAcquisition = null
+ // window.removeEventListener('resize', this.onResize)
}
}
</script>
@@ -260,44 +368,36 @@
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: 0px;
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;
+ /*width: 70px;*/
+ /*display: flex;*/
+ /*align-items: center;*/
+ /*justify-content: space-between;*/
.status-square {
width: 14px;
@@ -307,6 +407,14 @@
}
}
}
+ }
+
+ .content-container {
+ width: 100%;
+ /*height: calc(100% - 200px);*/
+ /*height: 100%;*/
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
.single-device {
position: absolute;
@@ -326,13 +434,14 @@
width: 100%;
height: 100%;
display: flex;
- justify-content: space-between;
+ align-items: 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 {
@@ -343,7 +452,6 @@
}
}
}
-
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3