Browse Source

fix: 空间切换bug修改

chenzhen2 2 năm trước cách đây
mục cha
commit
412a704542

+ 29 - 70
src/views/envmonitor/components/Map/MapBox.vue

@@ -17,7 +17,11 @@
           :id="'space' + area.id"
           :class="[
             area.canClick ? '' : 'click-disable',
-            selectArea.id === area.id ? (area.disabled ? 'select-disable' : 'select') : '',
+            selectArea.spaceId === area.spaceId
+              ? area.disabled
+                ? 'select-disable'
+                : 'select'
+              : '',
             isSetSpace ? 'use-select' : '',
             area.disabled ? 'space-disable-box' : 'space-box-bg',
           ]"
@@ -28,7 +32,7 @@
         >
           <div
             class="device"
-            :class="selectArea.id === area.id ? 'select-device' : ''"
+            :class="selectArea.spaceId === area.spaceId ? 'select-device' : ''"
             v-show="
               area.width * displacement.scale > 24 &&
               area.height * displacement.scale > 24
@@ -36,7 +40,7 @@
           >
             <img
               :src="area.icon"
-              v-if="selectArea.id !== area.id && 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">
@@ -44,7 +48,7 @@
                 v-if="
                   (area.height > 80 &&
                     area.localName.length * 12 < area.width) ||
-                  selectArea.id === area.id
+                  selectArea.spaceId === area.spaceId
                 "
                 style="font-size: 12px"
                 >{{ area.localName }}</span
