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"
      @closeTooltip="showTooltip = false"
      :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 { SFloorParser } from "@persagy-web/big/lib";
import topoTooltip from "./topoTooltip.vue";
import { mapState, mapMutations } from "vuex";
import bus from "@/bus/bus";
import { saveGroup, readGroup, uploadGroup, getImageGroup } 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(["editCmd", "legendObj", "graphId", "id", "categoryId","projectId"]),
  },
  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();
    // 读取平面图-------测试代码
    // this.readMapmsg();
  },
  methods: {
    ...mapMutations([
      "SETCHOICELEHEND",
      "SETLEGENDOBJ",
      "SETPROJECT",
      "SETCATEGROY",
    ]),
    // 恢复命令状态
    clearCmdStatus() {
      this.SETCHOICELEHEND("");
      this.SETLEGENDOBJ(null);
    },
    // 右键获取item
    onContextMenu(item, [event]) {
      this.showTooltip = true;
      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: this.categoryId, // 图分类ID
          projectId: this.projectId, // 项目ID
          buildingId: "1", // 建筑ID
          floorId: "1", // 楼层id
          note: "1", // 图说明
          log: {
            // 图操作日志
            mark: "1", // 图的存盘标记
            commandList: [
              {
                command: "1", // 命令
                desc: "1", // 描述
                detail: "1", // 详情
              },
            ],
          },
        };
        Object.assign(obj, {
          graphId: this.graphId,
          id: this.id,
        });
        console.log(obj);
        saveGroup(obj).then((res) => {
          console.log("res", res);
        });
      });
      // 设置实例置顶置底
      bus.$on("setOrder", (val) => {
        this.scene.setOrder(val);
      });
      // 设置实例status状态
      bus.$on("setItemStatus", (val) => {
        this.scene.setItemStatus();
      });
    },
    // 读取拓扑图
    readtopoMsg() {
      let obj = {
        graphId: this.graphId,
        id: this.id,
      };
      readGroup(obj).then((res) => {
        this.SETCATEGROY(res.content.categoryId);
        const parse = new PTopoParser();
        parse.parseData(res.content.elements);
        parse.markers.forEach((item) => {
          item.selectable = true;
          item.moveable = true;
          item.connect("finishCreated", this.scene, this.scene.finishCreated);
          item.connect("onContextMenu", this, this.scene.getItem);
          this.scene.addItem(item);
        });
      });
    },
    readMapmsg() {
      let parser = new SFloorParser();
      const msg = require("./../../assets/map/1.json");
      parser.parseData(msg.EntityList[0].Elements);
      parser.spaceList.forEach((t) => this.scene.addItem(t));
      parser.wallList.forEach((t) => this.scene.addItem(t));
      parser.virtualWallList.forEach((t) => this.scene.addItem(t));
      parser.doorList.forEach((t) => this.scene.addItem(t));
      parser.columnList.forEach((t) => this.scene.addItem(t));
      parser.casementList.forEach((t) => this.scene.addItem(t));
      this.view.fitSceneToView();
    },
  },
  watch: {
    editCmd(val) {
      console.log("val", val);
      if (this.scene) {
        // 设置当前编辑状态
        this.scene.editCmd = val;
      }
    },
    legendObj: {
      handler: function (val, oldVal) {
        this.scene.legendObj = val;
      },
      deep: true,
    },
  },
  created() {
    console.log(this.$route.query)
    // this.SETPROJECT(this.$route.query);
  },
};
</script>
<style lang="less" scoped>
.baseTopo {
  width: 100%;
  height: 100%;
  position: relative;
  .topoTooltip-box {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>