sagacloud-sagacare-weChat/src/packagesEnv/pages/intelligentControl/home2.wpy

<style lang="less">
.page-intelligent-control {
  position: relative;
  //   height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .top-bar {
    height: 96px;
    background: #f7f8fa;
  }
}

.page-intelligent-control .map-contanier {
  //   height: 100%;
  width: 100%;
  //   padding-bottom: 176rpx;
  //background: #ebeef5;
  background: #f7f8fa;
  box-sizing: border-box;
}

.page-intelligent-control .location-wrapper {
  position: absolute;
  bottom: 36rpx;
  right: 32rpx;
}

.page-intelligent-control .location-wrapper .search-btn {
  margin-bottom: 16rpx;
  width: 96rpx;
  height: 96rpx;
  display: block;
  background: #ffffff;
  border-radius: 16rpx;
}

.page-intelligent-control .location-wrapper.expand {
  bottom: 658rpx;
}

movable-area {
  width: 100%;
  height: 0;
  position: relative;
}

movable-view {
  color: #fff;
}

.room-item {
  position: absolute;
  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;
  padding: 0 12rpx;
  transform-origin: center;
  z-index: 1;
  &.isAbnormity {
    padding: 0;
  }
}

.room-item.selected {
  border: 2px solid rgba(77, 148, 255, 0.8);
}
.room-item.transparent {
  box-shadow: none;
}
.room-item.selected.transparent {
  border: 0;
}

.room-item.clickDisabled {
  border: 2px solid #dfe3ed;
  box-sizing: border-box;
  background-repeat: repeat;
}

.room-item .bg-disabled {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.room-item .icon {
  width: 72rpx;
  height: 40rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.room-item .circle {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.room-item .door {
  position: absolute;
  width: 48rpx;
  height: 24rpx;
}

.room-item .text {
  font-weight: 600;
  font-size: 20rpx;
  line-height: 24rpx;
  text-align: center;
  color: #8995ba;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(32rpx);
  padding: 0 16rpx;
  box-sizing: border-box;
  word-break: break-all;
}

.area-items-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
}

.selected-icon {
  height: 88rpx;
  width: 144rpx;
  position: absolute;
  z-index: 9999;
  transform-origin: 36px 54px;//偏移量决定的
}

.room-item.selected .text {
  font-weight: 600;
  font-size: 24rpx;
  line-height: 24rpx;
  text-align: center;
  white-space: nowrap;
  color: #515a76;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: auto;
  padding: 0;
  text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  transform: translateX(-50%) translateY(-50%);
}

.room-item.selected.ConferenceRoom {
  box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.01),
    0px 0px 40px rgba(1, 1, 51, 0.03);
  border-radius: 2px;
  border: 2px solid rgba(77, 148, 255, 0.42);
}
.office-content-abstract {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 238rpx;
  box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.05),
    0px 8rpx 30rpx rgba(0, 0, 0, 0.15);
  border-radius: 50rpx 50rpx 0px 0px;
  box-sizing: border-box;
  padding: 48rpx 48rpx 0;
  background: #ffffff;
  .title {
    font-weight: 600;
    font-size: 36rpx;
    line-height: 50rpx;
    color: #000000;
  }
  .btn-switch {
    position: absolute;
    top: 40rpx;
    right: 48rpx;
    width: 148rpx;
    height: 64rpx;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 64rpx;
    color: #000000;
    background: #ffe823;
    text-align: center;
    box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.15),
      0px 8rpx 12rpx rgba(0, 0, 0, 0.07);
    border-radius: 60rpx;
  }
}
</style>

