|
@@ -1,959 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div class="space-main" id="spaceMain">
|
|
|
- <div class="space-box"
|
|
|
- v-if="mapData && mapData.spaceList && mapData.spaceList.length"
|
|
|
- v-for="(area,index) in mapData.spaceList"
|
|
|
- :style="{width:area.width+'px',
|
|
|
- height:area.height+'px',
|
|
|
- top:area.top+'px',
|
|
|
- left:area.left+'px'}"
|
|
|
- >
|
|
|
- <div class="space"
|
|
|
- :id="'space'+area.id"
|
|
|
- :class="[area.canClick?'':'click-disable',selectArea.id===area.id?'select':'',
|
|
|
- spaceInfo.spaceId===area.spaceId && spaceInfo.isPermanent?'use-select':'']"
|
|
|
- @click.stop="checkSpace(area)"
|
|
|
- :style="{backgroundColor:area.backgroundColor?area.backgroundColor:''}"
|
|
|
- >
|
|
|
- <div class="device"
|
|
|
- :class="selectArea.id===area.id?'select-device':''"
|
|
|
- v-show="area.width*displacement.scale>24 && area.height*displacement.scale>24"
|
|
|
- >
|
|
|
- <img :src="area.icon" v-if="selectArea.id!==area.id && area.icon">
|
|
|
- <img :src="area.selectIcon" v-else class="select-icon" alt="">
|
|
|
- <template v-if="area.localName">
|
|
|
- <span v-if="area.height>80 && area.localName.length*12<area.width || selectArea.id===area.id"
|
|
|
- style="font-size: 12px"
|
|
|
- >{{ area.localName }}</span>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <!-- <div class="circle" v-else :style="{backgroundColor: area.circleColor?area.circleColor:''}"></div>-->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--地图右侧的操作按钮-->
|
|
|
- <div class="map-toolbar">
|
|
|
- <img
|
|
|
- :src="parseImgUrl('map-icon','icon-search-big.svg')"
|
|
|
- @click.stop="goSearch"
|
|
|
- class="icon-search" alt=""
|
|
|
- >
|
|
|
- <div class="toolbar-item" @click.stop="checkFloor">
|
|
|
- <span class="text-hidden">{{ floorItem.localName }}</span>
|
|
|
- </div>
|
|
|
- <div class="toolbar-item" @click.stop="checkBuilding">
|
|
|
- <span class="text-hidden">{{ buildingItem.localName }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div class="toolbar-item">-->
|
|
|
- <!-- <img src="../../assets/images/map-icon/icon-floor-arrow.svg" alt="">-->
|
|
|
- <!-- </div>-->
|
|
|
- </div>
|
|
|
- <!-- 选择建筑 -->
|
|
|
- <van-popup v-model:show="showBuilding"
|
|
|
- teleport="body"
|
|
|
- class="buiding-box"
|
|
|
- style="width: 40%;height: 100%;padding: 20px"
|
|
|
- position="right"
|
|
|
- >
|
|
|
- <div class="buiding-item"
|
|
|
- :key="item.id"
|
|
|
- :class="buildingItem.buildingId===item.id?'active':''"
|
|
|
- @click.stop="comfirmBuilding(item)"
|
|
|
- v-for="item in buildingData"
|
|
|
- >
|
|
|
- {{ item.localName }}
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <!-- 选择楼层 -->
|
|
|
- <van-popup v-model:show="showFloor"
|
|
|
- teleport="body"
|
|
|
- class="buiding-box"
|
|
|
- style="width: 40%;height: 100%;padding: 20px"
|
|
|
- position="right"
|
|
|
- >
|
|
|
- <div class="buiding-item"
|
|
|
- :key="item.id"
|
|
|
- :class="floorItem.id===item.id?'active':''"
|
|
|
- @click.stop="comfirmFloor(item)"
|
|
|
- v-for="item in floorData"
|
|
|
- >
|
|
|
- {{ item.localName }}
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
-
|
|
|
- <!--搜索-->
|
|
|
- <van-popup v-model:show="showSearch"
|
|
|
- teleport="body"
|
|
|
- class="buiding-box"
|
|
|
- style="width: 100%;height: 100%"
|
|
|
- position="right"
|
|
|
- >
|
|
|
- <div style="width: 100%;height: 100%">
|
|
|
- <space-search @closeSearch="closeSearch"></space-search>
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent, onMounted, nextTick, reactive, toRefs, watch } from 'vue'
|
|
|
-import { mapObj } from '@/model/map'
|
|
|
-import {
|
|
|
- getLocalStorageFloor,
|
|
|
- getStorageSpaceId,
|
|
|
- localStorageFloor,
|
|
|
- localStorageSpaceId,
|
|
|
- parseImgUrl,
|
|
|
- setLocalNewSpaceInfo
|
|
|
-} from '@/utils'
|
|
|
-import { Toast, Dialog } from 'vant'
|
|
|
-import { getBuildingList, getFloorList, getMapInfo } from '@/apis/envmonitor'
|
|
|
-import SpaceSearch from '@/views/envmonitor/Search/SpaceSearch.vue'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
-import { getSpaceType, mapIcon } from '@/utils/mapIcon'
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- props: {
|
|
|
- projectId: {
|
|
|
- type: String,
|
|
|
- default: () => ''
|
|
|
- },
|
|
|
- spaceInfo: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- }
|
|
|
- },
|
|
|
- isSetSpace: {
|
|
|
- type: Boolean,
|
|
|
- default: () => false
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- components: {
|
|
|
- SpaceSearch
|
|
|
- },
|
|
|
- setup(props, contx) {
|
|
|
- const router = useRouter()
|
|
|
- const mapData: any = {}
|
|
|
- const document: any = window.document
|
|
|
- const screenInfo: any = {
|
|
|
- screenWidth: document.body.clientWidth,
|
|
|
- screenHeight: document.body.clientHeight
|
|
|
- }
|
|
|
- const comMapScale: any = 0.8
|
|
|
- const displacement: any = {
|
|
|
- scale: 1,
|
|
|
- pageX: 0,
|
|
|
- pageX2: 0,
|
|
|
- originScale: 0,
|
|
|
- moveable: false
|
|
|
- }
|
|
|
- let buildingData: any = []
|
|
|
- let floorData: any = []
|
|
|
- let floorItem: any = {}
|
|
|
- let selectArea: any = {}
|
|
|
- const proxyData = reactive({
|
|
|
- parseImgUrl: parseImgUrl,
|
|
|
- isSetSpace: props.isSetSpace, // isSetSpace:true 代表常驻空间页面展示
|
|
|
- widthMapScale: 1,
|
|
|
- tempScale: 0.8,
|
|
|
- comMapScale: comMapScale,
|
|
|
- heightScale: 1,
|
|
|
- showSearch: false,
|
|
|
- showBuilding: false,
|
|
|
- showFloor: false,
|
|
|
- buildingItem: {
|
|
|
- buildingId: '',
|
|
|
- localName: ''
|
|
|
- },
|
|
|
- floorData: floorData,
|
|
|
- floorItem: floorItem,
|
|
|
- buildingData: buildingData,
|
|
|
- mapData: mapData,
|
|
|
- selectArea: selectArea,
|
|
|
- displacement: displacement,
|
|
|
- screenInfo: screenInfo,
|
|
|
- // 切换楼层的时候恢缩放和滚动的样式
|
|
|
- clearPreStyle() {
|
|
|
- let mapDom = document.querySelector('#map')
|
|
|
- mapDom.scrollLeft = 0
|
|
|
- mapDom.scrollTop = 0
|
|
|
- let matrix_box: any = document.querySelector('#spaceMain')
|
|
|
- // 记住使用的缩放值
|
|
|
- proxyData.displacement.scale = 1
|
|
|
- // 图像应用缩放效果
|
|
|
- // console.log(newScale);
|
|
|
- matrix_box.style.transform = 'scale(' + 1 + ')'
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图滚动
|
|
|
- */
|
|
|
- mapScroll() {
|
|
|
- let mapDom = document.querySelector('#map')
|
|
|
- let houseDesDom = document.querySelector('#houseDes')
|
|
|
- let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0
|
|
|
- // let headerDom = document.querySelector('#header')
|
|
|
- // let headerHeight: any = headerDom.offsetHeight
|
|
|
- mapDom.addEventListener('scroll', () => {
|
|
|
- let scrollTop: any = mapDom.scrollTop
|
|
|
- let height: any = proxyData.mapData.height * proxyData.displacement.scale
|
|
|
- let tempHeight: any = proxyData.screenInfo.screenHeight - houseHeight - 130
|
|
|
- if (height < tempHeight) {
|
|
|
- mapDom.scrollTop = 0
|
|
|
- } else {
|
|
|
- if (height - tempHeight < scrollTop) {
|
|
|
- mapDom.scrollTop = height - tempHeight
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 关闭搜索页面
|
|
|
- * @param item
|
|
|
- */
|
|
|
- closeSearch(item: any) {
|
|
|
- proxyData.showSearch = false
|
|
|
- if (item) {
|
|
|
- proxyData.loadingStart()
|
|
|
- let searchSpace: any = {
|
|
|
- buildingId: item.buildingId,
|
|
|
- buildingName: '',
|
|
|
- floorId: item.floorId,
|
|
|
- floorName: '',
|
|
|
- spaceId: item.id
|
|
|
- }
|
|
|
- proxyData.init(searchSpace)
|
|
|
- }
|
|
|
- },
|
|
|
- /*
|
|
|
- 去搜索页面
|
|
|
- */
|
|
|
- goSearch() {
|
|
|
- proxyData.showSearch = true
|
|
|
- // router.push({ path: '/search' })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置选中的空间的位置,
|
|
|
- */
|
|
|
- setSelectSpacePosition(area: any) {
|
|
|
- setTimeout(() => {
|
|
|
- proxyData.setScrollLeft(area)
|
|
|
- proxyData.scrollTop(area)
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 判断像左还是像右滚动
|
|
|
- */
|
|
|
- setScrollLeft(area: any) {
|
|
|
- let mapDom = document.getElementById('map')
|
|
|
- let left: any = area.left * proxyData.displacement.scale - (proxyData.screenInfo.screenWidth - area.width * proxyData.displacement.scale) / 2
|
|
|
- mapDom.scrollLeft = left
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取竖着的方向
|
|
|
- */
|
|
|
- scrollTop(area: any) {
|
|
|
- let mapDom = document.querySelector('#map')
|
|
|
- let houseDesDom = document.querySelector('#houseDes')
|
|
|
- let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0
|
|
|
- if ((area.top + area.height) * proxyData.displacement.scale > proxyData.screenInfo.screenHeight - houseHeight - 20) {
|
|
|
- mapDom.scrollTop = (area.top * proxyData.displacement.scale - (proxyData.screenInfo.screenHeight - houseHeight) / 2 + (area.height * proxyData.displacement.scale) / 2)
|
|
|
- } else {
|
|
|
- if ((area.top - area.height) * proxyData.displacement.scale < mapDom.scrollTop) {
|
|
|
- mapDom.scrollTop = (area.top - area.height) * proxyData.displacement.scale
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 切换空间
|
|
|
- */
|
|
|
- checkSpace(area: any) {
|
|
|
- if (area.canClick) {
|
|
|
- proxyData.setSelectSpacePosition(area)
|
|
|
- if (proxyData.isSetSpace) {
|
|
|
- // 记录当前选中的id
|
|
|
- proxyData.comfirSetSpace(area)
|
|
|
- } else {
|
|
|
- proxyData.selectArea = area
|
|
|
- proxyData.setLocalSpaceInfo()
|
|
|
- // 记录当前选中的id
|
|
|
- contx.emit('changeSpaceId', proxyData.selectArea.spaceId)
|
|
|
- }
|
|
|
- } else {
|
|
|
- Toast('不可选区域')
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 确认设置为常驻空间
|
|
|
- */
|
|
|
- comfirSetSpace(item: any) {
|
|
|
- if (item.spaceId === props.spaceInfo.spaceId) {
|
|
|
- Dialog.confirm({
|
|
|
- title: '取消常驻空间',
|
|
|
- confirmButtonColor: '#000000',
|
|
|
- cancelButtonColor: '#4D5262',
|
|
|
- message: `是否取消常驻空间设置?`
|
|
|
- }).then(() => {
|
|
|
- contx.emit('delPermanentSpace')
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- } else {
|
|
|
- Dialog.confirm({
|
|
|
- title: '设置常驻空间',
|
|
|
- confirmButtonColor: '#000000',
|
|
|
- cancelButtonColor: '#4D5262',
|
|
|
- message: `是否将常驻空间设置为${item.localName}?`
|
|
|
- }).then(() => {
|
|
|
- proxyData.selectArea = item
|
|
|
- contx.emit('changeSpaceId', proxyData.selectArea.spaceId)
|
|
|
- }).catch(() => {
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 本地缓存最新的空间建筑信息,提供给首次进入页面使用
|
|
|
- */
|
|
|
- setLocalSpaceInfo() {
|
|
|
- localStorageSpaceId(proxyData.buildingItem.buildingId, proxyData.floorItem.id, proxyData.selectArea.spaceId)
|
|
|
- let spaceInfo: any = {
|
|
|
- buildingId: proxyData.buildingItem.buildingId,
|
|
|
- buildingName: proxyData.buildingItem.localName,
|
|
|
- floorId: proxyData.floorItem.id,
|
|
|
- floorName: proxyData.floorItem.localName,
|
|
|
- spaceId: proxyData.selectArea.spaceId // 上格云3
|
|
|
- }
|
|
|
- setLocalNewSpaceInfo(spaceInfo)
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图放大的距离
|
|
|
- * @param start
|
|
|
- * @param stop
|
|
|
- */
|
|
|
- getDistance(start: any, stop: any) {
|
|
|
- return Math.hypot(stop.x - start.x, stop.y - start.y)
|
|
|
- },
|
|
|
- /**
|
|
|
- * 格式化地图数据
|
|
|
- */
|
|
|
- formateMapData() {
|
|
|
- let data: any = proxyData.mapData
|
|
|
- if (data) {
|
|
|
- proxyData.setSpaceScale()
|
|
|
- proxyData.setTempScale()
|
|
|
- if (data.width < 3000) {
|
|
|
- proxyData.comMapScale = 0.8
|
|
|
- }
|
|
|
- data.width = data.width * proxyData.comMapScale
|
|
|
- data.height = data.height * proxyData.comMapScale
|
|
|
- let spaceList: any = data?.spaceList ?? []
|
|
|
- for (let i = 0; i < spaceList.length; i++) {
|
|
|
- let item = spaceList[i]
|
|
|
- item.width = item.width * proxyData.comMapScale
|
|
|
- item.height = item.height * proxyData.comMapScale
|
|
|
- item.top = item.top * proxyData.comMapScale
|
|
|
- item.left = item.left * proxyData.comMapScale
|
|
|
- // item.canClick = !item.canClick
|
|
|
- proxyData.setSpaceIcon(item)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 获取空间最小宽
|
|
|
- setSpaceScale() {
|
|
|
- let data: any = proxyData.mapData
|
|
|
- if (data) {
|
|
|
- let spaceList: any = data?.spaceList ?? []
|
|
|
- let minHeight: any = Math.min.apply(null, spaceList.map((item: any) => item.height))
|
|
|
- let minWidth: any = Math.min.apply(null, spaceList.map((item: any) => item.width))
|
|
|
- let min: any = minHeight < minWidth ? minHeight : minWidth
|
|
|
- min = min ? min : 30
|
|
|
- proxyData.comMapScale = 30 / min
|
|
|
- }
|
|
|
- },
|
|
|
- // 缩放的临界值修改
|
|
|
- setTempScale() {
|
|
|
- proxyData.tempScale = 0.4
|
|
|
- let data: any = proxyData.mapData
|
|
|
- if (data) {
|
|
|
- let width: any = proxyData.mapData.width
|
|
|
- let height: any = proxyData.mapData.height
|
|
|
- if (width > height) {
|
|
|
- let num: any = Math.ceil(width / proxyData.screenInfo.screenWidth)
|
|
|
- if (num < 10) {
|
|
|
- proxyData.tempScale = 0.4
|
|
|
- } else if (num < 20) {
|
|
|
- proxyData.tempScale = 0.3
|
|
|
- } else {
|
|
|
- proxyData.tempScale = 0.25
|
|
|
- }
|
|
|
- } else {
|
|
|
- let num: any = Math.ceil(height / proxyData.screenInfo.screenHeight)
|
|
|
- if (num < 10) {
|
|
|
- proxyData.tempScale = 0.4
|
|
|
- } else if (num < 20) {
|
|
|
- proxyData.tempScale = 0.3
|
|
|
- } else {
|
|
|
- proxyData.tempScale = 0.25
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置地图最外框宽和高
|
|
|
- */
|
|
|
- setMapBoxStyle() {
|
|
|
- let mapBoxEle = document.querySelector('#spaceMain')
|
|
|
- if (proxyData.mapData && proxyData.mapData.width) {
|
|
|
- mapBoxEle.style.width = proxyData.mapData.width + 'px'
|
|
|
- mapBoxEle.style.height = proxyData.mapData.height + 'px'
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 设置空间的图标
|
|
|
- *
|
|
|
- */
|
|
|
- setSpaceIcon(item: any) {
|
|
|
- // if(item.can)
|
|
|
- if (item.canClick) {
|
|
|
- let typeName: any = getSpaceType(item.roomFuncType)
|
|
|
- item.icon = mapIcon[typeName].icon
|
|
|
- item.selectIcon = mapIcon[typeName].selectIcon
|
|
|
- item.backgroundColor = mapIcon[typeName].backgroundColor
|
|
|
- item.bg = mapIcon[typeName].bg
|
|
|
- item.icon = parseImgUrl('map-new-icon', item.icon)
|
|
|
- item.selectIcon = parseImgUrl('map-new-icon', item.selectIcon)
|
|
|
- }
|
|
|
- },
|
|
|
- midpoint(x1: any, y1: any, x2: any, y2: any) {
|
|
|
- return [(x1 + x2) / 2, (y1 + y2) / 2]
|
|
|
- },
|
|
|
- /**
|
|
|
- * 地图缩放功能
|
|
|
- */
|
|
|
- mapScale() {
|
|
|
- let matrix_box: any = document.querySelector('#spaceMain')
|
|
|
- let mapDom: any = document.querySelector('#map')
|
|
|
- matrix_box.addEventListener('touchstart', function(event: any) {
|
|
|
- let touches: any = event.touches
|
|
|
- let events: any = touches[0]
|
|
|
- let events2: any = touches[1]
|
|
|
- // 第一个触摸点的坐标
|
|
|
- proxyData.displacement.pageX = events.pageX
|
|
|
- proxyData.displacement.pageY = events.pageY
|
|
|
-
|
|
|
- proxyData.displacement.moveable = true
|
|
|
-
|
|
|
- if (events2) {
|
|
|
- proxyData.displacement.pageX2 = events2.pageX
|
|
|
- proxyData.displacement.pageY2 = events2.pageY
|
|
|
- proxyData.displacement.center = proxyData.midpoint(proxyData.displacement.pageX, proxyData.displacement.pageY, proxyData.displacement.pageX2, proxyData.displacement.pageY2)
|
|
|
- }
|
|
|
-
|
|
|
- proxyData.displacement.originScale = proxyData.displacement.scale || 1
|
|
|
- })
|
|
|
- matrix_box.addEventListener('touchmove', function(event: any) {
|
|
|
- if (!proxyData.displacement.moveable) {
|
|
|
- return
|
|
|
- }
|
|
|
- // event.preventDefault();
|
|
|
- let touches: any = event.touches
|
|
|
- let events: any = touches[0]
|
|
|
- let events2: any = touches[1]
|
|
|
- // 双指移动
|
|
|
- if (events2) {
|
|
|
- // 第2个指头坐标在touchmove时候获取
|
|
|
- if (!proxyData.displacement.pageX2) {
|
|
|
- proxyData.displacement.pageX2 = events2.pageX
|
|
|
- }
|
|
|
- if (!proxyData.displacement.pageY2) {
|
|
|
- proxyData.displacement.pageY2 = events2.pageY
|
|
|
- }
|
|
|
-
|
|
|
- // 双指缩放比例计算
|
|
|
- let zoom: any = proxyData.getDistance(
|
|
|
- {
|
|
|
- x: events.pageX,
|
|
|
- y: events.pageY
|
|
|
- },
|
|
|
- {
|
|
|
- x: events2.pageX,
|
|
|
- y: events2.pageY
|
|
|
- }
|
|
|
- ) / proxyData.getDistance(
|
|
|
- {
|
|
|
- x: proxyData.displacement.pageX,
|
|
|
- y: proxyData.displacement.pageY
|
|
|
- },
|
|
|
- {
|
|
|
- x: proxyData.displacement.pageX2,
|
|
|
- y: proxyData.displacement.pageY2
|
|
|
- }
|
|
|
- )
|
|
|
- // 应用在元素上的缩放比例
|
|
|
- let newScale: any = proxyData.displacement.originScale * zoom
|
|
|
- // 最大缩放比例限制
|
|
|
- if (newScale < proxyData.tempScale) {
|
|
|
- newScale = proxyData.tempScale
|
|
|
- }
|
|
|
- if (newScale > 1) {
|
|
|
- newScale = 1
|
|
|
- }
|
|
|
- // 记住使用的缩放值
|
|
|
- proxyData.displacement.scale = newScale
|
|
|
- // 图像应用缩放效果
|
|
|
- // console.log(newScale);
|
|
|
- matrix_box.style.transform = 'scale(' + newScale + ')'
|
|
|
- // 设置旋转元素的基点位置
|
|
|
- // matrix_box.style.transformOrigin = '0px 0px 0px'
|
|
|
- // matrix_box.style.transformOrigin = -proxyData.displacement.center[0] + ' ' + -proxyData.displacement.center[1]
|
|
|
- // mapDom.scrollTop = proxyData.displacement.center[1]
|
|
|
- // mapDom.scrollLeft = proxyData.displacement.center[0]
|
|
|
- // if (proxyData.selectArea) {
|
|
|
- // proxyData.setSelectSpacePosition(proxyData.selectArea)
|
|
|
- // }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取建筑信息
|
|
|
- */
|
|
|
- getBuildingList() {
|
|
|
- let params: any = {
|
|
|
- 'criteria': {
|
|
|
- 'projectId': props.projectId
|
|
|
- }
|
|
|
- }
|
|
|
- getBuildingList(params).then(res => {
|
|
|
- let resData: any = res
|
|
|
- if (resData.result === 'success') {
|
|
|
- let content: any = resData?.content ?? []
|
|
|
- proxyData.buildingData = content
|
|
|
- // 设置展示的建筑名称
|
|
|
- proxyData.setBuildingName()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- *
|
|
|
- * 选择建筑
|
|
|
- */
|
|
|
- checkBuilding() {
|
|
|
- proxyData.showBuilding = true
|
|
|
- },
|
|
|
- /**
|
|
|
- * 选择楼层
|
|
|
- */
|
|
|
- checkFloor() {
|
|
|
- proxyData.showFloor = true
|
|
|
- },
|
|
|
- /**
|
|
|
- * 确定选择的楼层信息
|
|
|
- */
|
|
|
- comfirmFloor(item: any, flag: boolean = true) {
|
|
|
- proxyData.floorItem = item
|
|
|
- proxyData.showFloor = false
|
|
|
- // 获取地图数据
|
|
|
- proxyData.loadingStart()
|
|
|
- proxyData.getMapInfo(flag)
|
|
|
- /**
|
|
|
- *缓存建筑对应的楼层
|
|
|
- */
|
|
|
- localStorageFloor(proxyData.buildingItem.buildingId, proxyData.floorItem.id)
|
|
|
- },
|
|
|
- /**
|
|
|
- * 确定建筑
|
|
|
- */
|
|
|
- comfirmBuilding(item: any) {
|
|
|
- proxyData.showBuilding = false
|
|
|
- proxyData.buildingItem.buildingId = item.id
|
|
|
- proxyData.buildingItem.localName = item.localName
|
|
|
- proxyData.getFloorList()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 加载loading
|
|
|
- */
|
|
|
- loadingStart() {
|
|
|
- Toast.loading({
|
|
|
- duration: 0, // 持续展示 toast
|
|
|
- forbidClick: true,
|
|
|
- message: '加载中...'
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 结束
|
|
|
- */
|
|
|
- loadinngEnd() {
|
|
|
- Toast.clear()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 查询楼层信息
|
|
|
- */
|
|
|
- getFloorList(flag: boolean = true) {
|
|
|
- if (proxyData.buildingItem.buildingId) {
|
|
|
- let params: any = {
|
|
|
- 'criteria': {
|
|
|
- 'projectId': props.projectId,
|
|
|
- 'buildingId': proxyData.buildingItem.buildingId
|
|
|
- }
|
|
|
- }
|
|
|
- getFloorList(params).then(res => {
|
|
|
- let resData: any = res
|
|
|
- if (res.result === 'success') {
|
|
|
- proxyData.floorData = resData?.content ?? []
|
|
|
- // 设置楼层的名称
|
|
|
- proxyData.setFloorName()
|
|
|
- } else {
|
|
|
- proxyData.floorData = []
|
|
|
- }
|
|
|
- if (flag && proxyData.floorData.length) {
|
|
|
- proxyData.getHistorySelectFloor()
|
|
|
- proxyData.getMapInfo()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取地图信息
|
|
|
- */
|
|
|
- getMapInfo(flag: boolean = true, searchItem: any = null) {
|
|
|
- let params: any = {
|
|
|
- 'projectId': props.projectId,
|
|
|
- 'floorId': proxyData.floorItem.id
|
|
|
- }
|
|
|
- getMapInfo(params).then(res => {
|
|
|
- let resData: any = res
|
|
|
- if (resData.result === 'success') {
|
|
|
- proxyData.mapData = resData?.data ?? null
|
|
|
- // 切换数据的时候清楚默认样式
|
|
|
- proxyData.clearPreStyle()
|
|
|
- proxyData.formateMapData()
|
|
|
-
|
|
|
- /**
|
|
|
- * 如果是当前页面切换楼层,展示历史楼层
|
|
|
- */
|
|
|
- if (flag) {
|
|
|
- proxyData.getHistorySpace()
|
|
|
- } else { // 首次进入页面的时候展示空间来源于父div
|
|
|
- let area = proxyData.getFirstSelectSpace(searchItem)
|
|
|
- if (area) {
|
|
|
- proxyData.selectArea = area
|
|
|
- }
|
|
|
- // 搜索页面过来设置常驻空间页面
|
|
|
- if (!proxyData.isSetSpace) {
|
|
|
- proxyData.checkSpace(area)
|
|
|
- }
|
|
|
- }
|
|
|
- if (!proxyData.isSetSpace) {
|
|
|
- proxyData.checkSpace(proxyData.selectArea)
|
|
|
- }
|
|
|
- // 当没有默认空间的时候设置常驻空间页面不高量
|
|
|
- if (proxyData.isSetSpace && !props.spaceInfo.isPermanent) {
|
|
|
- proxyData.selectArea = {}
|
|
|
- } else {
|
|
|
- // proxyData.checkSpace(proxyData.selectArea)
|
|
|
- // 设置当前空间的位置
|
|
|
- proxyData.setSelectSpacePosition(proxyData.selectArea)
|
|
|
- }
|
|
|
- // 接口返回后设置地图缩放和滚动
|
|
|
- nextTick(() => {
|
|
|
- // 地图双指缩放
|
|
|
- proxyData.setMapBoxStyle()
|
|
|
- proxyData.mapScale()
|
|
|
- proxyData.mapScroll()
|
|
|
- })
|
|
|
- }
|
|
|
- proxyData.loadinngEnd()
|
|
|
- }).catch(() => {
|
|
|
- proxyData.loadinngEnd()
|
|
|
- })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取缓存的楼层
|
|
|
- */
|
|
|
- getHistorySelectFloor() {
|
|
|
- let historyFloor: any = getLocalStorageFloor()
|
|
|
- let flag: any = false
|
|
|
- let floorId: any = historyFloor[proxyData.buildingItem.buildingId]
|
|
|
- proxyData.floorData.map((floor: any) => {
|
|
|
- if (floor.id === floorId) {
|
|
|
- flag = true
|
|
|
- proxyData.floorItem = floor
|
|
|
- }
|
|
|
- })
|
|
|
- if (!flag) {
|
|
|
- proxyData.floorItem = proxyData.floorData[0]
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 获取选中的选中空间
|
|
|
- */
|
|
|
- getHistorySpace() {
|
|
|
- let data: any = proxyData.mapData
|
|
|
- let historySpace: any = getStorageSpaceId()
|
|
|
- if (data) {
|
|
|
- let flag: boolean = false
|
|
|
- let spaceList = data?.spaceList ?? []
|
|
|
- let key: any = `${proxyData.buildingItem.buildingId},${proxyData.floorItem.id}`
|
|
|
- let spaceId: any = historySpace[key]
|
|
|
- if (spaceId) {
|
|
|
- spaceList.map((space: any) => {
|
|
|
- if (spaceId === space.spaceId) {
|
|
|
- proxyData.selectArea = space
|
|
|
- flag = true
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- if (!flag) {
|
|
|
- for (let i: any = 0; i < spaceList.length; i++) {
|
|
|
- if (spaceList[i].canClick) {
|
|
|
- proxyData.selectArea = spaceList[i]
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 首次进入页面设置选中的空间
|
|
|
- */
|
|
|
- getFirstSelectSpace(item: any) {
|
|
|
- let area: any = null
|
|
|
- let data: any = proxyData.mapData
|
|
|
- if (data && item) {
|
|
|
- let spaceList = data?.spaceList ?? []
|
|
|
- for (let i = 0; i < spaceList.length; i++) {
|
|
|
- if (spaceList[i].spaceId === item.spaceId) {
|
|
|
- // proxyData.selectArea = spaceList[i]
|
|
|
- area = spaceList[i]
|
|
|
- if (!proxyData.isSetSpace) {
|
|
|
- localStorageSpaceId(proxyData.buildingItem.buildingId, proxyData.floorItem.id, proxyData.selectArea.spaceId)
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return area
|
|
|
- },
|
|
|
- setDefaultSpace(item: any) {
|
|
|
- if (item) {
|
|
|
- proxyData.buildingItem.buildingId = item.buildingId
|
|
|
- proxyData.buildingItem.localName = item.buildingName ? item.buildingName : ''
|
|
|
- proxyData.floorItem = {
|
|
|
- id: item.floorId,
|
|
|
- localName: item.floorName ? item.floorName : ''
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 设备模块初始化地图
|
|
|
- init(item: any) {
|
|
|
- proxyData.setDefaultSpace(item)
|
|
|
- /**
|
|
|
- *缓存建筑对应的楼层
|
|
|
- */
|
|
|
- if (!proxyData.isSetSpace) {
|
|
|
- localStorageFloor(proxyData.buildingItem.buildingId, proxyData.floorItem.id)
|
|
|
- }
|
|
|
- proxyData.getBuildingList()
|
|
|
- proxyData.getFloorList(false)
|
|
|
- proxyData.getMapInfo(false, item)
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- *搜索后设置建筑的localName
|
|
|
- */
|
|
|
- setBuildingName() {
|
|
|
- if (proxyData.buildingItem.buildingId) {
|
|
|
- proxyData.buildingData.map((item: any) => {
|
|
|
- if (item.id === proxyData.buildingItem.buildingId) {
|
|
|
- proxyData.buildingItem.localName = item.localName
|
|
|
- }
|
|
|
- })
|
|
|
- } else { // 设置常驻空间的时候使用
|
|
|
- proxyData.buildingItem = {
|
|
|
- buildingId: proxyData.buildingData[0].id,
|
|
|
- localName: proxyData.buildingData[0].localName
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- /**
|
|
|
- * 搜索页面回来根据id设置楼层的localName
|
|
|
- */
|
|
|
- setFloorName() {
|
|
|
- if (proxyData.floorItem.id) {
|
|
|
- proxyData.floorData.map((item: any) => {
|
|
|
- if (item.id === proxyData.floorItem.id) {
|
|
|
- proxyData.floorItem.localName = item.localName
|
|
|
- }
|
|
|
- })
|
|
|
- } else { // 设置常驻空间的时候使用
|
|
|
- proxyData.floorItem = proxyData.floorData[0]
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- // watch(
|
|
|
- // props.spaceInfo, (newVal, oldValue) => {
|
|
|
- //
|
|
|
- // }
|
|
|
- // )
|
|
|
- onMounted(() => {
|
|
|
- // proxyData.formateMapData()
|
|
|
- // proxyData.setMapBoxStyle()
|
|
|
- let item: any = props.spaceInfo
|
|
|
- proxyData.init(item)
|
|
|
- })
|
|
|
- return {
|
|
|
- ...toRefs(proxyData)
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.space-main {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- background: #f7f8fa;
|
|
|
- //transform-origin: 0 0;
|
|
|
- transition: transform 0.3s;
|
|
|
- transform: scale(1);
|
|
|
- padding: 0 5px;
|
|
|
- overflow: auto;
|
|
|
-
|
|
|
- .space-box {
|
|
|
- position: absolute;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .space {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- box-shadow: 0px 1px 4px rgba(1, 1, 51, 0.01), 0px 16px 40px rgba(1, 1, 51, 0.03);
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .device {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- text-align: center;
|
|
|
- z-index: 666;
|
|
|
-
|
|
|
- img {
|
|
|
- //margin-bottom: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- word-break: keep-all;
|
|
|
- white-space: nowrap;
|
|
|
- //font-size: 12px;
|
|
|
- color: #8995ba;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .select-device {
|
|
|
- transform: translate(-50%, -70%);
|
|
|
-
|
|
|
- img {
|
|
|
- margin-bottom: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .circle {
|
|
|
- width: 4px;
|
|
|
- height: 4px;
|
|
|
- border-radius: 50%;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%) translateY(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .select {
|
|
|
- border: 2px solid rgba(77, 148, 255, 0.8);
|
|
|
- }
|
|
|
-
|
|
|
- .use-select {
|
|
|
- border: 5px solid #FFE823;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.map-toolbar {
|
|
|
- position: fixed;
|
|
|
- width: 44px;
|
|
|
- right: 20px;
|
|
|
- z-index: 999;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
-
|
|
|
- .icon-search {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- border-radius: 5px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .toolbar-item {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- margin-top: 10px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .toolbar-menu {
|
|
|
- width: 44px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 12px;
|
|
|
- height: 14px;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .text-hidden {
|
|
|
- //font-family: Montserrat;
|
|
|
- display: block;
|
|
|
- font-style: normal;
|
|
|
- width: 44px;
|
|
|
- line-height: 44px;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- text-align: center;
|
|
|
- color: #4D5262;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.buiding-item {
|
|
|
- //font-family: 'Montserrat';
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- text-align: left;
|
|
|
- color: rgba(13, 13, 61, 0.86);
|
|
|
- border-bottom: 1px solid rgba(2, 2, 82, 0.03)
|
|
|
-}
|
|
|
-
|
|
|
-.active {
|
|
|
- color: rgba(77, 148, 255, 0.8);
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|