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";
import { setFloor } from "@/api/public.js";
window.fengmapData = null;
export default {
  data() {
    return {
      view: "",
      scene: "",
      id: "2",
      canvasID: "",
      key: "23f30a832a862c58637a4aadbf50a566",
      appName: "万达可视化系统",
      mapServerURL: `http://map.wanda.cn/editor`,
      mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
      isMounted: false,
      plazaIds: ""
    };
  },
  /**
   * 刷新保存vuex信息
   */
  created() {
    this.$store.replaceState(
      Object.assign(
        this.$store.state,
        JSON.parse(localStorage.getItem("beforeunload"))
      )
    );
    //    刷新时,将haveFengMap 置为false,解决设备设施页面,刷新时不出新楼层图的问题
    this.SETHAVEFENGMAP(false);
    localStorage.removeItem("beforeunload");
    window.addEventListener("beforeunload", () => {
      let state = JSON.stringify(this.$store.state);
      localStorage.setItem("beforeunload", state);
    });
  },
  mounted() {
    this.isMounted = true;
    this.plazaIds = localStorage.getItem("PLAZAID");
  },
  computed: {
    ...mapGetters(["plazaId", "fmapID", "haveFengMap", "accessLevel"])
  },
  methods: {
    ...mapActions(["getfmapID"]),
    ...mapMutations(["SETHAVEFENGMAP"]),
    getFengMap() {
      this.getfmapID().then(() => {
        this.getMap();
      });
    },
    getMap() {
             //如果项目为 南昌八一路 长春重庆路 青岛台东路 则不走楼层缓存接口
        // if(this.plazaIds == "1001064" || this.plazaIds == "1001065" || this.plazaIds == "1001066"){
        //     let arr = ["b2","b1","f1","f2","f3","f4","f5","f6","g80"];
        //     setFloor({ plazaId: this.plazaIds }, arr)
        //     .then(res => {
        //       console.log("缓存楼层", res);
        //     })
        //     .catch(error => {
        //       console.log("缓存楼层", error);
        //     });
        //     return
        //   }
      window.fengmapData = new SFengParser(
        `fengMap${this.id}`,
        `${this.mapServerURL}/fmap/${this.fmapID}`,
        this.key,
        this.appName,
        null,
        this.mapthemeUrl
      );
      window.fengmapData.loadMap(this.fmapID, (a, b) => {
        const dataArr = b.map(item => {
          return item.gname;
        });
        // 获取主题数据
        window.fengmapData
          .loadTheme(
            `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
          )
          .then(res => {
            this.SETHAVEFENGMAP();
          });
        // 缓存楼层数据
        if (dataArr.length) {
          //如果项目为 南昌八一路 长春重庆路 青岛台东路 则不走楼层缓存接口
          if(this.plazaIds == "1001064" || this.plazaIds == "1001065" || this.plazaIds == "1001066"){
            let arr = ["b2","b1","f1","f2","f3","f4","f5","f6","g80"];
            alert('12313')
            setFloor({ plazaId: this.plazaIds }, arr)
            .then(res => {
              console.log("缓存楼层", res);
            })
            .catch(error => {
              console.log("缓存楼层", error);
            });
            return
          }
          setFloor({ plazaId: this.plazaIds }, dataArr)
            .then(res => {
              console.log("缓存楼层", res);
            })
            .catch(error => {
              console.log("缓存楼层", error);
            });
        }
      });
    }
  },
  watch: {
    plazaIds(plazaId) {
      console.log("获取到id", plazaId);
      window.fengmapData = null;
      // 当获取到到项目id,请求底图
      if (plazaId) {
        // 请求该项目下的楼层数据
        this.getFengMap();
      } else {
        window.fengmapData = null;
      }
    },
    isMounted(isMounted) {
      if (isMounted && this.plazaIds) {
        this.getFengMap();
      }
    }
  }
};
</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: 8px;
}

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;
}

#app {
  //meri-design组件select的字体颜色
  /deep/ .p-select-fakePlaceholder {
    span {
      span {
        color: #606266 !important;
        font-size: 13px;
        font-weight: normal;
      }
    }
  }
  //element 分页组件背景色
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(
      180deg,
      rgba(54, 156, 247, 1) 0%,
      rgba(2, 91, 170, 1) 100%
    );
  }
  //element button
  /deep/ .el-button--primary,
  .p-button-primary {
    background: linear-gradient(
      180deg,
      rgba(54, 156, 247, 1) 0%,
      rgba(2, 91, 170, 1) 100%
    );
  }
}
.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;
  }
}
// element表头背景颜色修改
.core-device-report,
.specification-update-record {
  .el-table thead th {
    background-color: #f8f9fa;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(
      180deg,
      rgba(54, 156, 247, 1) 0%,
      rgba(2, 91, 170, 1) 100%
    );
  }
}
// 说明书更新记录 element 时间控件样式重写
.specification-update-record,
.core-device-report {
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-date-editor .el-range__icon,
  .el-date-editor .el-range-separator {
    line-height: 26px;
    width: 8%;
  }
}
.el-dialog__header {
  border-bottom: 1px solid rgba(239, 240, 241, 1);
}
.gantt-chart .el-dialog__title {
  font-weight: 500;
}
.img-detail-container {
  .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
  }
}
</style>