<template>
  <div class="page-intelligent-control" v-on:click="flodFloorFun">
    <div class="top-bar"></div>
    <div class="map-contanier">
      <movable-area
        :style="{'height':mapParentHeight+'px','width':mapParentWidth+'px'}"
        scale-area="true"
      >
        <movable-view
          x="{{x}}"
          y="{{y}}"
          style="height:{{mapHeight}}px;width:{{mapWidth}}px"
          direction="all"
          out-of-bounds="false"
          bindscale="onScale"
          scale="true"
          scale-min="0.5"
          scale-max="1"
          scale-value="1"
        >
          <div class="area-items-wrapper">
            <block
              v-for="(area, index) in mapAreasInfo"
              :key="index"
              wx:if="{{area.floorId == selectedFloor}}"
            >
            <div
                @tap="selectAreaFun(area)"
                class="room-item {{area.isAbnormity? 'isAbnormity': ''}}"
                style="{{'width:'+ (area.isAbnormity? '0px;':area.width*mapScale +'px;') + 'height:'+(area.isAbnormity? '0px;':area.height*mapScale +'px;')+'left:'+area.left*mapScale+'px;'+'top:'+area.top*mapScale+'px;'+(area.isAbnormity?'': 'background-color:'+ area.backgroundColor+';'+(!area.canClick?('background-image:url(' +h5StaticPath+ 'map-icon/bg_disable.png);'): '')) + (area.isAbnormity?('border-top:' + area['borderWidth'][0]*mapScale +'px solid ' +area['borderColor'][0]+ ';' + 'border-right:' + area['borderWidth'][1]*mapScale+'px solid ' + area['borderColor'][1] +';' +'border-bottom:' + area['borderWidth'][2]*mapScale +'px solid ' +area['borderColor'][2] + ';' + 'border-left:' + area['borderWidth'][3]*mapScale +'px solid ' +area['borderColor'][3] + ';'):'')+ (area['borderRadius'] && area['borderRadius'].length? 'border-radius:' + area['borderRadius'][0]*mapScale + 'px ' + area['borderRadius'][1]*mapScale + 'px ' + area['borderRadius'][2]*mapScale + 'px ' + area['borderRadius'][3]*mapScale + 'px;': '')+(area.rotate?'transform:rotate('+area.rotate+'deg)': '')}}"
                :class="{'selected': selectArea.id === area.id, 'clickDisabled':  area.canClick !==true,'transparent': !area.backgroundColor}"
              >
              <block  wx:if="{{selectArea.id === area.id}}"></block>

                <block
                  wx:elif="{{area.width*mapScale*touchScale>24&&area.height*mapScale*touchScale>24}}"
                >
                  <image
                    wx:if="{{area.icon}}"
                    class="icon"
                    src="{{h5StaticPath+  'map-icon/' + area.icon}}"
                  />
                </block>
                <block
                  wx:elif="{{area.width*mapScale*touchScale>=24 || area.height*mapScale*touchScale>=24}}"
                >
                  <div class="circle" style="{{'background-color:'+ area.circleColor+';'}}"></div>
                </block>
                <div
                  class="text"
                  wx:if="{{selectArea.id === area.id || (area.roomFuncType>=300 &&area.height*mapScale>80 && (area.title.length*screenScale*10 +16*screenScale)<area.width*mapScale)}}"
                >{{area.title}}</div>
                <image
                  wx:if="{{area.has_door===true && selectArea.id !== area.id}}"
                  style="width:{{area.door_width*mapScale}}px;height:{{area.door_height*mapScale}}px;left:{{(area.door_left === '') ? '': area.door_left*mapScale}}px;top: {{(area.door_top === '') ? '': area.door_top*mapScale}}px;right: {{(area.door_right === '') ? '': area.door_right*mapScale}}px;bottom: {{(area.door_bottom === '') ? '': area.door_bottom*mapScale}}px;"
                  class="door"
                  mode="scaleToFill"
                  src="{{h5StaticPath+ 'map-icon/' +area.door_icon}}"
                />
              </div>
            </block>
            <image
                  class="selected-icon"
                  wx:if="{{selectArea}}"
                  mode="scaleToFill"
                  :style="{top: selectArea.isAbnormity? ((selectArea['borderWidth'][0]+selectArea['borderWidth'][2])/2 - selectArea['borderWidth'][0])*mapScale +'px' : (selectArea.top*mapScale-54 + (selectArea.height*mapScale/2))+'px', left: selectArea.isAbnormity? ((selectArea['borderWidth'][1]+selectArea['borderWidth'][3])/2 - selectArea['borderWidth'][3])*mapScale +'px':  (selectArea.left*mapScale+(selectArea.width*mapScale/2)-36)+'px', transform: 'rotate('+(selectArea.rotate)+'deg)' }"
                  src="{{h5StaticPath + 'map-icon/' + selectArea.selectIcon}}"
                />

          </div>
        </movable-view>
        <div class="{{'location-wrapper ' + foldStatus}}">
          <image
            v-on:click="toSearchPage"
            class="search-btn"
            src="{{h5StaticPath}}icon-search-big.svg"
          />
          <!-- 博锐尚格正式环境暂不显示该入口 -->
          <location
            v-if="isShowLocationEntrance"
            @component-location-position="positionFun($event)"
          ></location>
          <floor
            status="{{floorStatus}}"
            :floors="floors"
            selectedFloor="{{selectedFloor}}"
            @component-floor-fold="flodFloorFun"
            @component-floor-change="changeFloorFun($event)"
            @component-floor-click="toggleFloorStatus"
          ></floor>
        </div>
      </movable-area>
    </div>
    <!-- <block v-if="query.from && query.from=='officehome'">
      <div class="office-content-abstract">
        <div class="title">{{selectArea.title}}</div>
        <div class="btn-switch" v-on:click="goBack">切换</div>
      </div>
    </block>-->
  </div>
