Browse Source

feat: App.vue获取工程信息化参数后,页面逻辑优化

yunxing 4 years ago
parent
commit
be79faf41d
2 changed files with 89 additions and 124 deletions
  1. 70 99
      src/App.vue
  2. 19 25
      src/main.ts

+ 70 - 99
src/App.vue

@@ -57,9 +57,10 @@ import { Tabbar, TabbarItem, Loading } from 'vant'
 Vue.use(Tabbar).use(TabbarItem).use(Loading)
 import store from './store/index'
 import NarBar from './components/Navbar'
-import { osInfo } from './utils/util'
 import { decrypted } from "./utils/crypto.js";
-
+import  axios from "axios";
+import { Toast } from "vant";
+Vue.use(Toast)
 window.fengmapData = null
 export default {
     name: 'App',
@@ -83,7 +84,6 @@ export default {
                 2: '设备设施',
                 3: '其他事项',
             },
-            isIOS: false, //是否是IOS
             key: '23f30a832a862c58637a4aadbf50a566',
             appName: '万达可视化系统',
             mapServerURL: `http://mapapp.wanda.cn/editor`,
@@ -91,6 +91,17 @@ export default {
             urlFlag: false,
         }
     },
+     watch: {
+        url: {
+            // 监听url,有url时再进行接口查询
+            handler(newV){
+                if(newV){
+                    this.initPage()
+                }
+            },
+            immediate:true
+        }
+    },
     beforeMount() {},
     created(){
         window.vmh5 = this
@@ -101,34 +112,20 @@ export default {
     methods: {
         ...mapActions(['getfmapID', 'getFloors']),
         ...mapMutations(['SETHAVEFENGMAP', 'SETCATEGORYID', 'SETSMSXT', 'SETSSOTOKEN', 'SETPLAZAID', 'SETURL']),
-         createdFn() {
+        // 获取到APP参入的参数之后,渲染页面
+        initPage() {
             // window.vm = this
             this.handleUrl()
             // 路径无参数,不执行后续逻辑
             if(!this.urlFlag){
-                // this.loadComplete = true
+                this.loadComplete = true
+                // Toast.fail('参数错误!')
                 return
             }
-            // store.commit('SETSSOTOKEN', 'admin:liujiandong')
-            // console.log(window.location.href)
             this.SETHAVEFENGMAP(false)
-            // 判断 安卓,ios
-            const { os } = osInfo()
-            if (os === 'iOS') {
-                this.isIOS = true
-            } else {
-                this.isIOS = false
-            }
             // 获取楼层列表
-            this.getFloorList()
-        },
-        mountedFn() {
-            // 路径无参数,不执行后续逻辑
-            if(!this.urlFlag){
-                // this.loadComplete = true
-                return
-            }
-            // console.log('环境变量', process.env.VUE_APP_RealEnv)
+            this.getFloors()
+            // 
             if (this.plazaId) {
                 this.getFengMap()
                 store.dispatch('getBrand')
@@ -137,14 +134,58 @@ export default {
                 this.loadComplete = true
             }
         },
+        /**
+         * 处理工程信息化APP返回的参数
+         */
+        handleUrl() {
+            // 从vuex中获取url(开发环境使用模拟的参数,)
+            let href =  this.url
+            if(!href){
+                this.urlFlag =  false 
+                return
+            }
+            // 解密url
+            // console.log(href)
+            let url = decrypted(href) // window.location.href
+            // console.log('url: '+ url )
+            // TODO: 开发环境,参数修改
+            if (process.env.VUE_APP_RealEnv === 'development') {   
+                url = `username=wangjintao&plazaId=1000772`
+            }
+            let params = this.queryURLParams(url)
+            let { username, plazaId, assetid } = params
+            if (username) {
+                this.SETSSOTOKEN(`admin:${username}`)
+            }
+            if (plazaId) {
+                //  设置广场
+                this.SETPLAZAID(plazaId)
+            }
+            // 进入H5页面时,如果有assetid,跳转到设备详情页面
+            if (assetid) {
+                this.$router.push({ name:'AssetDetail', query: { assetid, first: true } })
+            }
+            this.urlFlag = true 
+        },
         getFengMap() {
+            // 查询一次蜂鸟接口,蜂鸟接口不通,进行提示,关闭loading
+            const axiosFeng = axios.create({ timeout: 3000})
+            axiosFeng.get(`http://mapapp.wanda.cn/sgmap/mapversion?mapId=${this.plazaId}`).then(res=>{
+                console.log('蜂鸟接口正常!')
+            }).catch(error=>{
+                console.log('蜂鸟接口异常!')
+                this.loadComplete = true
+                // Toast.fail('平面图加载失败!')
+            })
+            // 加载底图
             this.getfmapID().then(() => {
                 this.getMap()
             })
         },
         getMap() {
-            // console.log('%c时间:', 'color:blue;background:#fff')
-            // console.time('蜂鸟下载,解析')
+            console.log('%c蜂鸟下载,解析耗时: ', 'color:blue;background:#fff')
+            console.time('蜂鸟下载,解析') 
+            const startTime = new Date().getTime()
             window.fengmapData = new SFengParser(
                 'fengMap',
                 `${this.mapServerURL}/fmap/${this.fmapID}`,
@@ -165,7 +206,8 @@ export default {
                 window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then((res) => {
                     this.SETHAVEFENGMAP(1)
                 })
-                // console.timeEnd('蜂鸟下载,解析')
+                console.timeEnd('蜂鸟下载,解析')
+                console.log(new Date().getTime() - startTime + ' ms')
                 this.loadComplete = true
                 // 缓存楼层数据
                 if (dataArr.length) {
@@ -189,51 +231,7 @@ export default {
             this.$router.push({ name: this.routeDict[active] })
             store.commit('SETAPPTITLE', this.titleDict[active])
         },
-        /**
-         * 查询楼层列表
-         */
-        getFloorList() {
-            this.getFloors()
-        },
-        /**
-         * 处理url参数
-         */
-        handleUrl() {
-            // let href = window.location.href.split('?')[1]
-            let href =  this.url
-            if(!href){
-                this.urlFlag =  false 
-                return
-            }
-            // 解密url
-            // console.log(href)
-            let url = decrypted(href) // window.location.href
-            // console.log('url: '+ url )
-            // 开发环境,参数修改
-            if (process.env.VUE_APP_RealEnv === 'development') {   
-                url = `username=wangjintao&plazaId=1000772&time=${new Date().getTime()}`
-            }
-            let params = this.queryURLParams(url)
-            // console.log('%c 路径参数:', 'color:blue')
-            // console.log(params)
-            let { username, plazaId, assetid } = params
-            // if(! (username && plazaId)){
-            //     this.urlFlag =  false 
-            //     return
-            // }
-            if (username) {
-                this.SETSSOTOKEN(`admin:${username}`)
-            }
-            if (plazaId) {
-                //  设置广场
-                this.SETPLAZAID(plazaId)
-            }
-            // 进入H5页面时,如果有assetid,跳转到设备详情页面
-            if (assetid) {
-                this.$router.push({ name:'AssetDetail', query: { assetid, first: true } })
-            }
-            this.urlFlag =  true 
-        },
+        
         /**
          * 查询url参数
          */
@@ -244,34 +242,7 @@ export default {
             return obj
         },
     },
-    watch: {
-        plazaId(plazaId) {
-            // console.log('watch plazaId',plazaId)
-            // console.log('项目id', plazaId)
-            window.fengmapData = null
-            // 当获取到到项目id,请求底图
-            if (plazaId) {
-                // 请求该项目下的楼层数据
-                this.getFengMap()
-                store.dispatch('getBrand')
-            } else {
-                window.fengmapData = null
-            }
-        },
-        $route(to, from) {
-            // console.log(to, from)
-        },
-        url: {
-            // 监听url,有url时再进行接口查询
-            handler(newV){
-                if(newV){
-                    this.createdFn()
-                    this.mountedFn()
-                }
-            },
-            immediate:true
-        }
-    },
+   
 }
 </script>
 <style lang="less">

+ 19 - 25
src/main.ts

@@ -45,28 +45,22 @@ if (process.env.NODE_ENV === 'production' && ua.match(/(iPhone | Android)/)) {
     }).$mount('#app')        
 }
 // 如果直接在电脑上预览,2s后,dispatch deviceready
-setTimeout(() => {
-    if (flag) {
-        return
-    }
-    const myEvent = new CustomEvent('deviceready', {
-        detail: {
-            title: 'This is deviceready!',
-        },
-    })
-    window.addEventListener('deviceready', function(event) {
-        // console.log('deviceready success')
-    })
-    // 随后在对应的元素上触发该事件
-    if (window.dispatchEvent) {
-        window.dispatchEvent(myEvent)
-    } else {
-        window.fireEvent(myEvent)
-    }
-}, 2000)
-
-// new Vue({
-//     router,
-//     store,
-//     render: (h) => h(App),
-// }).$mount('#app')
+// setTimeout(() => {
+//     if (flag) {
+//         return
+//     }
+//     const myEvent = new CustomEvent('deviceready', {
+//         detail: {
+//             title: 'This is deviceready!',
+//         },
+//     })
+//     window.addEventListener('deviceready', function(event) {
+//         // console.log('deviceready success')
+//     })
+//     // 随后在对应的元素上触发该事件
+//     if (window.dispatchEvent) {
+//         window.dispatchEvent(myEvent)
+//     } else {
+//         window.fireEvent(myEvent)
+//     }
+// }, 2000)