Selaa lähdekoodia

集中获取蜂鸟数据

YaolongHan 4 vuotta sitten
vanhempi
commit
8664a560a3
2 muutettua tiedostoa jossa 125 lisäystä ja 57 poistoa
  1. 120 57
      src/App.vue
  2. 5 0
      src/store/index.js

+ 120 - 57
src/App.vue

@@ -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>

+ 5 - 0
src/store/index.js

@@ -17,6 +17,7 @@ export default new Vuex.Store({
         floorsArr: [], //楼层数组
         floorSelect: [], //楼层下拉框
         fmapID: '',
+        haveFengMap:false ,//是否有蜂鸟地图的数据
     },
     getters: {
         floorsArr: (state) => state.floorsArr,
@@ -24,6 +25,7 @@ export default new Vuex.Store({
         plazaId: (state) => state.plazaId,
         plazas: (state) => state.plazas,
         fmapID: (state) => state.fmapID,
+        haveFengMap:(state) => state.haveFengMap
     },
     mutations: {
         // 设置是否登陆校验
@@ -53,6 +55,9 @@ export default new Vuex.Store({
         SETMAPID(state, data) {
             state.fmapID = data
         },
+        SETHAVEFENGMAP(state) {
+            state.haveFengMap = true;
+        },
     },
     actions: {
         // 获取项目列表、userId