home2.wpy 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849
  1. <style lang="less">
  2. .page-intelligent-control {
  3. position: relative;
  4. // height: 100%;
  5. width: 100%;
  6. box-sizing: border-box;
  7. overflow: hidden;
  8. .top-bar {
  9. height: 96px;
  10. background: #f7f8fa;
  11. }
  12. }
  13. .page-intelligent-control .map-contanier {
  14. // height: 100%;
  15. width: 100%;
  16. // padding-bottom: 176rpx;
  17. //background: #ebeef5;
  18. background: #f7f8fa;
  19. box-sizing: border-box;
  20. }
  21. .page-intelligent-control .location-wrapper {
  22. position: absolute;
  23. bottom: 36rpx;
  24. right: 32rpx;
  25. }
  26. .page-intelligent-control .location-wrapper .search-btn {
  27. margin-bottom: 16rpx;
  28. width: 96rpx;
  29. height: 96rpx;
  30. display: block;
  31. background: #ffffff;
  32. border-radius: 16rpx;
  33. }
  34. .page-intelligent-control .location-wrapper.expand {
  35. bottom: 658rpx;
  36. }
  37. movable-area {
  38. width: 100%;
  39. height: 0;
  40. position: relative;
  41. }
  42. movable-view {
  43. color: #fff;
  44. }
  45. .room-item {
  46. position: absolute;
  47. box-shadow: 0px 1px 4px rgba(1, 1, 51, 0.01),
  48. 0px 16px 40px rgba(1, 1, 51, 0.03);
  49. border-radius: 4px;
  50. box-sizing: border-box;
  51. padding: 0 12rpx;
  52. transform-origin: center;
  53. z-index: 1;
  54. &.isAbnormity {
  55. padding: 0;
  56. }
  57. }
  58. .room-item.selected {
  59. border: 2px solid rgba(77, 148, 255, 0.8);
  60. }
  61. .room-item.transparent {
  62. box-shadow: none;
  63. }
  64. .room-item.selected.transparent {
  65. border: 0;
  66. }
  67. .room-item.clickDisabled {
  68. border: 2px solid #dfe3ed;
  69. box-sizing: border-box;
  70. background-repeat: repeat;
  71. }
  72. .room-item .bg-disabled {
  73. width: 100%;
  74. height: 100%;
  75. border-radius: 4px;
  76. }
  77. .room-item .icon {
  78. width: 72rpx;
  79. height: 40rpx;
  80. position: absolute;
  81. top: 50%;
  82. left: 50%;
  83. transform: translateX(-50%) translateY(-50%);
  84. }
  85. .room-item .circle {
  86. width: 8rpx;
  87. height: 8rpx;
  88. border-radius: 50%;
  89. position: absolute;
  90. top: 50%;
  91. left: 50%;
  92. transform: translateX(-50%) translateY(-50%);
  93. }
  94. .room-item .door {
  95. position: absolute;
  96. width: 48rpx;
  97. height: 24rpx;
  98. }
  99. .room-item .text {
  100. font-weight: 600;
  101. font-size: 20rpx;
  102. line-height: 24rpx;
  103. text-align: center;
  104. color: #8995ba;
  105. position: absolute;
  106. top: 50%;
  107. left: 50%;
  108. width: 100%;
  109. transform: translateX(-50%) translateY(32rpx);
  110. padding: 0 16rpx;
  111. box-sizing: border-box;
  112. word-break: break-all;
  113. }
  114. .area-items-wrapper {
  115. position: relative;
  116. width: 100%;
  117. height: 100%;
  118. }
  119. .selected-icon {
  120. height: 88rpx;
  121. width: 144rpx;
  122. position: absolute;
  123. z-index: 9999;
  124. transform-origin: 36px 54px; //偏移量决定的
  125. }
  126. .room-item.selected .text {
  127. font-weight: 600;
  128. font-size: 24rpx;
  129. line-height: 24rpx;
  130. text-align: center;
  131. white-space: nowrap;
  132. color: #515a76;
  133. top: 50%;
  134. left: 50%;
  135. z-index: 2;
  136. width: auto;
  137. padding: 0;
  138. text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
  139. transform: translateX(-50%) translateY(-50%);
  140. }
  141. .room-item.selected.ConferenceRoom {
  142. box-shadow: 0px 0px 4px rgba(1, 1, 51, 0.01),
  143. 0px 0px 40px rgba(1, 1, 51, 0.03);
  144. border-radius: 2px;
  145. border: 2px solid rgba(77, 148, 255, 0.42);
  146. }
  147. .office-content-abstract {
  148. position: absolute;
  149. bottom: 0;
  150. left: 0;
  151. right: 0;
  152. height: 238rpx;
  153. box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.05),
  154. 0px 8rpx 30rpx rgba(0, 0, 0, 0.15);
  155. border-radius: 50rpx 50rpx 0px 0px;
  156. box-sizing: border-box;
  157. padding: 48rpx 48rpx 0;
  158. background: #ffffff;
  159. .title {
  160. font-weight: 600;
  161. font-size: 36rpx;
  162. line-height: 50rpx;
  163. color: #000000;
  164. }
  165. .btn-switch {
  166. position: absolute;
  167. top: 40rpx;
  168. right: 48rpx;
  169. width: 148rpx;
  170. height: 64rpx;
  171. font-weight: 500;
  172. font-size: 28rpx;
  173. line-height: 64rpx;
  174. color: #000000;
  175. background: #ffe823;
  176. text-align: center;
  177. box-shadow: 0px 0px 2rpx rgba(0, 0, 0, 0.15),
  178. 0px 8rpx 12rpx rgba(0, 0, 0, 0.07);
  179. border-radius: 60rpx;
  180. }
  181. }
  182. </style>
  183. <template>
  184. <div class="page-intelligent-control" v-on:click="flodFloorFun">
  185. <div class="top-bar"></div>
  186. <div class="map-contanier">
  187. <movable-area
  188. :style="{'height':mapParentHeight+'px','width':mapParentWidth+'px'}"
  189. scale-area="true"
  190. >
  191. <movable-view
  192. x="{{x}}"
  193. y="{{y}}"
  194. style="height:{{mapHeight}}px;width:{{mapWidth}}px"
  195. direction="all"
  196. out-of-bounds="false"
  197. bindscale="onScale"
  198. scale="true"
  199. scale-min="0.5"
  200. scale-max="1"
  201. scale-value="1"
  202. >
  203. <div class="area-items-wrapper">
  204. <block
  205. v-for="(area, index) in mapAreasInfo"
  206. :key="index"
  207. wx:if="{{area.floorId == selectedFloor}}"
  208. >
  209. <div
  210. @tap="selectAreaFun(area)"
  211. class="room-item {{area.isAbnormity? 'isAbnormity': ''}}"
  212. 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)': '')}}"
  213. :class="{'selected': selectArea.id === area.id, 'clickDisabled': area.canClick !==true,'transparent': !area.backgroundColor}"
  214. >
  215. <block wx:if="{{selectArea.id === area.id}}"></block>
  216. <block
  217. wx:elif="{{area.width*mapScale*touchScale>24&&area.height*mapScale*touchScale>24}}"
  218. >
  219. <image
  220. wx:if="{{area.icon}}"
  221. class="icon"
  222. src="{{h5StaticPath+ 'map-icon/' + area.icon}}"
  223. />
  224. </block>
  225. <block
  226. wx:elif="{{area.width*mapScale*touchScale>=24 || area.height*mapScale*touchScale>=24}}"
  227. >
  228. <div class="circle" style="{{'background-color:'+ area.circleColor+';'}}"></div>
  229. </block>
  230. <div
  231. class="text"
  232. wx:if="{{selectArea.id === area.id || (area.roomFuncType>=300 &&area.height*mapScale>80 && (area.title.length*screenScale*10 +16*screenScale)<area.width*mapScale)}}"
  233. >{{area.title}}</div>
  234. <image
  235. wx:if="{{area.has_door===true && selectArea.id !== area.id}}"
  236. 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;"
  237. class="door"
  238. mode="scaleToFill"
  239. src="{{h5StaticPath+ 'map-icon/' +area.door_icon}}"
  240. />
  241. </div>
  242. </block>
  243. <image
  244. class="selected-icon"
  245. wx:if="{{selectArea}}"
  246. mode="scaleToFill"
  247. :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)' }"
  248. src="{{h5StaticPath + 'map-icon/' + selectArea.selectIcon}}"
  249. />
  250. </div>
  251. </movable-view>
  252. <div class="{{'location-wrapper ' + foldStatus}}">
  253. <image
  254. v-on:click="toSearchPage"
  255. class="search-btn"
  256. src="{{h5StaticPath}}icon-search-big.svg"
  257. />
  258. <!-- 博锐尚格正式环境暂不显示该入口 -->
  259. <location
  260. v-if="isShowLocationEntrance"
  261. @component-location-position="positionFun($event)"
  262. ></location>
  263. <floor
  264. status="{{floorStatus}}"
  265. :floors="floors"
  266. selectedFloor="{{selectedFloor}}"
  267. @component-floor-fold="flodFloorFun"
  268. @component-floor-change="changeFloorFun($event)"
  269. @component-floor-click="toggleFloorStatus"
  270. ></floor>
  271. </div>
  272. </movable-area>
  273. </div>
  274. <!-- <block v-if="query.from && query.from=='officehome'">
  275. <div class="office-content-abstract">
  276. <div class="title">{{selectArea.title}}</div>
  277. <div class="btn-switch" v-on:click="goBack">切换</div>
  278. </div>
  279. </block>-->
  280. </div>
  281. </template>
  282. <script>
  283. import wepy from '@wepy/core';
  284. import store from '@/store';
  285. import {
  286. getMapInfoHttp,
  287. getSpaceBytoothHttp,
  288. getMapDetailHttp
  289. } from '@/packagesEnv/api/intelligentControl';
  290. import { checkHasUserInfo } from '@/service/user';
  291. import utils from '@/common/utils';
  292. import config from '@/config';
  293. import { mapState } from '@wepy/x';
  294. import { saveCompanyConfig } from '@/service/companyConfig';
  295. import { getCompanyMapData } from '@/api/home';
  296. let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
  297. const tarBarHeight = 96;
  298. const panelExpandHeight = 407; // 单位为px
  299. const panelFoldHeight = 96; // 单位为px
  300. const switchPanelHeight = 145; // 单位为px
  301. const standerScreenWidth = 375;
  302. const standerMapHeight = 812 - tarBarHeight - panelFoldHeight; // 在375*812屏幕下地图所能展示区域的大小px
  303. let screenInfo = {};
  304. let standerMapWidth = 2336;
  305. let mapScale;
  306. let screenScale;
  307. let foldPanelPXHeight; // 在不同的手机屏幕的实际高度
  308. let expandPXHeight;
  309. let pageSelectedAreaRecord = {
  310. // key为楼层ID,value 为spceId
  311. };
  312. let touchMapStartRecord = {
  313. timeStamp: 0,
  314. pageX: 0,
  315. pageY: 0
  316. };
  317. let touchMapEndRecord = {
  318. timeStamp: 0,
  319. pageX: 0,
  320. pageY: 0
  321. };
  322. let from = 'officehome';
  323. let CompanyMapData;
  324. let combinedData = [];
  325. wepy.component({
  326. props: {
  327. spaceIdProp: '',
  328. companyIdProp: ''
  329. },
  330. store,
  331. data: {
  332. currentSp: '', // 空间id 用于路由跳转
  333. h5StaticPath,
  334. mapAreasInfo: [],
  335. selectArea: {},
  336. x: 0,
  337. y: 0,
  338. selectedFloor: '',
  339. foldStatus: 'fold', // fold-最小化 expand-展开状态
  340. floorStatus: 'fold', // flod-收起楼层 expand-展开楼层选则
  341. mapHeight: 507,
  342. mapParentHeight: 607,
  343. mapParentWidth: 375,
  344. mapWidth: 2336,
  345. mapScale: 1,
  346. screenScale: 1,
  347. mapMoveByTouch: false,
  348. touchScale: 1,
  349. isShowLocationEntrance: false,
  350. canSearchPerson: true,
  351. canSlideExpanel: true,
  352. pageHide: false,
  353. query: {},
  354. floors: [],
  355. companyId: ''
  356. },
  357. computed: {
  358. ...mapState({ userInfo: state => state.user.userInfo })
  359. },
  360. ready() {
  361. // 页面加载
  362. // let from = query.from;
  363. // this.canSearchPerson = query.from !== 'visit'; // 从访客进入的页面无法搜索人
  364. // 如果从博瑞尚格智慧空间过来,面板是折叠起来,并且不能滑动
  365. if (from == 'officehome') {
  366. this.foldStatus = 'fold';
  367. this.canSlideExpanel = false;
  368. }
  369. checkHasUserInfo()
  370. .then(userInfo => {
  371. // let companyId =
  372. // query.from !== 'visit' ? userInfo.companyId : query.companyId;
  373. let companyId = this.companyIdProp || userInfo.companyId;
  374. this.companyId = companyId;
  375. return getCompanyMapData(companyId);
  376. })
  377. .then(res => {
  378. CompanyMapData = JSON.parse(res.data);
  379. this.selectedFloor = CompanyMapData.floorInfo[0].floorId;
  380. this.floors = CompanyMapData.floorInfo;
  381. this.isShowLocationEntrance = CompanyMapData.sagaCareBluetooth || false;
  382. this.getMapSize();
  383. return this.getHistorySelectedArea();
  384. })
  385. .then(historyArea => {
  386. // let historyAreaInfo = CompanyMapData.mapInfo.find(
  387. // e => e.id == historyArea.spaceId
  388. // );
  389. return getMapInfoHttp(this.companyId).then(res => {
  390. const result = JSON.parse(res.data);
  391. const httpDdata = (result && result.content) || [];
  392. return {
  393. historyArea,
  394. httpDdata
  395. };
  396. });
  397. })
  398. .then(res => {
  399. const { httpDdata, historyArea } = res;
  400. let historyAreaInfo;
  401. let selectarea;
  402. let selectAraeId = null;
  403. if (from == 'officehome') {
  404. selectAraeId = this.spaceIdProp;
  405. } else {
  406. selectAraeId = historyArea.spaceId;
  407. }
  408. CompanyMapData.mapInfo.forEach(item => {
  409. item.canClick =
  410. typeof item.canClick === 'boolean'
  411. ? item.canClick
  412. : JSON.parse(item.canClick);
  413. item.borderRadius = item.borderRadius
  414. ? item.borderRadius instanceof Array
  415. ? item.borderRadius
  416. : item.borderRadius
  417. .slice(2, item.borderRadius.length - 2)
  418. .split(',')
  419. : undefined;
  420. });
  421. combinedData = httpDdata.reduce((acc, cur) => {
  422. let target = acc.find(e => e.id == cur.id);
  423. selectarea = acc.find(e => e.id == selectAraeId);
  424. if (target) {
  425. Object.assign(target, { title: cur.localName });
  426. } else {
  427. }
  428. if (target && target.id == selectAraeId) {
  429. selectarea = { ...target }; // 如果有新数据,则更新选中的数据
  430. }
  431. return acc;
  432. }, CompanyMapData.mapInfo);
  433. this.mapAreasInfo = combinedData;
  434. // 如果从博瑞尚格智慧空间过来,面板是折叠起来,并且不能滑动
  435. if (from == 'officehome') {
  436. this.foldPanelFun();
  437. this.doSelectArea(selectarea);
  438. // this.getSpaceTem();
  439. } else {
  440. this.autoSelectArea(selectarea);
  441. }
  442. });
  443. },
  444. watch: {
  445. // 父亲传过来的空间id 搜索返回才会有这个传递
  446. spaceIdProp: function(newSpaceId, oldSpaceId) {
  447. if (oldSpaceId !== newSpaceId && newSpaceId) {
  448. let area = this.mapAreasInfo.find(item => {
  449. return item.id == newSpaceId;
  450. });
  451. area && this.doSelectArea(area, true);
  452. }
  453. }
  454. },
  455. methods: {
  456. /**
  457. * 查询楼层信息
  458. */
  459. getFloorList(flag) {
  460. let params = {
  461. criteria: {
  462. projectId: projectId
  463. }
  464. };
  465. getFloorList(params).then(res => {});
  466. },
  467. /**
  468. * 获取地图信息
  469. */
  470. getMapInfo() {
  471. let params = {
  472. projectId: 'props.projectId',
  473. floorId: 'proxyData.floorItem.id'
  474. };
  475. getMapInfo(params)
  476. .then(res => {})
  477. .catch(() => {});
  478. },
  479. getMapSize() {
  480. getScreenInfo().then(res => {
  481. this.screenScale = res.screenScale;
  482. });
  483. this.getMapScale().then(res => {
  484. this.mapScale = res.mapScale;
  485. this.mapWidth = Math.ceil(res.mapScale * CompanyMapData.mapWidth); // 因为有小数点的误差,故增加一部分
  486. this.mapHeight = res.mapHeight;
  487. this.mapParentHeight = res.mapHeight;
  488. this.mapParentWidth = res.screenWidth;
  489. });
  490. },
  491. setCacheSelectedArea(area) {
  492. const { selectedFloor } = this;
  493. wx.setStorage({
  494. key: 'SelectedASpace',
  495. data: {
  496. spaceId: area.id,
  497. floorId: selectedFloor
  498. },
  499. success: function() {}
  500. });
  501. // 选中一个并记录
  502. pageSelectedAreaRecord = {
  503. ...pageSelectedAreaRecord,
  504. [selectedFloor]: area.id
  505. };
  506. },
  507. setCacheSelectedFloor(floorId) {
  508. const { selectArea } = this;
  509. wx.setStorage({
  510. key: 'SelectedASpace',
  511. data: {
  512. floorId: floorId,
  513. spaceId: selectArea.floorId == floorId ? selectArea.id : ''
  514. },
  515. success: function() {}
  516. });
  517. },
  518. getHistorySelectedArea() {
  519. return new Promise((resolve, reject) => {
  520. wx.getStorage({
  521. key: 'SelectedASpace',
  522. success: res => {
  523. if (res.data && res.data.spaceId) {
  524. pageSelectedAreaRecord = {
  525. ...CompanyMapData.defalutSelectedId,
  526. [res.data.floorId]: res.data.spaceId // 如果有历史记录选中,覆盖值
  527. };
  528. resolve(res.data);
  529. } else {
  530. pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
  531. resolve({
  532. spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
  533. floorId: this.selectedFloor
  534. });
  535. }
  536. },
  537. fail: () => {
  538. pageSelectedAreaRecord = CompanyMapData.defalutSelectedId;
  539. resolve({
  540. spaceId: CompanyMapData.defalutSelectedId[this.selectedFloor],
  541. floorId: this.selectedFloor
  542. });
  543. }
  544. });
  545. });
  546. },
  547. doSelectArea(area, sign) {
  548. if (!area) {
  549. return;
  550. }
  551. this.selectArea = area;
  552. this.selectedFloor = area.floorId;
  553. // this.getSpaceTem();
  554. this.setCacheSelectedArea(area);
  555. this.setAreaCenter(area);
  556. if (!sign) {
  557. // 如果是父亲传进来的areaId 不执行下面的触发
  558. this.$emit('mapChangeSpaceInfo', area.id); // 传给父组件,以请求数据
  559. }
  560. },
  561. selectAreaFun(currentSelect) {
  562. if (!currentSelect.canClick) {
  563. wx.showToast({
  564. title: '不可选区域',
  565. duration: 1000,
  566. icon: 'none'
  567. });
  568. return;
  569. }
  570. this.doSelectArea(currentSelect);
  571. },
  572. setAreaCenter(area) {
  573. if (!area.id) {
  574. return;
  575. }
  576. if (this.touchScale !== 1) {
  577. return;
  578. }
  579. getExpandPXHeight()
  580. .then(res => {
  581. const { expandPXHeight, screenHeight, screenWidth } = res;
  582. return this.getMapScale().then(res => {
  583. return {
  584. ...res,
  585. expandPXHeight,
  586. screenHeight,
  587. screenWidth
  588. };
  589. });
  590. })
  591. .then(res => {
  592. const { foldStatus } = this;
  593. const {
  594. screenHeight,
  595. screenWidth,
  596. expandPXHeight,
  597. mapScale,
  598. mapHeight
  599. } = res;
  600. let viewHeight = screenHeight - tarBarHeight - expandPXHeight;
  601. let viewCenterX = screenWidth / 2,
  602. viewCenterY = viewHeight / 2,
  603. areaCenterX =
  604. (parseInt(area.left) + parseInt(area.width) / 2) * mapScale,
  605. areaCenterY =
  606. (parseInt(area.top) + parseInt(area.height) / 2) * mapScale;
  607. let x = parseInt(viewCenterX - areaCenterX);
  608. let y = parseInt(viewCenterY - areaCenterY);
  609. let max = expandPXHeight - foldPanelPXHeight + 20;
  610. this.mapMoveByTouch = false;
  611. this.x = x > 0 ? 0 : x; // 超过边线设置边线值
  612. this.y =
  613. foldStatus === 'expand' ? (Math.abs(y) > max ? -max : y) : this.y; // 当面板展开时候,才需垂直居中
  614. // wx.showModal({
  615. // title: '提示', //提示的标题,
  616. // content: `x值:${this.x} y值:${y}`, //提示的内容,
  617. // showCancel: true, //是否显示取消按钮,
  618. // cancelText: '取消', //取消按钮的文字,默认为取消,最多 4 个字符,
  619. // cancelColor: '#000000', //取消按钮的文字颜色,
  620. // confirmText: '确定', //确定按钮的文字,默认为取消,最多 4 个字符,
  621. // confirmColor: '#3CC51F', //确定按钮的文字颜色,
  622. // success: res => {}
  623. // });
  624. this.mapHeight = screenHeight - tarBarHeight - foldPanelPXHeight; // 相当于加入底部空白,让面板被顶起来
  625. });
  626. },
  627. onScale(e) {
  628. this.touchScale = e.$wx.detail.scale;
  629. },
  630. foldPanelFun() {
  631. this.getMapHeight().then(res => {
  632. this.mapHeight = res.mapHeight;
  633. this.y = 0;
  634. });
  635. if (this.foldStatus === 'expand') {
  636. this.foldStatus = 'fold';
  637. }
  638. },
  639. expandPanelFun() {
  640. if (this.foldStatus === 'fold') {
  641. this.foldStatus = 'expand';
  642. this.setAreaCenter(this.selectArea);
  643. }
  644. },
  645. flodFloorFun() {
  646. if (this.floorStatus !== 'fold') {
  647. this.floorStatus = 'fold';
  648. }
  649. },
  650. changeFloorFun(floor) {
  651. wx.uma.trackEvent('officeHome_map-floorchange', {
  652. key: '环境调节-地图-楼层切换'
  653. });
  654. this.selectedFloor = floor;
  655. let spaceId = pageSelectedAreaRecord[floor];
  656. let area = this.mapAreasInfo.find(item => item.id == spaceId);
  657. // console.log("home",floor,this.mapAreasInfo,pageSelectedAreaRecord,area);
  658. if (from == 'officehome') {
  659. area && this.doSelectArea(area);
  660. }
  661. },
  662. toggleFloorStatus() {
  663. this.floorStatus = this.floorStatus === 'expand' ? 'fold' : 'expand';
  664. },
  665. positionFun(devices) {
  666. wx.uma.trackEvent('officeHome_map-location', {
  667. key: '环境调节-地图-定位'
  668. });
  669. getSpaceBytoothHttp(devices, this.companyId).then(res => {
  670. const result = JSON.parse(res.data || '{}');
  671. const data = (result && result.content && result.content[0]) || {};
  672. if (!data || (data && !data.id)) {
  673. wx.showToast({
  674. title: '未定位到空间', // 提示的内容,
  675. icon: 'none', // 图标,
  676. duration: 2000 // 延迟时间
  677. });
  678. return;
  679. }
  680. let mapInfo = this.mapAreasInfo.find(item => {
  681. return item.id === data.id;
  682. });
  683. this.doSelectArea({
  684. ...mapInfo,
  685. title: data.localName
  686. });
  687. });
  688. },
  689. toSearchPage() {
  690. wx.uma.trackEvent('officeHome_map-find', { key: '环境调节-地图-找找' });
  691. wx.navigateTo({
  692. url: `/packagesEnv/pages/intelligentControl/search/search?canSearchPerson=${
  693. this.canSearchPerson
  694. }&companyId=${this.companyId}&from=officehome`
  695. });
  696. },
  697. goBack() {
  698. wx.navigateBack({
  699. delta: 1 // 返回的页面数,如果 delta 大于现有页面数,则返回到首页,
  700. });
  701. },
  702. getfoldPanelPXHeight() {
  703. if (
  704. foldPanelPXHeight &&
  705. screenInfo &&
  706. screenInfo.screenWidth &&
  707. screenInfo.screenHeight
  708. ) {
  709. return Promise.resolve({
  710. foldPanelPXHeight,
  711. screenWidth: screenInfo.screenWidth,
  712. screenHeight: screenInfo.screenHeight
  713. });
  714. }
  715. return getScreenInfo().then(res => {
  716. let foldHeight =
  717. from == 'officehome' ? switchPanelHeight : panelFoldHeight;
  718. // foldPanelPXHeight = parseInt(res.screenScale * foldHeight);
  719. foldPanelPXHeight = parseInt(foldHeight);
  720. return {
  721. screenWidth: res.screenWidth,
  722. screenHeight: res.screenHeight,
  723. foldPanelPXHeight
  724. };
  725. });
  726. },
  727. getMapHeight() {
  728. return this.getfoldPanelPXHeight().then(res => {
  729. let mapHeight = res.screenHeight - tarBarHeight - res.foldPanelPXHeight;
  730. return {
  731. ...res,
  732. mapHeight
  733. };
  734. });
  735. },
  736. getMapScale() {
  737. return this.getMapHeight().then(res => {
  738. mapScale = Math.floor((res.mapHeight / standerMapHeight) * 10) / 10;
  739. return {
  740. ...res,
  741. mapScale
  742. };
  743. });
  744. }
  745. }
  746. });
  747. function getScreenInfo() {
  748. if (
  749. screenScale &&
  750. screenInfo &&
  751. screenInfo.screenWidth &&
  752. screenInfo.screenHeight
  753. ) {
  754. return Promise.resolve({
  755. ...screenInfo,
  756. screenScale
  757. });
  758. }
  759. return new Promise((resolve, reject) => {
  760. wx.getSystemInfo({
  761. success: res => {
  762. screenInfo.screenHeight = res.screenHeight;
  763. screenInfo.screenWidth = res.screenWidth;
  764. screenScale = res.screenWidth / standerScreenWidth;
  765. resolve({
  766. screenWidth: res.screenWidth,
  767. screenHeight: res.screenHeight,
  768. screenScale
  769. });
  770. }
  771. });
  772. });
  773. }
  774. function getExpandPXHeight() {
  775. if (
  776. expandPXHeight &&
  777. screenInfo &&
  778. screenInfo.screenWidth &&
  779. screenInfo.screenHeight
  780. ) {
  781. return Promise.resolve({
  782. expandPXHeight,
  783. screenWidth: screenInfo.screenWidth,
  784. screenHeight: screenInfo.screenHeight
  785. });
  786. }
  787. return getScreenInfo().then(res => {
  788. expandPXHeight = parseInt(res.screenScale * panelExpandHeight);
  789. return {
  790. screenWidth: res.screenWidth,
  791. screenHeight: res.screenHeight,
  792. expandPXHeight
  793. };
  794. });
  795. }
  796. </script>
  797. <config>
  798. {
  799. "navigationBarBackgroundColor": "#EBEEF5",
  800. "backgroundColor": "#EBEEF5",
  801. "disableScroll": true,
  802. "usingComponents": {
  803. "control-panel": "./components/controlpanel/controlpanel",
  804. "temperture-control-panel": "./components/temperturecontrolpanel/temperturecontrolpanel",
  805. "floor": "./components/floor/floor",
  806. "location": "./components/location/location"
  807. }
  808. }
  809. </config>