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-map-plant-board.vue | 85 +++++++++++++++++++++++++++++++++++++++---
1 files changed, 78 insertions(+), 7 deletions(-)
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
index b02feee..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)"
- :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' : ''
+ <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)" ref="targetDiv"
+ @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: [],
@@ -203,6 +217,15 @@
areaVisible:false,
areaPosition: { x: 0, y: 0 },
+ mouseX:0,
+ mouseY:0,
+
+ offsetX: 0, // 鼠标点击时相对元素的 X 偏移量
+ offsetY: 0, // 鼠标点击时相对元素的 Y 偏移量
+ position: {
+ top: 100, // 元素初始位置
+ left: 100, // 元素初始位置
+ },
};
},
@@ -210,14 +233,48 @@
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);
},
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 };
@@ -225,6 +282,7 @@
},
// 清除悬停项
onMouseLeave() {
+ this.isDragging = false;
this.hoveredItem = null;
this.areaVisible=false;
},
@@ -238,6 +296,7 @@
},
onResize: function (x, y, width, height) {
+ this.isDragging = false;
console.log("onResize")
this.x = x
this.y = y
@@ -246,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)
@@ -259,6 +320,7 @@
itemParam.x = this.x
itemParam.y = this.y
var dto = {
+ areacode : itemParam.areacode,
xVal: itemParam.x,
yVal: itemParam.y,
id: itemParam.id
@@ -272,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)
@@ -280,6 +343,7 @@
itemParam.w = this.width
itemParam.h = this.height
var dto = {
+ areacode : itemParam.areacode,
wVal: itemParam.w,
hVal: itemParam.h,
id: itemParam.id
@@ -292,7 +356,7 @@
}
},
onActivated: function (itemParam) {
-
+ this.isDragging = false;
console.log('元素被激活')
console.log(itemParam)
// 元素初始化
@@ -304,6 +368,7 @@
},
onDeactivated: function (itemParam) {
+ this.isDragging = false;
console.log('元素失活')
console.log(itemParam)
@@ -315,6 +380,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()
@@ -323,6 +390,7 @@
// 显示组件右键菜单
showElementMenu(event, item) {
+ this.isDragging = false;
event.preventDefault(); // 禁用默认右键菜单
event.stopPropagation(); // 阻止冒泡
this.elementMenuPosition = { x: item.x + item.w, y: item.y };
@@ -337,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);
@@ -351,6 +421,7 @@
},
// 删除操作
async handleDel() {
+ this.isDragging = false;
// 删除
console.log("this.deleteItem",this.deleteItem);
const re = await deleteAreaModuleItem(this.deleteItem.id);
@@ -362,6 +433,7 @@
},
// 新增操作
handleAdd() {
+ this.isDragging = false;
this.$refs.addAreaItem && this.$refs.addAreaItem.openConfig();
this.hideMenu();
},
@@ -659,7 +731,6 @@
right: 0;
top: 0;
bottom: 0;
-
content: "";
background-color: #059ce293;
--
Gitblit v1.9.3