From 91e8c2871a3947b23cfe90344f7e1bed505b3633 Mon Sep 17 00:00:00 2001
From: Lius <Lius2225@163.com>
Date: 星期一, 04 三月 2024 15:45:25 +0800
Subject: [PATCH] 设备管理添加字段
---
src/views/WorkshopSignage.vue | 267 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 206 insertions(+), 61 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index c9209c4..c803017 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,32 +1,49 @@
<template>
<dv-full-screen-container class="full-screen-container">
- <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
- {{ workshopDetails.workshopName }}
- <div class="header-left" v-has="'home:saveDevicePositionAndSize'" v-if="!isFullScreen">
- <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">淇濆瓨浣嶇疆</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>
+ <div>
+ <!--椤靛ご鍖哄煙-->
+ <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
+ <a-row style="height: 100%">
+ <a-col :span="7" class="header-left">
+ <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-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">淇濆瓨浣嶇疆</a-button>
+ </a-space>
+ </a-col>
- <dv-border-box-8>
- <div class="content-container" ref="deviceContainerRef">
+ <a-col :span="10" class="workshop-name">{{ workshopDetails.workshopName }}</a-col>
+
+ <a-col :span="7" class="device-status-info">
+ <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"-->
+ <!--@click="handleScreenDevive(item)">-->
+ <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>-->
+ <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>-->
+ <!--<!–<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>–>-->
+ <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>-->
+ <!--</a-space>-->
+ <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
+ <div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>
+ <div class="status-square" :style="{ backgroundColor: item.color }"></div>
+ <!--<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>-->
+ <div>{{getDeviceNumberByStatus(item.value) }}</div>
+ </a-space>
+ </a-col>
+ </a-row>
+ </header>
+
+ <!--鎷栨嫿璁惧鍖哄煙-->
+ <div class="content-container" ref="deviceContainerRef" style="overflow: auto">
+ <img :src="imgSrc" width="1920" height="900">
+ <div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div>
+ <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div>
<VueDragResize
v-for="(item, index) in deviceList"
:key="item.equipmentId"
@@ -38,11 +55,13 @@
v-on:dragging="resize($event, index)"
:parentLimitation="parentLimitation"
:parentH="parentH"
+ :parentW="parentW"
:minw="70"
:minh="70"
:isDraggable="isDraggable"
:isResizable="isResizable"
:stickSize="6"
+ @deactivated="showGuideline = 'none'"
>
<div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
@click="openDetail(item)">
@@ -73,15 +92,15 @@
></div>
</div>
<div class="device-id" id="deviceId"
- :style="{ fontSize: item.fontSize + 'px',color:workshopDetails.equipmentIdColor }">
+ :style="{ color:workshopDetails.equipmentIdColor }">
{{ item.equipmentId }}
</div>
</div>
</VueDragResize>
</div>
- </dv-border-box-8>
- <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
+ <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
+ </div>
</dv-full-screen-container>
</template>
@@ -110,6 +129,10 @@
isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
parentH: 5000,//鐖剁骇楂樺害
+ parentW: 1920,//鐖剁骇瀹藉害
+ showGuideline: 'none',
+ guidelineXTop: 0,
+ guidelineYLeft: 0,
deviceList: [
// {
// equipmentId: '123213213123232',// 璁惧ID
@@ -118,35 +141,47 @@
// coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
// vw: 100, // 缂╂斁鍏冪礌瀹藉害
// vh: 100, // 缂╂斁鍏冪礌楂樺害
- // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
// equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛�
// }
], // 璁惧淇℃伅鍒楄〃
+ deviceList_copy: [],
deviceStatusList: [
+ // {
+ // label: '鍏ㄩ儴',
+ // value: 99,
+ // color: '#fff',
+ // checked: true
+ // },
{
label: '鍏虫満',
value: 0,
- color: '#A8A8A8'
+ color: '#A8A8A8',
+ checked: false
},
{
label: '寰呮満',
value: 2,
- color: '#FFFF00'
+ color: '#FFFF00',
+ checked: false
},
{
label: '杩愯',
value: 3,
- color: '#00EE00'
+ color: '#00EE00',
+ checked: false
},
{
label: '鎶ヨ',
value: 22,
- color: '#FF0000'
+ color: '#FF0000',
+ checked: false
}
],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
- windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛夛紝杩涘叆椤甸潰鏃惰绠椾竴娆★紝闄ら潪閲嶆柊鍔犺浇椤甸潰鍚﹀垯娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴﹀垯涓嶅彂鐢熸敼鍙�
+ windowHeight: null,// 褰撳墠娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︼紙锛堜笉鍖呮嫭宸ュ叿鏍忋�佷功绛俱�佸簳閮ㄤ换鍔℃爮锛�
isFullScreen: false,// 杩涘叆鐪嬫澘椤甸潰鏃舵槸鍚︿负鍏ㄥ睆妯″紡锛屼笉鍖呮嫭姝ｅ父妯″紡杩涘叆鍚庡垏鎹负鍏ㄥ睆妯″紡
- parentLimitation: false// 鎷栨嫿鍖哄煙鏄惁闄愬埗鍦ㄧ埗鍏冪礌鍖哄煙鍐�
+ parentLimitation: false,// 鎷栨嫿鍖哄煙鏄惁闄愬埗鍦ㄧ埗鍏冪礌鍖哄煙鍐�,
+ checkedStatusCount: null,// 宸插嬀閫夌瓫閫夌姸鎬佷釜鏁�
+ imgSrc: ''// 杞﹂棿鍥剧焊鍦板潃
}
},
watch: {
@@ -176,6 +211,7 @@
api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
if (res.result && res.result.length > 0) {
this.deviceList = res.result
+ this.deviceList_copy = res.result
}
})
},
@@ -187,12 +223,13 @@
getWorkshopDetailsByApi(id) {
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.imgSrc = this.getImgView(this.workshopDetails.backgroundImage)
this.$refs.deviceContainerRef.style.height = (this.windowHeight - this.pageHeaderHeight) + 'px'
- this.parentH = this.windowHeight - this.pageHeaderHeight
+ // this.parentH = this.windowHeight - this.pageHeaderHeight
+ this.parentH = 900
this.parentLimitation = true // 鍦ㄧ埗鍏冪礌楂樺害璁剧疆鍚庡啀璁剧疆闄愬埗鎷栨嫿鍖哄煙锛屼笉杩欐牱鏈夋鐜囧鑷寸埗鍏冪礌楂樺害鏈缃氨闄愬埗鎷栨嫿
})
},
@@ -252,10 +289,13 @@
// } else {
// this.deviceList[index].fontSize = 12
// }
+ this.showGuideline = 'block'
this.deviceList[index].vw = newRect.width
this.deviceList[index].vh = newRect.height
this.deviceList[index].coordinateTop = newRect.top
this.deviceList[index].coordinateLeft = newRect.left
+ this.guidelineXTop = newRect.top + newRect.height / 2
+ this.guidelineYLeft = newRect.left + newRect.width / 2
},
/**
@@ -264,7 +304,8 @@
* @returns {number} 璁惧鏁伴噺
*/
getDeviceNumberByStatus(value) {
- return this.deviceList.filter((item) => item.equipmentStatus === value).length
+ if (value === 99) return this.deviceList_copy.length
+ return this.deviceList_copy.filter((item) => item.equipmentStatus === value).length
},
/**
@@ -297,8 +338,87 @@
* 娴忚鍣ㄥ昂瀵稿彂鐢熸敼鍙樻椂瑙﹀彂
*/
handleWindowSizeChange() {
- this.isFullScreen = !this.isFullScreen
- if (!this.isFullScreen) location.reload() // 濡傛灉涓哄叏灞忔ā寮忥紝鍒欏湪鍒囨崲妯″紡鏃堕噸鏂板姞杞介〉闈互閲嶆柊鑾峰彇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ // this.isFullScreen = !this.isFullScreen
+ // if (!this.isFullScreen) location.reload() // 濡傛灉涓哄叏灞忔ā寮忥紝鍒欏湪鍒囨崲妯″紡鏃堕噸鏂板姞杞介〉闈互閲嶆柊鑾峰彇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴�
+ const windowHeight =
+ window.innerHeight ||
+ document.documentElement.clientHeight ||
+ document.body.clientHeight
+ // this.parentH = 99999
+ // const scaleRate = windowHeight / this.windowHeight
+ // this.windowHeight = windowHeight
+ this.$refs.deviceContainerRef.style.height = (windowHeight - this.pageHeaderHeight) + 'px'
+ // const timer = setTimeout(() => {
+ // this.deviceList.forEach(item => {
+ // item.coordinateTop = item.coordinateTop * scaleRate
+ // item.vh = item.vh * scaleRate
+ // console.log('vh', item.vh)
+ // })
+ // this.parentH = windowHeight - this.pageHeaderHeight
+ // console.log('changeDeviceList', this.deviceList)
+ // }, 500)
+ // console.log('scaleRate', scaleRate)
+ },
+
+ checkboxChange(obj) {
+ //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩�
+ if (this.isOperatingDevice) {
+ obj.checked = !obj.checked
+ if (obj.value !== 99) {
+ if (obj.checked) this.checkedStatusCount++
+ else this.checkedStatusCount--
+ }
+
+ if (obj.value == 99) {
+ this.deviceStatusList.forEach(item => {
+ if (item.value !== obj.value) item.checked = obj.checked
+ })
+ if (obj.checked) {
+ this.deviceList = this.deviceList_copy
+ this.checkedStatusCount = this.deviceStatusList.length - 1
+ } else {
+ this.deviceList = []
+ this.checkedStatusCount = 0
+ }
+ } else {
+ this.deviceStatusList.forEach(item => {
+ if (item.value === 99) {
+ if (this.checkedStatusCount !== this.deviceStatusList.length - 1 || this.checkedStatusCount === 0) item.checked = false
+ if (this.checkedStatusCount === this.deviceStatusList.length - 1) item.checked = true
+ }
+ })
+ if (obj.checked) {
+ this.deviceList.push(...this.deviceList_copy.filter(item => item.equipmentStatus === obj.value))
+ } else {
+ this.deviceList = this.deviceList.filter(item => item.equipmentStatus !== obj.value)
+ }
+ }
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�'
+ })
+ }
+ },
+
+ handleScreenDevive(obj) {
+ //闇�瑕佸垽鏂槸鍚﹀紑鍚姛鑳斤紝鐩殑鏄负浜嗗叧闂畾鏃跺櫒閬垮厤绛涢�夊悗璁惧琚畾鏃跺埛鏂扮殑鏂拌澶囪鐩�
+ if (this.isOperatingDevice) {
+ obj.checked = true
+ this.deviceList = this.deviceList_copy
+ this.deviceStatusList.forEach(item => {
+ if (item.value !== obj.value) item.checked = false
+ })
+
+ if (obj.value == 99) this.deviceList = this.deviceList_copy
+ else this.deviceList = this.deviceList.filter(item => item.equipmentStatus === obj.value)
+
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛岀瓫閫�'
+ })
+ }
}
},
created() {
@@ -306,6 +426,7 @@
this.getDeviceListByApi(this.$route.params.id)
this.getWorkshopDetailsByApi(this.$route.params.id)
}
+ this.checkedStatusCount = this.deviceStatusList.length - 1
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
@@ -317,7 +438,7 @@
document.body.clientHeight
// 鍒ゆ柇娴忚鍣ㄥ彲瑙嗗尯鍩熼珮搴︽槸鍚︾瓑浜庡垎杈ㄧ巼锛岃嫢鐩哥瓑鍒欒〃绀鸿繘鍏ユ椂娴忚鍣ㄤ负鍏ㄥ睆妯″紡
- if (this.windowHeight === screen.height) this.isFullScreen = true
+ // if (this.windowHeight === screen.height) this.isFullScreen = true
window.addEventListener('resize', this.handleWindowSizeChange)
},
@@ -336,38 +457,41 @@
color: #fff;
.page-header {
- font-size: 50px;
- text-align: center;
- position: relative;
+ /*font-size: 50px;*/
+ /*text-align: center;*/
+ /*position: relative;*/
.header-left {
- width: 450px;
- position: absolute;
- left: 0;
- top: 35px;
+ height: 100%;
display: flex;
- justify-content: space-evenly;
+ justify-content: center;
align-items: center;
- font-size: 16px;
+ padding-top: 20px;
+ }
+
+ .workshop-name {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 50px;
}
.device-status-info {
- font-size: 16px;
- width: 400px;
- position: absolute;
- top: 40px;
- right: 40px;
+ height: 100%;
display: flex;
+ justify-content: flex-end;
align-items: center;
- justify-content: space-between;
+ padding-top: 20px;
.single-status-info {
+ margin: 10px;
+ cursor: pointer;
.status-square {
width: 14px;
height: 14px;
border: 1px solid #fff;
- border-radius: 2px;
+ border-radius: 3px;
}
}
}
@@ -377,6 +501,22 @@
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
+ position: relative;
+
+ .guideline{
+ position: absolute;
+ border: 1px dashed #ccc;
+ }
+
+ .guidelineX {
+ width: 1920px;
+ left: 0;
+ }
+
+ .guidelineY {
+ top: 0;
+ height: 900px;
+ }
.single-device {
position: absolute;
@@ -418,4 +558,9 @@
}
}
}
+
+ /deep/ .ant-checkbox-inner {
+ background-color: transparent;
+ border-color: #fff;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3