wanda-bm-guide/src/App.vue

<template>
  <div id="app">
    <div :id="`fengMap${id}`" class="fengMap"></div>
    <router-view />
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
import { SFengParser } from "@saga-web/feng-map";
window.fengmapData = null;
export default {
  data() {
    return {
      view: "",
      scene: "",
      id: "2",
      canvasID: "",
      key: "23f30a832a862c58637a4aadbf50a566",
      appName: "万达可视化系统",
      mapServerURL: `http://map.wanda.cn/editor`
    };
  },
  mounted() {
    // 监听页面刷新事件
    window.addEventListener("unload", this.unload);
    // 页面加载完成后，移除session里的存储的信息
    window.addEventListener("load", this.load);
    // 请求该项目下的楼层数据
    this.getFengMap();
  },
  computed: {
    ...mapGetters(["plazaId", "fmapID", "haveFengMap"])
  },
  methods: {
    ...mapActions(["getfmapID"]),
    ...mapMutations(["SETHAVEFENGMAP"]),
    unload() {
      // const { userInfo, projectId, menuStatus,manualAutoMode } = this.$store.state;
      const state = this.$store.state;
      sessionStorage.setItem("state", JSON.stringify(state));
    },
    load() {
      sessionStorage.clear();
    },
    getFengMap() {
      if (!this.fmapID) {
        this.getfmapID().then(() => {
          this.getMap();
        });
        return;
      }
      this.getMap();
    },
    getMap() {
      if (!window.fengmapData) {
        window.fengmapData = new SFengParser(
          `fengMap${this.id}`,
          `${this.mapServerURL}/fmap/${this.fmapID}`,
          this.key,
          this.appName,
          null
        );
        window.fengmapData.loadMap(this.fmapID, () => {
          // 获取主题数据
          window.fengmapData
            .loadTheme(
              `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
            )
            .then(res => {
              console.log("获取rf成功", res);
               this.SETHAVEFENGMAP()
            });
        });
      }
    }
  },
};
</script>
<style lang="less">
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}

body,
button,
input,
select,
textarea {
  font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

address,
cite,
dfn,
var,
em,
i,
u {
  font-style: normal;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border: none;
  vertical-align: middle;
}

:focus {
  outline: 0;
}

button,
input,
select,
textarea {
  font-size: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 滚动条样式 */

body ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

body ::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 3px;
}

body ::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
}

body ::-webkit-scrollbar-thumb:vertical:hover {
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
}

.clearfix::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}

.left {
  float: left;
}

.right {
  float: right;
}
html,
body {
  width: 100%;
  height: 100%;
  // min-width: 1920px;
  //   background: url('./assets/images/back.jpg') no-repeat;
}
#app {
  height: 100%;
  width: 100%;
  position: relative;
  .fengMap {
    position: fixed;
    width: 100px;
    height: 100px;
    z-index: -1;
    opacity: 0
  }
}
</style>