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 | 360 +++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 272 insertions(+), 88 deletions(-)
diff --git a/src/views/screen1/itm-map-plant-board.vue b/src/views/screen1/itm-map-plant-board.vue
index 702b3a5..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)"
@@ -14,7 +24,7 @@
:scale-ratio="0.7"
:style="{
- backgroundImage: `url(${imgSrc})`,
+ backgroundImage: `url(${item.imgSrc})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
@@ -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>
@@ -87,15 +97,25 @@
<li @click="handleDel()">删除</li>
</ul>
+ <div>
+ <add-area-item ref="addAreaItem" :menuPositionx ="this.menuPosition.x" :menu-positiony="this.menuPosition.y" @update-area-list="getAreaItemList"></add-area-item>
+ </div>
+
</div>
</template>
<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";
export default {
+ components: {AddAreaItem},
props: {
no: {
type: Number,
@@ -112,71 +132,73 @@
x: 0,
y: 0,
imgSrc: A27,
+ screenSrc:ScreenPlace,
vLine: [],
hLine: [],
items:[
- {
- x:300,
- y:300,
- w:200,
- h:200,
- t:'',
- s:'',
- n:'',
- areacode:'',
- t_c:'',
- t_c_1:'',
- tl:'',
- stand:'',
- imgSrc:A27,
- },
- {
- x:0,
- y:0,
- w:200,
- h:200,
- t:'测试一区',
- s:'',
- n:'',
- areacode:'01',
- t_c:'',
- t_c_1:'',
- tl:'',
- stand:'',
- imgSrc:A27,
- },
- {
- x:0,
- y:0,
- w:200,
- h:200,
- t:'测试一区',
- s:'',
- n:'',
- areacode:'01',
- t_c:'',
- t_c_1:'',
- tl:'',
- stand:'',
- imgSrc:A27,
- },
- {
- x:120,
- y:120,
- w:200,
- h:200,
- t:'测试二区',
- s:'',
- n:'',
- areacode:'02',
- t_c:'',
- t_c_1:'',
- tl:'',
- stand:'',
- imgSrc:A27,
- },
+ // {
+ // x:300,
+ // y:300,
+ // w:200,
+ // h:200,
+ // t:'',
+ // s:'',
+ // n:'',
+ // areacode:'',
+ // t_c:'',
+ // t_c_1:'',
+ // tl:'',
+ // stand:'',
+ // imgSrc:A27,
+ // },
+ // {
+ // x:0,
+ // y:0,
+ // w:200,
+ // h:200,
+ // t:'测试一区',
+ // s:'',
+ // n:'',
+ // areacode:'01',
+ // t_c:'',
+ // t_c_1:'',
+ // tl:'',
+ // stand:'',
+ // imgSrc:A27,
+ // },
+ // {
+ // x:0,
+ // y:0,
+ // w:200,
+ // h:200,
+ // t:'测试一区',
+ // s:'',
+ // n:'',
+ // areacode:'01',
+ // t_c:'',
+ // t_c_1:'',
+ // tl:'',
+ // stand:'',
+ // imgSrc:A27,
+ // },
+ // {
+ // x:120,
+ // y:120,
+ // w:200,
+ // h:200,
+ // t:'测试二区',
+ // s:'',
+ // n:'',
+ // areacode:'02',
+ // t_c:'',
+ // t_c_1:'',
+ // tl:'',
+ // stand:'',
+ // imgSrc:A27,
+ // },
],
+ adjustedItem: [],
isElementMenuVisible: false, // 控制菜单显示
elementMenuPosition: { x: 0, y: 0 }, // 菜单位置
@@ -190,23 +212,69 @@
plantBoardFlag:false, // 是否画布局
hoveredItem:{},
+ deleteItem:{},
+ editItem:{},
areaVisible:false,
areaPosition: { x: 0, y: 0 },
+ mouseX:0,
+ mouseY:0,
+
+ offsetX: 0, // 鼠标点击时相对元素的 X 偏移量
+ offsetY: 0, // 鼠标点击时相对元素的 Y 偏移量
+ position: {
+ top: 100, // 元素初始位置
+ left: 100, // 元素初始位置
+ },
};
},
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 };
@@ -214,6 +282,7 @@
},
// 清除悬停项
onMouseLeave() {
+ this.isDragging = false;
this.hoveredItem = null;
this.areaVisible=false;
},
@@ -227,6 +296,7 @@
},
onResize: function (x, y, width, height) {
+ this.isDragging = false;
console.log("onResize")
this.x = x
this.y = y
@@ -235,23 +305,36 @@
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: function (itemParam) {
+ onDragStop: async function (itemParam) {
+ this.isDragging = false;
console.log("停止拖拽")
console.log(`x:${this.x},y:${this.y}`)
- console.log(itemParam)
- itemParam.x = this.x
- itemParam.y = this.y
-
- // TODO 需要更新元素操作
+ console.log("itemParam", itemParam)
+ if(this.x !=itemParam.x && this.y !=itemParam.y && this.w !=itemParam.w && this.h !=itemParam.h){
+ itemParam.x = this.x
+ itemParam.y = this.y
+ var dto = {
+ areacode : itemParam.areacode,
+ xVal: itemParam.x,
+ yVal: itemParam.y,
+ id: itemParam.id
+ };
+ //更新元素操作
+ const re = await updateAreaModuleItem(dto);
+ if (re.isSuccess) {
+ this.$message.success("更新成功");
+ }
+ }
},
- onResizeStop: function (itemParam) {
-
+ 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)
@@ -259,13 +342,21 @@
// itemParam.y=this.y
itemParam.w = this.width
itemParam.h = this.height
-
- // TODO 需要更新元素操作
-
-
+ var dto = {
+ areacode : itemParam.areacode,
+ wVal: itemParam.w,
+ hVal: itemParam.h,
+ id: itemParam.id
+ };
+ //更新元素操作
+ const re = await updateAreaModuleItem(dto);
+ if (re.isSuccess) {
+ this.$message.success("更新成功");
+ this.open = false;
+ }
},
onActivated: function (itemParam) {
-
+ this.isDragging = false;
console.log('元素被激活')
console.log(itemParam)
// 元素初始化
@@ -277,6 +368,7 @@
},
onDeactivated: function (itemParam) {
+ this.isDragging = false;
console.log('元素失活')
console.log(itemParam)
@@ -288,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()
@@ -296,10 +390,14 @@
// 显示组件右键菜单
showElementMenu(event, item) {
+ this.isDragging = false;
event.preventDefault(); // 禁用默认右键菜单
event.stopPropagation(); // 阻止冒泡
this.elementMenuPosition = { x: item.x + item.w, y: item.y };
this.isElementMenuVisible = true;
+ console.log("item",item);
+ this.deleteItem = item;
+ this.editItem = item;
// 点击其他地方时隐藏菜单
document.addEventListener("click", this.hideElementMenu);
@@ -307,29 +405,116 @@
},
// 隐藏右键菜单
hideElementMenu() {
+ this.isDragging = false;
this.isElementMenuVisible = false;
document.removeEventListener("click", this.hideElementMenu);
},
// 更新操作
handleUpdate() {
- // TODO
- alert(`You selected:handleUpdate`);
+ this.isDragging = false;
+ //编辑操作
this.hideElementMenu();
+ console.log("this.editItem",this.editItem);
+ this.$refs.addAreaItem && this.$refs.addAreaItem.editConfig(this.editItem);
+ this.hideMenu();
},
// 删除操作
- handleDel() {
- // TODO
- alert(`You selected:handleDel`);
+ async handleDel() {
+ this.isDragging = false;
+ // 删除
+ console.log("this.deleteItem",this.deleteItem);
+ const re = await deleteAreaModuleItem(this.deleteItem.id);
+ if (re.isSuccess) {
+ this.$message.success("删除成功");
+ this.getAreaItemList();
+ }
this.hideElementMenu();
},
// 新增操作
handleAdd() {
- // TODO
- alert(`You selected:handleAdd`);
- // this.hideElementMenu();
+ this.isDragging = false;
+ this.$refs.addAreaItem && this.$refs.addAreaItem.openConfig();
this.hideMenu();
},
+ // async getAreaItemList(){
+ // debugger;
+ // const result = await getAreaItemData(); // 假设这是一个返回Promise的函数
+ // this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
+ // console.log(" adjustedItem", this.adjustedItem)
+ // let items = [];
+ //
+ // Object.keys(this.adjustedItem).forEach(key => {
+ // switch (key) {
+ // case 'xVal':
+ // items.x = this.adjustedItem[key];
+ // break;
+ // case 'yVal':
+ // items.y = this.adjustedItem[key];
+ // break;
+ // case 'areacode':
+ // items.areacode = this.adjustedItem[key];
+ // break;
+ // case 'uRL':
+ // items.imgSrc = this.adjustedItem[key];
+ // break;
+ // // 添加其他需要转换的键值对
+ // default:
+ // // 如果不需要转换，直接赋值
+ // // items[key] = this.adjustedItem[key];
+ // }
+ // });
+ // this.items = items;
+ // console.log(" this.items", this.items)
+ // },
+ async getAreaItemList() {
+ const result = await getAreaItemData(); // 假设这是一个返回Promise的函数
+ this.adjustedItem = result.data; // 将解决后的数据赋值给itemData
+ console.log(" adjustedItem", this.adjustedItem);
+ let items = [];
+ this.adjustedItem.forEach((item, index) => {
+ let newItem = {};
+ if (item.xVal !== undefined) {
+ newItem.x = parseInt(item.xVal, 10);
+ }
+ if (item.yVal !== undefined) {
+ newItem.y = parseInt(item.yVal, 10);
+ }
+ if (item.areacode !== undefined) {
+ newItem.areacode = item.areacode;
+ }
+ if (item.url !== undefined) {
+ newItem.imgSrc = item.url;
+ }
+ if (item.id !== undefined) {
+ newItem.id = item.id;
+ }
+ if (item.wVal !== undefined) {
+ newItem.w = parseInt(item.wVal, 10);
+ }
+ if (item.hVal !== undefined) {
+ newItem.h = parseInt(item.hVal, 10);
+ }
+ if (item.tVal !== undefined) {
+ newItem.t = item.tVal;
+ }
+ newItem.areaBackGroudURL = item.areaBackGroudURL;
+ newItem.areaConfigNum = item.areaConfigNum;
+ newItem.moduleName = item.moduleName;
+ newItem.areaBackGroudName = item.areaBackGroudName;
+ newItem.s = '';
+ newItem.n = '';
+ newItem.t_c = '';
+ newItem.t_c_1 = '';
+ newItem.tl = '';
+ newItem.stand = '';
+ items.push(newItem);
+ });
+
+ this.items = items;
+ console.log(" this.items", this.items);
+ },
+
evalA(string) {
@@ -546,7 +731,6 @@
right: 0;
top: 0;
bottom: 0;
-
content: "";
background-color: #059ce293;
--
Gitblit v1.9.3