From 79e942ec0ab33b0e6b6590bdc51d005dfef8dadb Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期日, 24 十一月 2024 18:46:41 +0800
Subject: [PATCH] 1.画板布局
---
src/components/equ-add-form.vue | 73 ++++
src/views/screen1/itm.vue | 4
src/views/screen1/itm-map-plant-board.vue | 11
src/api/area.js | 28 ++
src/components/device-info.vue | 11
src/views/area/main-container.vue | 676 +++++++++++++++++++++++++----------------------
6 files changed, 473 insertions(+), 330 deletions(-)
diff --git a/src/api/area.js b/src/api/area.js
index a5c93fb..1a00ea9 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -175,6 +175,21 @@
})
}
+
+/**
+ *
+ * @returns 获取所有交换机列表
+ */
+export function getAllSwitch() {
+ return request({
+ url: '/api/services/app/SwitchDevice/GetAllSwitch',
+ method: 'get',
+ params: {
+
+ }
+ })
+}
+
/**
* 获取所有区域列表
*/
@@ -197,4 +212,17 @@
...dto
}
})
+}
+
+/**
+ * 根据区域查找背景图和当前数量
+ */
+export function getAreaModuleBycode(code) {
+ return request({
+ url: '/api/services/app/SwitchDevice/GetAreaModuleBycode',
+ method: 'get',
+ params: {
+ 'areaCode': code
+ }
+ })
}
\ No newline at end of file
diff --git a/src/components/device-info.vue b/src/components/device-info.vue
index 07c9b5c..b216632 100644
--- a/src/components/device-info.vue
+++ b/src/components/device-info.vue
@@ -90,10 +90,10 @@
<div
class="button-to-check"
v-if="
- device_info?.status==1 ||
- device_info?.status==2 ||
- device_info?.status==3 ||
- device_info?.status==4
+ device_info?.statusInt==1 ||
+ device_info?.statusInt==2 ||
+ device_info?.statusInt==3 ||
+ device_info?.statusInt==4
"
@click="statusPort(index)"
@@ -220,7 +220,7 @@
width: 49rem;
position: absolute;
// top: -31.5rem;
- top: -46.5rem;
+ top: -44.9rem;
transform: translate(-48%, 0%);
left: 50%;
z-index: 120;
@@ -330,6 +330,7 @@
.info-container {
display: flex;
justify-content: space-between;
+ height:100%;
}
.info-block {
diff --git a/src/components/equ-add-form.vue b/src/components/equ-add-form.vue
index b216911..250f5b1 100644
--- a/src/components/equ-add-form.vue
+++ b/src/components/equ-add-form.vue
@@ -10,21 +10,51 @@
<div class="equ-form-container">
<div class="flex">
<div class="label require">交换机:</div>
- <input
+ <!-- <input
class="value input"
v-model="name"
placeholder="请输入交换机名称"
placeholder-class="value input"
- />
+ /> -->
+ <select
+ class="value select"
+ placeholder="请选择交换机"
+ v-model="name"
+ clearable filterable
+ >
+ <option disabled selected value >请选择交换机</option>
+ <option v-for="item in switchList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ >
+
+ </option>
+ </select>
</div>
<div class="flex m-t-2rem">
<div class="label require">交换机柜:</div>
- <input
+ <!-- <input
class="value input"
v-model="cabinetName"
placeholder="请输入交换机柜名称"
placeholder-class="value input"
- />
+ /> -->
+ <select
+ class="value select"
+ placeholder="请选择交换机柜"
+ v-model="cabinetName"
+ clearable filterable
+ >
+ <option disabled selected value >请选择交换机柜</option>
+ <option v-for="item in cabinetList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ >
+
+ </option>
+ </select>
</div>
<div class="flex m-t-2rem">
<div class="label require">网桥:</div>
@@ -67,7 +97,7 @@
<select
class="value select"
placeholder="请选择厂区"
- disabled
+ disabled clearable filterable
v-model="selectcode"
>
<!-- @change="updateDeviceList" -->
@@ -112,12 +142,13 @@
</template>
<script>
-import { addDeviceInfo, getDeviceList } from "@/api/area";
+import { addDeviceInfo, getDeviceList,getSwitchBord,getAllSwitch } from "@/api/area";
export default {
props: {
code: "",
areas: [],
init_device_list: [],
+ cur_item: {},
},
data() {
return {
@@ -138,6 +169,8 @@
open: false,
// selectswitchindex: "",
+ cabinetList:[],
+ switchList:[],
};
},
mounted() {
@@ -145,8 +178,31 @@
this.selectcode = this.code;
this.device_list = this.init_device_list || [];
}
+
+ // 获取所有交换机柜
+ this.getSwitchBord()
+
+ // 获取所有交换柜
+ this.getAllSwitch()
+
+
},
methods: {
+
+ getSwitchBord(){
+ getSwitchBord().then((res) => {
+ this.cabinetList = res.cabinetList || [];
+ });
+ },
+
+ getAllSwitch(){
+ getAllSwitch().then((res) => {
+ this.switchList = res.cabinetList || [];
+ });
+ },
+
+
+
async updateDeviceList() {
if (this.selectcode) {
this.$modal.loading("加载中");
@@ -194,6 +250,10 @@
cabinetName: this.cabinetName || "",
areaCode: this.selectcode,
switchName: this.name,
+
+ areaRow:this.cur_item?.row,
+ areaCell:this.cur_item?.cell,
+
},
};
const re = await addDeviceInfo(dto);
@@ -245,6 +305,7 @@
}
},
},
+
};
</script>
<style lang="scss">
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index 9014b69..e9a8b32 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -6,40 +6,29 @@
// width:'100%',
// height:'calc(100vh - 10rem)'
}">
- <!-- @mousemove="handleMouseMove"
- @mouseup="handleMouseUp"
- @mousedown="handleMouseDown"
- @mouseleave="handleMouseLeave" -->
- <div id="content" class="equipments-container area-map" :class="['area-map-' + code]" v-show="hideServe"
- @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown" @mouseleave="handleMouseLeave"
+
+ <div id="content" class="equipments-container area-map" v-show="hideServe"
+ @mousedown="handleMouseDown"
:style="{
transform: `scale(${scale_container})`,
width: screen_width + 'rem',
height: screen_height + 'rem',
- // container_offset_x:''
- // container_offset_x:''
-
'margin-left': `${container_offset_left}rem`,
'margin-top': `${container_offset_top}rem`,
+
+ backgroundImage: `url(${areaUrl})`,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ backgroundRepeat: 'no-repeat',
+ top: `${position.top}px`,
+ left: `${position.left}px`,
}">
-
- <!-- <div class="bridge-group" v-for="group in bridge_infos" :key="group.code" :code="group.code">
- <bridge v-for="(item, index) of group.cells" :key="item.cell" :code="group.code" :areacode="code"
- @update_map="update_map" @update_status_indrag="update_status_indrag" @click_item="click_item"
- @click_item_add="click_item_add" @toSwitchInfo="toSwitchInfo" @delPort="delPort"
- @statusPort="statusPort"
- :current_drag_index="current_drag_index" :status_indrag="status_indrag" :grouplevel="item.cell"
- :devicelist="device_list" :current_show_id="current_show_id" :width="item.width || group.width"
- :datamap="item.datamap" :left="group.left || 0" :right="group.right || 0"
- :top="group.top ? group.top + index * (group.pad || 3) : 0"
- :bottom="group.bottom ? group.bottom - index * (group.pad || 3) : 0"></bridge>
- </div> -->
<div v-for="(item, index) in elements" :key="index" class="grid-item bridge-items" :style="{
width: elementWidth + 'rem',
height: elementHeight + 'rem',
- top: `${item.y * elementHeight}rem`,
- left: `${item.x * elementWidth}rem`
+ top: `${item.row * elementHeight}rem`,
+ left: `${item.cell * elementWidth}rem`
}">
<!-- 每个元素的内容可以放在这里 -->
@@ -51,17 +40,22 @@
(!item?.deviceInfo || !item?.deviceInfo?.id)? 'space-drag': '',
]"
>
-
- <!-- <div v-show="item.deviceInfo && item.deviceInfo?.networkPort" -->
<div
- class="space-text" @dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
- @drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
- @click="showDeviceInfo(index,item,$event)"
+ class="space-text"
+ :class="[
+ item?.deviceInfo?.statusInt == 2 ||
+ item?.deviceInfo?.statusInt == 3 ||
+ item?.deviceInfo?.statusInt == 4? 'space-text-red' : '',
+ item?.deviceInfo?.statusInt == 1 ? 'space-text-yellow' : '',
+ ]"
+ @dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
+ @drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
+ @click="showDeviceInfo(index,item,$event)"
>
- {{ item.deviceInfo?.networkPort }}
+ {{ item.deviceInfo?.networkPort }}
<device-info v-show="selectedIndex === index " :show_info="show_device_info"
- :device_info="cur_device_info" @toSwitchInfo="toSwitchInfo"
-
+ :device_info="cur_device_info" @toSwitchInfo="toSwitchInfo" @statusPort="statusPort"
+ @delPort="delPort"
></device-info>
</div>
</div>
@@ -83,7 +77,7 @@
<div class="img-button"></div>
</div>
<equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
- @update="update_map"></equ-add-form>
+ @update="update_device_info" :cur_item="cur_item"></equ-add-form>
<server-info v-if="!hideServe" :serve_info="serve_info" :serve_select="serve_select" :code="code"></server-info>
<div class="back-button-left-bottom" @click="backToTop">返回</div>
@@ -97,6 +91,8 @@
import equAddForm from "@/components/equ-add-form.vue";
import deviceInfo from "@/components/device-info";
+import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
+
import {
getAreaServeInfo,
getFaultInfo,
@@ -105,6 +101,7 @@
getBridgeInfos,
delport,
statusPort,
+ getAreaModuleBycode,
} from "@/api/area";
import { getAreaTjData } from "@/api/area";
@@ -195,6 +192,7 @@
first_query_ip: true,
totalElements: 1000, // 元素总数
+ areaUrl: A27, // 区域背景图
elements: [], // 初始化 elements 数据为空数组
isDragging: false,
dragSource: null, // 当前被拖拽的元素
@@ -202,7 +200,14 @@
show_device_info: false, // 展示设备信息
selectedIndex: null,
cur_device_info: null, // 当前的设备信息
+ cur_item:null,// 当前的element
+ offsetX: 0, // 鼠标点击时相对元素的 X 偏移量
+ offsetY: 0, // 鼠标点击时相对元素的 Y 偏移量
+ position: {
+ top: 100, // 元素初始位置
+ left: 100, // 元素初始位置
+ },
};
},
computed: {
@@ -223,7 +228,7 @@
},
created() {
var zoom = this.$route.query.zoom;
- console.log(this.$route, this.$router);
+ // console.log(this.$route, this.$router);
if (zoom) {
this.zoom_main = parseFloat(zoom);
}
@@ -233,28 +238,28 @@
this.screen_height = parseFloat(this.screen_height) * this.zoom;
},
async mounted() {
- console.log("main-container1,mounted");
+ // console.log("main-container1,mounted");
const content = document.getElementById("content");
content.addEventListener("wheel", this.handleWheel);
//获取到此区域的全部信息
this.device_list = [];
if (this.code) {
- // var re = await getDeviceList(this.code);
- // console.log("re", re);
- // this.device_list = re.switchDetialInfos || [];
- // await this.init_data();
- this.update_map();
+ // this.update_map();
}
getAreaTjData().then((res) => {
- // console.log('areas',res.switchAreaInfo || [])
this.areas = res.switchAreaInfo || [];
});
-
- // 根据屏幕初始化格子
- this.initializeElements(); // 在组件加载时初始化 elements
- // 初始化设备信息
- this.handleBindElementsItems()
+ if(this.code){
+ // 获取当前页面的背景图和数量
+ this.initArea();
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+ }
+
+ // this.handleBindElementsItemsTest()
},
destroyed() {
const content = document.getElementById("content");
@@ -262,16 +267,28 @@
this.stopScrolling();
},
methods: {
+
+ // 获取区域的背景图和数量
+ async initArea(){
+ 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
+ }
+
+ },
+
initializeElements() {
const elements = [];
for (let i = 0; i < this.totalElements; i++) {
- const x = i % this.gridDimensions.columns;
- const y = Math.floor(i / this.gridDimensions.columns);
+ const cell = i % this.gridDimensions.columns;
+ const row = Math.floor(i / this.gridDimensions.columns);
const isPlaceholder = false
- const name = x + "-" + y
+ const name = row + "-" + cell
// 绑定设备信息
const deviceInfo = {}
- elements.push({ x, y, isPlaceholder, name, deviceInfo });
+ elements.push({ row, cell, isPlaceholder, name, deviceInfo });
}
// 判断最后一行是否需要补齐
@@ -279,62 +296,176 @@
if (remainder !== 0) {
const placeholdersNeeded = this.gridDimensions.columns - remainder;
for (let i = 0; i < placeholdersNeeded; i++) {
- const x = remainder + i;
- const y = Math.floor(this.totalElements / this.gridDimensions.columns);
+ const cell = remainder + i;
+ const row = Math.floor(this.totalElements / this.gridDimensions.columns);
const isPlaceholder = false
- const name = x + "-" + y
+ const name = row + "-" + cell
// 绑定设备信息
const deviceInfo = {}
- elements.push({ x, y, isPlaceholder, name, deviceInfo });
+ elements.push({ row, cell, isPlaceholder, name, deviceInfo });
}
}
+
+ // TODO 遍历elements给每个elements复制index，为当前的遍历的索引
+ // 遍历 elements 添加 index 属性
+ elements.forEach((element, index) => {
+ element.index = index;
+ });
this.elements = elements; // 赋值给 data 中的 elements
},
- // 根据元素的行列绑定元素信息
+
async handleBindElementsItems() {
- const deviceInfoList = await getDeviceList(this.code)
- // 所有的格子信息
- console.log("所有的格子信息")
- console.log(this.elements)
- // 所有的设备信息
- console.log("所有的设备信息")
- console.log(deviceInfoList.switchDetialInfos)
- // 遍历 switchDetialInfos，构造 Map
- const switchDetailInfosMap = new Map();
- const switchDetialInfos = deviceInfoList.switchDetialInfos
+ let deviceInfoList = await getDeviceList(this.code);
+
+ // 获取 switchDetialInfos
+ let switchDetialInfos = deviceInfoList.switchDetialInfos;
+ console.log("所有的数量:"+this.totalElements)
+ console.log("switchDetialInfos")
+ console.log(switchDetialInfos)
+
+ // 用于存放无效的设备信息
+ let invalidSwitchDetails = [];
+
+ // 用于存放重复 key 的设备信息
+ let duplicateSwitchDetails = [];
+
+ // 用于存放 areaRow 或 areaCell 为 -1 的设备信息
+ let filteredSwitchDetails = [];
+
+ // 创建一个 Map 来存储有效的设备信息
+ let switchDetailInfosMap = new Map();
+
+ // 遍历 switchDetialInfos
switchDetialInfos.forEach((info) => {
- const key = `${info.areaRow}-${info.areaCell}`;
- // 直接将单个对象作为值放入 Map
- switchDetailInfosMap.set(key, info);
- });
+ let { areaRow, areaCell } = info;
- console.log("设备信息转换后的 Map");
- console.log(switchDetailInfosMap);
+ // 检查是否为无效值：""（空字符串）、undefined、null、-1
+ if ([null, undefined, "", -1].includes(areaRow) || [null, undefined, "", -1].includes(areaCell)) {
+ invalidSwitchDetails.push(info);
+ return; // 跳过后续逻辑
+ }
- // 遍历 elements，将匹配的设备信息添加到每个元素的 deviceInfo 属性
- this.elements.forEach((element) => {
- const key = `${element.y}-${element.x}`; // 使用元素的 y 和 x 构造 key
- const deviceInfo = switchDetailInfosMap.get(key); // 从 Map 中查找设备信息
- if (deviceInfo) {
- // 如果找到设备信息，存放到 element 的 deviceInfo 属性
- element.deviceInfo = deviceInfo;
- element.isPlaceholder = true
+ // 检查是否包含 -1，记录到 filteredSwitchDetails
+ if (areaRow == -1 || areaCell == -1) {
+ filteredSwitchDetails.push(info);
+ return; // 跳过后续逻辑
+ }
+
+ // 构造唯一 key
+ let key = `${areaRow}-${areaCell}`;
+ console.log(key)
+ // 检查 key 是否已经存在
+ if (switchDetailInfosMap.has(key)) {
+ // 如果存在，将当前 info 添加到重复数组中
+ duplicateSwitchDetails.push(info);
} else {
- // 如果未找到，则清空或设置默认值
- element.deviceInfo = null;
- element.isPlaceholder = false
+ // 如果不存在，将 info 存入 Map
+ switchDetailInfosMap.set(key, info);
+
}
});
+ console.log("总数量：",switchDetialInfos.length)
+ console.log("无效的设备信息:", invalidSwitchDetails);
+ console.log("包含 -1 的设备信息:", filteredSwitchDetails);
+ console.log("重复的设备信息:", duplicateSwitchDetails);
+ console.log("设备信息转换后的 Map:", switchDetailInfosMap);
+
+ // Step 1: 将 this.elements 转换为 Map，方便快速查找
+ // let elementsMap = new Map(
+ // this.elements.map((element) => [`${element.row}-${element.cell}`, element])
+ // );
+
+ // // Step 2: 遍历 switchDetailInfosMap，直接匹配 elementsMap 中的 key
+ // switchDetailInfosMap.forEach((info, key) => {
+ // // 在 elementsMap 中查找匹配的元素
+ // let element = elementsMap.get(key);
+ // if (element) {
+ // // 如果找到匹配的元素，更新其信息
+ // element.deviceInfo = info;
+ // element.isPlaceholder = true;
+ // }
+ // });
+
+
+ // 遍历 elements，将匹配的设备信息绑定到对应的元素
+ this.elements.forEach((element) => {
+ let key = `${element.row}-${element.cell}`; // 使用元素的 row 和 cell 构造 key
+ let deviceInfo = switchDetailInfosMap.get(key); // 从 Map 中查找设备信息
+ if (deviceInfo) {
+ // 如果找到设备信息，存放到 element 的 deviceInfo 属性
+ element.deviceInfo = deviceInfo;
+ element.isPlaceholder = true;
+ } else {
+ // 如果未找到，则清空或设置默认值
+ element.deviceInfo = null;
+ element.isPlaceholder = false;
+ }
+ });
+
+ // 合并无效和重复的设备信息数组，并倒序 filteredSwitchDetails
+ let allDeviceDetails = [...invalidSwitchDetails, ...duplicateSwitchDetails,...filteredSwitchDetails];
+ console.log("allDeviceDetails:", allDeviceDetails);
+
+ // 遍历 elements，并查找 deviceInfo 为空的元素
+ let emptyDeviceInfoElements = [];
+
+ // 创建 elements 的浅拷贝，并倒序遍历
+ const reversedElements = [...this.elements].reverse();
+
+ // 遍历 reversedElements，并查找 deviceInfo 为空的元素
+ reversedElements.forEach((element) => {
+ if (!element.deviceInfo) {
+ // 记录所有 deviceInfo 为空的元素
+ emptyDeviceInfoElements.push(element);
+ }
+ });
+
+ // 确保空的 deviceInfo 元素数组的长度与 allDeviceDetails 数组的长度一致
+ let totalDevices = Math.min(emptyDeviceInfoElements.length, allDeviceDetails.length);
+
+ // 动态为这些元素赋值设备信息
+ for (let i = 0; i < totalDevices; i++) {
+ const device = allDeviceDetails[i] || {}; // 防止越界
+ const element = emptyDeviceInfoElements[i];
+ device.areaRow = element.row;
+ device.areaCell = element.cell;
+ element.deviceInfo = device;
+ element.isPlaceholder = true; // 设置占位符
+
+ // 根据索引更新原数组的元素
+ const originalIndex = this.elements.findIndex((el) => el.row === element.row && el.cell === element.cell);
+ if (originalIndex !== -1) {
+ 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)
},
handleItemClick(item) {
+ this.isDragging = false;
item.deviceInfo = null;
this.$set(item, 'isPlaceholder', true)
},
handleItemClickCancel(item) {
+ this.isDragging = false;
// 这里的取消操作需要判断当前的元素是不是空的
if(item?.deviceInfo?.id){
// this.$message('空设备才可双击删除！');
@@ -347,6 +478,7 @@
toSwitchInfo(info) {
+ this.isDragging = false;
this.showServe(info);
},
async statusPort(info) {
@@ -364,7 +496,12 @@
this.$modal.closeLoading();
- this.update_map();
+
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+ // this.update_map();
},
async delPort(info) {
@@ -381,8 +518,8 @@
// 根据屏幕初始化格子
this.initializeElements(); // 在组件加载时初始化 elements
- // 初始化设备信息
- this.handleBindElementsItems()
+ // 初始化设备信息
+ this.handleBindElementsItems()
},
backToTop() {
if (!this.hideServe) {
@@ -391,6 +528,14 @@
}
this.$router.push({ path: "/area-all" });
},
+
+ async update_device_info() {
+ // 根据屏幕初始化格子
+ this.initializeElements(); // 在组件加载时初始化 elements
+ // 初始化设备信息
+ this.handleBindElementsItems()
+ },
+
async update_map() {
this.$modal.loading("加载中");
var re = await getDeviceList(this.code);
@@ -430,138 +575,39 @@
console.log("this.$refs.equAddForm", this.$refs.equAddForm);
this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
},
- async showServeInfo(info) {
-
- //展示交换机全部端口
- console.log("showServeInfo", info);
- //弹出框展示全部端口，并且每个端口的情况
- //获取一下信息
- this.$modal.loading("加载中");
- const res = await getDeviceList(this.code, info.cabinetName);
- this.$modal.closeLoading();
- console.log("serveinfo", res);
- // this.activateSwitchPorts = res.switchDetialInfos || [];
- this.activateSwitchPorts = {};
- //分两行，每行24个
- this.switchAllDetialInfos = res.switchAllDetialInfos || []
- var activaePorts = {};
- if (res.switchDetialInfos) {
- for (var item of res.switchDetialInfos) {
- if (item.port) activaePorts[item.port] = item;
- }
- }
- console.log("activaePorts", activaePorts);
- for (var i = 0; i <= 47; i++) {
- var level = "" + parseInt(i / 24);
- if (!this.activateSwitchPorts["" + level]) {
- this.activateSwitchPorts["" + level] = [];
- }
- this.activateSwitchPorts["" + level].push({
- index: "" + (i + 1),
- name: "",
- info: activaePorts["" + (i + 1)] || undefined,
- });
- }
- // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
- this.dialog_activateSwitchPorts = true;
- },
+
+
closeself() {
console.log("closeself parent");
this.chartclose = true;
},
- update_status_indrag(result, currentid) {
- this.status_indrag = result;
- this.current_drag_index = currentid;
- },
- refresh_canvas() {
- //根据缩放比，视觉角度，来做渲染？，或者说，最简单的，直接都展示出来，缩放下面的？然后超出的不展示即可？
- },
- handleMouseMove(event) {
- if (this.mouse_click) {
- // console.log("handleMouseMove", event);
- //记录坐标，支持实时的?
- if (this.mouse_offset_last) {
- // this.tleft += 20 - this.mouse_offset_last.offsetX
- var offsetx = event.clientX - this.mouse_offset_last.clientX;
- var offsety = event.clientY - this.mouse_offset_last.clientY;
- // console.log("offset0", offsetx, offsety);
- var soffsetx = offsetx > 0 ? offsetx : -offsetx;
- var soffsety = offsety > 0 ? offsety : -offsety;
- if (soffsety >= soffsetx) {
- offsetx = 0;
- } else {
- offsety = 0;
- }
-
- // console.log("offsetx", offsetx, offsety);
- // this.tleft += offset * 0.1;
- // this.cal_offset_x += offset;
- // console.log('offset', event.offsetX - this.mouse_offset_last.offsetX)
- if (event.target.id == "content") {
- //让看板内部有偏移量
- if (offsetx != 0) {
- if (offsetx > 0) {
- this.container_offset_left +=
- this.base_move_offset * this.scale_container;
- } else {
- this.container_offset_left -=
- this.base_move_offset * this.scale_container;
- }
- }
- if (offsety != 0) {
- if (offsety > 0) {
- console.log("plus container_offset_top");
- this.container_offset_top +=
- this.base_move_offset * this.scale_container;
- } else {
- console.log("mul container_offset_top");
-
- this.container_offset_top -=
- this.base_move_offset * this.scale_container;
- }
- }
-
- }
- }
- this.mouse_offset_last = event;
- }
- },
- handleMouseUp(event) {
- // console.log("handleMouseUp", event);
- if (this.mouse_click) {
- if (this.mouse_click.className == "equipment-item") {
- //说明是转移视角的
- //可能就是设备的
- //直接修改坐标就行了
- //计算鼠标偏移量，然后转换为屏幕坐标，再转换为显示单位坐标，同时弹出提示？是否要更改吧，更改就调用接口
- if (
- this.mouse_offset_last &&
- (this.cal_offset_x || this.cal_offset_y)
- ) {
- console.log("update?", this.tleft);
- alert("是否要修改设备坐标");
- }
- } else {
- }
- }
-
- this.mouse_click = undefined;
- this.mouse_offset_last = undefined;
- },
-
+
+ // 鼠标按下事件
handleMouseDown(event) {
-
- if (event.target.className.indexOf("equipment-item") >= 0) {
-
- } else if (event.target.id == "content") {
- this.mouse_click = event.target;
+ this.isDragging = true;
+ this.offsetX = event.clientX - this.position.left;
+ this.offsetY = event.clientY - this.position.top;
+ document.addEventListener('mousemove', this.handleMouseMove);
+ document.addEventListener('mouseup', this.handleMouseUp);
+ document.body.style.cursor = 'grabbing'; // 改变光标为抓取状态
+ },
+ // 鼠标移动事件
+ handleMouseMove(event) {
+ if (this.isDragging) {
+ this.position.left = event.clientX - this.offsetX;
+ this.position.top = event.clientY - this.offsetY;
}
},
- handleMouseLeave(event) {
-
- this.mouse_click = undefined;
- this.mouse_offset_last = undefined;
+ // 鼠标松开事件
+ handleMouseUp() {
+ if (this.isDragging) {
+ this.isDragging = false;
+ document.removeEventListener('mousemove', this.handleMouseMove);
+ document.removeEventListener('mouseup', this.handleMouseUp);
+ document.body.style.cursor = 'grab'; // 改变光标为抓取状态
+ }
},
+
handleWheel(event) {
event.preventDefault();
@@ -581,8 +627,12 @@
this.container_offset_left = 0;
this.container_offset_top = 0;
}
+ console.log("滚轮的缩放比")
+
+ console.log(this.scale_container)
},
dragstart(e, index) {
+ this.isDragging = false;
console.log(e);
this.dragSource = index; // 记录拖拽的源元素
console.log("start", e);
@@ -591,145 +641,132 @@
},
// 拖拽完成事件
async dragend(e, index) {
+ this.isDragging = false;
//确定是否需要更新
let that = this;
console.log("拖拽事件完成", index)
console.log("拖拽目标Id：", e.target.id)
-
-
- return;
- var dto = this.device_list_map[e.target.id];
- that.$modal
- .confirm(
- "是否确定修改坐标,设备名:" + dto.switchName + "/" + dto.networkPort
- )
- .then(async (res) => {
- that.$modal.loading();
- console.log("end", e);
- console.log(e);
- that.cal_offset_x = e.clientX - that.startclientX; // 计算偏移量
- that.cal_offset_y = e.clientY - that.startclientY;
-
- var rawx = that.device_list_map[e.target.id].currentX;
- var rawy = that.device_list_map[e.target.id].currentY;
- that.device_list_map[e.target.id].currentX =
- parseFloat(that.device_list_map[e.target.id].currentX) +
- parseFloat(
- (that.cal_offset_x / that.html_base) * (1 / that.scale_container)
- ); // 实现拖拽元素随偏移量移动
- that.device_list_map[e.target.id].currentY =
- parseFloat(that.device_list_map[e.target.id].currentY) +
- parseFloat(
- (that.cal_offset_y / that.html_base) * (1 / that.scale_container)
- );
- // this.elTop += this.cal_offset_y;
- console.log("end drag2", that.device_list_map[e.target.id].currentX);
- //更新坐标信息，并保存
- var json = {
- id: dto.id.replace("content_", ""),
- operateType: 1,
- operateTime: new Date(),
- moveBeforeX: rawx,
- moveBeforeY: rawy,
- currentX: that.device_list_map[e.target.id].currentX,
- currentY: that.device_list_map[e.target.id].currentY,
- };
- const data = await updateDevicePosition(json);
-
- that.$modal.closeLoading();
- console.log("updateDevicePosition", data);
- })
- .catch((e) => {
- })
- .finally(() => {
- });
},
/**两个元素交换位置 */
handleDrop(e, targetIndex) {
+ this.isDragging = false;
console.log("handleDrop")
console.log(targetIndex)
-
+
let that = this;
let sourceIndex = this.dragSource;
// 实现逻辑，例如交换两个元素的位置
- if (sourceIndex !== targetIndex &&(this.elements[sourceIndex].deviceInfo||this.elements[targetIndex].deviceInfo)) {
+ if (sourceIndex !== targetIndex && (this.elements[sourceIndex].deviceInfo || this.elements[targetIndex].deviceInfo)) {
const sourceDeviceInfo = this.elements[sourceIndex].deviceInfo;
const targetDeviceInfo = this.elements[targetIndex].deviceInfo;
- let sourceNetworkPort="指定位置"
- if(sourceDeviceInfo?.networkPort){
- sourceNetworkPort=sourceDeviceInfo?.networkPort
+ const sourceElement=this.elements[sourceIndex]
+ const targetElement=this.elements[targetIndex]
+ let sourceNetworkPort = "指定位置"
+ if (sourceDeviceInfo?.networkPort) {
+ sourceNetworkPort = sourceDeviceInfo?.networkPort
}
- let targetNetworkPort="指定位置"
- if(targetDeviceInfo?.networkPort){
- targetNetworkPort=targetDeviceInfo?.networkPort
+ let targetNetworkPort = "指定位置"
+ if (targetDeviceInfo?.networkPort) {
+ targetNetworkPort = targetDeviceInfo?.networkPort
}
- let type=false;
- if(sourceDeviceInfo?.networkPort&&targetDeviceInfo?.networkPort){
- type=true;
+ let type = false;
+ if (sourceDeviceInfo?.networkPort && targetDeviceInfo?.networkPort) {
+ type = true;
}
that.$modal
- .confirm(
- `是否确定${type ? "交换" : "移动"}位置:从${sourceNetworkPort
- }到${targetNetworkPort}上`
- )
- .then(async (res) => {
-
-
- this.elements[sourceIndex].deviceInfo = targetDeviceInfo
- this.elements[targetIndex].deviceInfo = sourceDeviceInfo
+ .confirm(
+ `是否确定${type ? "交换" : "移动"}位置:从${sourceNetworkPort
+ }到${targetNetworkPort}上`
+ )
+ .then(async (res) => {
- if(this.elements[sourceIndex].deviceInfo==null){
- this.elements[sourceIndex].isPlaceholder=false;
- }
+ // this.elements[sourceIndex].deviceInfo = targetDeviceInfo
+ // this.elements[targetIndex].deviceInfo = sourceDeviceInfo
- if(this.elements[targetIndex].deviceInfo==null){
- this.elements[targetIndex].isPlaceholder=false;
- }
-
- that.$modal.loading();
- var json = {
- id: sourceDeviceInfo.id,
- operateType: 1,
- operateTime: new Date(),
- networkPort: sourceDeviceInfo.networkPort,
- areaCell:this.elements[sourceIndex].x,
- areaRow:this.elements[sourceIndex].y,
- areaCellTarget:this.elements[targetIndex].x,
- areaRowTarget:this.elements[targetIndex].y,
- };
- if (targetDeviceInfo?.id) {
- json["changeId"] = targetDeviceInfo?.id;
- json["operateType"] = 3;
+ if (this.elements[sourceIndex].deviceInfo == null) {
+ this.elements[sourceIndex].isPlaceholder = false;
}
- const data = await updateDevicePosition(json);
- that.$modal.closeLoading();
- if (data) {
- this.$message.success(`${targetid ? "交换" : "移动"}成功`);
- }
+ if (this.elements[targetIndex].deviceInfo == null) {
+ this.elements[targetIndex].isPlaceholder = false;
+ }
+
+ that.$modal.loading();
+ let json;
+ console.log()
+ if (type) {
+
+ // 交换
+ json = {
+ id: sourceDeviceInfo.id,
+ operateType: 3,
+ operateTime: new Date(),
+ networkPort: sourceDeviceInfo.networkPort,
+ changeId:targetDeviceInfo?.id,
+ changeAreaRow: targetElement.row,
+ changeAreaCell: targetElement.cell,
+ deviceInfo: {
+ areaRow: sourceElement.row,
+ areaCell:sourceElement.cell,
+ areaCode:this.code
+ },
+ };
+
+ } else {
+ // 移动
+
+ const { id, networkPort } = sourceDeviceInfo ? sourceDeviceInfo : targetDeviceInfo;
+ const { row, cell } = sourceDeviceInfo ? targetElement : sourceElement;
+
+ json = {
+ id: id,
+ operateType: 1,
+ operateTime: new Date(),
+ networkPort: networkPort,
+ deviceInfo: {
+ areaRow: row,
+ areaCell: cell,
+ areaCode:this.code
+ },
+ };
+
+ }
+
+ const data = await updateDevicePosition(json);
+ that.$modal.closeLoading();
+ if (data) {
+ this.$message.success(`${type ? "交换" : "移动"}成功`);
+ }
// 根据屏幕初始化格子
this.initializeElements(); // 在组件加载时初始化 elements
// 初始化设备信息
this.handleBindElementsItems()
- })
- .catch((e) => { })
- .finally(() => { });
+ })
+ .catch((e) => {
+ console.log(e);
+ })
+ .finally(() => { });
-
}
},
handleDragOver(e) {
+ this.isDragging = false;
e.preventDefault();
},
// 点击增加
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;
this.$refs.equAddForm && this.$refs.equAddForm.openform();
@@ -740,7 +777,6 @@
var { data } = await getBridgeInfos(this.code);
this.$modal.closeLoading();
var arr = (data && data) || [];
- console.log("arr", arr);
var currentareaconfig = mapdata[this.code] || {};
this.bridge_infos = {};
@@ -797,12 +833,12 @@
cells: item.areaCellRow || [],
code: item.areaIndex,
};
- console.log("bridge_infos", this.bridge_infos);
- console.log(
- "currentareaconfig",
- currentareaconfig[item.areaIndex],
- currentareaconfig["pad"]
- );
+ // 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"];
}
@@ -860,10 +896,17 @@
this.$modal.closeLoading();
},
showDeviceInfo(index, item,event) {
+ this.isDragging = false;
event.stopPropagation(); // 阻止事件冒泡
- this.selectedIndex = index
- this.show_device_info = !this.show_device_info
- this.cur_device_info = 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;
+ }
},
},
};
@@ -1083,6 +1126,7 @@
position: absolute;
box-sizing: border-box;
/* border: 1px solid #ccc; 可选样式，便于查看布局 */
+ border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
index 79b52bb..cb33cb9 100644
--- a/src/views/screen1/itm-map-plant-board.vue
+++ b/src/views/screen1/itm-map-plant-board.vue
@@ -1,5 +1,5 @@
<template>
- <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)"
+ <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)" ref="targetDiv"
:style="{
background: plantBoardFlag ? 'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px' : ''
}"
@@ -203,6 +203,8 @@
areaVisible:false,
areaPosition: { x: 0, y: 0 },
+ mouseX:0,
+ mouseY:0,
};
},
@@ -210,6 +212,11 @@
mounted() {
document.addEventListener("click", this.hideMenu);
this.getAreaItemList();
+ // document.addEventListener("mousemove", (event) => {
+ // this.mouseX = event.offsetX;
+ // this.mouseY = event.offsetY;
+ // console.log(`Mouse Position: X=${this.mouseX}, Y=${this.mouseY}`);
+ // });
},
beforeUnmount() {
document.removeEventListener("click", this.hideMenu);
@@ -317,6 +324,8 @@
},
showMenu(event) {
event.preventDefault();
+ // this.menuPosition = { x: this.mouseX, y: this.mouseY};
+ // this.menuPosition = { x: event.offsetX, y: event.offsetY};
this.menuPosition = { x: event.clientX, y: event.clientY };
this.menuVisible = true;
this.hideElementMenu()
diff --git a/src/views/screen1/itm.vue b/src/views/screen1/itm.vue
index d141d4d..c9893e7 100644
--- a/src/views/screen1/itm.vue
+++ b/src/views/screen1/itm.vue
@@ -137,7 +137,7 @@
prop="cabinetName"
label="Cabinet Name">
<template slot-scope="scope">
- <el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable="" >
+ <el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable>
<el-option
v-for="item in cabinetList"
:key="item.id"
@@ -153,7 +153,7 @@
prop="areaCode"
label="Area Code">
<template slot-scope="scope">
- <el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable="" >
+ <el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable>
<el-option
v-for="item in areaList"
:key="item.id"
--
Gitblit v1.9.3