ECS5 / ECS5.0Web · Files

<template>
  <div
    id="context-menu"
    v-if="showContextMenu"
    :style="{ left: menuX + 'px', top: menuY + 'px' }"
  >

    <ul style="display: flex; flex-direction: column">
      <li
        class="el-icon-delete"
        v-show="showNodeMenu"
        @click="handleMenuItemClick('delete')"
      >

        删除节点
      </li>

      <li
        class="el-icon-document-copy"
        v-show="showNodeMenu"
        @click="handleMenuItemClick('copy')"
      >
        复制节点
      </li>
      <li
        class="el-icon-brush"
        v-show="showNodeMenu"
        @click="handleMenuItemClick('paste')"
      >
        粘贴节点
      </li>
      <li
        class="el-icon-edit"
        v-show="showNodeMenu"
        @click="handleMenuItemClick('edit')"
      >

        编辑属性
      </li>

      <li
        class="el-icon-film"
        v-show="showNodeMenu"
        @click="handleMenuItemClick('control')"
      >

        管制区域
      </li>

      <li
        class="el-icon-refresh"
        v-show="showCanvasMenu"
        @click="handleMenuItemClick('reset')"
      >

        地图复位
      </li>
      <!-- <li v-show="showCanvasMenu" @click="handleMenuItemClick('import')">导入</li>
      <li v-show="showCanvasMenu" @click="handleMenuItemClick('export')">导出</li> -->

      <li
        class="el-icon-data-board"
        v-show="showCanvasMenu"
        @click="handleMenuItemClick('clear')"
      >

        清空画布
      </li>
    </ul>
  </div>
</template>

<script>
import { formatTime, openConfirm, showMsg } from "@/utils/index.js";

export default {
  name: "mapContextMenu",
  props: {},
  data() {
    return {
      //画布
      graph: null,
      menuX: 0,
      menuY: 0,
      showContextMenu: false,
      showNodeMenu: false,
      showCanvasMenu: false,
      selectedNode: null,

      isRight: false,
    };
  },
  mounted() {},
  methods: {
    //显示菜单
    showMenu(point, menuType, node) {
      if (node != null) {
        if (this.isRight) {
          if (this.selectedNode) {
            this.graph.unselect(this.selectedNode);
          }
        }
        this.graph.select(node);
        this.isRight = true;
      } else {
        let isselect = this.graph.getSelectedCells();
        isselect.forEach((i) => {
          this.graph.unselect(i);
        });
      }
      this.selectedNode = node;
      this.menuX = point.x;
      this.menuY = point.y;
      this.showContextMenu = true;
      this.showCanvasMenu = false;
      this.showNodeMenu = false;
      if (menuType == 0) {
        this.showCanvasMenu = true;
      } else if (menuType == 1) {
        this.showNodeMenu = true;
      }
      // console.log("进来了");
    },
    //隐藏菜单
    hideMenu() {
      this.isRight = false;
      this.showContextMenu = false;
      this.showCanvasMenu = false;
      this.showNodeMenu = false;
    },
    //右键菜单
    handleMenuItemClick(action) {
      // if (this.selectedNode) {
      switch (action) {
        case "delete":
          // if (this.selectedNode) {
          //   this.graph.removeNode(this.selectedNode.id);
          // }

          let selected1 = this.graph.getSelectedCells();
          selected1.forEach((i) => {

            this.graph.removeNode(i.id);
          });
          break;

        case "copy":
          let selected2 = this.graph.getSelectedCells();
          this.graph.copy(selected2);
          break;
        case "paste":
          this.graph.paste();
          break;

        case "edit":
          // console.log("编辑节点:", this.selectedNode);
          // this.attributeEdit(this.selectedNode);
          if (this.selectedNode) {
            this.$emit("attribute", this.selectedNode);
          }
          break;
        case "control":
          this.$emit("control");
          break;
        case "clear":
          // 获取所有节点并移除
          openConfirm(this, "是否进行清屏操作？", () => {
            this.graph.clearCells();
          });
          break;
        case "reset":
          this.reset();
          break;
        case "import":
          this.clickSave();
          break;
        case "export":
          this.save();
          break;
      }
      // }
      this.showContextMenu = false;
    },

    clickSave() {
      document.getElementById("files").click();
    },

    //导入
    savetemplate(e) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = (evt) => {
        const fileContent = JSON.parse(evt.target.result);
        sessionStorage.setItem("mapData", evt.target.result);
        this.graph.fromJSON(fileContent);
      };
    },

    //导出
    save() {
      // // console.log(data.cells,'datadatadatadata')
      // let str = new Blob([data.cells], {type: 'text/plain;charset=utf-8'});
      // // 注意这里要手动写上文件的后缀名
      // saveAs(str, `组件json.txt`);
      sessionStorage.setItem("mapData", JSON.stringify(this.graph.toJSON()));
      const blob = new Blob([JSON.stringify(this.graph.toJSON())], {
        type: "text/plain",
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "组件json.text";
      document.body.appendChild(a);
      a.style.display = "none";
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    },

    //复位
    reset() {
      // 恢复初始缩放比例
      this.graph.scale(1, 1);
      // 恢复初始位置
      this.graph.translate(0, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
/* ... 原有样式 ... */
#context-menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-size: 14px;
  color: #606266;
}

#context-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#context-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

#context-menu li:hover {
  background: #f0f0f0;
}
</style>