From 14e6fca4c624e161dae9b7e905f9fccb03ba0177 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期一, 13 十一月 2023 10:42:08 +0800
Subject: [PATCH] 1、车间看板页面实现鼠标悬浮于设备上出现设备详细信息弹窗，鼠标移出弹窗消失 2、设备参数阈值管理页面新增至mdc模块设备基础配置菜单下并完成所有布局及功能实现
---
src/views/WorkshopSignage.vue | 526 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 276 insertions(+), 250 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index c566a50..81b35a5 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -36,7 +36,8 @@
: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' }"
+ @mouseenter="openDetail(item)">
<div class="device-status">
<div
v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
@@ -77,293 +78,318 @@
</div>
</div>
</dv-border-box-8>
+
+ <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
</dv-full-screen-container>
</template>
<script>
-import VueDragResize from 'vue-drag-resize'
-import api from '@/api/mdc'
-import { getFileAccessHttpUrl } from '@/api/manage'
+ 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'
-export default {
- components: {
- VueDragResize,
- },
- data() {
- return {
- workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
- isDraggable: false, // 鏄惁寮�鍚嫋鎷�
- isResizable: false, // 鏄惁寮�鍚缉鏀�
- isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
- timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
- deviceList: [
- // {
- // equipmentId: '123213213123232',// 璁惧ID
- // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖
- // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
- // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
- // vw: 100, // 缂╂斁鍏冪礌瀹藉害
- // vh: 100, // 缂╂斁鍏冪礌楂樺害
- // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
- // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛�
- // }
- ], // 璁惧淇℃伅鍒楄〃
- deviceStatusList: [
- {
- label: '鍏虫満',
- value: 0,
- color: '#A8A8A8',
- },
- {
- label: '寰呮満',
- value: 2,
- color: '#FFFF00',
- },
- {
- label: '杩愯',
- value: 3,
- color: '#00EE00',
- },
- {
- label: '鎶ヨ',
- value: 22,
- color: '#FF0000',
- },
- ], // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
- }
- },
- watch: {
- isSwitchChecked: {
- handler(newVal) {
- if (!newVal) {
- console.log('瀹氭椂鍣ㄥ紑鍚腑')
- this.timingAcquisition = setInterval(() => {
- this.getDeviceListByApi(this.$route.params.id)
- }, 2000)
- } else {
- console.log('鍏抽棴瀹氭椂鍣�')
- clearInterval(this.timingAcquisition)
- this.timingAcquisition = null
- }
- },
- immediate: true,
- },
- },
- methods: {
- /**
- * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃
- * @param id 杞﹂棿Id
- */
- getDeviceListByApi(id) {
- console.log('閲嶆柊鍒锋柊')
- api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
- if (res.result && res.result.length > 0) {
- this.deviceList = res.result
- }
- })
- },
+ message.config({
+ maxCount: 3
+ })
- /**
- * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅
- * @param id 杞﹂棿Id
- */
- getWorkshopDetailsByApi(id) {
- api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
- this.workshopDetails = res.result
- this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
- this.workshopDetails.backgroundImage
- )})`
- })
+ export default {
+ components: {
+ VueDragResize,
+ EquipmentDetailModal
},
-
- /**
- * 鍥剧墖棰勮
- * @param text 鍥剧墖鍦板潃
- */
- getImgView(text) {
- if (text && text.indexOf(',') > 0) {
- text = text.substring(0, text.indexOf(','))
+ data() {
+ return {
+ workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
+ isDraggable: false, // 鏄惁寮�鍚嫋鎷�
+ isResizable: false, // 鏄惁寮�鍚缉鏀�
+ isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
+ timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
+ deviceList: [
+ // {
+ // equipmentId: '123213213123232',// 璁惧ID
+ // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖
+ // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
+ // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
+ // vw: 100, // 缂╂斁鍏冪礌瀹藉害
+ // vh: 100, // 缂╂斁鍏冪礌楂樺害
+ // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
+ // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛�
+ // }
+ ], // 璁惧淇℃伅鍒楄〃
+ deviceStatusList: [
+ {
+ label: '鍏虫満',
+ value: 0,
+ color: '#A8A8A8'
+ },
+ {
+ label: '寰呮満',
+ value: 2,
+ color: '#FFFF00'
+ },
+ {
+ label: '杩愯',
+ value: 3,
+ color: '#00EE00'
+ },
+ {
+ label: '鎶ヨ',
+ value: 22,
+ color: '#FF0000'
+ }
+ ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
}
- return getFileAccessHttpUrl(text)
},
-
- /**
- * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵�
- */
- saveDevicePositionAndSizeByApi() {
- console.log('瑙﹀彂淇濆瓨')
- if (this.isOperatingDevice) {
- api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
- if (res.code === 200) {
- this.$notification.success({
- message: '娑堟伅',
- description: res.message,
- })
- this.isOperatingDevice = false
- if (this.isSwitchChecked) {
- this.isSwitchChecked = false
- this.isResizable = !this.isResizable
- this.isDraggable = !this.isDraggable
- }
- this.getDeviceListByApi(this.$route.params.id)
+ watch: {
+ isSwitchChecked: {
+ handler(newVal) {
+ if (!newVal) {
+ console.log('瀹氭椂鍣ㄥ紑鍚腑')
+ this.timingAcquisition = setInterval(() => {
+ this.getDeviceListByApi(this.$route.params.id)
+ }, 2000)
+ } else {
+ console.log('鍏抽棴瀹氭椂鍣�')
+ clearInterval(this.timingAcquisition)
+ this.timingAcquisition = null
+ }
+ },
+ immediate: true
+ }
+ },
+ methods: {
+ /**
+ * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃
+ * @param id 杞﹂棿Id
+ */
+ getDeviceListByApi(id) {
+ console.log('閲嶆柊鍒锋柊')
+ api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
+ if (res.result && res.result.length > 0) {
+ this.deviceList = res.result
}
})
- } else {
- this.$notification.warning({
- message: '娑堟伅',
- description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�',
+ },
+
+ /**
+ * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅
+ * @param id 杞﹂棿Id
+ */
+ getWorkshopDetailsByApi(id) {
+ api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
+ this.workshopDetails = res.result
+ this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
+ this.workshopDetails.backgroundImage
+ )})`
})
+ },
+
+ /**
+ * 鍥剧墖棰勮
+ * @param text 鍥剧墖鍦板潃
+ */
+ getImgView(text) {
+ if (text && text.indexOf(',') > 0) {
+ text = text.substring(0, text.indexOf(','))
+ }
+ return getFileAccessHttpUrl(text)
+ },
+
+ /**
+ * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵�
+ */
+ saveDevicePositionAndSizeByApi() {
+ console.log('瑙﹀彂淇濆瓨')
+ if (this.isOperatingDevice) {
+ api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
+ if (res.code === 200) {
+ this.$notification.success({
+ message: '娑堟伅',
+ description: res.message
+ })
+ this.isOperatingDevice = false
+ if (this.isSwitchChecked) {
+ this.isSwitchChecked = false
+ this.isResizable = !this.isResizable
+ this.isDraggable = !this.isDraggable
+ }
+ this.getDeviceListByApi(this.$route.params.id)
+ }
+ })
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�'
+ })
+ }
+ },
+
+ /**
+ * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
+ * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
+ * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
+ */
+ resize(newRect, index) {
+ // if (newRect.width > 100) {
+ // if (newRect.width / newRect.height < 2) {
+ // this.deviceList[index].fontSize = newRect.width / 10
+ // } else {
+ // this.deviceList[index].fontSize = newRect.height / 5
+ // }
+ // } else {
+ // this.deviceList[index].fontSize = 12
+ // }
+ this.deviceList[index].vw = newRect.width
+ this.deviceList[index].vh = newRect.height
+ this.deviceList[index].coordinateTop = newRect.top
+ this.deviceList[index].coordinateLeft = newRect.left
+ },
+
+ /**
+ * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲�
+ * @param value 璁惧鐘舵�佸��
+ * @returns {number} 璁惧鏁伴噺
+ */
+ getDeviceNumberByStatus(value) {
+ return this.deviceList.filter((item) => item.equipmentStatus === value).length
+ },
+
+ /**
+ * 寮�鍚姛鑳借Е鍙戜簨浠�
+ * @param checked 褰撳墠switch鐘舵�侊紝鏄惁寮�鍚紝鍒濆涓篺alse
+ */
+ handleSwitchChange(checked) {
+ this.isOperatingDevice = true
+ this.isResizable = !this.isResizable
+ this.isDraggable = !this.isDraggable
+ },
+
+ openDetail(item) {
+ 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)
+ },
+
+ },
+ created() {
+ if (this.$route.params.id) {
+ this.getDeviceListByApi(this.$route.params.id)
+ this.getWorkshopDetailsByApi(this.$route.params.id)
}
},
-
- /**
- * 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
- * @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
- * @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
- */
- resize(newRect, index) {
- // if (newRect.width > 100) {
- // if (newRect.width / newRect.height < 2) {
- // this.deviceList[index].fontSize = newRect.width / 10
- // } else {
- // this.deviceList[index].fontSize = newRect.height / 5
- // }
- // } else {
- // this.deviceList[index].fontSize = 12
- // }
- this.deviceList[index].vw = newRect.width
- this.deviceList[index].vh = newRect.height
- this.deviceList[index].coordinateTop = newRect.top
- this.deviceList[index].coordinateLeft = newRect.left
+ mounted() {
+ // 绂佹鐢ㄦ埛閫変腑鍐呭
+ document.onselectstart = () => false
},
-
- /**
- * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲�
- * @param value 璁惧鐘舵�佸��
- * @returns {number} 璁惧鏁伴噺
- */
- getDeviceNumberByStatus(value) {
- return this.deviceList.filter((item) => item.equipmentStatus === value).length
- },
-
- /**
- * 寮�鍚姛鑳借Е鍙戜簨浠�
- * @param checked 褰撳墠switch鐘舵�侊紝鏄惁寮�鍚紝鍒濆涓篺alse
- */
- handleSwitchChange(checked) {
- this.isOperatingDevice = true
- this.isResizable = !this.isResizable
- this.isDraggable = !this.isDraggable
- },
- },
- created() {
- if (this.$route.params.id) {
- this.getDeviceListByApi(this.$route.params.id)
- this.getWorkshopDetailsByApi(this.$route.params.id)
+ beforeDestroy() {
+ // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧�
+ clearInterval(this.timingAcquisition)
+ this.timingAcquisition = null
}
- },
- mounted() {
- // 绂佹鐢ㄦ埛閫変腑鍐呭
- document.onselectstart = () => false
- },
- beforeDestroy() {
- // 纭繚閿�姣佸畾鏃跺櫒鍙婂洖鏀惰祫婧�
- clearInterval(this.timingAcquisition)
- this.timingAcquisition = null
- },
-}
+ }
</script>
<style scoped lang="less">
-.full-screen-container {
- background-image: url('../assets/Bj.jpg');
- background-size: 100% 100%;
- color: #fff;
-
- .page-header {
- height: 80px;
- font-size: 50px;
- text-align: center;
- position: relative;
-
- .header-right {
- width: 450px;
- position: absolute;
- right: 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;
+ .full-screen-container {
+ background-image: url('../assets/Bj.jpg');
background-size: 100% 100%;
+ color: #fff;
- .device-status-info {
- width: 400px;
- position: absolute;
- top: 5px;
- right: 5px;
- display: flex;
- align-items: center;
- justify-content: space-between;
+ .page-header {
+ height: 80px;
+ font-size: 50px;
+ text-align: center;
+ position: relative;
- .single-status-info {
- width: 60px;
+ .header-right {
+ width: 450px;
+ position: absolute;
+ right: 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 {
+ width: 400px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
- .status-square {
- width: 14px;
- height: 14px;
- border: 1px solid #fff;
- border-radius: 2px;
+ .single-status-info {
+ width: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .status-square {
+ width: 14px;
+ height: 14px;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ }
}
}
- }
- .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%;
+ .single-device {
+ position: absolute;
+ border: 1px solid transparent;
+ padding: 10px;
display: flex;
+ flex-direction: column;
+ align-items: center;
justify-content: space-between;
+ cursor: default;
- .status-image {
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 45px;
- margin-right: 10px;
+ &:active {
+ border: 1px solid #1890ff;
}
- .device-image {
- background-size: 100% 100%;
- background-repeat: no-repeat;
+ .device-status {
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .status-image {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 45px;
+ margin-right: 10px;
+ }
+
+ .device-image {
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ }
}
}
}
}
-}
</style>
\ No newline at end of file
--
Gitblit v1.9.3