persagy-web-doc/docs/.vuepress/components/tDInsert/addEvent1.vue

<!-- 画板 -->
<template>
  <div class="base-map">
    <canvas
      v-loading="loading"
      id="floorMap4"
      :width="canvasWidth"
      :height="canvasHeight"
      tabindex="0"
    ></canvas>
  </div>
</template>
<script>
import { SGraphView, SGraphScene } from "@persagy-web/graph";
import { SFloorParser, getJsonz, SZoneParser } from "@persagy-web/big/lib";
import { SColor } from "@persagy-web/draw";
import { eventScene } from "./addEventClass/eventScene";
export default {
  data() {
    return {
      canvasWidth: 0, // 画布的宽
      canvasHeight: 0, // 画布的高
      view: null, // 视图 view
      scene: null, // 场景类
      dataKey: "base/f2a4b3d10d3511eb9a1da1ce4aece47c.jsonz", // 基 路径
      mapUrl: "/image-service/common/file_get?systemId=revit&key=", // 图 key
      loading: false,
      isShowColumn: false, //是否展示柱子
      isShowWall: false, //是否显示墙
      isShowVirtualWall: false, //是否显示虚拟墙
      isShowDoor: false, // 是否显示门
      isShowWindow: false, //是否显示窗户
      isSpaceSelectable: true, //是否显示空间
      selectItem: null, // 选中的 item 实例
    };
  },
  methods: {
    // 初始化
    init() {
      this.clearImg();
      this.view ? (this.view.scene = this.scene) : null;
      // 获取压缩包数据并解压
      this.getMapBlob();
    },
    // 请求获取地图的压缩包
    getMapBlob() {
      const url = this.mapUrl + this.dataKey;
      this.loading = true;

      getJsonz(url)
        .then((data) => {
          // 解析数据并放入压缩包中
          this.parserData(data);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 解析数据并注入 scene 类中
    parserData(data) {
      let parser = new SFloorParser();
      parser.parseData(data);
      parser.spaceList.forEach((t) => {
        /////////////////////////////////////////
        // 样式调整
        // 是否显示实例
        t.visible = this.isSpaceSelectable;
        //是否展示名称
        t.showBaseName = false;
        // 显示边框色
        t.strokeColor = new SColor("#F0F3F7");
        // 填充色
        t.fillColor = new SColor("#F0F3F7");
        // 边框线宽
        t.lineWidth = 1;

        t.connect("onMouseDown", this, this.onMousedown);
        t.connect("onMouseUp", this, this.onMouseup);
        t.connect("onMouseLeave", this, this.onMouseleave);
        t.connect("onMouseEnter", this, this.onMouseenter);
        // 添加图例
        this.scene.addItem(t);
      });
      parser.wallList.forEach((t) => {
        // 是否显示
        t.visible = this.isShowWall;
        this.scene.addItem(t);
      });
      parser.virtualWallList.forEach((t) => {
        // 是否显示
        t.visible = this.isShowVirtualWall;
        this.scene.addItem(t);
      });
      parser.doorList.forEach((t) => {
        // 是否显示
        t.visible = this.isShowDoor;
        this.scene.addItem(t);
      });
      parser.columnList.forEach((t) => {
        // 是否显示
        t.visible = this.isShowColumn;
        this.scene.addItem(t);
      });
      parser.casementList.forEach((t) => {
        // 是否显示
        t.visible = this.isShowWindow;
        this.scene.addItem(t);
      });
      // 画板是否可拖动
        if (this.view) {
        this.view.DragMove = true;
        this.view.fitSceneToView();
      }
    },

    // 鼠标点击事件
    onMousedown(item, e) {
      const DefaltColor = "#F0F3F7"; //默认颜色
      const clickColor = "#7ed321";
      // 如果点击前有选中的 selectItem 清空
      if (this.selectItem) {
        this.selectItem.fillColor = new SColor(DefaltColor);
        this.selectItem.strokeColor = new SColor(DefaltColor);
      }
      // 是否选中 item
      if (item) {
        // 判断当前 item 是否重复点击或者之前 selectItem = null
        if (this.selectItem) {
          if (this.selectItem != item) {
            // 之前空间置回原来的状态
            const oldSelectItem = this.selectItem;
            oldSelectItem.fillColor = new SColor(DefaltColor);
            oldSelectItem.strokeColor = new SColor(DefaltColor);
            // 新item高亮
            const newSelectItem = item;
            newSelectItem.fillColor = new SColor(clickColor);
            newSelectItem.strokeColor = new SColor(clickColor);
            this.selectItem = newSelectItem;
          } else {
            // 将选中的item 置为默认状态 选中 selectItem 为空
            const oldSelectItem = this.selectItem;
            oldSelectItem.fillColor = new SColor(DefaltColor);
            oldSelectItem.strokeColor = new SColor(DefaltColor);
            this.selectItem = null;
          }
        } else {
          // 如果点击前没有选中的 item 则直接赋给
          this.selectItem = item;
          this.selectItem.fillColor = new SColor(clickColor);
          this.selectItem.strokeColor = new SColor(clickColor);
        }
      } else {
        this.selectItem = null;
      }
    },
    // 鼠标抬起事件
    onMouseup(item, e) {},
    // 鼠标事件移入
    onMouseenter(item, e) {
      // 如果为点击选中的实例则不做样式修改
      if (this.selectItem && item == this.selectItem) return;
      item.fillColor = new SColor("#E1F2FF");
      item.strokeColor = new SColor("#E1F2FF");
    },
    // 鼠标事件移出
    onMouseleave(item, e) {
       // 如果为点击选中的实例则不做样式修改
      if (this.selectItem && item == this.selectItem) return;
      item.fillColor = new SColor("#F0F3F7");
      item.strokeColor = new SColor("#F0F3F7");
    },
    // 清空画布
    clearImg() {
      this.scene = new eventScene();
      this.scene.vueOnMouseDown = this.onMousedown;
      if (this.view) {
        this.view.update();
      }
    },
  },
  watch: {
    // 监听key
    dataKey: {
      handler(val) {
        if (val) {
          this.init();
        }
      },
      immediate: true,
    },
  },
  created() {
    this.clearImg();
  },
  mounted() {
    // 获取 canvas 的宽高
    this.canvasWidth = 800;
    this.canvasHeight = 600;
    // 初始化场景类
    this.view = new SGraphView("floorMap4");
    if (this.scene) {
      this.view.scene = this.scene;
    }
  },
};
</script>