123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <template>
- <!-- ios头部padding适配 -->
- <div id='app'>
- <div id='fengMap' class='fengMap'></div>
- <!-- 顶部navbar -->
- <NarBar class='nav-bar' v-if='!$route.meta.hideNarBar' />
- <!-- <div class='container'> -->
- <keep-alive>
- <router-view v-if='$route.meta.keepAlive' />
- </keep-alive>
- <router-view v-if='!$route.meta.keepAlive' />
- <!-- </div> -->
- <!-- 底部tabbar -->
- <van-tabbar v-show='$route.meta.showTabbar' class='tabber' v-model='active' :fixed='true' @change='changeTabbar'>
- <van-tabbar-item>
- <span>项目概况</span>
- <template #icon='props'>
- <!-- style='color:#ffffff;background-color:#1989fa' -->
- <i v-if='props.active' class='iconfont wanda-xiangmugaikuangactive1' />
- <!-- <i v-if='props.active' class='iconfont wanda-xiangmugaikuang' style='color:red;background:blue' /> -->
- <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',
- },
- // appTitle字典
- titleDict: {
- 0: '管理说明书',
- 1: '楼层功能',
- 2: '设备设施',
- 3: '其他事项',
- },
- isIOS: false, //是否是IOS
- key: '23f30a832a862c58637a4aadbf50a566',
- appName: '万达可视化系统',
- mapServerURL: `http://map.wanda.cn/editor`,
- mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
- }
- },
- beforeMount() {},
- created() {
- // window.vm = this
- this.handleUrl()
- // 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()
- console.log('over')
- },
- mounted() {
- // console.log('环境变量', process.env.VUE_APP_RealEnv)
- 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) => {
- // console.log('缓存楼层', res)
- })
- .catch((error) => {
- // console.log('缓存楼层', error)
- })
- }
- })
- },
- // 路由更改
- changeTabbar(active) {
- // console.log(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()
- },
- /**
- * 处理url参数
- */
- 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)
- }
- },
- /**
- * 查询url参数
- */
- queryURLParams(url) {
- let obj = {}
- url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value))
- url.replace(/#([^?=&#]+)/g, (_, hash) => (obj['HASH'] = hash))
- return obj
- },
- },
- watch: {
- plazaId(plazaId) {
- // console.log('项目id', plazaId)
- window.fengmapData = null
- // 当获取到到项目id,请求底图
- 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>
|