no message

admin/package.json

@@ -21,6 +21,7 @@
     "file-saver": "^2.0.5",
     "js-cookie": "^3.0.1",
     "jsencrypt": "^3.2.1",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "svg-sprite-loader": "^4.3.0",
     "vue": "^2.5.2",

admin/src/api/roomRealTimeStatu.js

@@ -4,4 +4,17 @@ let resquest = "/api/ihotel/roomRealTimeStatu"
 //  房态信息
 export function realData(params) {
     return http.get(`${resquest}/realData/${params}`)
+}
+
+// 脏房修改为空闲房间
+let ContentType = {
+    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
+}
+export function clean(statuId, params) {
+    return http.put(`${resquest}/clean/${statuId}`, params, ContentType)
+}
+
+// 锁定房间
+export function lock(statuId, params) {
+    return http.put(`${resquest}/lock`, params)
 }

admin/src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card" v-show="cardShow">
+  <el-card class="box-card">
     <div slot="header" class="clearfix">
       <div class="header-left">
         <span class="title">房态管理 </span>
@@ -125,8 +125,9 @@
           <div class="main-floor">
             <div
               class="room-num"
-              v-for="(item, ind) in items.room"
+              v-for="(item, ind) in roomData"
               :key="item.id"
+              v-show="items.floor == item.floor"
             >
               <el-popover
                 placement="right"
@@ -134,16 +135,21 @@
                 popper-class="popperOptions"
               >
                 <div class="control-room">
-                  <div>关房</div>
-                  <div>转脏房</div>
-                  <div>转空闲</div>
-                  <div>关水</div>
-                  <div>关电</div>
-                  <div>清扫</div>
-                  <div>取消</div>
+                  <el-button size="mini">关房</el-button>
+                  <el-button size="mini">转脏房</el-button>
+                  <el-button
+                    size="mini"
+                    :disabled="item.statuName != '脏房'"
+                    @click="leisure(item)"
+                    >转空闲</el-button
+                  >
+                  <el-button size="mini">关水</el-button>
+                  <el-button size="mini">关电</el-button>
+                  <el-button size="mini">清扫</el-button>
+                  <el-button size="mini">取消</el-button>
                 </div>
                 <div
-                  @click="EachRoom(i, ind, $event)"
+                  @click="EachRoom(i, ind, $event, item)"
                   :class="i + '' + ind == clickId ? 'cardId' : ''"
                   class="card"
                   :id="i + '' + ind"
@@ -151,51 +157,58 @@
                 >
                   <div class="title">
                     <span>{{ item.build }}栋{{ item.roomno }}</span>
-                    <div class="state">
-                      {{ item.roomInfo }}
+                    <div class="state" :style="bgState(item.statu)">
+                      {{ item.statuName }}
                     </div>
                   </div>
-                  <div class="teacher">老师</div>
-                  <div class="num">
-                    <span>水:22吨</span>&nbsp;&nbsp;
-                    <span>电:22度</span>
-                  </div>
-                  <div class="count-down">
-                    <span>退房倒计时:1220</span>
-                    <div class="tuifang" @click.stop="doorLock = true">
-                      <IconSvg :W="21" :H="21" name="tuifang" />
-                      <el-dialog
-                        title="门锁管理"
-                        :visible.sync="doorLock"
-                        width="30%"
-                        :before-close="lockClose"
-                      >
-                        <div class="text" style="margin-top: 13px">
-                          <span>门锁ID:1111111</span>
-                          <IconSvg :W="16" :H="16" name="edit" />
-                        </div>
-                        <div class="text">
-                          <span>门锁序列号:111111</span>
-                          <IconSvg :W="16" :H="16" name="edit" />
-                        </div>
-                        <div class="text">
-                          <span>门锁密码:1111111</span>
+                  <template v-if="!item.statu">
+                    <div class="teacher">{{ item.useInfo.userName }}</div>
+                    <div class="num">
+                      <span>水:{{ item.useInfo.startOfWater }}吨</span
+                      >&nbsp;&nbsp;
+                      <span>电:{{ item.useInfo.startOfElectric }}度</span>
+                    </div>
+                    <div class="count-down">
+                      <span>退房倒计时 {{ Endtime }}</span>
+                      <div class="tuifang" @click.stop="doorLock = true">
+                        <IconSvg :W="21" :H="21" name="tuifang" />
+                        <el-dialog
+                          title="门锁管理"
+                          :visible.sync="doorLock"
+                          width="30%"
+                          :before-close="lockClose"
+                        >
+                          <div class="text" style="margin-top: 13px">
+                            <span>门锁ID:1111111</span>
+                            <IconSvg :W="16" :H="16" name="edit" />
+                          </div>
+                          <div class="text">
+                            <span>门锁序列号:111111</span>
+                            <IconSvg :W="16" :H="16" name="edit" />
+                          </div>
+                          <div class="text">
+                            <span>门锁密码:1111111</span>
 
