12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352 |
- <template>
- <div id="map" style="width: 100%; height: 100%">
- <div class="space-main" id="spaceMain">
- <div
- class="space-box"
- v-for="(area, index) in mapData.spaceList"
- :style="{
- width: area.width + 'px',
- height: area.height + 'px',
- top: area.top + 'px',
- left: area.left + 'px',
- }"
- :key="'map' + index"
- >
- <div
- class="space"
- :id="'space' + area.id"
- :class="[
- area.canClick ? '' : 'click-disable',
- selectArea.id === area.id ? 'select' : '',
- isSetSpace ? '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 {
- 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";
- import any = jasmine.any;
- export default defineComponent({
- props: {
- projectId: {
- type: String,
- default: () => "",
- },
- spaceInfo: {
- type: Object,
- default: () => {},
- },
- isSetSpace: {
- type: Boolean,
- default: () => false,
- },
- floorId: {
- type: String,
- default: () => "",
- },
- buildingId: {
- type: String,
- default: () => "",
- },
- },
- 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 = {};
- let transformData: any = {};
- const proxyData = reactive({
- parseImgUrl: parseImgUrl,
- isSetSpace: props.isSetSpace, // isSetSpace:true 代表为设置常驻空间页面展示
- widthMapScale: 1,
- tempScale: 0.8,
- comMapScale: comMapScale,
- heightScale: 1,
- showSearch: false,
- isSetSearchSpace: false,
- showBuilding: false,
- showFloor: false,
- buildingItem: {
- buildingId: "",
- localName: "",
- },
- floorData: floorData,
- floorItem: floorItem,
- buildingData: buildingData,
- mapData: mapData,
- copyMapDaata: mapData,
- selectArea: selectArea,
- displacement: displacement,
- screenInfo: screenInfo,
- transformData: transformData,
- // 切换楼层的时候恢缩放和滚动的样式
- clearPreStyle() {
- let mapDom = document.querySelector("#map");
- mapDom.scrollLeft = 0;
- mapDom.scrollTop = 0;
- let matrix_box: any = document.querySelector("#spaceMain");
- // 记住使用的缩放值
- proxyData.displacement.scale = 1;
- if (matrix_box) {
- matrix_box.style.left = 0 + "px";
- matrix_box.style.top = 0 + "px";
- }
- },
- swipe(el: any, options: any) {
- //设置开关,监听move事件
- let isMove: any = false;
- // 设置手指触摸开始的坐标
- let startX: any = 0;
- let startY: any = 0;
- // 设置手指移动的坐标
- let moveX: any = 0;
- let moveY: any = 0;
- //设置指针距离元素的边框的距离
- let disX: any = 0;
- let disY: any = 0;
- // 如果用户未传入参数2,自己定义一个
- let fun: any = function () {};
- let data: any = {
- swipeLeft: fun,
- swipeRight: fun,
- swipeDown: fun,
- swipeUp: fun,
- drag: fun,
- };
- // 判断是否传入参数2,有的话覆盖默认值
- Object.assign(data, options);
- // 给元素绑定三个事件
- el.addEventListener(
- "touchstart",
- function (e: any) {
- console.log(e);
- //获取手指开始的坐标
- startX = e.touches[0].pageX;
- startY = e.touches[0].pageY;
- //计算指针距离元素边框的位置
- disX = startX - el.offsetLeft;
- disY = startY - el.offsetTop;
- },
- { passive: true }
- );
- el.addEventListener(
- "touchmove",
- function (e: any) {
- if (proxyData.displacement.moveable) {
- return;
- }
- console.log(e);
- //如果触发了move事件,打开开关
- isMove = true;
- // 获取移动时的坐标
- moveX = e.touches[0].pageX;
- moveY = e.touches[0].pageY;
- e.mation = {
- startX: startX,
- startY: startY,
- moveX: moveX,
- moveY: moveY,
- disX: disX,
- disY: disY,
- };
- data.drag.call(el, e);
- // 判断是否触发了move事件
- if (isMove) {
- // 计算水平边长
- let absX: any = Math.abs(moveX - startX);
- // 计算垂直边长
- let absY: any = Math.abs(moveY - startY);
- // 判断垂直还是水平滑动
- if (absX > absY) {
- // console.log('水平滑动');
- //再判断是左滑右滑
- if (moveX - startX > 0) {
- data.swipeRight.call(el, e);
- } else {
- data.swipeLeft.call(el, e);
- }
- } else {
- // console.log('垂直滑动');
- //判断是上滑还是下滑
- if (moveY - startX > 0) {
- // 下滑
- data.swipeDown.call(el, e);
- } else {
- data.swipeUp.call(el, e);
- }
- }
- }
- },
- { passive: true }
- );
- el.addEventListener("touchend", function (e: any) {
- isMove = false;
- });
- },
- /**
- * 地图滚动
- */
- mapScroll() {
- let matrix_box: any = document.querySelector("#spaceMain");
- let houseDesDom = document.querySelector("#houseDes");
- let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
- proxyData.swipe(matrix_box, {
- swipeLeft: function (e: any) {
- if (!proxyData.displacement.moveable) {
- if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
- } else {
- let width: any =
- matrix_box.offsetWidth -
- Math.abs(e.touches[0].pageX - e.mation.disX);
- if (width < proxyData.screenInfo.screenWidth) {
- matrix_box.style.left =
- -(
- matrix_box.offsetWidth - proxyData.screenInfo.screenWidth
- ) + "px";
- } else {
- matrix_box.style.left =
- e.touches[0].pageX - e.mation.disX + "px";
- }
- }
- }
- },
- swipeRight: function (e: any) {
- if (!proxyData.displacement.moveable) {
- if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
- return;
- }
- if (e.touches[0].pageX - e.mation.disX > 0) {
- matrix_box.style.left = 0 + "px";
- } else {
- matrix_box.style.left =
- e.touches[0].pageX - e.mation.disX + "px";
- }
- }
- },
- swipeDown: function (e: any) {
- if (!proxyData.displacement.moveable) {
- let height: any =
- proxyData.screenInfo.screenHeight - houseHeight - 20;
- let boxHeight: any = matrix_box.offsetHeight;
- if (boxHeight < height) {
- matrix_box.style.top = 0 + "px";
- } else {
- if (e.touches[0].pageY - e.mation.disY > 0) {
- matrix_box.style.top = 0 + "px";
- } else {
- matrix_box.style.top =
- e.touches[0].pageY - e.mation.disY + "px";
- }
- }
- }
- },
- swipeUp: function (e: any) {
- if (!proxyData.displacement.moveable) {
- let houseDesDom = document.querySelector("#houseDes");
- let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
- let height: any =
- proxyData.screenInfo.screenHeight - houseHeight - 20;
- let boxHeight: any = matrix_box.offsetHeight;
- let top: any = e.touches[0].pageY - e.mation.disY;
- if (boxHeight < height) {
- matrix_box.style.top = 0 + "px";
- } else {
- if (boxHeight - Math.abs(top) < height / 2) {
- matrix_box.style.top = -(boxHeight - height / 2) + "px";
- } else {
- matrix_box.style.top =
- e.touches[0].pageY - e.mation.disY + "px";
- }
- }
- }
- },
- drag: function (e: any) {},
- });
- },
- /**
- * 关闭搜索页面
- * @param item
- */
- closeSearch(item: any) {
- proxyData.showSearch = false;
- // 搜索页面过来的
- if (item) {
- proxyData.isSetSearchSpace = true;
- proxyData.loadingStart();
- let searchSpace: any = {
- buildingId: item.buildingId,
- buildingName: "",
- floorId: item.floorId,
- floorName: "",
- spaceId: item.id,
- };
- proxyData.init(searchSpace);
- } else {
- proxyData.isSetSearchSpace = false;
- }
- },
- /*
- 去搜索页面
- */
- goSearch() {
- proxyData.showSearch = true;
- // router.push({ path: '/search' })
- },
- /**
- * 设置选中的空间的位置,
- */
- setSelectSpacePosition(area: any) {
- setTimeout(() => {
- proxyData.setScrollLeft(area);
- proxyData.scrollTop(area);
- });
- },
- /**
- * 判断像左还是像右滚动
- */
- setScrollLeft(area: any) {
- let mapBoxEle = document.querySelector("#spaceMain");
- let left: any = 0;
- if (area.left + area.width >= proxyData.screenInfo.screenWidth / 2) {
- left =
- area.left - proxyData.screenInfo.screenWidth / 2 + area.width / 2;
- left = ~left;
- } else {
- left = 0;
- }
- if (left > 0) {
- left = 0;
- }
- if (
- Math.abs(left) >
- mapBoxEle.offsetWidth - proxyData.screenInfo.screenWidth
- ) {
- left = -(mapBoxEle.offsetWidth - proxyData.screenInfo.screenWidth);
- }
- mapBoxEle.style.left = left + "px";
- },
- /**
- * 获取竖着的方向
- */
- scrollTop(area: any) {
- let mapDom = document.querySelector("#map");
- let mapBoxEle = document.querySelector("#spaceMain");
- let houseDesDom = document.querySelector("#houseDes");
- let houseHeight: any = houseDesDom ? houseDesDom.offsetHeight : 0;
- let top: any = 0;
- if (
- area.top + area.width >
- (proxyData.screenInfo.screenHeight - houseHeight - 20) / 2
- ) {
- top =
- area.top -
- (proxyData.screenInfo.screenHeight - houseHeight) / 2 +
- area.height / 2;
- } else {
- top = 0;
- }
- top = ~top;
- if (top > 0) {
- top = 0;
- }
- mapBoxEle.style.top = top + "px";
- },
- /**
- * 切换空间
- */
- checkSpace(area: any) {
- proxyData.isSetSearchSpace = false;
- if (area && 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);
- }
- // console.log(" proxyData.mapData proxyData.mapData");
- // console.log(proxyData.mapData);
- // 备份数据
- proxyData.copyMapDaata = JSON.parse(JSON.stringify(data));
- }
- },
- // 获取空间最小宽
- 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 - x1) / 2, y1 + (y2 - y1) / 2];
- // return [x1 + x2 / 2, y1 + (y2 - y1)]
- },
- /**
- * 更新地图的宽高
- */
- updateMapStyle() {
- let data: any = JSON.parse(JSON.stringify(proxyData.copyMapDaata));
- if (data) {
- data.width = data.width * proxyData.displacement.scale;
- data.height = data.height * proxyData.displacement.scale;
- let spaceList: any = data?.spaceList ?? [];
- for (let i = 0; i < spaceList.length; i++) {
- let item = spaceList[i];
- item.width = item.width * proxyData.displacement.scale;
- item.height = item.height * proxyData.displacement.scale;
- item.top = item.top * proxyData.displacement.scale;
- item.left = item.left * proxyData.displacement.scale;
- }
- proxyData.mapData = data;
- proxyData.setMapBoxStyle();
- }
- },
- /**
- * 更新地图的位置
- */
- updateMapPositon(temp: any, matrix_box: any) {
- // let left: any = (proxyData.displacement.oldSize[0] - proxyData.displacement.oldSize[0] * proxyData.displacement.scale) * proxyData.displacement.scaleTranslateProportion[0]
- // let top: any = (proxyData.displacement.oldSize[1] - proxyData.displacement.oldSize[1] * proxyData.displacement.scale) * proxyData.displacement.scaleTranslateProportion[1]
- let left: any =
- proxyData.displacement.scaleCenter[0] -
- proxyData.displacement.scaleCenter[0] * proxyData.displacement.scale;
- let top: any =
- proxyData.displacement.scaleCenter[1] -
- proxyData.displacement.scaleCenter[1] * proxyData.displacement.scale;
- if (temp > 0 && proxyData.displacement.scale < 1) {
- if (left > 0) {
- left = ~left;
- }
- if (top > 0) {
- top = ~top;
- // top = 0
- }
- }
- let newTop: any =
- proxyData.displacement.top * proxyData.displacement.scale + top;
- let newLeft: any =
- proxyData.displacement.left * proxyData.displacement.scale + left;
- if (matrix_box.offsetWidth < proxyData.screenInfo.screenWidth) {
- newLeft = 0;
- }
- if (newLeft > 0) {
- matrix_box.style.left = 0 + "px";
- } else {
- matrix_box.style.left = newLeft + "px";
- }
- if (matrix_box.offsetHeight < proxyData.screenInfo.screenHeight) {
- matrix_box.style.top = 0;
- } else {
- if (newTop > 0) {
- matrix_box.style.top = 0;
- } else {
- matrix_box.style.top = newTop + "px";
- }
- }
- },
- /**
- * 地图缩放功能
- */
- mapScale() {
- let matrix_box: any = document.querySelector("#spaceMain");
- 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;
- proxyData.displacement.originScale =
- proxyData.displacement.scale || 1;
- if (events2) {
- proxyData.displacement.pageX2 = events2.pageX;
- proxyData.displacement.pageY2 = events2.pageY;
- let left: any = isNaN(parseInt(matrix_box.style.left))
- ? 0
- : parseInt(matrix_box.style.left);
- let top: any = isNaN(parseInt(matrix_box.style.top))
- ? 0
- : parseInt(matrix_box.style.top);
- proxyData.displacement.center = proxyData.midpoint(
- events.pageX,
- events.pageY,
- events2.pageX,
- events2.pageY
- );
- proxyData.displacement.left = left / proxyData.displacement.scale;
- proxyData.displacement.top = top / proxyData.displacement.scale;
- proxyData.displacement.scaleCenter = [
- proxyData.displacement.center[0] / proxyData.displacement.scale,
- proxyData.displacement.center[1] / proxyData.displacement.scale,
- ];
- proxyData.displacement.scaleTranslateProportion = [
- proxyData.displacement.scaleCenter[0] /
- (matrix_box.offsetWidth / proxyData.displacement.scale),
- proxyData.displacement.scaleCenter[1] /
- (matrix_box.offsetHeight / proxyData.displacement.scale),
- ];
- proxyData.displacement.oldSize = [
- matrix_box.offsetWidth / proxyData.displacement.scale,
- matrix_box.offsetHeight / proxyData.displacement.scale,
- ];
- } else {
- proxyData.displacement.moveable = false;
- }
- },
- { passive: true }
- );
- 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.5) {
- newScale = 1.5;
- }
- let temp: any = newScale - proxyData.displacement.scale;
- proxyData.displacement.scale = newScale;
- if (temp !== 0) {
- proxyData.updateMapPositon(temp, matrix_box);
- proxyData.updateMapStyle();
- }
- }
- },
- { passive: true }
- );
- matrix_box.addEventListener("touchend", function () {
- proxyData.displacement.moveable = true;
- });
- },
- /**
- * 获取建筑信息
- */
- getBuildingList() {
- let params: any = {
- criteria: {
- projectId: props.projectId,
- },
- orders: [
- {
- asc: true,
- column: "localId",
- },
- ],
- };
- 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.loadingStart();
- 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,
- },
- orders: [
- {
- asc: true,
- column: "localId",
- },
- ],
- };
- 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();
- }
- })
- .catch(() => {
- proxyData.loadinngEnd();
- });
- }
- },
- /**
- * 获取地图信息
- */
- 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;
- // debugger;
- 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 && !props.spaceInfo.isPermanent) {
- proxyData.selectArea = {};
- } else {
- // 非常驻空间进入需要点击切换空间
- if (!proxyData.isSetSpace) {
- proxyData.checkSpace(proxyData.selectArea);
- }
- // proxyData.selectArea = proxyData.mapData.spaceList[0];
- // 设置当前空间的位置
- console.log(" proxyData.selectArea===");
- console.log(proxyData.selectArea);
- proxyData.setSelectSpacePosition(proxyData.selectArea);
- }
- // 接口返回后设置地图缩放和滚动
- nextTick(() => {
- // 地图双指缩放
- proxyData.setMapBoxStyle();
- proxyData.mapScale();
- proxyData.mapScroll();
- });
- }
- // setTimeout(() => {
- // proxyData.loadinngEnd()
- // }, 1000)
- })
- .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;
- // debugger;
- 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,
- item.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,
- (newProps: any) => {
- proxyData.buildingItem.buildingId = newProps.buildingId;
- proxyData.floorItem.id = newProps.floorId;
- // proxyData.selectArea.spaceId = newProps.spaceInfo.spaceId;
- },
- {
- deep: false,
- immediate: true,
- }
- );
- onMounted(() => {
- let item: any = props.spaceInfo;
- console.log("props.spaceInfo===")
- console.log(proxyData.selectArea)
- console.log(props.spaceInfo)
- proxyData.buildingItem.buildingId = props.buildingId;
- proxyData.floorItem.id = props.floorId;
- // proxyData.selectArea.spaceId = item.spaceId;
- 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);
- //transform: translateX(-100px) !important;
- padding: 0 5px;
- overflow: hidden;
- .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>
|