</template>

<script>
import wepy from '@wepy/core';
import store from '@/store';

import {
  getMapInfoHttp,
  getSpaceBytoothHttp,
  getMapDetailHttp
} from '@/packagesEnv/api/intelligentControl';
import { checkHasUserInfo } from '@/service/user';
import utils from '@/common/utils';
import config from '@/config';
import { mapState } from '@wepy/x';
import { saveCompanyConfig } from '@/service/companyConfig';
import { getCompanyMapData } from '@/api/home';

let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
const tarBarHeight = 96;
const panelExpandHeight = 407; // 单位为px
const panelFoldHeight = 96; // 单位为px
const switchPanelHeight = 145; // 单位为px
const standerScreenWidth = 375;

const standerMapHeight = 812 - tarBarHeight - panelFoldHeight; // 在375*812屏幕下地图所能展示区域的大小px
let screenInfo = {};
let standerMapWidth = 2336;
let mapScale;
let screenScale;
let foldPanelPXHeight; // 在不同的手机屏幕的实际高度
let expandPXHeight;
let pageSelectedAreaRecord = {
  // key为楼层ID，value 为spceId
};
let touchMapStartRecord = {
  timeStamp: 0,
  pageX: 0,
  pageY: 0
};
let touchMapEndRecord = {
  timeStamp: 0,
  pageX: 0,
  pageY: 0
};
let from = 'officehome';

let CompanyMapData;
let combinedData = [];

