wanda-bm-guide/src/components/floorMap/index.vue

<!-- 底图 -->
<template>
  <div id="floor_base" v-loading="loading" ref="graphy">
    <canvas :id="`canvas${id}`" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
    <!-- 地图底部操作按钮 -->
    <div class="strip-bottom">
      <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @saveJson="saveJson" @scale="scale" @showText="showText" ref="canvasFun"></canvasFun>
    </div>
    <room-box ref="boxRoom"></room-box>
  </div>
</template>
<script>
import { SFengParser } from "@saga-web/feng-map";
import { SFloorParser } from "@saga-web/big";
import { FloorView } from "@/lib/FloorView";
import { FloorScene } from "@/lib/FloorScene";
import RoomBox from "@/views/room/index";
import canvasFun from "@/components/floorMap/canvasFun";
import { readGroup } from "@/api/public";
import { STopologyParser } from "@/lib/parsers/STopologyParser";
import { mapGetters, mapActions } from "vuex";
import { SImageItem } from "@saga-web/graph/lib";
import bus from "@/utils/bus.js"

// import { uuid } from "@/components/mapClass/until";

export default {
  data() {
    return {
      appName: "万达可视化系统",
      key: "23f30a832a862c58637a4aadbf50a566",
      mapServerURL: `/wdfn`,
      canvasWidth: 1100,
      canvasHeight: 800,
      loading: false, // 限制重复查询
      view: null,
      urlMsg: {},
      canvasID: "canvas",
      floorid: "", //楼层id
      topologyParser: null, // 解析器数据
    };
  },
  props: {
    id: {
      default: "1",
      type: String
    },
      categoryId: {
      default: "",
      type: String
    },

    loadName: null,
    type: null
  },
  components: { RoomBox, canvasFun },
  computed: {
    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
  },
  methods: {
    ...mapActions(["getfmapID"]),
    init(floorid) {
      this.loading = true;
      this.floorid = floorid;
      setTimeout(() => {
        if (this.haveFengMap) {
          this.clearGraphy();
          this.scene = new FloorScene();
          this.scene.selectContainer.connect(
            "listChange",
            this,
            this.listChange
          );
          if (this.canvasID != `canvas${this.id}`) {
            this.canvasID = `canvas${this.id}`;
          }
          this.parserData(floorid);
        }
      }, 100);
    },
    parserData(floor) {
      if (floor == "g80") {
        // 屋顶
        if (window.fengmapData.frImg) {
          let imgItem = new SImageItem(
            null,
            `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`
          );
          this.scene.addItem(imgItem);
          this.view.scene = this.scene;
          this.view.minScale = this.view.scale;
          if (this.$refs.canvasFun) {
            this.$refs.canvasFun.everyScale = this.view.scale;
          }
          this.view.fitSceneToView();
        }
      } else {
        if (window.fengmapData.gnameToGid[floor]) {
          window.fengmapData.parseData(
            window.fengmapData.gnameToGid[floor],
            res => {
              if (res.err) {
                console.log("errr", res.err);
                return;
              }
              const fParser = new SFloorParser(null);
              fParser.parseData(res);
              fParser.spaceList.forEach(t => {
                //   t.selectable = true;
                this.scene.addItem(t);
              });
              fParser.wallList.forEach(t => this.scene.addItem(t));
              fParser.virtualWallList.forEach(t => this.scene.addItem(t));
              fParser.doorList.forEach(t => this.scene.addItem(t));
              fParser.columnList.forEach(t => this.scene.addItem(t));
              fParser.casementList.forEach(t => this.scene.addItem(t));
              this.view.scene = this.scene;
              this.view.minScale = this.view.scale;
              if (this.$refs.canvasFun) {
                this.$refs.canvasFun.everyScale = this.view.scale;
              }
              this.view.fitSceneToView();
              //console.log('success')
            }
          );
        } else {
          console.log("楼层不正确");
        }
      }
      this.readGroup(this.floorid).then(data => {
        this.loading = false;
        if (data.Data.length > 0) {
          //console.log(data.data.Data[0].ID)
          this.$cookie.set("graphId", data.Data[0].ID, 3);
        }
        this.topologyParser = new STopologyParser(null);
        this.topologyParser.parseData(data.Data[0].Elements);
        // 多边形
        this.topologyParser.zoneLegendList.forEach(t => {
          this.scene.addItem(t);
        });
        // 增加文字
        this.topologyParser.textMarkerList.forEach(t => {
          this.scene.addItem(t);
        });
        // 增加图片
        this.topologyParser.imageMarkerList.forEach(t => {
          this.scene.addItem(t);
        });
        // 增加直线
        this.topologyParser.lineMarkerList.forEach(t => {
          this.scene.addItem(t);
        });
        // 增加图标类图例
        this.topologyParser.imageLegendList.forEach(t => {
          this.scene.addItem(t);
        });
        // 增加管线类
        // 增加图标类图例
        this.topologyParser.relationList.forEach(t => {
          this.scene.addItem(t);
        });
        this.view.fitSceneToView();
      });
    },
    clearGraphy() {
      if (this.view) {
        this.view.scene = null;
        return;
      }
      this.view = new FloorView(`canvas${this.id}`);
    },
    listChange(item, ev) {
      let name = ev[0][0].data.Name;
      if (name.slice(name.length - 2, name.length) == "机房") {
        this.$refs.boxRoom.open({ name: name, type: this.type });
      }
    },
    // 适配底图到窗口
    fit() {
      this.view.fitSceneToView();
    },
    // 保存为png
    savePng() {
      this.view.saveImage(`${this.loadName}.png`, "png");
      //console.log(`${this.loadName}.png`)
    },
    // 保存为svg
    saveSvg() {
      this.view.saveSceneSvg(`${this.loadName}.svg`, 6400, 4800);
    },
    // 保存为json
    saveJson() {
      this.view.saveFloorJson(`${this.loadName}.json`);
    },
    // 缩放
    scale(val) {
      if (!this.view) {
        return;
      }
      let scale = this.view.scale;
      this.view.scaleByPoint(
        val / scale,
        this.canvasWidth / 2,
        this.canvasHeight / 2
      );
    },
    showText() {
        this.topologyParser.zoneLegendList.forEach(t => {
          t.showText = !t.showText;
        })
    },
    // 读取数据
    readGroup(FloorID) {
      const data = {
        BuildingID: "1",
        FloorID: FloorID,
        categoryId: this.categoryId ? this.categoryId : this.$cookie.get("categoryId"),
        projectId: this.urlMsg.ProjectID
      };
      return readGroup(data);
    },
    // 地图尺寸
    mapSize() {
      if (window.screen.height == "768") {
        this.canvasWidth = this.$refs.graphy.offsetWidth;
        this.canvasHeight = this.$refs.graphy.offsetHeight - 100;
      } else {
        this.canvasWidth = this.$refs.graphy.offsetWidth;
        this.canvasHeight = 900;
      }
    },
    getEvent() {
      bus.$on('changeShow', res => {
        this.topologyParser.zoneLegendList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        })
        this.topologyParser.textMarkerList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        });
        this.topologyParser.imageMarkerList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        });
        this.topologyParser.lineMarkerList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        });
        this.topologyParser.imageLegendList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        });
        this.topologyParser.relationList.forEach(t => {
          let id = t.data.GraphElementId
          t.maskFlag = !(res.indexOf(id) > -1)
        });
      })
    }
  },
  watch: {
    "view.scale": {
      handler(n) {
        if (this.$refs.canvasFun) {
          let s = (n * 10) / this.view.minScale;
          this.$refs.canvasFun.sliderVal = s > 1000 ? 1000 : s;
        }
      }
    },
    haveFengMap(val) {
      if (val) {
        this.init(this.floorid);
      }
    }
  },
  mounted() {
    this.mapSize();
    this.getEvent()
  },
  created() {
    this.urlMsg = {
      categoryId: this.$cookie.get("categoryId"),
      ProjectID: this.plazaId,
      BuildingID: "1",
      FloorID: this.$cookie.get("floorMapId") || "f1",
      fmapID: this.fmapID
    };
  }
};
</script>
<style lang="less" scoped>
#floor_base {
  position: relative;
  .fengMap {
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: -1;
  }
  .strip-bottom {
    position: absolute;
    right: 0;
    bottom: 40px;
    width: 100%;
  }
}
</style>