|
@@ -10,6 +10,65 @@
|
|
|
background: #f7f8fa;
|
|
|
}
|
|
|
}
|
|
|
+.tool-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 272rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ z-index: 333;
|
|
|
+ .search-btn-box {
|
|
|
+ overflow: hidden;
|
|
|
+ text-align: right;
|
|
|
+ image {
|
|
|
+ float: right;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ .now-floor {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0px 4px 12px 0px #00000008;
|
|
|
+ .select-building {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 28rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ height: 36rpx;
|
|
|
+ width: 1px;
|
|
|
+ background: #e1e5eb;
|
|
|
+ }
|
|
|
+ .select-floor {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
.page-intelligent-control .map-contanier {
|
|
|
// height: 100%;
|
|
@@ -21,30 +80,16 @@
|
|
|
}
|
|
|
|
|
|
.page-intelligent-control .location-wrapper {
|
|
|
- position: absolute;
|
|
|
- bottom: 36rpx;
|
|
|
- right: 32rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 272rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ z-index: 444;
|
|
|
&.fold {
|
|
|
}
|
|
|
&.building {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.search-btn-box {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
-}
|
|
|
-.page-intelligent-control .location-wrapper .search-btn {
|
|
|
- // position: absolute;
|
|
|
- // right: 0;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
- display: block;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 16rpx;
|
|
|
-}
|
|
|
-
|
|
|
.page-intelligent-control .location-wrapper.expand {
|
|
|
bottom: 658rpx;
|
|
|
}
|
|
@@ -207,6 +252,36 @@ movable-view {
|
|
|
border-radius: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
+.icon-arrow {
|
|
|
+ text-align: right;
|
|
|
+ .icon-arrow-box {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 22rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ width: 60px;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 4px 12px 0px #00000008;
|
|
|
+ label {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<div class="page-intelligent-control" v-on:click="flodFloorFun">
|
|
@@ -278,15 +353,25 @@ movable-view {
|
|
|
/>
|
|
|
</div>
|
|
|
</movable-view>
|
|
|
- <div class="{{'location-wrapper ' + foldStatus}}">
|
|
|
+
|
|
|
+ <div class="tool-box" v-if="foldStatus!=='expand'">
|
|
|
<div class="search-btn-box">
|
|
|
<image
|
|
|
v-on:click="toSearchPage"
|
|
|
class="search-btn"
|
|
|
src="{{h5StaticPath}}icon-search-big.svg"
|
|
|
/>
|
|
|
+ </div>
|
|
|
+ <div class="now-floor"
|
|
|
+ v-on:click="changeBuilding">
|
|
|
+ <div class="select-building">东南栋</div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="select-floor">F1</div>
|
|
|
</div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="foldStatus=='expand'" class="location-wrapper">
|
|
|
+ <!--楼层和建筑数据-->
|
|
|
<floor
|
|
|
status="{{floorStatus}}"
|
|
|
:floors="floors"
|
|
@@ -297,6 +382,19 @@ movable-view {
|
|
|
@component-floor-change="changeFloorFun($event)"
|
|
|
@component-floor-click="toggleFloorStatus"
|
|
|
></floor>
|
|
|
+
|
|
|
+ <!--查看更多 -->
|
|
|
+ <div class="icon-arrow">
|
|
|
+ <div class="icon-arrow-box">
|
|
|
+ <label>收起</label>
|
|
|
+ <image
|
|
|
+ mode="scaleToFill"
|
|
|
+ class="icon"
|
|
|
+ src="{{h5StaticPath+ 'icon-floor-arrow.svg'}}"
|
|
|
+ v-on:click.stop="flodFloor"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</movable-area>
|
|
|
</div>
|
|
@@ -423,6 +521,10 @@ wepy.component({
|
|
|
this.projectId = 'Pj1101080259';
|
|
|
this.getPageBuildingList();
|
|
|
},
|
|
|
+ // 展开建筑
|
|
|
+ changeBuilding() {
|
|
|
+ this.foldStatus = 'expand';
|
|
|
+ },
|
|
|
//获取建筑数据
|
|
|
getPageBuildingList() {
|
|
|
let params = {
|
|
@@ -431,7 +533,20 @@ wepy.component({
|
|
|
}
|
|
|
};
|
|
|
getBuildingList(params).then(res => {
|
|
|
- this.buildingData = res.content || [];
|
|
|
+ // this.buildingData = res.content || [];
|
|
|
+ this.buildingData = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ localName: '冬暖冬冬'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ localName: '冬暖冬冬暖冬冬暖冬'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ localName: '冬暖冬冬暖冬冬暖冬冬暖冬冬暖冬冬暖冬'
|
|
|
+ }
|
|
|
+ ];
|
|
|
this.buildingItem = this.buildingData[0];
|
|
|
this.selectedBuilding = this.buildingItem.id;
|
|
|
this.getFloorList();
|
|
@@ -684,8 +799,7 @@ wepy.component({
|
|
|
});
|
|
|
},
|
|
|
toSearchPage() {
|
|
|
- wx.uma.trackEvent('officeHome_map-find', { key: '环境调节-地图-找找' });
|
|
|
-
|
|
|
+ console.log('被点击了');
|
|
|
wx.navigateTo({
|
|
|
url: `/packagesEnv/pages/intelligentControl/search/search?canSearchPerson=${
|
|
|
this.canSearchPerson
|