cloudroam
2024-11-26 e6421c4ece90615aa0333ec58a723979c978a62b
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);
@@ -259,6 +266,7 @@
        itemParam.x = this.x
        itemParam.y = this.y
        var dto = {
          areacode : itemParam.areacode,
          xVal: itemParam.x,
          yVal: itemParam.y,
          id: itemParam.id
@@ -280,6 +288,7 @@
      itemParam.w = this.width
      itemParam.h = this.height
      var dto = {
        areacode : itemParam.areacode,
        wVal: itemParam.w,
        hVal: itemParam.h,
        id: itemParam.id
@@ -315,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()