sagacloud-sagacare-ipad/src/views/envmonitor/components/Map/MapBox.vue

<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 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: () => "",
    },
    spaceData: {
      type: Array,
      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 = {};
    let spaceInfo: any = null;
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      spaceInfo: spaceInfo,
      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;
            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);
            //如果触发了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) {
        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, // 上格云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 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;
            }
            // 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);
        } else {
          item.icon = "";
        }
      },
      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();
              }
              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;
            // debugger;
            if (resData.result === "success") {
              proxyData.mapData = resData?.data ?? null;
              // 切换数据的时候清楚默认样式
              proxyData.clearPreStyle();
              proxyData.formateMapData();

              // 首次进入页面的时候展示空间来源于父div
              if (searchItem) {
                let area = proxyData.getFirstSelectSpace(searchItem);
                // debugger
                if (area) {
                  proxyData.selectArea = area;
                }
              }
              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];
              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);
      },

      /**
       *搜索后设置建筑的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) => {}, {
      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>