App.vue 7.9 KB

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