no message

admin/src/views/home/index.vue

@@ -118,7 +118,7 @@
     </div>
     <div class="home-body">
       <div class="room-floor wrapper">
-        <div class="scrollBlock">
+        <div class="scrollBlock" ref="scrollBlock">
           <div class="floor" v-for="(items, i) in floorRoomDatas" :key="i">
             <div class="header-title">
               <div class="tier">{{ parseInt(items.floor) }}层</div>
@@ -127,11 +127,10 @@
             <div class="main-floor">
               <div
                 class="room-num"
-                v-for="(item, ind) in roomData"
+                v-for="item in roomData"
                 :key="item.id"
+                v-show="items.floor == item.floor"
               >
-                <!-- v-show="items.floor == item.floor" -->
-
                 <el-popover
                   placement="right"
                   trigger="click"
@@ -158,10 +157,9 @@
                     <el-button size="mini">指纹</el-button>
                   </div>
                   <div
-                    @click="EachRoom(i, ind, $event, item)"
-                    :class="i + '' + ind == clickId ? 'cardId' : ''"
+                    @click="EachRoom($event, item)"
+                    :class="item.roomId == clickId ? 'cardId' : ''"
                     class="card"
-                    :id="i + '' + ind"
                     slot="reference"
                   >
                     <div class="title">
@@ -469,14 +467,63 @@ export default {
     )[2].children[0].innerText = ">";
     this.roomList();
   },
-
+  created() {
+    // let arr = {
+    //   roomNo: "2-2-1001",
+    //   build: 2,
+    //   floor: "2",
+    //   roomTypeId: 1,
+    //   roomTypeName: "测试房",
+    //   enableUse: "1",
+    // };
+    // this.API.room.roomSave(arr).then((res) => {
+    //   console.log(res);
+    // });
+    window.addEventListener("scroll", this.lazyLoading, true); // 滚动到底部，再加载的处理事件
+  },
+  //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
+  destroyed() {
+    window.removeEventListener("scroll", this.lazyLoading);
+    //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
+  },
   methods: {
+    // 数据滚动加载
+    lazyLoading() {
+      // 滚动到底部，再加载的处理事件
+      //滚动高度
+      let scrollTop =
+        document.getElementsByClassName("room-floor")[0].scrollTop;
+      // console.log(scrollTop, "scrollTop");
+      //可视区高度
+      let clientHeight =
+        document.getElementsByClassName("room-floor")[0].clientHeight;
+      // console.log(clientHeight, "clientHeight");
+      //滚动页面的高度
+      let scrollHeight = this.$refs.scrollBlock.scrollHeight;
+      // console.log(scrollHeight, "scrollHeight");
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // 滚动到底部，逻辑代码
+        //事件处理
+        console.log("滚动到底部，触发"); //此处可以添加数据请求
+        // 这这里可以写一些业务逻辑，请求数据等
+      }
+    },
+
     roomList() {
-      this.API.room.roomPageGroup("pageSize=20").then((res) => {
+      this.API.room.roomPageGroup("pageSize=40").then((res) => {
         this.floorRoomDatas = [];
-        console.log(res);
-        res.data.list.forEach((item) => {
-          this.floorRoomDatas.push(item.floors[0]);
+        // console.log(res);
+        let arr = [];
+        res.data.list.forEach((items) => {
+          console.log(items);
+          items.floors.forEach((item) => {
+            console.log(item);
+            if (item.floor == 1) {
+              //  arr.push(...items.room);
+              console.log(item.room);
+            }
+          });
+          this.floorRoomDatas.push(items.floors[0]);
         });
         console.log(res.data.list);
         console.log(this.floorRoomDatas);
@@ -601,9 +648,9 @@ export default {
       let color = ["", "#296DE3", "#00BAAD", "#D3DBE6", "#FF5733", "#3BB1E3"];
       return { background: color[e] };
     },
-    EachRoom(i, ind, $event, item) {
+    EachRoom($event, item) {
       console.log(item);
-      this.clickId = $event.currentTarget.id;
+      this.clickId = item.roomId;
     },
 
     // 批量开关房start