wepy.component({
  props: {
    spaceIdProp: '',
    companyIdProp: ''
  },
  store,
  data: {
    currentSp: '', // 空间id 用于路由跳转
    h5StaticPath,
    mapAreasInfo: [],
    selectArea: {},
    x: 0,
    y: 0,
    selectedFloor: '',
    foldStatus: 'fold', // fold-最小化 expand-展开状态
    floorStatus: 'fold', // flod-收起楼层 expand-展开楼层选则
    mapHeight: 507,
    mapParentHeight: 607,
    mapParentWidth: 375,
    mapWidth: 2336,
    mapScale: 1,
    screenScale: 1,

    mapMoveByTouch: false,
    touchScale: 1,
    isShowLocationEntrance: false,
    canSearchPerson: true,
    canSlideExpanel: true,
    pageHide: false,
    query: {},
    floors: [],
    companyId: ''
  },
  computed: {
    ...mapState({ userInfo: state => state.user.userInfo })
  },
  //   ready() {
  //     // let from = query.from;
  //     // 页面加载
  //    // this.canSearchPerson = query.from !== 'visit'; // 从访客进入的页面无法搜索人
  //     // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
  //     if (from == 'officehome') {
  //       this.foldStatus = 'fold';
  //       this.canSlideExpanel = false;
  //     }
  //     let qrcodeUrl = '';
  //     // if (query.q) {
  //     //   qrcodeUrl = decodeURIComponent(query.q);
  //     //   let params = utils.getUrlParams(qrcodeUrl);
  //     // }
  //     // this.query = { ...query };
  //     let queryId = '';
  //     checkLogin()
  //       .then(() => {
  //         return this.getHistorySelectedArea();
  //       })
  //       .then(historyArea => {
  //         let historyAreaInfo = data.find(e => e.id == historyArea.spaceId);
  //         return getMapInfoHttp().then(res => {
  //           const result = JSON.parse(res.data);
  //           const httpDdata = (result && result.content) || [];
  //           return {
  //             historyArea,
  //             httpDdata
  //           };
  //         });
  //       })
  //       .then(res => {
  //         const { httpDdata, historyArea } = res;
  //         let historyAreaInfo;
  //         let selectarea;
  //         let selectAraeId = queryId || historyArea.spaceId;
  //         console.log('httpDdata----', httpDdata);
  //         console.log('historyArea----', historyArea);
  //         const combinedData = httpDdata.reduce((acc, cur) => {
  //           const target = acc.find(e => e.id == cur.id);
  //           selectarea = acc.find(e => e.id == selectAraeId);
  //           if (target) {
  //             Object.assign(target, { title: cur.localName });
  //             // console.log('找到了', cur, index);
  //           } else {
  //             // console.log('data有没找到', cur.id);
  //           }

  //           if (target && target.id == selectAraeId) {
  //             selectarea = { ...target }; // 如果有新数据，则更新选中的数据
  //           }
  //           return acc;
  //         }, data);
  //         this.mapAreasInfo = data;
  //         // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
  //         // if (from == 'officehome' && queryId) {
  //         if (from == 'officehome') {
  //           // this.foldPanelFun();
  //           this.doSelectArea(selectarea);
  //           // this.getSpaceTem();
  //         } else {
  //           this.autoSelectArea(selectarea);
  //         }
  //       });
  //     getScreenInfo().then(res => {
  //       this.screenScale = res.screenScale;
  //     });

  //     this.getMapScale().then(res => {
  //       this.mapScale = res.mapScale;
  //       this.mapWidth = Math.ceil(res.mapScale * standerMapWidth); // 因为有小数点的误差，故增加一部分
  //       this.mapHeight = res.mapHeight;
  //       this.mapParentHeight = res.mapHeight;
  //       this.mapParentWidth = res.screenWidth;
  //     });
  //   },
  ready() {
    // 页面加载
    // let from = query.from;
    // this.canSearchPerson = query.from !== 'visit'; // 从访客进入的页面无法搜索人
    // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
    if (from == 'officehome') {
      this.foldStatus = 'fold';
      this.canSlideExpanel = false;
    }
    // let qrcodeUrl = '';
    // if (query.q) {
    //   qrcodeUrl = decodeURIComponent(query.q);
    //   let params = utils.getUrlParams(qrcodeUrl);
    // }
    // this.query = { ...query };
    checkHasUserInfo()
    .then((userInfo) => {
        // let companyId =
        //   query.from !== 'visit' ? userInfo.companyId : query.companyId;
      let companyId = this.companyIdProp || userInfo.companyId;
      this.companyId = companyId;
      return getCompanyMapData(companyId);
    })
      .then((res) => {
        CompanyMapData = JSON.parse(res.data);
        this.selectedFloor = CompanyMapData.floorInfo[0].floorId;
        this.floors = CompanyMapData.floorInfo;
        this.isShowLocationEntrance = CompanyMapData.sagaCareBluetooth || false;
        this.getMapSize();
        return this.getHistorySelectedArea();
      })
      .then((historyArea) => {
        let historyAreaInfo = CompanyMapData.mapInfo.find(
          (e) => e.id == historyArea.spaceId
        );
        return getMapInfoHttp(this.companyId).then((res) => {
          const result = JSON.parse(res.data);
          const httpDdata = (result && result.content) || [];
          return {
            historyArea,
            httpDdata
          };
        });
      })
      .then((res) => {
        const { httpDdata, historyArea } = res;
        let historyAreaInfo;
        let selectarea;
        let selectAraeId = null;
        if (from == 'officehome') {
          selectAraeId = this.spaceIdProp
        } else {
          selectAraeId = historyArea.spaceId;
        }
        CompanyMapData.mapInfo.forEach((item) => {
          item.canClick = typeof item.canClick === 'boolean' ? item.canClick : JSON.parse(item.canClick)
          item.borderRadius =
          item.borderRadius ? item.borderRadius instanceof Array
              ? item.borderRadius
              : item.borderRadius
                  .slice(2, item.borderRadius.length - 2)
                  .split(',') : undefined;
        });
        combinedData = httpDdata.reduce((acc, cur) => {
          let target = acc.find((e) => e.id == cur.id);

          selectarea = acc.find((e) => e.id == selectAraeId);
          if (target) {
            Object.assign(target, { title: cur.localName });
          } else {
          }

          if (target && target.id == selectAraeId) {
            selectarea = { ...target }; // 如果有新数据，则更新选中的数据
          }
          return acc;
        }, CompanyMapData.mapInfo);
        this.mapAreasInfo = combinedData;
        // 如果从博瑞尚格智慧空间过来，面板是折叠起来，并且不能滑动
        if (from == 'officehome') {
          this.foldPanelFun();
          this.doSelectArea(selectarea);
          // this.getSpaceTem();
        } else {
          this.autoSelectArea(selectarea);
        }
      });
  },
  watch: {
    // 父亲传过来的空间id 搜索返回才会有这个传递
    spaceIdProp: function(newSpaceId, oldSpaceId) {
      if (oldSpaceId !== newSpaceId && newSpaceId) {
        let area = this.mapAreasInfo.find(item => {
          return item.id == newSpaceId;
        });
        area && this.doSelectArea(area, true);
      }
    }
  },
  //   onShow() {
  //     const lastSearchedSpace = wx.getStorageSync('lastSearchedSpace');
  //     // 从搜索页面返回且搜索有效
  //     if (lastSearchedSpace) {
  //       let area = this.mapAreasInfo.find(item => {
  //         return item.id == lastSearchedSpace.spaceId;
  //       });
  //       this.foldPanelFun();
  //       this.doSelectArea(area);
  //       // 清空，以免每次onshow时都执行（只需在从搜索页面返回时执行）
  //       wx.removeStorageSync('lastSearchedSpace');
  //     }
  //     if (this.pageHide) {
  //       this.pageHide = false;
  //     }
  //   },

  //   onHide() {
  //     this.pageHide = true;
  //   },
  //   onUnload() {
  //     this.pageHide = true;
  //   },
  methods: {
    getMapSize() {
      getScreenInfo().then(res => {
        this.screenScale = res.screenScale;
      });

      this.getMapScale().then(res => {
        this.mapScale = res.mapScale;
        this.mapWidth = Math.ceil(res.mapScale * CompanyMapData.mapWidth); // 因为有小数点的误差，故增加一部分
        this.mapHeight = res.mapHeight;
        this.mapParentHeight = res.mapHeight;
        this.mapParentWidth = res.screenWidth;
      });
    },
    setCacheSelectedArea(area) {
      const { selectedFloor } = this;
      wx.setStorage({
        key: 'SelectedASpace',
        data: {
          spaceId: area.id,
          floorId: selectedFloor
        },
        success: function() {}
      });
      // 选中一个并记录
      pageSelectedAreaRecord = {
        ...pageSelectedAreaRecord,
        [selectedFloor]: area.id
      };
    },
    setCacheSelectedFloor(floorId) {
      const { selectArea } = this;
      wx.setStorage({
        key: 'SelectedASpace',
        data: {
          floorId: floorId,
          spaceId: selectArea.floorId == floorId ? selectArea.id : ''
        },
        success: function() {}
      });
    },
    getHistorySelectedArea() {
      return new Promise((resolve, reject) => {
        wx.getStorage({
          key: 'SelectedASpace',
          success: res => {
            if (res.data && res.data.spaceId) {
              pageSelectedAreaRecord = {
                ...CompanyMapData.defalutSelectedId,
                [res.data.floorId]: res.data.spaceId // 如果有历史记录选中，覆盖值
              };
              resolve(res.data);
            } else {
              pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
              resolve({
                spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
                floorId: this.selectedFloor
              });
            }
          },
          fail: () => {
            pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
            resolve({
              spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
              floorId: this.selectedFloor
            });
          }
        });
      });
    },

    doSelectArea(area, sign) {
      if (!area) {
        return;
      }
      this.selectArea = area;
      this.selectedFloor = area.floorId;
      // this.getSpaceTem();
      this.setCacheSelectedArea(area);
      this.setAreaCenter(area);
      if (!sign) {
        // 如果是父亲传进来的areaId  不执行下面的触发
        this.$emit('mapChangeSpaceInfo', area.id); // 传给父组件，以请求数据
      }
    },
    selectAreaFun(currentSelect) {
      if (!currentSelect.canClick) {
        wx.showToast({
          title: '不可选区域',
          duration: 1000,
          icon: 'none'
        });
        return;
      }
      this.doSelectArea(currentSelect);
    },
    setAreaCenter(area) {
      if (!area.id) {
        return;
      }
      if (this.touchScale !== 1) {
        return;
      }
      getExpandPXHeight()
        .then(res => {
          const { expandPXHeight, screenHeight, screenWidth } = res;
          return this.getMapScale().then(res => {
            return {
              ...res,
              expandPXHeight,
              screenHeight,
              screenWidth
            };
          });
        })
        .then(res => {
          const { foldStatus } = this;
          const {
            screenHeight,
            screenWidth,
            expandPXHeight,
            mapScale,
            mapHeight
          } = res;
          let viewHeight = screenHeight - tarBarHeight - expandPXHeight;
          let viewCenterX = screenWidth / 2,
            viewCenterY = viewHeight / 2,
            areaCenterX =
              (parseInt(area.left) + parseInt(area.width) / 2) * mapScale,
            areaCenterY =
              (parseInt(area.top) + parseInt(area.height) / 2) * mapScale;

          let x = parseInt(viewCenterX - areaCenterX);
          let y = parseInt(viewCenterY - areaCenterY);
          let max = expandPXHeight - foldPanelPXHeight + 20;

          this.mapMoveByTouch = false;
          this.x = x > 0 ? 0 : x; // 超过边线设置边线值
          this.y =
            foldStatus === 'expand' ? (Math.abs(y) > max ? -max : y) : this.y; // 当面板展开时候，才需垂直居中
          // wx.showModal({
          //   title: '提示', //提示的标题,
          //   content: `x值:${this.x} y值:${y}`, //提示的内容,
          //   showCancel: true, //是否显示取消按钮,
          //   cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
          //   cancelColor: '#000000', //取消按钮的文字颜色,
          //   confirmText: '确定', //确定按钮的文字，默认为取消，最多 4 个字符,
          //   confirmColor: '#3CC51F', //确定按钮的文字颜色,
          //   success: res => {}
          // });

          this.mapHeight = screenHeight - tarBarHeight - foldPanelPXHeight; // 相当于加入底部空白，让面板被顶起来
        });
    },
    onScale(e) {
      this.touchScale = e.$wx.detail.scale;
    },

    foldPanelFun() {
      this.getMapHeight().then(res => {
        this.mapHeight = res.mapHeight;
        this.y = 0;
      });
      if (this.foldStatus === 'expand') {
        this.foldStatus = 'fold';
      }
    },
    expandPanelFun() {
      if (this.foldStatus === 'fold') {
        this.foldStatus = 'expand';
        this.setAreaCenter(this.selectArea);
      }
    },
    flodFloorFun() {
      if (this.floorStatus !== 'fold') {
        this.floorStatus = 'fold';
      }
    },
    changeFloorFun(floor) {
      wx.uma.trackEvent('officeHome_map-floorchange', {
        key: '环境调节-地图-楼层切换'
      });
      this.selectedFloor = floor;
      let spaceId = pageSelectedAreaRecord[floor];
      let area = this.mapAreasInfo.find(item => item.id == spaceId);
      // console.log("home",floor,this.mapAreasInfo,pageSelectedAreaRecord,area);
      if (from == 'officehome') {
        area && this.doSelectArea(area);
      }
    },
    toggleFloorStatus() {
      this.floorStatus = this.floorStatus === 'expand' ? 'fold' : 'expand';
    },
    positionFun(devices) {
      wx.uma.trackEvent('officeHome_map-location', {
        key: '环境调节-地图-定位'
      });
      getSpaceBytoothHttp(devices, this.companyId).then(res => {
        const result = JSON.parse(res.data || '{}');
        const data = (result && result.content && result.content[0]) || {};
        if (!data || (data && !data.id)) {
          wx.showToast({
            title: '未定位到空间', // 提示的内容,
            icon: 'none', // 图标,
            duration: 2000 // 延迟时间
          });
          return;
        }
        let mapInfo = this.mapAreasInfo.find(item => {
          return item.id === data.id;
        });
        this.doSelectArea({
          ...mapInfo,
          title: data.localName
        });
      });
    },
    toSearchPage() {
      wx.uma.trackEvent('officeHome_map-find', { key: '环境调节-地图-找找' });

      wx.navigateTo({
        url: `/packagesEnv/pages/intelligentControl/search/search?canSearchPerson=${this.canSearchPerson}&companyId=${this.companyId}&from=officehome`
      });
    },
    goBack() {
      wx.navigateBack({
        delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    getfoldPanelPXHeight() {
      if (
        foldPanelPXHeight &&
        screenInfo &&
        screenInfo.screenWidth &&
        screenInfo.screenHeight
      ) {
        return Promise.resolve({
          foldPanelPXHeight,
          screenWidth: screenInfo.screenWidth,
          screenHeight: screenInfo.screenHeight
        });
      }
      return getScreenInfo().then(res => {
        let foldHeight =
          from == 'officehome' ? switchPanelHeight : panelFoldHeight;
        // foldPanelPXHeight = parseInt(res.screenScale * foldHeight);
        foldPanelPXHeight = parseInt(foldHeight);
        return {
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight,
          foldPanelPXHeight
        };
      });
    },
    getMapHeight() {
      return this.getfoldPanelPXHeight().then(res => {
        let mapHeight = res.screenHeight - tarBarHeight - res.foldPanelPXHeight;

        return {
          ...res,
          mapHeight
        };
      });
    },
    getMapScale() {
      return this.getMapHeight().then(res => {
        mapScale = Math.floor((res.mapHeight / standerMapHeight) * 10) / 10;
        return {
          ...res,
          mapScale
        };
      });
    }
  }
});
function getScreenInfo() {
  if (
    screenScale &&
    screenInfo &&
    screenInfo.screenWidth &&
    screenInfo.screenHeight
  ) {
    return Promise.resolve({
      ...screenInfo,
      screenScale
    });
  }
  return new Promise((resolve, reject) => {
    wx.getSystemInfo({
      success: res => {
        screenInfo.screenHeight = res.screenHeight;
        screenInfo.screenWidth = res.screenWidth;
        screenScale = res.screenWidth / standerScreenWidth;
        resolve({
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight,
          screenScale
        });
      }
    });
  });
}
function getExpandPXHeight() {
  if (
    expandPXHeight &&
    screenInfo &&
    screenInfo.screenWidth &&
    screenInfo.screenHeight
  ) {
    return Promise.resolve({
      expandPXHeight,
      screenWidth: screenInfo.screenWidth,
      screenHeight: screenInfo.screenHeight
    });
  }
  return getScreenInfo().then(res => {
    expandPXHeight = parseInt(res.screenScale * panelExpandHeight);
    return {
      screenWidth: res.screenWidth,
      screenHeight: res.screenHeight,
      expandPXHeight
    };
  });
}
</script>

<config>
{
  "navigationBarBackgroundColor": "#EBEEF5",
  "backgroundColor": "#EBEEF5",
  "disableScroll": true,
  "usingComponents": {
   "control-panel": "./components/controlpanel/controlpanel",
   "temperture-control-panel": "./components/temperturecontrolpanel/temperturecontrolpanel",
   "floor": "./components/floor/floor",
   "location": "./components/location/location"
  }
}
</config>