Browse Source

fix:地图模块切换功能修改

chenzhen2 1 year ago
parent
commit
8a477f4fb5

+ 103 - 0
src/packagesEnv/pages/intelligentControl/components/floor/floor copy.wpy

@@ -0,0 +1,103 @@
+<style lang="less">
+.component-floor {
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 0.9);
+  .floor-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+.component-floor.fold .floor-item {
+  background: none;
+}
+
+.component-floor .floor-item {
+  width: 96rpx;
+  height: 96rpx;
+
+  font-weight: bold;
+  font-size: 36rpx;
+  line-height: 96rpx;
+  color: rgba(13, 13, 61, 0.86);
+  text-align: center;
+}
+
+.floor-item:first-child {
+  border-radius: 16rpx 16rpx 0 0;
+}
+.floor-item.selected {
+  background: #fbf0e0;
+}
+.floor-item:last-child {
+  border-radius: 0 0 8px 8px;
+}
+.icon-arrow {
+  width: 96rpx;
+  height: 96rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.icon-arrow .icon {
+  width: 20rpx;
+  height: 24rpx;
+}
+</style>
+
+<template>
+  <!-- && selectedFloor == item.id -->
+  <div class="{{'component-floor '+status}}">
+    <div class="floor-wrapper">
+      <div
+        class="floor-item"
+        :class="{'selected' :selectedFloor == item.id}"
+        :key="index+'map'"
+        v-for="(item,index) in floors"
+        v-on:click.stop="changeFloor(item.id)"
+        v-if="status=='expand' || status=='fold'"
+      >{{item.localName}}</div>
+    </div>
+    <div class="icon-arrow" wx:if="{{status=='expand'}}">
+      <image
+        mode="scaleToFill"
+        class="icon"
+        src="{{h5StaticPath+ 'icon-floor-arrow.svg'}}"
+        v-on:click.stop="flodFloor"
+      />
+  </div>
+  </div>
+</template>
+
+<script>
+import wepy from '@wepy/core';
+import config from '@/config';
+
+let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
+
+wepy.component({
+  data: {
+    h5StaticPath
+  },
+  props: {
+    floors: Array,
+    status: 'fold',
+    selectedFloor: String //选中的floor id
+  },
+  created() {},
+  ready() {},
+  didUpdate() {},
+  didUnmount() {},
+  methods: {
+    changeFloor(id) {
+      if (id !== this.selectedFloor) {
+        this.$emit('component-floor-change', id);
+      }
+      this.$emit('component-floor-click');
+    },
+    flodFloor() {
+      this.$emit('component-floor-fold');
+    }
+  }
+});
+</script>

+ 109 - 36
src/packagesEnv/pages/intelligentControl/components/floor/floor.wpy

@@ -2,68 +2,138 @@
 .component-floor {
   border-radius: 16rpx;
   background: rgba(255, 255, 255, 0.9);
-  .floor-wrapper{
+  .component-wrapper {
     display: flex;
+    justify-content: space-between;
+
+    .building-wrapper {
+      padding: 16rpx;
+      border-right: 1px solid #c4c9cf4d;
+      .building-item {
+        max-width: 240rpx;
+        height: 72rpx;
+        line-height: 72rpx;
+        font-size: 32rpx;
+        font-weight: 400;
+        color: #626c78;
+        text-align: center;
+      }
+    }
+  }
+  .floor-wrapper {
+    display: flex;
+    padding: 16rpx;
     flex-direction: column-reverse;
   }
-  
 }
 .component-floor.fold .floor-item {
   background: none;
 }
+.component-floor.fold .building-item {
+  background: none;
+}
 
-.component-floor .floor-item {
-  width: 96rpx;
-  height: 96rpx;
+.component-floor.expand {
+  .component-wrapper {
+    max-height: 800rpx;
+  }
+}
 
-  font-weight: bold;
-  font-size: 36rpx;
-  line-height: 96rpx;
-  color: rgba(13, 13, 61, 0.86);
+.component-floor .floor-item {
+  width: 112rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  font-size: 32rpx;
+  font-weight: 400;
+  color: #626c78;
   text-align: center;
 }
+.component-floor.building .floor-item {
+  width: 224rpx;
+}
 
 .floor-item:first-child {
   border-radius: 16rpx 16rpx 0 0;
 }
-.floor-item.selected {
-  background: #fbf0e0;
+.floor-item.selected,
+.building-item.selected {
+  background: #d4faf4;
 }
+
 .floor-item:last-child {
   border-radius: 0 0 8px 8px;
 }
 .icon-arrow {
-  width: 96rpx;
-  height: 96rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  text-align: right;
+  .icon-arrow-box {
+    box-sizing: border-box;
+    padding: 16rpx;
+    display: inline-block;
+    // width: 152rpx;
+    height: 88rpx;
+    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: 20rpx;
+      width: 24rpx;
+      height: 24rpx;
+    }
+  }
 }
 .icon-arrow .icon {
-  width: 20rpx;
+  width: 24rpx;
   height: 24rpx;
 }
 </style>
 
 <template>
+  <!-- && selectedFloor == item.id -->
   <div class="{{'component-floor '+status}}">
-    <div class="floor-wrapper">
-      <div
-        class="floor-item"
-        :class="{'selected' :selectedFloor == item.floorId}"
-        v-for="(item) in floors"
-        v-on:click.stop="changeFloor(item.floorId)"
-        v-if="status=='expand' || (status=='fold' && selectedFloor == item.floorId)"
-      >{{item.text}}</div>
+    <div class="component-wrapper">
+      <div class="building-wrapper">
+      <div class="building-item" 
+      :key="index+'building-map'"
+      :class="{'selected' :selectedBuilding == item.id}"
+      v-if="status=='expand' || (status=='fold' && selectedBuilding == item.id)"
+      v-for="(item,index) in buildings">
+      {{item.localName}}
+      </div>
+    </div>
+
+      <div class="floor-wrapper">
+        <div
+          class="floor-item"
+          :class="{'selected' :selectedFloor == item.id}"
+          :key="index+'map'"
+          v-for="(item,index) in floors"
+          v-on:click.stop="changeFloor(item.id)"
+          v-if="status=='expand' || (status=='fold' && selectedFloor == item.id)"
+        >
+        {{item.localName}}
+      </div>
+
+      </div>
     </div>
-    <div class="icon-arrow" wx:if="{{status=='expand'}}">
-    <image
-      mode="scaleToFill"
-      class="icon"
-      src="{{h5StaticPath+ 'icon-floor-arrow.svg'}}"
-      v-on:click.stop="flodFloor"
-    />
+    <div class="icon-arrow" 
+         wx:if="{{status=='expand'}}">
+         <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>
 </template>
@@ -80,16 +150,19 @@ wepy.component({
   },
   props: {
     floors: Array,
+    buildings: Array,
     status: 'fold',
+    selectedBuilding: String, //选中的building id
     selectedFloor: String //选中的floor id
   },
   created() {},
+  ready() {},
   didUpdate() {},
   didUnmount() {},
   methods: {
-    changeFloor(floorId) {
-      if (floorId !== this.selectedFloor) {
-        this.$emit('component-floor-change', floorId);
+    changeFloor(id) {
+      if (id !== this.selectedFloor) {
+        this.$emit('component-floor-change', id);
       }
       this.$emit('component-floor-click');
     },

+ 42 - 31
src/packagesEnv/pages/intelligentControl/home2.wpy

@@ -24,9 +24,19 @@
   position: absolute;
   bottom: 36rpx;
   right: 32rpx;
+  &.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;
@@ -266,23 +276,22 @@ movable-view {
                   :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
+          <div class="search-btn-box">
+            <image
             v-on:click="toSearchPage"
             class="search-btn"
             src="{{h5StaticPath}}icon-search-big.svg"
-          />
-          <!-- 博锐尚格正式环境暂不显示该入口 -->
-          <location
-            v-if="isShowLocationEntrance"
-            @component-location-position="positionFun($event)"
-          ></location>
+            />
+          </div>
+          
           <floor
             status="{{floorStatus}}"
             :floors="floors"
+            :buildings="buildingData"
+            selectedBuilding="{{ selectedBuilding }}"
             selectedFloor="{{selectedFloor}}"
             @component-floor-fold="flodFloorFun"
             @component-floor-change="changeFloorFun($event)"
@@ -291,12 +300,6 @@ movable-view {
         </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>
 
@@ -305,7 +308,6 @@ import wepy from '@wepy/core';
 import store from '@/store';
 
 import {
-  getMapInfoHttp,
   getSpaceBytoothHttp,
   getMapDetailHttp
 } from '@/packagesEnv/api/intelligentControl';
@@ -315,7 +317,11 @@ import config from '@/config';
 import { mapState } from '@wepy/x';
 import { saveCompanyConfig } from '@/service/companyConfig';
 import { getCompanyMapData } from '@/api/home';
-import { getBuildingList, getFloorList } from '@/packagesEnv/api/mapApi.js';
+import {
+  getBuildingList,
+  getFloorList,
+  getMapInfo
+} from '@/packagesEnv/api/mapApi.js';
 
 let h5StaticPath = config.h5StaticPath + '/page-intelligent-control/';
 const tarBarHeight = 96;
@@ -346,7 +352,7 @@ let touchMapEndRecord = {
 };
 let from = 'officehome';
 
-let CompanyMapData;
+let CompanyMapData = {};
 let combinedData = [];
 
 wepy.component({
@@ -362,6 +368,7 @@ wepy.component({
     selectArea: {},
     x: 0,
     y: 0,
+    selectedBuilding: '',
     selectedFloor: '',
     foldStatus: 'fold', // fold-最小化 expand-展开状态
     floorStatus: 'fold', // flod-收起楼层 expand-展开楼层选则
@@ -381,7 +388,8 @@ wepy.component({
     floors: [],
     companyId: '',
     buildingData: [],
-    buildingItem: {}
+    buildingItem: {},
+    floorItem: {}
   },
   computed: {
     ...mapState({
@@ -394,6 +402,7 @@ wepy.component({
   },
   ready() {
     // 获取地图数据
+    console.log('地图模块触发了--');
     this.init();
   },
   // 页面激活
@@ -421,12 +430,10 @@ wepy.component({
           projectId: 'Pj1101080259'
         }
       };
-      console.log(this.projectId);
       getBuildingList(params).then(res => {
-        console.log('获取常驻空间');
-        console.log(res);
         this.buildingData = res.content || [];
         this.buildingItem = this.buildingData[0];
+        this.selectedBuilding = this.buildingItem.id;
         this.getFloorList();
       });
     },
@@ -442,18 +449,28 @@ wepy.component({
       };
       getFloorList(params).then(res => {
         this.floors = res.content || [];
+        console.log('===', this.floors);
+        CompanyMapData.mapWidth = 2314;
+        this.floorItem = this.floors[0];
+        this.selectedFloor = this.floorItem.id;
+        this.getMapSize();
+        this.getPageMapInfo();
       });
     },
     /**
      * 获取地图信息
      */
-    getMapInfo() {
+    getPageMapInfo() {
       let params = {
-        projectId: '',
-        floorId: 'proxyData.floorItem.id'
+        projectId: 'Pj1101080259',
+        floorId: this.floorItem.id
       };
       getMapInfo(params)
-        .then(res => {})
+        .then(res => {
+          let data = res.data || {};
+          this.mapAreasInfo = data.spaceList || [];
+          console.log('地图数据--');
+        })
         .catch(() => {});
     },
     getMapSize() {
@@ -622,12 +639,6 @@ wepy.component({
         this.foldStatus = 'fold';
       }
     },
-    expandPanelFun() {
-      if (this.foldStatus === 'fold') {
-        this.foldStatus = 'expand';
-        this.setAreaCenter(this.selectArea);
-      }
-    },
     flodFloorFun() {
       if (this.floorStatus !== 'fold') {
         this.floorStatus = 'fold';

+ 4 - 3
static/page-intelligent-control/icon-floor-arrow.svg

@@ -1,4 +1,5 @@
-<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 8L6 13L11 8" stroke="#0D0D3D" stroke-opacity="0.86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M1 1L6 6L11 1" stroke="#0D0D3D" stroke-opacity="0.86" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355L6.85355 10.8536C6.65829 11.0488 6.34171 11.0488 6.14645 10.8536L2.14645 6.85355C1.95118 6.65829 1.95118 6.34171 2.14645 6.14645C2.34171 5.95118 2.65829 5.95118 2.85355 6.14645L6.5 9.79289L10.1464 6.14645C10.3417 5.95118 10.6583 5.95118 10.8536 6.14645Z" fill="#626C78"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8536 1.14645C11.0488 1.34171 11.0488 1.65829 10.8536 1.85355L6.85355 5.85355C6.65829 6.04882 6.34171 6.04882 6.14645 5.85355L2.14645 1.85355C1.95118 1.65829 1.95118 1.34171 2.14645 1.14645C2.34171 0.951184 2.65829 0.951184 2.85355 1.14645L6.5 4.79289L10.1464 1.14645C10.3417 0.951184 10.6583 0.951184 10.8536 1.14645Z" fill="#626C78"/>
 </svg>