123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959 |
- <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>
|