From b634276e85d71de22e02cbcea52e907f37a45cac Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 13 十月 2023 16:11:51 +0800
Subject: [PATCH] 1、基本实现大屏车间管理页所有功能 2、使用后台数据基本实现车间看板页面所有功能
---
src/views/WorkshopSignage.vue | 313 ++++++++++++++++++++++++++++++---------------------
1 files changed, 183 insertions(+), 130 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index fc8a61f..f15d63d 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,49 +1,60 @@
<template>
<dv-full-screen-container class="full-screen-container">
<header class="page-header">
- {{getWorkshopName}}
- <div class="header-right">
+ {{workshopDetails.workshopName}}
+ <div class="header-right" 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-space>
<a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi"
- v-has="'home:saveDevicePositionAndSize'">淇濆瓨浣嶇疆
+ >淇濆瓨浣嶇疆
</a-button>
</div>
</header>
- <dv-border-box-8 class="content-container">
- <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
- :h="item.vh" :x="item.left" :y="item.top"
- v-on:resizing="resize($event,index)"
- v-on:dragging="resize($event,index)"
- :parentLimitation="true"
- :minw="100"
- :minh="100"
- :id="item.equipmentId"
- :stickSize="6"
- >
- <div class="single-device"
- :style="{width: item.vw+ 'px',height:item.vh+'px'}">
- <div class="device-status">
- <div v-if="item.status==0"
- :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
- <div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
- class="status-image"></div>
- <div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
- class="status-image"></div>
- <div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
- class="status-image"></div>
- <div
- :style="{backgroundImage:`url(${item.equipmentImageUrl})`}" class="device-image"></div>
+ <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"
+ :id="item.equipmentId"
+ :stickSize="6"
+ >
+ <div class="single-device"
+ :style="{width: item.vw+ 'px',height:item.vh+'px'}">
+ <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>
+ </div>
+ <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
+ {{item.equipmentId}}
+ </div>
</div>
- <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
- {{item.equipmentId}}
+ </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>
- </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>
</dv-border-box-8>
@@ -52,6 +63,8 @@
<script>
import VueDragResize from 'vue-drag-resize'
+ import api from '@/api/mdc'
+ import { getFileAccessHttpUrl } from '@/api/manage'
export default {
components: {
@@ -59,69 +72,33 @@
},
data() {
return {
- // 璁惧淇℃伅鍒楄〃
+ // 杞﹂棿璇︾粏淇℃伅,
+ workshopDetails: {},
+ isDraggable: false, // 鏄惁寮�鍚嫋鎷�
+ isResizable: false, // 鏄惁寮�鍚缉鏀�
+ isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
+ timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
deviceList: [
- {
- equipmentId: '123213213123232',// 璁惧ID
- equipmentImageUrl: require('@/assets/8.png'), // 璁惧鍥剧墖
- top: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
- left: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
- vw: 100, // 缂╂斁鍏冪礌瀹藉害
- vh: 100, // 缂╂斁鍏冪礌楂樺害
- fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
- status: 1 // 璁惧鐘舵�� 0:寰呮満 1:鎶ヨ 2:鍏虫満 3:杩愯
- },
- {
- equipmentId: '512346789561232',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 500,
- left: 753,
- vw: 100,
- vh: 100,
- fontSize: 12,
- status: 0
- },
- {
- equipmentId: '64746965647653',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 300,
- left: 860,
- vw: 100,
- vh: 100,
- fontSize: 12,
- status: 2
- },
- {
- equipmentId: '33548976965462',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 100,
- left: 380,
- vw: 100,
- vh: 100,
- fontSize: 12,
- status: 3
- },
- {
- equipmentId: '85484913549253',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 200,
- left: 1500,
- vw: 100,
- vh: 100,
- fontSize: 12,
- status: 2
- }
- ],
- // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
+ // {
+ // 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: 2,
+ value: 0,
color: '#A8A8A8'
},
{
label: '寰呮満',
- value: 0,
+ value: 2,
color: '#FFFF00'
},
{
@@ -131,80 +108,147 @@
},
{
label: '鎶ヨ',
- value: 1,
+ value: 22,
color: '#FF0000'
}
- ]
+ ] // 璁惧鐘舵�佹寚绀虹伅鍒楄〃
}
},
- computed: {
- getWorkshopName() {
- switch (this.$route.params.workshopId) {
- case '5321':
- return '闀挎矙杞﹂棿'
- case '6312':
- return '澶╂触杞﹂棿'
- case '3463':
- return '姝︽眽杞﹂棿'
- case '8421':
- return '鍖椾含杞﹂棿'
- default:
- return '娴嬭瘯杞﹂棿'
- }
+ 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 workshopId 杞﹂棿Id
+ * @param id 杞﹂棿Id
*/
- getDeviceListByApi(workshopId) {
- console.log('杞﹂棿Id', workshopId)
+ getDeviceListByApi(id) {
+ console.log('閲嶆柊鍒锋柊')
+ api.getDeviceListInWorkshopSignagePageApi(id).then(res => {
+ if (res.result && res.result.length > 0) {
+ this.deviceList = res.result
+ }
+ })
},
+
+ /**
+ * 閫氳繃杞﹂棿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('淇濆瓨浣嶇疆')
+ 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
+ }
+ }
+ })
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�'
+ })
+ }
+
},
+
/**
* 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
* @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
* @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
*/
resize(newRect, index) {
- console.log('newRect', newRect)
- 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
- }
+ // 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].top = newRect.top
- this.deviceList[index].left = newRect.left
+ this.deviceList[index].coordinateTop = newRect.top
+ this.deviceList[index].coordinateLeft = newRect.left
},
+
/**
* 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲�
* @param value 璁惧鐘舵�佸��
* @returns {number} 璁惧鏁伴噺
*/
getDeviceNumberByStatus(value) {
- return this.deviceList.filter(item => item.status === value).length
+ 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)
}
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
},
- created() {
- if (this.$route.params.workshopId) {
- this.getDeviceListByApi(this.$route.params.workshopId)
- }
+ beforeDestroy() {
+ clearInterval(this.timingAcquisition)
+ this.timingAcquisition = null
}
}
</script>
@@ -222,14 +266,23 @@
position: relative;
.header-right {
+ width: 450px;
position: absolute;
- right: 200px;
- top: 0;
+ 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;
--
Gitblit v1.9.3