1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景

陶杰

2024-11-29 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e

 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;