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 | 72 +++++++++++++++++++++++++++++++++---
1 files changed, 66 insertions(+), 6 deletions(-)
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;
--
Gitblit v1.9.3