-                          <span class="password" @click="sending"
-                            >下发密码</span
-                          >
-                        </div>
-                        <span slot="footer" class="dialog-footer">
-                          <el-button @click.stop="doorLock = false" size="mini"
-                            >取消</el-button
-                          >
-                          <el-button size="mini" @click.stop="doorLock = false"
-                            >完成</el-button
-                          >
-                        </span>
-                      </el-dialog>
+                            <span class="password" @click="sending"
+                              >下发密码</span
+                            >
+                          </div>
+                          <span slot="footer" class="dialog-footer">
+                            <el-button
+                              @click.stop="doorLock = false"
+                              size="mini"
+                              >取消</el-button
+                            >
+                            <el-button
+                              size="mini"
+                              @click.stop="doorLock = false"
+                              >完成</el-button
+                            >
+                          </span>
+                        </el-dialog>
+                      </div>
                     </div>
-                  </div>
+                  </template>
                 </div>
               </el-popover>
             </div>
@@ -261,18 +274,19 @@
 
 <script>
 import dayjs from "dayjs";
+import _ from "lodash";
 export default {
   name: "Home",
   data() {
     return {
-      cardShow: "false",
       clickId: "",
       // 门锁管理
       doorLock: false,
       // 批量数据
       dialogVisible: false,
+      enableEndTime: "", // 倒计时的日期
+      Endtime: "",
       count: 20,
-      roomno: "", // 房间号
       title: "",
       checked: true,
       titles: ["批量开电", "批量开水", "批量关电", "批量关水"],
@@ -329,6 +343,7 @@ export default {
         },
       ],
       floorRoomDatas: [],
+      roomData: [],
 
       defaultProps: {
         children: "children",
@@ -388,13 +403,20 @@ export default {
     )[2].children[0].innerText = ">";
     this.roomList();
   },
+  // computed: {
+  //   endtime() {
+  //     return this.showTime(this.enableEndTime);
+  //   },
+  // },
   methods: {
     roomList() {
       this.API.room.roomPageGroup().then((res) => {
-        console.log(res);
+        this.floorRoomDatas = [];
         res.data.list.forEach((item) => {
           this.floorRoomDatas.push(item.floors[0]);
         });
+        console.log(res.data.list);
+        console.log(this.floorRoomDatas);
         this.floorRoomDatas.forEach((item) => {
           item.room.forEach((items) => {
             items.roomno =
@@ -429,30 +451,81 @@ export default {
           "&" +
           roomIds;
         this.API.roomRealTimeStatu.realData(params).then((res) => {
-          // console.log(res.data);
-          this.floorRoomDatas.forEach((item) => {
-            // console.log(item.room);
-            item.room.forEach((i) => {
-              // console.log(i);
-              res.data.forEach((resItem) => {
-                // console.log(resItem);
-                if (i.id == resItem.roomId) {
-                  i.roomInfo = resItem;
+          this.roomData = res.data;
+          this.roomData.forEach((resItem) => {
+            if (resItem.statu == 1) {
+              resItem.statuName = "空闲";
+            } else if (resItem.statu == 2) {
+              resItem.statuName = "预定";
+            } else if (resItem.statu == 3) {
+              resItem.statuName = "入住";
+            } else if (resItem.statu == 4) {
+              resItem.statuName = "脏房";
+            } else if (resItem.statu == 5) {
+              resItem.statuName = "锁定";
+            }
+          });
+          this.floorRoomDatas.forEach((items) => {
+            items.room.forEach((item) => {
+              this.roomData.forEach((i) => {
+                if (item.id == i.roomId) {
+                  i = Object.assign(i, item);
+                  console.log(i);
+                  if (i.useInfo) {
+                    this.enableEndTime = i.useInfo.enableEndTime;
+                    this.showTime("2022-08-25 12:00:00");
+                  }
                 }
               });
             });
           });
         });
-        this.cardShow = true;
       });
     },
+    // 退房倒计时
+    showTime(endtime) {
+      setInterval(() => {
+        //设置2020年春节时间
+        var newyear = new Date(endtime);
+        //获取当前时间
+        var date1 = new Date();
+        //两个日期对象直接相减就能获取两个日期相差的时间戳(以毫秒计，也就是能得出相差多少毫秒)
+        var ms = newyear - date1;
+        //			console.log(ms);
+        //获取天数
+        var day = Math.floor(ms / 1000 / 3600 / 24);
+        //获取小时数
+        var h = Math.floor((ms % (3600 * 24 * 1000)) / 1000 / 3600);
+        //获取分钟数
+        var m = Math.floor((((ms % (3600 * 24 * 1000)) / 1000) % 3600) / 60);
+        //获取秒数
+        var s = Math.floor((((ms % (3600 * 24 * 1000)) / 1000) % 3600) % 60);
+        if (day < 10) {
+          day = "0" + day;
+        }
+        if (h < 10) {
+          h = "0" + h;
+        }
+        if (m < 10) {
+          m = "0" + m;
+        }
+        if (s < 10) {
+          s = "0" + s;
+        }
+        let enableEndTime = day + ":" + h + ":" + m + ":" + s;
+        this.Endtime = enableEndTime;
+      }, 0);
+    },
     bgState(e) {
-      let color = ["#D3DBE6", "#296DE3", "#00BAAD", "#FF5733", "#3BB1E3"];
-      console.log(e);
-      return { background: color[e] };
+      let color = ["", "#D3DBE6", "#296DE3", "#00BAAD", "#FF5733", "#3BB1E3"];
+      if (e == 1) {
+        return { background: color[e], color: "#666" };
+      } else {
+        return { background: color[e] };
+      }
     },
-    EachRoom(i, item, $event) {
-      // console.log($event.currentTarget.id);
+    EachRoom(i, ind, $event, item) {
+      console.log(item);
       this.clickId = $event.currentTarget.id;
     },
     // 控制水电
@@ -470,6 +543,15 @@ export default {
       }
     },
 
+    //脏房转空闲
+    leisure(item) {
+      this.API.roomRealTimeStatu
+        .clean(item.statuId)
+        .then((res) => console.log(res));
+      console.log(item);
+      this.roomList();
+    },
+
     // 房态筛查
     handleCheckAllChange(val) {
       this.checkedCities = val ? this.cities : [];
@@ -692,7 +774,7 @@ export default {
                 margin-left: 15px;
                 display: flex;
                 span {
-                  margin-right: 84px;
+                  margin-right: 54px;
                 }
                 .tuifang {
                   width: 21px;
@@ -1019,10 +1101,9 @@ export default {
 
   .control-room {
     width: 70px;
-    height: 167px;
+    // height: 167px;
     opacity: 1;
-    background: rgba(240, 243, 247, 1);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -1035,8 +1116,12 @@ export default {
     color: rgba(0, 0, 0, 1);
     text-align: left;
     vertical-align: top;
-    div {
-      margin-left: 15px;
+    .el-button {
+      margin-left: 0;
+      height: 24px !important;
+      color: rgba(0, 0, 0, 1);
+      border: none;
+      border-radius: 0;
     }
   }
   .popper__arrow {