123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371 |
- <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.spaceId === area.spaceId
- ? area.disabled
- ? 'select-disable'
- : 'select'
- : '',
- isSetSpace ? 'use-select' : '',
- area.disabled ? 'space-disable-box' : 'space-box-bg',
- ]"
- @click.stop="checkSpace(area)"
- :style="{
- backgroundColor: area.backgroundColor ? area.backgroundColor : '',
- }"
- >
- <div
- class="device"
- :class="selectArea.spaceId === area.spaceId ? 'select-device' : ''"
- v-show="
- area.width * displacement.scale > 24 &&
- area.height * displacement.scale > 24
- "
- >
- <img
- :src="area.icon"
- v-if="selectArea.spaceId !== area.spaceId && 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.spaceId === area.spaceId
- "
- style="font-size: 12px"
- >{{ area.localName }}</span
- >
- </template>
- </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>
-
- <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 CanvasBox from "./CanvasBox.vue";
- import { useRouter } from "vue-router";
- import { getSpaceType, mapIcon } from "@/utils/mapIcon";
- import any = jasmine.any;
- export default defineComponent({
- props: {
- projectId: {
- type: String,
- default: () => "",
- },
- spaceData: {
- type: Array,
- default: () => [],
- },
- spaceInfo: {
- type: Object,
- default: () => {},
- },
- isSetSpace: {
- type: Boolean,
- default: () => false,
- },
- floorId: {
- type: String,
- default: () => "",
- },
- buildingId: {
- type: String,
- default: () => "",
- },
- mapType: {
- type: Number,
- default: () => 1,
- },
- },
- components: {
- SpaceSearch,
- CanvasBox,
- },
- 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 = {};
- let spaceInfo: any = null;
- const proxyData = reactive({
- parseImgUrl: parseImgUrl,
- spaceInfo: spaceInfo,
- isSetSpace: props.isSetSpace,
- 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) {
-
- 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;
-
- let fun: any = function () {};
- let data: any = {
- swipeLeft: fun,
- swipeRight: fun,
- swipeDown: fun,
- swipeUp: fun,
- drag: fun,
- };
-
- 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;
- console.log(el.offsetLeft);
- console.log(el.offsetTop);
- console.log(e.touches[0].pageX);
- },
- { passive: true }
- );
- el.addEventListener(
- "touchmove",
- function (e: any) {
- if (proxyData.displacement.moveable) {
- return;
- }
- console.log(e);
-
- 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);
-
- if (isMove) {
-
- let absX: any = Math.abs(moveX - startX);
-
- let absY: any = Math.abs(moveY - startY);
-
- if (absX > absY) {
-
-
- if (moveX - startX > 0) {
- data.swipeRight.call(el, e);
- } else {
- data.swipeLeft.call(el, e);
- }
- } else {
-
-
- 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) {},
- });
- },
-
- 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;
-
- },
-
- 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) {
- if (area.disabled) {
-
- Toast("该空间和平板没绑定,暂不支持查看");
- return;
- }
- proxyData.isSetSearchSpace = false;
- if (area && area.canClick) {
- proxyData.setSelectSpacePosition(area);
- proxyData.selectArea = area;
- proxyData.selectArea.buildingId = proxyData.buildingItem.buildingId;
- proxyData.setLocalSpaceInfo();
- contx.emit("changeSpace", proxyData.selectArea);
- } 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,
- };
- setLocalNewSpaceInfo(spaceInfo);
- },
-
- getDistance(start: any, stop: any) {
- return Math.hypot(stop.x - start.x, stop.y - start.y);
- },
-
- formateMapData() {
- let spaceData: any = props.spaceData;
- 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;
- let flag: any = true;
- for (let j = 0; j < spaceData.length; j++) {
- if (item.spaceId === spaceData[j].spaceId) {
- flag = false;
- break;
- }
- }
- if (flag) {
- item.disabled = true;
- }
-
- proxyData.setSpaceIcon(item);
- }
-
-
-
- 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.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);
- } else {
- item.icon = "";
- }
- },
- midpoint(x1: any, y1: any, x2: any, y2: any) {
- return [x1 + (x2 - x1) / 2, y1 + (y2 - y1) / 2];
-
- },
-
- 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.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;
-
- }
- }
- 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;
- }
-
- let touches: any = event.touches;
- let events: any = touches[0];
- let events2: any = touches[1];
-
- if (events2) {
-
- 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();
- },
-
- loadingStart() {
- Toast.loading({
- duration: 0,
- 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();
- }
- proxyData.loadinngEnd();
- })
- .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;
-
- if (resData.result === "success") {
- proxyData.mapData = resData?.data ?? null;
-
- proxyData.clearPreStyle();
- proxyData.formateMapData();
-
- if (searchItem) {
- let area = proxyData.getFirstSelectSpace(searchItem);
-
- if (area) {
- proxyData.selectArea = area;
- }
- }
- proxyData.setSelectSpacePosition(proxyData.selectArea);
-
- nextTick(() => {
-
- proxyData.setMapBoxStyle();
- proxyData.mapScale();
- proxyData.mapScroll();
- });
- }
-
-
-
- })
- .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) {
-
- area = spaceList[i];
- 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) {
-
- if (item) {
- proxyData.setDefaultSpace(item);
- }
- proxyData.getBuildingList();
- proxyData.getFloorList(false);
- proxyData.getMapInfo(false, item);
- },
-
- 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,
- };
- }
- },
-
- 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) => {}, {
- deep: false,
- immediate: true,
- });
- onMounted(() => {
- proxyData.spaceInfo = props.spaceInfo;
- proxyData.buildingItem.buildingId = props.buildingId;
- proxyData.floorItem.id = props.floorId;
- proxyData.spaceInfo.buildingId = props.buildingId;
- proxyData.spaceInfo.floorId = props.floorId;
- proxyData.selectArea.spaceId = props.spaceInfo.spaceId;
-
- proxyData.init(proxyData.spaceInfo);
- });
- 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-disable-box {
- // opacity: 0.4;
- }
- .space-box-bg {
- // background: #5e8bcf;
- background: rgba(94, 139, 207, 0.4) !important;
- border: 2px solid rgba(94, 139, 207, 0.8);
- border-radius: 5px;
- // color: #fff;
- .select-device {
- span {
- color: #fff !important;
- }
- }
- .device span {
- color: #fff !important;
- font-size: 16px;
- }
- }
- .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);
- }
- .select-disable {
- border: 2px solid rgba(77, 148, 255, 0.2);
- }
- .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>
|