123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- <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.fengmap = null;
- export default {
- data() {
- return {
- view: "",
- scene: "",
- id: "2",
- canvasID: "",
- key: "23f30a832a862c58637a4aadbf50a566",
- appName: "万达可视化系统",
- mapServerURL: `/wdfn`
- };
- },
- 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.fengmap) {
- window.fengmap = new SFengParser(
- `fengMap${this.id}`,
- `${this.mapServerURL}/fmap/${this.fmapID}`,
- this.key,
- this.appName,
- null
- );
- window.fengmap.loadMap(this.fmapID, () => {
- // 获取主题数据
- window.fengmap
- .loadTheme(
- `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
- )
- .then(res => {
- console.log("获取rf成功", res);
- this.SETHAVEFENGMAP()
- });
- });
- }
- }
- },
- watch: {
- haveFengMap(val) {
- alert(val);
- }
- }
- };
- </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>
|