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/screen1/itm.vue | 48 +++++++++++++--
src/views/screen1/itm-map-plant-board.vue | 72 ++++++++++++++++++++++--
src/views/area/main-container.vue | 3
3 files changed, 109 insertions(+), 14 deletions(-)
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index d53a43d..aa4ea76 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -410,7 +410,8 @@
} else {
// 如果未找到，则清空或设置默认值
element.deviceInfo = null;
- element.isPlaceholder = false;
+ // element.isPlaceholder = false;
+ element.isPlaceholder = true;
}
});
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
index cb33cb9..9ea7eaf 100644
--- a/src/views/screen1/itm-map-plant-board.vue
+++ b/src/views/screen1/itm-map-plant-board.vue
@@ -1,12 +1,22 @@
<template>
<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' : ''
+ @mousedown="handleMouseDown"
+ :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' : '',
+
+ backgroundImage: `url(${screenSrc})`,
+ backgroundSize:'cover',
+ backgroundPosition:'center',
+ backgroundRepeat: 'no-repeat',
+
+ top: `${position.top}px`,
+ left: `${position.left}px`,
+
}"
>
<!-- v-for="(item, index) in itmmapdatas" -->
<!-- backgroundSize: 'cover', -->
- <vdr :grid=[20,20] :min-width="minWidth" :min-height="minHeight" :resizable="plantBoardFlag"
+ <vdr :grid=[1,1] :min-width="minWidth" :min-height="minHeight" :resizable="plantBoardFlag"
:draggable="plantBoardFlag" v-for="(item, index) in items" :w="item.w" :h="item.h" :x="item.x" :y="item.y"
@dragging="onDrag" z-index="0" @resizing="onResize" :parent="true" @dragstop="onDragStop(item)"
@resizestop="onResizeStop(item)" @activated="onActivated(item)" @deactivated="onDeactivated(item)"
@@ -25,7 +35,7 @@
item?.s ? '' : 'd',
item?.n == 'r' ? 'error r' : '',
item?.n == 'y' ? 'error y' : '',
- item?.areacode ? 'areacode' : '',
+ item?.areacode && item?.t ? 'areacode' : '',
]" :key="index">
<div style="width:100%;height:100%;" @click="toAreaDetail(item)" @contextmenu="showElementMenu($event,item)" @mouseenter="onMouseEnter(item,$event)" @mouseleave="onMouseLeave" >
<div v-if="item.t" class="t" v-html="item.t" :class="[item.t_c_1, item.stand, item.t_c, item.tl]"></div>
@@ -96,6 +106,9 @@
<script>
import A27 from '@/assets/screen/screen5/svgs3d/A27.svg'
+import ScreenPlace from '@/assets/screen/screen1/screen-place.png'
+
+
import AddAreaItem from "@/components/add-area-item";
import { itmmapdata } from "./itm-map.js";
import {addAreaItemInfo, deleteAreaModuleItem, getAreaItemData, updateAreaModuleItem} from "@/api/addareaitem";
@@ -119,6 +132,7 @@
x: 0,
y: 0,
imgSrc: A27,
+ screenSrc:ScreenPlace,
vLine: [],
hLine: [],
@@ -206,6 +220,13 @@
mouseX:0,
mouseY:0,
+ offsetX: 0, // 鼠标点击时相对元素的 X 偏移量
+ offsetY: 0, // 鼠标点击时相对元素的 Y 偏移量
+ position: {
+ top: 100, // 元素初始位置
+ left: 100, // 元素初始位置
+ },
+
};
},
@@ -223,8 +244,37 @@
},
methods: {
+
+
+ // 鼠标按下事件
+ handleMouseDown(event) {
+ 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;
+ }
+ },
+ // 鼠标松开事件
+ handleMouseUp() {
+ if (this.isDragging) {
+ this.isDragging = false;
+ document.removeEventListener('mousemove', this.handleMouseMove);
+ document.removeEventListener('mouseup', this.handleMouseUp);
+ document.body.style.cursor = 'grab'; // 改变光标为抓取状态
+ }
+ },
+
// 判断当前悬停项
onMouseEnter(item,event) {
+ this.isDragging = false;
this.hoveredItem = item;
this.areaVisible=true;
this.areaPosition = { x: item.x+item.w/2, y: item.y+item.h/2 };
@@ -232,6 +282,7 @@
},
// 清除悬停项
onMouseLeave() {
+ this.isDragging = false;
this.hoveredItem = null;
this.areaVisible=false;
},
@@ -245,6 +296,7 @@
},
onResize: function (x, y, width, height) {
+ this.isDragging = false;
console.log("onResize")
this.x = x
this.y = y
@@ -253,12 +305,14 @@
console.log(`x:${this.x},y:${this.y},w:${this.width},h:${this.height}`)
},
onDrag: function (x, y) {
+ this.isDragging = false;
console.log("onDrag")
this.x = x
this.y = y
console.log(`x:${this.x},y:${this.y}`)
},
onDragStop: async function (itemParam) {
+ this.isDragging = false;
console.log("停止拖拽")
console.log(`x:${this.x},y:${this.y}`)
console.log("itemParam", itemParam)
@@ -280,6 +334,7 @@
},
onResizeStop: async function (itemParam) {
+ this.isDragging = false;
console.log("停止resize")
console.log(`x:${this.x},y:${this.y},width:${this.width},height:${this.height}`)
console.log(itemParam)
@@ -301,7 +356,7 @@
}
},
onActivated: function (itemParam) {
-
+ this.isDragging = false;
console.log('元素被激活')
console.log(itemParam)
// 元素初始化
@@ -313,6 +368,7 @@
},
onDeactivated: function (itemParam) {
+ this.isDragging = false;
console.log('元素失活')
console.log(itemParam)
@@ -334,6 +390,7 @@
// 显示组件右键菜单
showElementMenu(event, item) {
+ this.isDragging = false;
event.preventDefault(); // 禁用默认右键菜单
event.stopPropagation(); // 阻止冒泡
this.elementMenuPosition = { x: item.x + item.w, y: item.y };
@@ -348,12 +405,14 @@
},
// 隐藏右键菜单
hideElementMenu() {
+ this.isDragging = false;
this.isElementMenuVisible = false;
document.removeEventListener("click", this.hideElementMenu);
},
// 更新操作
handleUpdate() {
+ this.isDragging = false;
//编辑操作
this.hideElementMenu();
console.log("this.editItem",this.editItem);
@@ -362,6 +421,7 @@
},
// 删除操作
async handleDel() {
+ this.isDragging = false;
// 删除
console.log("this.deleteItem",this.deleteItem);
const re = await deleteAreaModuleItem(this.deleteItem.id);
@@ -373,6 +433,7 @@
},
// 新增操作
handleAdd() {
+ this.isDragging = false;
this.$refs.addAreaItem && this.$refs.addAreaItem.openConfig();
this.hideMenu();
},
@@ -670,7 +731,6 @@
right: 0;
top: 0;
bottom: 0;
-
content: "";
background-color: #059ce293;
diff --git a/src/views/screen1/itm.vue b/src/views/screen1/itm.vue
index d748dc8..64b1064 100644
--- a/src/views/screen1/itm.vue
+++ b/src/views/screen1/itm.vue
@@ -105,11 +105,16 @@
<el-table
:data="switchInfo.lackSwitchInfo||[]"
border
- style="width: 100%;max-height: 650px;overflow-y: scroll">
-
+ style="width: 100%"
+ max-height="650"
+ >
+
<el-table-column
prop="deviceNameDNS"
- label="Device Name">
+ label="Device Name"
+ fixed
+ :width="width"
+ >
</el-table-column>
<!-- <el-table-column
prop="deviceNameDNS"
@@ -118,7 +123,7 @@
<el-table-column
prop="ipAddress"
label="Ip Address"
- width="150"
+ :width="width"
>
</el-table-column>
<el-table-column
@@ -127,17 +132,20 @@
label="Mac Address">
</el-table-column>
<el-table-column
+ :width="width"
prop="nasPort"
label="Nas Port">
</el-table-column>
<el-table-column
+ :width="width"
prop="switchType"
label="Switch Type">
</el-table-column>
<el-table-column
+ :width="width"
prop="cabinetName"
- label="Cabinet Name" width="150">
+ label="Cabinet Name">
<template slot-scope="scope">
<el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable>
<el-option
@@ -152,6 +160,7 @@
</el-table-column>
<el-table-column
+ :width="width"
prop="areaCode"
label="Area Code">
<template slot-scope="scope">
@@ -166,8 +175,19 @@
</el-select>
</template>
</el-table-column>
+
+ <el-table-column
+ :width="width"
+ prop="networkPort"
+ label="NetworkPort">
+ <template slot-scope="scope">
+ <el-input v-model="scope.row.networkPort" placeholder="请输入网络端口号" clearable></el-input>
+ </template>
+ </el-table-column>
+
<el-table-column
+ :width="width"
label="Operator">
<template slot-scope="scope">
<el-button
@@ -207,16 +227,29 @@
showSwitchBoardInfoTable: false,
cabinetList:[],
areaList:[],
+ width:150,
}
},
methods: {
async handleConfirm(row) {
// 检查必填项
- if (!row.cabinetName || !row.areaCode) {
- this.$message.error('交换机柜名和区域代码不能为空');
+ if (!row.cabinetName) {
+ this.$message.error('交换机柜名不能为空');
return;
}
+ if (!row.areaCode) {
+ this.$message.error('区域代码不能为空');
+ return;
+ }
+
+ if (!row.networkPort) {
+ this.$message.error('网络端口号不能为空');
+ return;
+ }
+
+
+
// if (!row.cabinetName) {
// this.$message.error('交换机柜名不能为空');
// return;
@@ -237,6 +270,7 @@
macAddress: row.macAddress,
ipAddress: row.ipAddress,
areaCode: row.areaCode,
+ networkPort:row.networkPort,
}
};
--
Gitblit v1.9.3