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,
  readPubGroup,
} from "@/api/editer";
export default {
  components: { topoTooltip },
  data() {
    return {
      scene: null, //场景
      view: null, //视图
      canvasWidth: 700, //画布宽
      canvasHeight: 700, //画布高
      havItem: false, //右击是否选中item
      showTooltip: false, //是否显示tooltip
      topoContent: {}, // 读图后存储图所有数据
    };
  },
  computed: {
    ...mapState([
      "editCmd",
      "legendObj",
      "graphId",
      "id",
      "isPub",
      "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();
  },
  methods: {
    ...mapMutations([
      "SETCHOICELEHEND",
      "SETLEGENDOBJ",
      "SETPROJECT",
      "SETCATEGROY",
      "SETISPUB",
    ]),
    // 恢复命令状态
    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: this.topoContent.name, // 名称
          categoryId: this.categoryId, // 图分类ID
          projectId: this.projectId, // 项目ID
          label: this.topoContent.label,
          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) => {
          // 设置发布状态为 未发布
          this.SETISPUB(0);
          const gid = res.entityList[0].graphId;
          const id = res.entityList[0].id;
          // 重设图id 与 id
          this.SETPROJECT({ graphId: gid, id: id });
          // 修改url参数
          this.$router.push({
            name: "Editer",
            query: {
              graphId: gid,
              id: id,
              categoryName: encodeURI(this.categoryName),
              isPub: 0,
            },
          });
        });
      });
      // 设置实例置顶置底
      bus.$on("setOrder", (val) => {
        this.scene.setOrder(val);
      });
      // 设置实例status状态
      bus.$on("setItemStatus", (val) => {
        this.scene.setItemStatus();
      });
    },
    // 读取拓扑图
    readtopoMsg() {
      const obj = {
        graphId: this.graphId,
        id: this.id,
      };
      if (this.isPub == 1) {
        // 已发布
        readPubGroup(obj).then((res) => {
          this.getDataSuc(res);
        });
      } else {
        readGroup(obj).then((res) => {
          this.getDataSuc(res);
        });
      }
    },
    // 读图成功回调
    getDataSuc(res) {
      this.SETCATEGROY(res.content.categoryId);
      this.topoContent = res.content;
      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);
      });
      parse.nodes.forEach((item) => {
        item.connect("finishCreated", this.scene, this.scene.finishCreated);
        item.connect("onContextMenu", this, this.scene.getItem);
        this.scene.addItem(item);
      });
      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() {
    this.SETPROJECT(this.$route.query);
    this.SETISPUB(this.$route.query.isPub);
    this.categoryName = decodeURI(this.$route.query.categoryName);
  },
};
</script>
<style lang="less" scoped>
.baseTopo {
  width: 100%;
  height: 100%;
  position: relative;
  .topoTooltip-box {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>