123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
-
- <div id='app'>
- <div id='fengMap' class='fengMap'></div>
-
- <NarBar class='nav-bar' v-if='!$route.meta.hideNarBar' />
-
- <keep-alive>
- <router-view v-if='$route.meta.keepAlive' />
- </keep-alive>
- <router-view v-if='!$route.meta.keepAlive' />
-
-
- <van-tabbar v-show='$route.meta.showTabbar' class='tabber' v-model='active' :fixed='true' @change='changeTabbar'>
- <van-tabbar-item>
- <span>项目概况</span>
- <template #icon='props'>
-
- <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' />
-
- <i v-else class='iconfont wanda-xiangmugaikuang'></i>
- </template>
- </van-tabbar-item>
- <van-tabbar-item>
- <span>楼层功能</span>
- <template #icon='props'>
- <i v-if='props.active' class='iconfont wanda-floor-func-active' />
- <i v-else class='iconfont wanda-louceng1'></i>
- </template>
- </van-tabbar-item>
- <van-tabbar-item>
- <span>设备设施</span>
- <template #icon='props'>
- <i v-if='props.active' class='iconfont wanda-sbss-active' />
- <i v-else class='iconfont wanda-shebeisheshi1'></i>
- </template>
- </van-tabbar-item>
- <van-tabbar-item>
- <span>其他事项</span>
- <template #icon='props'>
- <i v-if='props.active' class='iconfont wanda-other' />
- <i v-else class='iconfont wanda-qita1'></i>
- </template>
- </van-tabbar-item>
- </van-tabbar>
- </div>
- </template>
- <script>
- import Vue from 'vue'
- import { mapGetters, mapActions, mapMutations } from 'vuex'
- import { SFengParser } from '@saga-web/feng-map'
- import { setFloor } from '@/api/public.js'
- import { Tabbar, TabbarItem } from 'vant'
- Vue.use(Tabbar).use(TabbarItem)
- import store from './store/index'
- import NarBar from './components/Navbar'
- import { osInfo } from './utils/util'
- window.fengmapData = null
- export default {
- name: 'App',
- props: {},
- components: { NarBar },
- data() {
- return {
- active: 0,
-
- routeDict: {
- 0: 'Overview',
- 1: 'FloorFunc',
- 2: 'EquipmentFacilities',
- 3: 'OtherMatter',
- },
-
- titleDict: {
- 0: '管理说明书',
- 1: '楼层功能',
- 2: '设备设施',
- 3: '其他事项',
- },
- isIOS: false,
- key: '23f30a832a862c58637a4aadbf50a566',
- appName: '万达可视化系统',
- mapServerURL: `http://map.wanda.cn/editor`,
- mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
- }
- },
- beforeMount() {},
- created() {
-
- this.handleUrl()
-
-
- this.SETHAVEFENGMAP(false)
-
- const { os } = osInfo()
- if (os === 'iOS') {
- this.isIOS = true
- } else {
- this.isIOS = false
- }
-
- this.getFloorList()
- console.log('over')
- },
- mounted() {
-
- if (this.plazaId) {
- this.getFengMap()
- store.dispatch('getBrand')
- } else {
- window.fengmapData = null
- }
- },
- computed: {
- ...mapGetters(['plazaId', 'fmapID']),
- },
- methods: {
- ...mapActions(['getfmapID', 'getFloors']),
- ...mapMutations(['SETHAVEFENGMAP', 'SETCATEGORYID', 'SETSMSXT', 'SETSSOTOKEN', 'SETPLAZAID']),
- getFengMap() {
- this.getfmapID().then(() => {
- this.getMap()
- })
- },
- getMap() {
- window.fengmapData = new SFengParser(
- 'fengMap',
- `${this.mapServerURL}/fmap/${this.fmapID}`,
- this.key,
- this.appName,
- null,
- this.mapthemeUrl
- )
- if (this.fmapID.includes('null')) {
- this.SETHAVEFENGMAP(0)
- }
- window.fengmapData.loadMap(this.fmapID, (a, b) => {
- const dataArr = b.map((item) => {
- return item.gname
- })
-
- window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then((res) => {
- this.SETHAVEFENGMAP(1)
- })
-
- if (dataArr.length) {
- setFloor({ plazaId: this.plazaId }, dataArr)
- .then((res) => {
-
- })
- .catch((error) => {
-
- })
- }
- })
- },
-
- changeTabbar(active) {
-
- if (active == 1) {
- this.SETCATEGORYID('LCGN')
- this.SETSMSXT('')
- }
- this.$router.push({ name: this.routeDict[active] })
- store.commit('SETAPPTITLE', this.titleDict[active])
- },
-
- getFloorList() {
- this.getFloors()
- },
-
- handleUrl() {
- let url = window.location.href
- let params = this.queryURLParams(url)
- console.log('%c 路径参数:', 'color:blue')
- console.log(params)
- let { username, plazaId } = params
- if (username) {
- this.SETSSOTOKEN(`admin:${username}`)
- }
- if (plazaId) {
-
- this.SETPLAZAID(plazaId)
- }
- },
-
- queryURLParams(url) {
- let obj = {}
- url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value))
- url.replace(/#([^?=&#]+)/g, (_, hash) => (obj['HASH'] = hash))
- return obj
- },
- },
- watch: {
- plazaId(plazaId) {
-
- window.fengmapData = null
-
- if (plazaId) {
-
- this.getFengMap()
- store.dispatch('getBrand')
- } else {
- window.fengmapData = null
- }
- },
- },
- }
- </script>
- <style lang="less">
- @import './style/common.less';
- .ios-padding {
- // padding-top: 15px;
- box-sizing: border-box;
- }
- // navbar高度
- .nav-bar {
- width: 100%;
- height: 50px;
- /deep/.van-nav-bar {
- height: 100%;
- }
- }
- .fengMap {
- position: fixed;
- width: 100px;
- height: 100px;
- z-index: -1;
- opacity: 0;
- }
- // .container {
- // height: calc(100% - 105px);
- // background-color: #aaa;
- // }
- .tabber {
- height: 50px;
- //
- /deep/ .van-tabbar-item--active {
- color: #025baa !important;
- i {
- color: #025baa !important;
- }
- }
- }
- </style>
|