@@ -202,8 +206,10 @@ export default defineComponent({
     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,
@@ -509,14 +515,10 @@ export default defineComponent({
         proxyData.isSetSearchSpace = false;
         if (area && area.canClick) {
           proxyData.setSelectSpacePosition(area);
-          if (proxyData.isSetSpace) {
-            // 记录当前选中的id
-            proxyData.comfirSetSpace(area);
-          } else {
-            proxyData.selectArea = area;
-            proxyData.setLocalSpaceInfo();
-            contx.emit("changeSpace", proxyData.selectArea);
-          }
+          proxyData.selectArea = area;
+          proxyData.selectArea.buildingId = proxyData.buildingItem.buildingId;
+          proxyData.setLocalSpaceInfo();
+          contx.emit("changeSpace", proxyData.selectArea);
         } else {
           Toast("不可选区域");
         }
@@ -1019,34 +1021,15 @@ export default defineComponent({
               proxyData.clearPreStyle();
               proxyData.formateMapData();
 
-              /**
-               * 如果是当前页面切换楼层,展示历史楼层
-               */
-              if (flag) {
-                proxyData.getHistorySpace();
-              } else {
-                // 首次进入页面的时候展示空间来源于父div
+              // 首次进入页面的时候展示空间来源于父div
+              if (searchItem) {
                 let area = proxyData.getFirstSelectSpace(searchItem);
+                // debugger
                 if (area) {
                   proxyData.selectArea = area;
                 }
               }
-              // debugger
-              // 当没有默认空间的时候设置常驻空间页面不可高量
-              if (proxyData.isSetSpace && !props.spaceInfo.isPermanent) {
-                proxyData.selectArea = {};
-              } else {
-                // 非常驻空间进入需要点击切换空间
-                if (!proxyData.isSetSpace) {
-                  proxyData.checkSpace(proxyData.selectArea);
-                }
-                // if (!proxyData.selectArea.disabled) {
-                //   proxyData.setSelectSpacePosition(proxyData.selectArea);
-                // } else {
-                //   proxyData.selectArea = {};
-                // }
-                proxyData.setSelectSpacePosition(proxyData.selectArea);
-              }
+              proxyData.setSelectSpacePosition(proxyData.selectArea);
               // 接口返回后设置地图缩放和滚动
               nextTick(() => {
                 // 地图双指缩放
@@ -1122,13 +1105,6 @@ export default defineComponent({
             if (spaceList[i].spaceId === item.spaceId) {
               // proxyData.selectArea = spaceList[i]
               area = spaceList[i];
-              if (!proxyData.isSetSpace) {
-                localStorageSpaceId(
-                  proxyData.buildingItem.buildingId,
-                  proxyData.floorItem.id,
-                  item.spaceId
-                );
-              }
               break;
             }
           }
@@ -1152,15 +1128,6 @@ export default defineComponent({
         if (item) {
           proxyData.setDefaultSpace(item);
         }
-        /**
-         *缓存建筑对应的楼层
-         */
-        if (!proxyData.isSetSpace) {
-          localStorageFloor(
-            proxyData.buildingItem.buildingId,
-            proxyData.floorItem.id
-          );
-        }
         proxyData.getBuildingList();
         proxyData.getFloorList(false);
         proxyData.getMapInfo(false, item);
@@ -1200,28 +1167,18 @@ export default defineComponent({
         }
       },
     });
-    watch(
-      props,
-      (newProps: any) => {
-        let item: any = props.spaceInfo;
-        proxyData.buildingItem.buildingId = newProps.buildingId;
-        proxyData.floorItem.id = newProps.floorId;
-        // proxyData.selectArea.spaceId = newProps.spaceInfo.spaceId;
-        // proxyData.init(item);
-      },
-      {
-        deep: false,
-        immediate: true,
-      }
-    );
+    watch(props, (newProps: any) => {}, {
+      deep: false,
+      immediate: true,
+    });
     onMounted(() => {
-      let item: any = props.spaceInfo;
-      console.log(item);
+      proxyData.spaceInfo = props.spaceInfo;
       proxyData.buildingItem.buildingId = props.buildingId;
       proxyData.floorItem.id = props.floorId;
-      item.buildingId = props.buildingId;
-      item.floorId = props.floorId;
-      proxyData.init(item);
+      proxyData.spaceInfo.buildingId = props.buildingId;
+      proxyData.spaceInfo.floorId = props.floorId;
+      proxyData.selectArea.spaceId = props.spaceInfo.spaceId;
+      proxyData.init(proxyData.spaceInfo);
     });
     return {
       ...toRefs(proxyData),
@@ -1252,6 +1209,8 @@ export default defineComponent({
   .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 {

+ 61 - 15
src/views/envmonitor/components/Map/SpaceBox.vue

@@ -1,20 +1,26 @@
 <template>
   <div class="space-home">
     <div class="com-search">
-      <van-search placeholder="搜索办公区"  
-                  v-model="searchValue"
-                  @update:model-value="onSearch"
-                  @clear="onCancel" />
+      <van-search
+        placeholder="搜索办公区"
+        v-model="searchValue"
+        @update:model-value="onSearch"
+        @clear="onCancel"
+      />
     </div>
     <div class="space-box">
-      <div
+      <template v-if="spaceData && spaceData.length">
+        <div
         class="space-item"
+        :class="activeSpace.spaceId == item.spaceId ? 'space-active-item' : ''"
         :key="'spaceItem' + index"
-        @click="changeSpace(item)"
+        @click="changeSpace(item, index)"
         v-for="(item, index) in spaceData"
       >
         <span> {{ item.spaceName }}</span>
       </div>
+      </template>
+      
     </div>
   </div>
 </template>
@@ -30,12 +36,13 @@ import {
   watch,
 } from "vue";
 import { useRouter } from "vue-router";
-import { newNumber, parseImgUrl } from "@/utils";
+import { getUserInfo, newNumber, parseImgUrl } from "@/utils";
 import { UserActionTypes } from "@/store/modules/user/action-types";
 import { useStore } from "@/store";
 import { login } from "@/apis/user";
 import { Search, Toast } from "vant";
 import { setToken } from "@/utils/cookies";
+import { queryWorkSpace } from "@/apis/envmonitor";
 
 export default defineComponent({
   props: {
@@ -43,35 +50,69 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    spaceInfo: {
+      type: Object,
+      default: () => {},
+    },
   },
   components: {
     vanSearch: Search,
   },
   setup(props, contx) {
     let router: any = useRouter();
+    const userInfo: any = getUserInfo();
     const store = useStore();
     const spaceData: any = [];
     const proxyData = reactive({
+      userInfo: userInfo,
       spaceData: spaceData,
-      searchValue:'',  // 搜索val
-      changeSpace(item: any) {
+      searchValue: "", // 搜索val
+      activeSpace: props.spaceInfo,
+      changeSpace(item: any, index: any) {
+        // debugger;
+        proxyData.activeSpace = item;
+        console.log(proxyData.activeSpace);
         contx.emit("changeSpace", item);
       },
+      queryWorkSpace() {
+        let params: any = {
+          criteria: {
+            //类型:Object  必有字段  备注:无
+            projectId: proxyData.userInfo.projectId,
+            spaceName: proxyData.searchValue,
+            macAddress: proxyData.userInfo.mac, //类型:String  必有字段  备注:mac地址
+          },
+          orders: [
+            //类型:Array  必有字段  备注:无
+            {
+              //类型:Object  必有字段  备注:无
+              column: "isMajorSpace", //类型:String  必有字段  备注:无
+              asc: false, //类型:Boolean  必有字段  备注:无
+            },
+          ],
+        };
+        queryWorkSpace(params).then((res) => {
+          let resData: any = res;
+          if (resData.result === "success") {
+            proxyData.spaceData = resData?.content ?? [];
+          } else {
+            proxyData.spaceData = [];
+          }
+        });
+      },
       // 搜索
-      onSearch(){
-        console.log("====")
-        console.log(proxyData.searchValue)
+      onSearch() {
+        proxyData.queryWorkSpace()
       },
       // 取消搜索
-      onCancel(){
-
-      }
+      onCancel() {},
     });
     onMounted(() => {});
     watch(
       props,
       (newProps: any) => {
         proxyData.spaceData = newProps.spaceData;
+        proxyData.activeSpace = newProps.spaceInfo;
       },
       {
         deep: false,
@@ -113,6 +154,11 @@ export default defineComponent({
         margin-right: 0;
       }
     }
+
+    .space-active-item {
+      background: $elActive4;
+      color: #fff;
+    }
   }
 }
 </style>

+ 2 - 1
src/views/envmonitor/components/Map/index.vue

@@ -20,6 +20,7 @@
     <space-box
       v-if="type === 1"
       :spaceData="spaceData"
+      :spaceInfo="spaceInfo"
       @changeSpace="changeSpace"
     ></space-box>
   </div>
@@ -122,7 +123,7 @@ export default defineComponent({
           .catch(() => {
             proxyData.showMap = false;
           });
-      },
+      }
     });
     onMounted(() => {
       proxyData.getMapInfo();

+ 12 - 7
src/views/envmonitor/index.vue

@@ -68,7 +68,7 @@
             class="env-item"
             :style="[
               { background: item.bgColor ? item.bgColor : '' },
-              { opacity: item.bgColor ? 0.8 : '' }
+              { opacity: item.bgColor ? 0.8 : '' },
             ]"
             :class="[
               index == 1 ? 'env-color' : '',
@@ -225,12 +225,12 @@
       teleport="#app"
     >
       <com-map
-        v-if="spaceInfo.spaceId"
+        v-if="defaultSpace.spaceId && isShowMap"
         :spaceData="spaceData"
-        :spaceInfo="spaceInfo"
+        :spaceInfo="defaultSpace"
         :projectId="projectId"
-        :floorId="floorId"
-        :buildingId="buildingId"
+        :floorId="defaultSpace.floorId"
+        :buildingId="defaultSpace.buildingId"
         @changeSpace="changeSpace"
       ></com-map>
     </van-popup>
@@ -1620,8 +1620,7 @@ export default defineComponent({
           proxyData.spaceData.map((item: any) => {
             if (item.isMajorSpace) {
               item.active = true;
-              proxyData.floorId = item.floorId;
-              proxyData.buildingId = item.buildingId;
+              proxyData.spaceInfo = item;
             } else {
               item.active = false;
             }
@@ -1636,8 +1635,10 @@ export default defineComponent({
       },
       // 更多空间
       isShowMap: false,
+      defaultSpace: spaceInfo,
       moreSpace() {
         proxyData.isShowMap = true;
+        proxyData.defaultSpace = proxyData.spaceInfo;
       },
       // 数组元素更换位置
       elChangeExForArray(item: any) {
@@ -1671,6 +1672,7 @@ export default defineComponent({
         proxyData.init();
         if (type === 1) {
           // proxyData.isShowMap = false;
+          proxyData.defaultSpace = item;
           proxyData.elChangeExForArray(item);
         }
         item.active = true;
@@ -1722,6 +1724,9 @@ export default defineComponent({
         // spaceId: "Sp1101080259ce19c0effb604fe380f3a00c37e3959e",
         spaceId: spaceId,
       };
+      proxyData.defaultSpace = {
+        spaceId: spaceId,
+      };
       proxyData.getWeather();
       proxyData.init();
       // 获取当前平板绑定的空间