|
@@ -1,30 +1,85 @@
|
|
|
<template>
|
|
|
- <div id='app'>
|
|
|
- <router-view />
|
|
|
- </div>
|
|
|
+ <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 {}
|
|
|
+ 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));
|
|
|
},
|
|
|
- mounted() {
|
|
|
- // 监听页面刷新事件
|
|
|
- window.addEventListener('unload', this.unload)
|
|
|
- // 页面加载完成后,移除session里的存储的信息
|
|
|
- window.addEventListener('load', this.load)
|
|
|
+ load() {
|
|
|
+ sessionStorage.clear();
|
|
|
},
|
|
|
- methods: {
|
|
|
- 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,
|
|
@@ -52,8 +107,8 @@ input,
|
|
|
textarea,
|
|
|
th,
|
|
|
td {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
body,
|
|
@@ -61,7 +116,7 @@ button,
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
- font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
|
|
|
+ font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
|
|
|
}
|
|
|
|
|
|
h1,
|
|
@@ -70,7 +125,7 @@ h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6 {
|
|
|
- font-size: 100%;
|
|
|
+ font-size: 100%;
|
|
|
}
|
|
|
|
|
|
address,
|
|
@@ -80,93 +135,101 @@ var,
|
|
|
em,
|
|
|
i,
|
|
|
u {
|
|
|
- font-style: normal;
|
|
|
+ font-style: normal;
|
|
|
}
|
|
|
|
|
|
ol,
|
|
|
ul {
|
|
|
- list-style: none;
|
|
|
+ list-style: none;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
- text-decoration: none;
|
|
|
+ text-decoration: none;
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
- text-decoration: underline;
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
- border: none;
|
|
|
- vertical-align: middle;
|
|
|
+ border: none;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
:focus {
|
|
|
- outline: 0;
|
|
|
+ outline: 0;
|
|
|
}
|
|
|
|
|
|
button,
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
- font-size: 100%;
|
|
|
+ font-size: 100%;
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
- border-collapse: collapse;
|
|
|
- border-spacing: 0;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-spacing: 0;
|
|
|
}
|
|
|
|
|
|
/* 滚动条样式 */
|
|
|
|
|
|
body ::-webkit-scrollbar {
|
|
|
- width: 5px;
|
|
|
- height: 5px;
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-track {
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- border-radius: 3px;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ border-radius: 3px;
|
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-thumb {
|
|
|
- border-radius: 3px;
|
|
|
- background: #e6e6e6;
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 3px;
|
|
|
+ background: #e6e6e6;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-thumb:vertical:hover {
|
|
|
- background: #e6e6e6;
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
+ background: #e6e6e6;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.clearfix::after {
|
|
|
- content: '.';
|
|
|
- display: block;
|
|
|
- height: 0;
|
|
|
- clear: both;
|
|
|
- visibility: hidden;
|
|
|
+ content: ".";
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear: both;
|
|
|
+ visibility: hidden;
|
|
|
}
|
|
|
.clearfix {
|
|
|
- zoom: 1;
|
|
|
+ zoom: 1;
|
|
|
}
|
|
|
|
|
|
.left {
|
|
|
- float: left;
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
- float: right;
|
|
|
+ float: right;
|
|
|
}
|
|
|
html,
|
|
|
body {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- // min-width: 1920px;
|
|
|
- // background: url('./assets/images/back.jpg') no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // min-width: 1920px;
|
|
|
+ // background: url('./assets/images/back.jpg') no-repeat;
|
|
|
}
|
|
|
#app {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ .fengMap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ z-index: -1;
|
|
|
+ opacity: 0
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|