From 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期五, 29 十一月 2024 19:07:15 +0800
Subject: [PATCH] 1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景
---
src/views/area/main-container.vue | 143 +++++++++++++++++++++++++++++------------------
1 files changed, 89 insertions(+), 54 deletions(-)
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index e9a8b32..aa4ea76 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -51,6 +51,7 @@
@dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
@drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
@click="showDeviceInfo(index,item,$event)"
+ :id="'itemtext@'+item?.deviceInfo?.areaCode+'_'+item?.deviceInfo?.networkPort+'_'+index"
>
{{ item.deviceInfo?.networkPort }}
<device-info v-show="selectedIndex === index " :show_info="show_device_info"
@@ -114,6 +115,7 @@
item_show: false,
code: "",
query_networkPort: '',
+ deviceId:'',
},
//根据
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -252,14 +254,19 @@
});
if(this.code){
// 获取当前页面的背景图和数量
- this.initArea();
+ await this.initArea();
// 根据屏幕初始化格子
- this.initializeElements(); // 在组件加载时初始化 elements
+ await this.initializeElements(); // 在组件加载时初始化 elements
// 初始化设备信息
- this.handleBindElementsItems()
+ await this.handleBindElementsItems()
+
+ // 如果传入了ip的话，则弹框展示
+ if(this.code && this.query_networkPort){
+ this.showSelectedIpDevice(this.code, this.query_networkPort)
+ }
+
}
-
- // this.handleBindElementsItemsTest()
+
},
destroyed() {
const content = document.getElementById("content");
@@ -273,8 +280,11 @@
const areaInfo = await getAreaModuleBycode(this.code)
if(areaInfo&&areaInfo.areaModuleItems){
let areaModuleItems=areaInfo.areaModuleItems
- this.totalElements = areaModuleItems.areaConfigNum === 0 ? 1000 : areaModuleItems.areaConfigNum;
- this.areaUrl =areaModuleItems.url
+ if(areaModuleItems.areaConfigNum){
+ this.totalElements = areaModuleItems.areaConfigNum;
+ }
+
+ this.areaUrl =areaModuleItems.areaBackGroudURL
}
},
@@ -400,7 +410,8 @@
} else {
// 如果未找到，则清空或设置默认值
element.deviceInfo = null;
- element.isPlaceholder = false;
+ // element.isPlaceholder = false;
+ element.isPlaceholder = true;
}
});
@@ -440,23 +451,29 @@
this.elements[originalIndex] = element;
}
}
+
},
- async handleBindElementsItemsTest() {
- const deviceInfoList = await getDeviceList(this.code)
- const switchDetialInfos = deviceInfoList.switchDetialInfos
-
- // const evenIndexes = this.elements.filter((_, index) => index % 2 === 0);
- const evenIndexes = this.elements.filter(element => element.cell % 2 == 0);
- evenIndexes.forEach((element, index) => {
- element.deviceInfo = switchDetialInfos[index] || null;
- // element.isPlaceholder = !!switchDetialInfos[index];
- element.isPlaceholder=true;
- });
-
- console.log("所有布局元素")
- console.log(this.elements)
-
+ showSelectedIpDevice(code,networkPort){
+ const originalIndex = this.elements.findIndex((el) =>el.deviceInfo?.areaCode==code && el.deviceInfo?.networkPort == networkPort);
+ // console.log(originalIndex)
+ if(originalIndex>0){
+ this.selectedIndex=originalIndex
+ this.show_device_info = true;
+ this.cur_device_info = this.elements[originalIndex].deviceInfo;
+ }
+ // if(originalIndex>0){
+ // let id='itemtext@'+code+'_'+networkPort+'_'+originalIndex
+ // // itemtext@01_T2-04-06_46
+ // var dom = document.getElementById(id)
+ // if (dom) {
+ // this.selectedIndex=originalIndex
+ // this.show_device_info = true;
+ // this.cur_device_info = this.elements[originalIndex].deviceInfo;
+ // // dom.click()
+ // }
+ // }
+
},
handleItemClick(item) {
@@ -762,10 +779,6 @@
// 点击增加
handleClickToAddItem(index,item){
- debugger;
- // this.cur_device_info = item.deviceInfo
- // this.cur_device_info.areaRow=item.row
- // this.cur_device_info.areaCell=item.cell
this.cur_item=item
// 如果存在设备的话则直接返回
if(item?.deviceInfo?.id) return;
@@ -833,12 +846,7 @@
cells: item.areaCellRow || [],
code: item.areaIndex,
};
- // console.log("bridge_infos", this.bridge_infos);
- // console.log(
- // "currentareaconfig",
- // currentareaconfig[item.areaIndex],
- // currentareaconfig["pad"]
- // );
+
if (currentareaconfig["pad"]) {
this.bridge_infos[item.areaIndex]["pad"] = currentareaconfig["pad"];
}
@@ -898,14 +906,16 @@
showDeviceInfo(index, item,event) {
this.isDragging = false;
event.stopPropagation(); // 阻止事件冒泡
+ if(item.deviceInfo){
// 如果点击的是同一个元素，则切换显示状态
if (this.selectedIndex === index) {
- this.show_device_info = !this.show_device_info;
- } else {
- // 切换到新元素，自动关闭之前的
- this.selectedIndex = index;
- this.show_device_info = true;
- this.cur_device_info = item.deviceInfo;
+ this.show_device_info = !this.show_device_info;
+ } else {
+ // 切换到新元素，自动关闭之前的
+ this.selectedIndex = index;
+ this.show_device_info = true;
+ this.cur_device_info = item.deviceInfo;
+ }
}
},
},
@@ -1174,31 +1184,56 @@
cursor: move;
}
- .space-text {
+ // .space-text {
+ // background-image: url("@/assets/area/space-text.svg");
+ // background-size: 100% 100%;
+ // min-width: 7.5rem;
+ // min-height: 2.5rem;
+ // transform: translate(-50%, 0%);
+ // left: 50%;
+ // padding-top: 0.5rem;
+ // top: -2.5rem;
+ // position: absolute;
+ // cursor: grabbing;
+ // cursor: move;
+ // /* line-height: 100%; */
+ // /* font-size: 12px; */
+ // /* span { */
+ // word-break: break-all;
+ // word-wrap: break-word;
+ // /*但在有些场景中，还需要加上下面这行代码*/
+ // white-space: normal;
+ // overflow-wrap: anywhere;
+ // /* } */
+
+ // font-size: 1rem;
+ // font-family: PingFangSC-Semibold, PingFang SC;
+ // font-weight: 600;
+ // color: #3299ff;
+ // z-index: 20;
+ // }
+ .space-text{
background-image: url("@/assets/area/space-text.svg");
background-size: 100% 100%;
- min-width: 7.5rem;
- min-height: 2.5rem;
- transform: translate(-50%, 0%);
+ // min-width: 3rem;
+ min-width: 85%;
+ height: 1.5rem;
+ transform: translate(-50%);
left: 50%;
padding-top: 0.5rem;
- top: -2.5rem;
+ padding-left: 0.2rem;
+ padding-right: 0.3rem;
+ top: -1.7rem;
position: absolute;
cursor: grabbing;
cursor: move;
- /* line-height: 100%; */
- /* font-size: 12px; */
- /* span { */
- word-break: break-all;
word-wrap: break-word;
- /*但在有些场景中，还需要加上下面这行代码*/
- white-space: normal;
+ // white-space: nowrap;
overflow-wrap: anywhere;
- /* } */
-
- font-size: 1rem;
+ font-size: 0.45rem;
+ // font-size: 14;
font-family: PingFangSC-Semibold, PingFang SC;
- font-weight: 600;
+ font-weight: 700;
color: #3299ff;
z-index: 20;
}
--
Gitblit v1.9.3