1.画板布局

陶杰

2024-11-24 79e942ec0ab33b0e6b6590bdc51d005dfef8dadb

 src/views/screen1/itm-map-plant-board.vue

@@ -1,5 +1,5 @@
<template>
  <div style="position: relative;" class="itm-map-vr" @contextmenu="showMenu($event)"
  <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' : ''
      }" 
@@ -203,6 +203,8 @@

      areaVisible:false,
      areaPosition: { x: 0, y: 0 },
      mouseX:0,
      mouseY:0,

    };
  },
@@ -210,6 +212,11 @@
  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);
@@ -317,6 +324,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()