App.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <div id='app'>
  3. <div id='fengMap' class='fengMap'></div>
  4. <!-- 顶部navbar -->
  5. <NarBar class='nav-bar' v-if='!$route.meta.hideNarBar' />
  6. <!-- <div class='container'> -->
  7. <keep-alive>
  8. <router-view v-if='$route.meta.keepAlive' />
  9. </keep-alive>
  10. <router-view v-if='!$route.meta.keepAlive' />
  11. <!-- </div> -->
  12. <!-- 底部tabbar -->
  13. <van-tabbar v-show='$route.meta.showTabbar' class='tabber' v-model='active' :fixed='true' @change='changeTabbar'>
  14. <van-tabbar-item>
  15. <span>项目概况</span>
  16. <template #icon='props'>
  17. <!-- style='color:#ffffff;background-color:#1989fa' -->
  18. <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' />
  19. <!-- <i v-if='props.active' class='iconfont wanda-xiangmugaikuang' style='color:red;background:blue' /> -->
  20. <i v-else class='iconfont wanda-xiangmugaikuang'></i>
  21. </template>
  22. </van-tabbar-item>
  23. <van-tabbar-item>
  24. <span>楼层功能</span>
  25. <template #icon='props'>
  26. <i v-if='props.active' class='iconfont wanda-floor-func-active' />
  27. <i v-else class='iconfont wanda-louceng1'></i>
  28. </template>
  29. </van-tabbar-item>
  30. <van-tabbar-item>
  31. <span>设备设施</span>
  32. <template #icon='props'>
  33. <i v-if='props.active' class='iconfont wanda-sbss-active' />
  34. <i v-else class='iconfont wanda-shebeisheshi1'></i>
  35. </template>
  36. </van-tabbar-item>
  37. <van-tabbar-item>
  38. <span>其他事项</span>
  39. <template #icon='props'>
  40. <i v-if='props.active' class='iconfont wanda-other' />
  41. <i v-else class='iconfont wanda-qita1'></i>
  42. </template>
  43. </van-tabbar-item>
  44. </van-tabbar>
  45. <!-- 蜂鸟底图未加载完成时,显示loading -->
  46. <div class='app-loading' v-show='!loadComplete'>
  47. <van-loading color='#1989fa' size='40' type='spinner' vertical>加载中...</van-loading>
  48. </div>
  49. </div>
  50. </template>
  51. <script>
  52. import Vue from 'vue'
  53. import { mapGetters, mapActions, mapMutations } from 'vuex'
  54. import { SFengParser } from '@saga-web/feng-map'
  55. import { setFloor } from '@/api/public.js'
  56. import { Tabbar, TabbarItem, Loading } from 'vant'
  57. Vue.use(Tabbar).use(TabbarItem).use(Loading)
  58. import store from './store/index'
  59. import NarBar from './components/Navbar'
  60. import { osInfo } from './utils/util'
  61. window.fengmapData = null
  62. export default {
  63. name: 'App',
  64. props: {},
  65. components: { NarBar },
  66. data() {
  67. return {
  68. loadComplete: false, //蜂鸟加载,解析完成标志
  69. active: 0,
  70. // 路由字典
  71. routeDict: {
  72. 0: 'Overview',
  73. 1: 'FloorFunc',
  74. 2: 'EquipmentFacilities',
  75. 3: 'OtherMatter',
  76. },
  77. // appTitle字典
  78. titleDict: {
  79. 0: '管理说明书',
  80. 1: '楼层功能',
  81. 2: '设备设施',
  82. 3: '其他事项',
  83. },
  84. isIOS: false, //是否是IOS
  85. key: '23f30a832a862c58637a4aadbf50a566',
  86. appName: '万达可视化系统',
  87. mapServerURL: `http://mapapp.wanda.cn/editor`,
  88. mapthemeUrl: `http://mapapp.wanda.cn/editor/webtheme`,
  89. urlFlag: false,
  90. }
  91. },
  92. beforeMount() {},
  93. created() {
  94. // window.vm = this
  95. this.handleUrl()
  96. // 路径无参数,不执行后续逻辑
  97. if(!this.urlFlag){
  98. // this.loadComplete = true
  99. return
  100. }
  101. // store.commit('SETSSOTOKEN', 'admin:liujiandong')
  102. // console.log(window.location.href)
  103. this.SETHAVEFENGMAP(false)
  104. // 判断 安卓,ios
  105. const { os } = osInfo()
  106. if (os === 'iOS') {
  107. this.isIOS = true
  108. } else {
  109. this.isIOS = false
  110. }
  111. // 获取楼层列表
  112. this.getFloorList()
  113. },
  114. mounted() {
  115. // 路径无参数,不执行后续逻辑
  116. if(!this.urlFlag){
  117. // this.loadComplete = true
  118. return
  119. }
  120. // console.log('环境变量', process.env.VUE_APP_RealEnv)
  121. if (this.plazaId) {
  122. this.getFengMap()
  123. store.dispatch('getBrand')
  124. } else {
  125. window.fengmapData = null
  126. this.loadComplete = true
  127. }
  128. },
  129. computed: {
  130. ...mapGetters(['plazaId', 'fmapID']),
  131. },
  132. methods: {
  133. ...mapActions(['getfmapID', 'getFloors']),
  134. ...mapMutations(['SETHAVEFENGMAP', 'SETCATEGORYID', 'SETSMSXT', 'SETSSOTOKEN', 'SETPLAZAID']),
  135. getFengMap() {
  136. this.getfmapID().then(() => {
  137. this.getMap()
  138. })
  139. },
  140. getMap() {
  141. console.log('%c时间:', 'color:blue;background:#fff')
  142. console.time('蜂鸟下载,解析')
  143. window.fengmapData = new SFengParser(
  144. 'fengMap',
  145. `${this.mapServerURL}/fmap/${this.fmapID}`,
  146. this.key,
  147. this.appName,
  148. null,
  149. this.mapthemeUrl
  150. )
  151. if (this.fmapID.includes('null')) {
  152. this.SETHAVEFENGMAP(0)
  153. this.loadComplete = true
  154. }
  155. window.fengmapData.loadMap(this.fmapID, (a, b) => {
  156. const dataArr = b.map((item) => {
  157. return item.gname
  158. })
  159. // 获取主题数据
  160. window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then((res) => {
  161. this.SETHAVEFENGMAP(1)
  162. })
  163. console.timeEnd('蜂鸟下载,解析')
  164. this.loadComplete = true
  165. // 缓存楼层数据
  166. if (dataArr.length) {
  167. setFloor({ plazaId: this.plazaId }, dataArr)
  168. .then((res) => {
  169. // console.log('缓存楼层', res)
  170. })
  171. .catch((error) => {
  172. // console.log('缓存楼层', error)
  173. })
  174. }
  175. })
  176. },
  177. // 路由更改
  178. changeTabbar(active) {
  179. // console.log(active)
  180. if (active == 1) {
  181. this.SETCATEGORYID('LCGN')
  182. this.SETSMSXT('')
  183. }
  184. this.$router.push({ name: this.routeDict[active] })
  185. store.commit('SETAPPTITLE', this.titleDict[active])
  186. },
  187. /**
  188. * 查询楼层列表
  189. */
  190. getFloorList() {
  191. this.getFloors()
  192. },
  193. /**
  194. * 处理url参数
  195. */
  196. handleUrl() {
  197. let url = window.location.href
  198. let params = this.queryURLParams(url)
  199. // console.log('%c 路径参数:', 'color:blue')
  200. // console.log(params)
  201. let { username, plazaId } = params
  202. if(! (username && plazaId)){
  203. this.urlFlag = false
  204. return
  205. }
  206. if (username) {
  207. this.SETSSOTOKEN(`admin:${username}`)
  208. }
  209. if (plazaId) {
  210. // 设置广场
  211. this.SETPLAZAID(plazaId)
  212. }
  213. this.urlFlag = true
  214. },
  215. /**
  216. * 查询url参数
  217. */
  218. queryURLParams(url) {
  219. let obj = {}
  220. url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value))
  221. url.replace(/#([^?=&#]+)/g, (_, hash) => (obj['HASH'] = hash))
  222. return obj
  223. },
  224. },
  225. watch: {
  226. plazaId(plazaId) {
  227. // console.log('项目id', plazaId)
  228. window.fengmapData = null
  229. // 当获取到到项目id,请求底图
  230. if (plazaId) {
  231. // 请求该项目下的楼层数据
  232. this.getFengMap()
  233. store.dispatch('getBrand')
  234. } else {
  235. window.fengmapData = null
  236. }
  237. },
  238. $route(to, from) {
  239. // console.log(to, from)
  240. },
  241. },
  242. }
  243. </script>
  244. <style lang="less">
  245. @import './style/common.less';
  246. .app-loading {
  247. width: 100%;
  248. height: 100%;
  249. display: flex;
  250. justify-content: center;
  251. align-items: center;
  252. position: fixed;
  253. top: 0;
  254. background: #fff;
  255. z-index: 9999;
  256. }
  257. // navbar高度
  258. .nav-bar {
  259. width: 100%;
  260. height: 50px;
  261. /deep/.van-nav-bar {
  262. height: 100%;
  263. }
  264. }
  265. .fengMap {
  266. position: fixed;
  267. width: 100px;
  268. height: 100px;
  269. z-index: -1;
  270. opacity: 0;
  271. }
  272. // .container {
  273. // height: calc(100% - 105px);
  274. // background-color: #aaa;
  275. // }
  276. .tabber {
  277. height: 50px;
  278. //
  279. /deep/ .van-tabbar-item--active {
  280. color: #025baa !important;
  281. i {
  282. color: #025baa !important;
  283. }
  284. }
  285. }
  286. </style>