persagy_topo_editer/src/components/editview/baseTopoEditer.vue

<template>
  <div class="baseTopo" id="baseTopo" ref="baseTopo">
    <topoTooltip v-show="showTooltip" class="topoTooltip-box" ref="topoTooltip" :havItem="havItem"></topoTooltip>
    <canvas id="persagy_topo" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  </div>
</template>
<script>
import { PTopoScene, PTopoParser } from "@/components/editClass/persagy-edit";
import { SGraphView } from "@persagy-web/graph";
import topoTooltip from "./topoTooltip.vue";
import { mapState, mapMutations } from "vuex";
import bus from "@/bus/bus";
import { saveGroup, readGroup } from "@/api/editer";
export default {
  components: { topoTooltip },
  data() {
    return {
      scene: null, //场景
      view: null, //视图
      canvasWidth: 700, //画布宽
      canvasHeight: 700, //画布高
      havItem: false, //右击是否选中item
      showTooltip: false, //是否显示tooltip
    };
  },
  computed: {
    ...mapState(["choiceLegend"]),
  },
  mounted() {
    this.canvasWidth = this.$refs.baseTopo.offsetWidth;
    this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
    this.scene = new PTopoScene();
    this.view = new SGraphView("persagy_topo");
    this.view.scene = this.scene;
    this.scene.clearCmdStatus = this.clearCmdStatus;
    // 初始化bus绑定事件
    this.initBusEvent();
    // 右键事件
    this.scene.getItem = this.onContextMenu;
    this.scene.emitChoice = this.emitChoice;
    //左键事件
    this.scene.vueOnMouseDown = this.vueOnMouseDown;
    // 屏蔽浏览器右键功能（防止与编辑器右键交互重合）
    document.getElementById("baseTopo").oncontextmenu = function (e) {
      return false;
    };
    // 读取底图
    this.readtopoMsg();
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND"]),
    // 恢复命令状态
    clearCmdStatus() {
      this.SETCHOICELEHEND("");
    },
    // 右键获取item
    onContextMenu(item, [event]) {
      this.showTooltip = true;
      console.log(item);
      if (item) {
        this.havItem = true;
      } else {
        this.havItem = false;
      }
      const doms = document.getElementsByClassName("topoTooltip-box")[0];
      doms.style.left = event.offsetX + "px";
      doms.style.top = event.offsetY + "px";
    },
    // 左键事键
    vueOnMouseDown(e) {
      //  关闭tooltip
      this.showTooltip = false;
    },
    // 选中后的回调函数
    emitChoice(itemList) {
      bus.$emit("emitChoice", itemList);
    },
    //初始化bus绑定事件
    initBusEvent() {
      // 改变样式
      bus.$on("updateStyle", (type, val) => {
        this.scene.updateStyle(type, val);
      });
      // 撤销
      bus.$on("topoUndo", (val) => {
        this.scene.undo();
      });
      // 重做
      bus.$on("topoRedo", (val) => {
        this.scene.redo();
      });
      // 删除
      bus.$on("deleteItem", (val) => {
        this.scene.deleteItem();
      });
      // 复制
      bus.$on("copy", (val) => {
        this.scene.copy();
      });
      // 粘贴
      bus.$on("paste", (val) => {
        this.scene.paste();
      });
      // 保存
      bus.$on("saveTopo", (val) => {
        const Elements = this.scene.save();
        const obj = {
          Elements,
          Name: "1", // 名称
          CategoryID: "1", // 图分类ID
          ProjectID: "1", // 项目ID
          BuildingID: "1", // 建筑ID
          FloorID: "1", // 楼层id
          Note: "1", // 图说明
          Log: {
            // 图操作日志
            Mark: "1", // 图的存盘标记
            CommandList: [
              {
                Command: "1", // 命令
                Desc: "1", // 描述
                Detail: "1", // 详情
              },
            ],
          },
        };
        Object.assign(obj, {
          GraphId: "6500f7d6db5a40d4be4313ea654b1373",
          Id: "d6c1926ee74b438d87c6b06fec9806c6",
        });
        console.log(obj);
        saveGroup(obj).then((res) => {
          console.log("res", res);
        });
      });
    },
    // 读取拓扑图
    readtopoMsg() {
      let obj = {
        GraphId: "6500f7d6db5a40d4be4313ea654b1373",
        Id: "d6c1926ee74b438d87c6b06fec9806c6",
      };
      readGroup(obj).then((res) => {
        console.log("resssssss", res);
        const parse = new PTopoParser();
        parse.parseData(res.Content.Elements);
        console.log(parse.Markers);
        parse.Markers.forEach((item) => {
          this.scene.addItem(item);
        });
        console.log(this.scene);
      });
    },
  },
  watch: {
    choiceLegend(val) {
      if (this.scene) {
        // 设置当前编辑状态
        this.scene.editCmd = this.choiceLegend;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.baseTopo {
  width: 100%;
  height: 100%;
  position: relative;
  .topoTooltip-box {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>