ihotel-manage/admin/src/views/home/index.vue

<template >
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <div class="header-left">
        <span class="title">房态管理 </span>
        <span> / 共{{ roomData.length }}间</span>
      </div>
      <div class="header-right">
        <el-input
          placeholder="请输入姓名或者房间号"
          prefix-icon="el-icon-search"
          class="inquire-input"
        >
        </el-input>
        <el-button class="inquire-button">查询</el-button>
        <div class="control">
          <div class="title" @click="water = !water" style="cursor: pointer">
            批量控制电
          </div>
          <ul v-show="water">
            <li
              @click="dialogShow"
              v-for="(item, index) in titles"
              :key="index"
            >
              {{ item }}
            </li>
            <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="692px"
              append-to-body
            >
              <el-tree
                :data="data"
                show-checkbox
                node-key="id"
                @check="checkRoom"
                :props="defaultProps"
              >
              </el-tree>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="PLcloseRoom">确 定</el-button>
              </span>
            </el-dialog>
          </ul>
        </div>
        <div class="control" style="margin-left: 17px">
          <div class="title" @click="room = !room" style="cursor: pointer">
            批量开关房
          </div>
          <ul v-show="room">
            <li
              @click="dialogShow"
              v-for="(item, index) in titles2"
              :key="index"
            >
              {{ item }}
            </li>
            <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="692px"
              append-to-body
            >
              <div class="tree">
                <div class="tree-left">
                  <el-checkbox
                    v-model="checked"
                    style="margin-left: 15px"
                    @change="chooseAll"
                    >全选</el-checkbox
                  >
                  <span style="margin-left: 165px"
                    >{{ count.length }} / {{ data[0].children.length }}</span
                  >
                </div>
                <el-tree
                  :data="data"
                  show-checkbox
                  node-key="id"
                  ref="roomTree"
                  :props="defaultProps"
                  @check="checkRoom"
                >
                </el-tree>
              </div>
              <div class="tree">
                <div class="tree-left">
                  <p style="margin-left: 15px">已选 ( {{ count.length }} )</p>
                </div>
                <ul
                  class="infinite-list"
                  v-infinite-scroll="load"
                  style="overflow: auto"
                  infinite-scroll-immediate="false"
                >
                  <li
                    v-for="(i, index) in count"
                    :key="index"
                    class="infinite-list-item"
                    v-show="!i.children"
                  >
                    <span style="margin-left: 19px">{{ i.label }}</span
                    ><i class="el-icon-close" @click="cancelCheck(i)"></i>
                  </li>
                </ul>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="PLcloseRoom">确 定</el-button>
              </span>
            </el-dialog>
          </ul>
        </div>
      </div>
    </div>
    <div class="home-body">
      <div class="room-floor wrapper">
        <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>
              <span>/&nbsp; 共{{ items.room.length }}间</span>
            </div>
            <div class="main-floor">
              <div
                class="room-num"
                v-for="item in roomData"
                :key="item.id"
                v-show="items.floor == item.floor"
              >
                <el-popover
                  placement="right"
                  trigger="click"
                  popper-class="popperOptions"
                >
                  <div class="control-room">
                    <el-button size="mini" @click="closeRoom(item)"
                      >关房</el-button
                    >
                    <el-button size="mini" @click="todirty(item)"
                      >转脏房</el-button
                    >
                    <el-button
                      size="mini"
                      :disabled="item.statuName != '脏房'"
                      @click="leisure(item)"
                      >转空闲</el-button
                    >
                    <el-button size="mini" @click="closeEle(item)"
                      >关电</el-button
                    >
                    <el-button size="mini">清扫</el-button>
                    <el-button size="mini">IC卡</el-button>
                    <el-button size="mini">指纹</el-button>
                  </div>
                  <div
                    @click="EachRoom($event, item)"
                    :class="item.roomId == clickId ? 'cardId' : ''"
                    class="card"
                    slot="reference"
                  >
                    <div class="title">
                      <span>{{ item.build }}栋{{ item.roomno }}</span>
                      <div class="state" :style="bgState(item.statu)">
                        {{ item.statuName }}
                      </div>
                    </div>
                    <template v-if="item.statu == 3">
                      <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>退房倒计时 {{ item.useInfo.EndTime }}</span>
                        <div class="tuifang" @click.stop="roomLock(item)">
                          <IconSvg :W="21" :H="21" name="tuifang" />
                          <el-dialog
                            title="门锁管理"
                            custom-class="lock"
                            :append-to-body="true"
                            :visible.sync="doorLock"
                            width="30%"
                            :before-close="lockClose"
                          >
                            <div class="roomID" style="margin-top: 13px">
                              <div class="roomblock">
                                <span>门锁ID:</span>
                                <div
                                  class="number"
                                  v-if="doorLockList.doorIdshow"
                                >
                                  <span>{{ doorLockList.doorId }}</span>
                                  <div @click="editlock">
                                    <IconSvg :W="16" :H="16" name="edit" />
                                  </div>
                                </div>
                                <el-input
                                  ref="roomId"
                                  v-else
                                  size="mini"
                                  v-model="doorLockList.doorId"
                                  @blur="editLockBlur"
                                ></el-input>
                              </div>
                              <div class="roomblock">
                                <span>水表编码:</span>
                                <div
                                  class="number"
                                  v-if="doorLockList.waterIdshow"
                                >
                                  <span>{{ doorLockList.waterId }}</span>
                                  <div @click="editWater">
                                    <IconSvg :W="16" :H="16" name="edit" />
                                  </div>
                                </div>
                                <el-input
                                  v-else
                                  size="mini"
                                  v-model="doorLockList.waterId"
                                  @blur="editWaterBlur"
                                ></el-input>
                              </div>
                            </div>
                            <div class="roomID">
                              <div class="roomblock">
                                <span>门锁序列号:</span>
                                <div
                                  class="number"
                                  v-if="doorLockList.doorNumshow"
                                >
                                  <span>{{ doorLockList.doorNum }}</span>
                                  <div @click="editRoomNum">
                                    <IconSvg :W="16" :H="16" name="edit" />
                                  </div>
                                </div>
                                <el-input
                                  v-else
                                  size="mini"
                                  v-model="doorLockList.doorNum"
                                  @blur="editRoomNumBlur"
                                ></el-input>
                              </div>
                              <div class="roomblock">
                                <span>电表编码:</span>
                                <div
                                  class="number"
                                  v-if="doorLockList.electricityIdshow"
                                >
                                  <span>{{ doorLockList.electricityId }}</span>
                                  <div @click="editEle">
                                    <IconSvg :W="16" :H="16" name="edit" />
                                  </div>
                                </div>
                                <el-input
                                  v-else
                                  size="mini"
                                  v-model="doorLockList.electricityId"
                                  @blur="editEleBlur"
                                ></el-input>
                              </div>
                            </div>
                            <div class="roomID">
                              <div class="roompassword">
                                <span>门锁密码:</span>
                                <div
                                  class="sendpass"
                                  v-for="item in roomPassWord"
                                  :key="item.id"
                                >
                                  <span>{{ item.lockRealtimePassword }}</span>
                                  <span class="password" @click="sending(item)"
                                    >下发密码</span
                                  >
                                  <span style="margin-left: 10px"
                                    >密码到期时间 :
                                    {{ item.endTime.replace("T", " ") }}</span
                                  >
                                </div>
                              </div>
                            </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>
                    </template>
                  </div>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="query-condition">
        <div class="title">查询条件</div>
        <div class="calendar">
          <p>日期查询</p>
          <div class="date">
            <el-date-picker
              size="mini"
              v-model="date"
              align="right"
              type="date"
              placeholder="请选择日期"
              :picker-options="pickerOptions"
              :clearable="false"
            >
            </el-date-picker>
            <!-- <el-calendar v-model="date" :first-day-of-week="7"> </el-calendar> -->
            <el-calendar v-model="date"> </el-calendar>
          </div>
        </div>
        <div class="filtrate">
          <p>房态筛选</p>
          <div class="room-filtrate">
            <div style="border-bottom: 1px solid rgba(225, 228, 232, 1)">
              <el-checkbox
                size="mini"
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
                >全选</el-checkbox
              >
              <span class="all">150间</span>
            </div>
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              size="mini"
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                size="mini"
                v-for="city in cities"
                :label="city"
                :key="city"
                >{{ city }} <span>50间</span></el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="reset">
          <el-button @click="reset" type="primary" size="mini"
            >重置筛选</el-button
          >
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import dayjs from "dayjs";
import _ from "lodash";
export default {
  name: "Home",
  data() {
    return {
      clickId: "",
      // 门锁管理
      doorLock: false,
      doorLockList: {
        doorId: "",
        doorIdshow: true,
        waterId: "",
        waterIdshow: true,
        doorNum: "111111",
        doorNumshow: true,
        electricityId: "",
        electricityIdshow: true,
      },
      roomPassWord: [], // 密码列表
      // 批量数据
      dialogVisible: false,
      enableEndTime: "", // 倒计时的日期
      Endtime: [],
      count: [], // 选中的全部数据
      title: "",
      checked: false,
      titles: ["批量开电", "批量关电"],
      titles2: ["批量开房", "批量关房"],
      data: [
        {
          id: 15263458,
          label: "墨轩湖酒店",
          children: [
            // {
            //   id: 2,
            //   label: "17栋1单元02层01",
            // },
          ],
        },
      ],
      floorRoomDatas: [],
      roomData: [],

      defaultProps: {
        children: "children",
        label: "label",
      },
      water: false,
      room: false,

      //日历
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      date: new Date(),

      // 房态筛选数据
      checkAll: false,
      checkedCities: [],
      cities: ["入住", "空闲", "锁定", "脏房", "预定"],
      isIndeterminate: false,
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-button--plain"
    )[0].children[0].innerText = "<";
    document.getElementsByClassName(
      "el-button--plain"
    )[1].children[0].innerText = "o";
    document.getElementsByClassName(
      "el-button--plain"
    )[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=40").then((res) => {
        this.floorRoomDatas = [];
        // 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);
        this.floorRoomDatas.forEach((item) => {
          item.room.forEach((items) => {
            items.roomno =
              items.roomNo.split("-")[0] +
              "单元" +
              items.roomNo.split("-")[1] +
              "层" +
              items.roomNo.split("-")[2] +
              "房";
          });
        });
        let ids = [];
        this.floorRoomDatas.forEach((item) => {
          item.room.forEach((item) => {
            ids.push(item.id);
          });
        });
        let roomIds = [];
        ids.forEach((item) => {
          roomIds.push("roomIds=" + item);
        });
        roomIds = roomIds.join("&");
        let startDay = dayjs(new Date()).format("YYYY-MM-DD");
        let endDay = dayjs(new Date()).add(1, "day").format("YYYY-MM-DD");
        let params =
          "?" +
          "startDay=" +
          startDay +
          "&" +
          "endDay=" +
          endDay +
          "&" +
          roomIds;
        this.API.roomRealTimeStatu.realData(params).then((res) => {
          console.log(res);
          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.data[0].children = [];
          this.floorRoomDatas.forEach((items) => {
            items.room.forEach((item) => {
              this.roomData.forEach((i, index) => {
                if (item.id == i.roomId) {
                  i = Object.assign(i, item);
                  // console.log(i);
                  let arr = {
                    id: i.roomId,
                    label: i.build + "栋" + i.roomno,
                  };
                  if (i.statu != 5) {
                    this.data[0].children.push(arr);
                  }
                  if (i.useInfo) {
                    this.enableEndTime = i.useInfo.enableEndTime;
                    this.showTime(index, i.useInfo.enableEndTime);
                    // console.log(i.useInfo.enableEndTime);
                  }
                }
              });
            });
          });
          // this.showTime(this.enableEndTime);
          console.log(this.roomData);
        });
      });
    },
    // 退房倒计时
    showTime(index, endtime) {
      setInterval(() => {
        //设置2020年春节时间
        var newyear = new Date(endtime);
        //获取当前时间
        var date1 = new Date();
        //两个日期对象直接相减就能获取两个日期相差的时间戳(以毫秒计，也就是能得出相差多少毫秒)
        var ms = newyear - date1;
        //获取天数
        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;
        }
        if (ms < 0) {
          this.$set(this.roomData[index].useInfo, "EndTime", "00:00:00:00");
        } else {
          let enableEndTime = day + ":" + h + ":" + m + ":" + s;
          // this.roomData[index].useInfo.EndTime = enableEndTime;
          if (this.roomData[index].useInfo) {
            this.$set(this.roomData[index].useInfo, "EndTime", enableEndTime);
          }
        }
      }, 0);
    },
    bgState(e) {
      let color = ["", "#296DE3", "#00BAAD", "#D3DBE6", "#FF5733", "#3BB1E3"];
      return { background: color[e] };
    },
    EachRoom($event, item) {
      console.log(item);
      this.clickId = item.roomId;
    },

    // 批量开关房start
    chooseAll() {
      if (this.checked) {
        this.$refs.roomTree.setCheckedNodes(this.data[0].children);
        this.count = this.data[0].children;
      } else {
        this.$refs.roomTree.setCheckedNodes([]);
        this.count = [];
      }
    },
    dialogShow(e) {
      this.dialogVisible = true;
      this.title = e.target.innerText;
    },
    load() {
      // this.count += 0;
      // if (this.count < 50) {
      //   this.count += 4;
      // }
    },
    // 勾选房间
    checkRoom(data, nodes) {
      this.count = _.cloneDeep(nodes.checkedNodes);
      nodes.checkedNodes.forEach((item, index) => {
        if (item.children) {
          this.count.splice(index, 1);
        }
      });
      if (this.data[0].children.length == this.count.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      console.log(this.count);
    },
    // 取消选中房间
    cancelCheck(i) {
      console.log(i);
      this.count = this.count.filter((item) => {
        return i.id != item.id;
      });
      if (this.data[0].children.length == this.count.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.$refs.roomTree.setCheckedNodes(this.count);
      console.log(this.count);
    },
    PLcloseRoom() {
      this.dialogVisible = false;
      if (this.title == "批量关房") {
        let roomId = [];
        let startDate = dayjs(new Date()).format("YYYY-MM-DD");
        let endDate = dayjs(new Date()).add(1, "day").format("YYYY-MM-DD");
        let remark = "锁定房间";
        this.count.forEach((item) => {
          roomId.push(item.id);
        });
        console.log(roomId);
        this.$confirm("确认关闭房间吗？")
          .then((_) => {
            this.API.roomRealTimeStatu
              .lock({ roomId, startDate, endDate, remark })
              .then((res) => {
                console.log(res);
                this.roomList();
                this.room = false;
                this.count = [];
                this.$refs.roomTree.setCheckedNodes([]);
              });
          })
          .catch((_) => {});
      }
    },
    // 批量开关房end

    //脏房转空闲
    leisure(item) {
      this.API.roomRealTimeStatu
        .clean(item.statuId)
        .then((res) => console.log(res));
      console.log(item);
      this.roomList();
    },

    // 锁定房间
    closeRoom(item) {
      console.log(item);
      let roomId = [item.roomId];
      let startDate = dayjs(new Date()).format("YYYY-MM-DD");
      let endDate = dayjs(new Date()).add(1, "day").format("YYYY-MM-DD");
      // let startDate = "2022-08-23";
      // let endDate = "2022-08-24";
      let remark = "锁定房间";
      this.API.roomRealTimeStatu
        .lock({ roomId, startDate, endDate, remark })
        .then((res) => {
          console.log(res);
          this.roomList();
        });
    },
    // 转脏房
    todirty(item) {
      console.log(item);
      let roomId = item.roomId;
      let startDay = dayjs(new Date()).format("YYYY-MM-DD");
      let endDay = dayjs(new Date()).add(1, "day").format("YYYY-MM-DD");
      // let startDate = "2022-08-23";
      // let endDate = "2022-08-24";
      this.API.roomRealTimeStatu
        .toDirty({ roomId, startDay, endDay })
        .then((res) => {
          console.log(res);
          this.roomList();
        });
    },
    // 关电
    closeEle(item) {
      console.log(item);
      let operType = "2";
      let roomId = item.roomId;
      this.API.roomThirdSetting.changeElectric(roomId, operType).then((res) => {
        console.log(res);
        this.$message({
          message: "关电成功",
          type: "success",
        });
        this.roomList();
      });
    },

    // 房态筛查
    handleCheckAllChange(val) {
      console.log(val);

      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    reset() {
      this.checkedCities = [];
      this.isIndeterminate = false;
      this.checkAll = false;
    },

    //门锁管理
    lockClose(done) {
      this.doorLock = false;
    },
    // 下发密码
    sending(item) {
      console.log(item);
      this.$confirm(`确认下发密码(${item.lockRealtimePassword})吗？`)
        .then((_) => {
          this.API.doorLock.sendPassword(item.id).then((res) => {
            console.log(res);
          });
        })
        .catch((_) => {});
    },
    roomLock(item) {
      this.doorLock = true;
      console.log(item);
      // 房间id查询密码锁
      this.API.doorLock.roomDoorLockRoomId(item.roomId).then((res) => {
        console.log(res.data);

        this.roomPassWord = res.data;
      });
      // 根据房间id查询(拿到电表码，水表码)
      this.API.roomThirdSetting.settingId(item.roomId).then((res) => {
        console.log(res.data);
        this.doorLockList.electricityId = res.data.electricId;
        this.doorLockList.waterId = res.data.waterId;
        this.doorLockList.doorId = res.data.lockId;
      });
      // 订单Id查询密码锁
      this.API.doorLock
        .roomDoorLockOrderId(item.useInfo.orderId)
        .then((res) => {
          console.log(res);
        });
    },
    // 编辑门锁ID
    editlock() {
      this.doorLockList.doorIdshow = false;
    },
    editLockBlur() {
      this.doorLockList.doorIdshow = true;
      console.log(111);
    },
    // 门锁序列号
    editRoomNum() {
      this.doorLockList.doorNumshow = false;
    },
    editRoomNumBlur() {
      this.doorLockList.doorNumshow = true;
      console.log(111);
    },
    // 编辑水表编码
    editWater() {
      this.doorLockList.waterIdshow = false;
    },
    editWaterBlur() {
      this.doorLockList.waterIdshow = true;
      console.log(111);
    },
    // 编辑电表编码
    editEle() {
      this.doorLockList.electricityIdshow = false;
    },
    editEleBlur() {
      this.doorLockList.electricityIdshow = true;
      console.log(111);
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
}

.clearfix {
  height: 96px;
  display: flex;
  align-items: center;

  .el-card__header {
    padding: 0;
  }

  .header-left {
    margin-left: 33px;
    display: flex;
    align-items: center;

    .title {
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-right: 15px;
    }
  }

  .header-right {
    display: flex;

    .inquire-input {
      width: 261px;
      height: 37px;
      background: rgba(240, 243, 247, 1);
      border-radius: 5px;
      margin-left: 744px;

      /deep/ .el-input__inner {
        height: 37px !important;
      }
    }

    .inquire-button {
      width: 73px;
      height: 37px;
      font-size: 16px;
      margin: 0 20px 0 9px;
      padding: 0;
      background: rgba(41, 109, 227, 1);
      color: #fff;
    }

    .control {
      // width: 121px;
      height: 37px;
      position: relative;

      .title {
        background: rgba(41, 109, 227, 1);
        color: #fff;
        text-align: center;
        line-height: 37px;
        padding: 0 11px;
      }

      ul {
        position: absolute;
        list-style: none;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        margin: 0;

        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        border-radius: 3px;

        li {
          height: 26px;
          font-size: 12px;
          color: #000;
          line-height: 26px;
          text-align: center;

          &:hover {
            background-color: rgba(41, 109, 227, 1);
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
/deep/ .el-card__body {
  height: 854px;
  width: 100%;
  padding: 0;
  .home-body {
    display: flex;
    height: 100%;
    .room-floor {
      height: 100%;
      overflow: auto;
      flex: 1;
      .floor {
        margin: 0 0 0 33px;
        .header-title {
          display: flex;
          align-items: center;
          height: 66px;
          .tier {
            color: rgba(0, 0, 0, 1);
            font-size: 20px;
            font-weight: 500;
            display: inline-block;
          }
          span {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            font-weight: 400;
            margin-left: 10px;
          }
        }
        .main-floor {
          display: flex;
          flex-wrap: wrap;
          .room-num {
            margin-bottom: 30px;

            .card {
              width: 228px;
              height: 140px;
              background: rgba(240, 243, 247, 1);
              border-radius: 4px;
              margin-right: 20px;
              font-size: 12px;
              font-weight: 400;
              color: #000;
              box-sizing: border-box;
              border: 1px solid transparent;
              display: flex;
              flex-direction: column;
              // div {
              //   margin-left: 15px;
              //   margin-bottom: 7px;
              // }
              .title {
                display: flex;
                align-items: center;
                margin: 15px;
                span {
                  display: inline-block;
                  height: 24px;
                  font-size: 16px;
                  font-weight: 500;
                  letter-spacing: 0px;
                  color: rgba(51, 51, 51, 1);
                }
                .state {
                  width: 46px;
                  height: 17px;
                  opacity: 1;
                  /** 文本1 */
                  font-size: 12px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  color: #fff;
                  text-align: center;
                  line-height: 17px;
                  margin-left: 7px;
                  background: rgba(41, 109, 227, 1);
                }
              }
              .teacher {
                margin: 5px 15px;
              }
              .num {
                margin: 5px 15px;
              }
              .count-down {
                margin-left: 15px;
                display: flex;

                span {
                  margin-right: 54px;
                }
                .tuifang {
                  width: 21px;
                  height: 21px;
                  cursor: pointer;
                  .el-dialog {
                    box-shadow: none;
                    margin: 350px 0 0 450px !important;
                    width: 555px !important;
                    height: 377px !important;
                    .text {
                      display: flex;
                      margin-left: 34px;
                      margin-bottom: 15px;
                      font-size: 14px;
                      font-weight: 400;
                      span {
                        margin-right: 20px;
                      }
                      .password {
                        color: #fff;
                        border-radius: 2px;
                        font-size: 12px;
                        padding: 2px;
                        cursor: pointer;
                        background-color: rgba(41, 109, 227, 1);
                      }
                    }
                    .el-dialog__body {
                      flex-direction: column;
                    }
                    .el-dialog__footer {
                      margin: 40px -48px 0 0;
                      .dialog-footer {
                        .el-button:nth-child(2) {
                          color: #fff;
                          background: rgba(41, 109, 227, 1);
                        }
                        .el-button {
                          width: 67px;
                          height: 37px;
                          padding-left: 20px;
                        }
                      }
                    }
                  }
                }
              }
            }
            .cardId {
              border: 1px solid rgba(41, 109, 227, 1);
              box-sizing: border-box;
            }
            .el-dropdown-link {
              cursor: pointer;
              color: #409eff;
            }
            .el-icon-arrow-down {
              font-size: 12px;
            }
          }
        }
      }
    }
    .query-condition {
      width: 302px;
      height: 752px;
      background: rgba(240, 243, 247, 1);
      border-radius: 4px;
      margin: 72px 29px 0 0;
      .title {
        color: rgba(0, 0, 0, 1);
        font-size: 20px;
        font-weight: 400;
        height: 55px;
        border-bottom: 1px solid rgba(217, 217, 217, 1);
        line-height: 55px;
        text-align: center;
      }
      .calendar {
        margin: 0 auto;
        width: 266px;
        height: 243px;
        .date {
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
          .el-input {
            width: 266px !important;
            .el-input__inner {
              padding-left: 15px;
            }
            .el-input__prefix {
              left: 233px !important;
            }
          }
        }
        .el-calendar {
          width: 266px;
          height: 240px;

          .el-calendar__header {
            height: 37px;
            padding: 0;
            font-size: 10px;
            padding: 0 20px;
            align-items: center;
            .el-button {
              width: 30px;
              border: none;
              padding: 5px 10px;
            }
          }
          .el-calendar__body {
            height: 190px !important;
            padding: 0 20px;
            table {
              width: 100%;
              height: 100% !important;
              thead {
                height: 19px;
                th {
                  font-size: 10.7px;
                  padding: 15px 0 10px 0;
                }
              }
              .el-calendar-table__row {
                .next,
                .prev {
                  .el-calendar-day {
                    display: none;
                  }
                }
                height: 19px !important;
                .is-selected {
                  background: transparent;
                  .el-calendar-day {
                    border-radius: 50%;
                    background-color: rgba(51, 150, 251, 1);
                    span {
                      color: #fff;
                    }
                  }
                }

                td {
                  height: 19px !important;
                  border-left: none;
                  border-top: none;
                  border-bottom: none;
                  border-right: none;

                  .el-calendar-day {
                    display: inline-block;
                    padding: 0;
                    height: 19px;
                    border: none !important;
                    margin: 4px 5px;
                    span {
                      display: inline-block;
                      font-size: 10.7px;
                      width: 19px;
                      height: 19px;
                      border-radius: 50%;
                      color: #000;
                      text-align: center;
                      line-height: 19px;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .filtrate {
        margin-top: 85px;
        padding: 0 20px;
        p {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          font-weight: 400;
          padding: 10px 0;
        }
        .room-filtrate {
          border-bottom: 1px solid rgba(225, 228, 232, 1);
          .el-checkbox.is-checked {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
            .el-checkbox__label {
              color: #000;
            }
          }
          .is-indeterminate {
            .el-checkbox__inner {
              background-color: rgba(41, 109, 227, 1);
            }
          }
        }
        .all {
          float: right;
          font-size: 12px;
        }
        .el-checkbox {
          width: 50%;
          margin: 0;

          .el-checkbox__label {
            font-size: 12px;
            margin-bottom: 10px;
            span {
              margin-left: 25px;
              font-size: 12px;
            }
          }
        }
        .el-checkbox__inner {
          width: 12px;
          height: 12px;
          &:after {
            left: 3px;
            top: 0;
          }
        }
      }
      .reset {
        margin: 15px 20px;
        .el-button {
          width: 69px;
          height: 28px;
          background: rgba(41, 109, 227, 1);
          border-radius: 4px;
          padding: 0;
        }
      }
    }
  }
}

.box-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
}

/deep/ .lock.el-dialog {
  box-shadow: none;
  margin: 350px 0 0 450px !important;
  width: 555px !important;
  height: 377px !important;

  .el-dialog__header {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    .el-dialog__headerbtn {
      width: 35px;
      height: 35px;
      font-size: 24px;
      i {
        color: #000;
      }
    }
  }
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    .roomID {
      display: flex;

      height: 49px;
      .roompassword {
        margin: 10px 19px;
        .sendpass {
          margin: 5px;
        }
        .password {
          margin-left: 10px;
          color: #fff;
          border-radius: 2px;
          font-size: 12px;
          padding: 2px;
          cursor: pointer;
          background-color: rgba(41, 109, 227, 1);
        }
      }
      .roomblock {
        margin: 10px 19px;
        width: 262px;
        display: flex;
        align-items: center;
        span {
          margin-right: 5px;
        }
        .number {
          display: flex;
          span {
            margin-right: 5px;
          }
        }
      }

      .el-input {
        width: 150px;
      }
    }
  }
  .el-dialog__footer {
    margin: 20px 14px 0px 0;
    .dialog-footer {
      .el-button:nth-child(2) {
        color: #fff;
        background: rgba(41, 109, 227, 1);
      }
      .el-button {
        width: 67px;
        height: 37px;
        padding-left: 20px;
      }
    }
  }
}

/deep/ .addroom.el-dialog {
  box-shadow: none;
  margin: 150px 0 0 600px !important;
  width: 700px !important;
  .el-dialog__header {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
  }
  .el-dialog__body {
    .el-form {
      display: flex;
      .room {
        margin: 0 40px;
      }
    }
  }
  .el-dialog__footer {
    margin: 40px 14px 0 0;
    .dialog-footer {
      .el-button:nth-child(2) {
        color: #fff;
        background: rgba(41, 109, 227, 1);
      }
      .el-button {
        width: 67px;
        height: 37px;
        padding-left: 20px;
      }
    }
  }
}

/deep/ .el-dialog {
  height: 565px !important;

  .el-dialog__header {
    height: 81px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 1);

    span {
      font-size: 20px;
      font-weight: 500;
      margin-left: 30px;
    }

    button {
      font-size: 20px;
      width: 35px;
      height: 35px;
      top: 23px !important;
    }
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    padding: 21px 0 0 0;

    .tree {
      .tree-left {
        width: 316px;
        height: 44px;
        background: rgba(240, 243, 247, 1);
        border: 1px solid rgba(230, 230, 230, 1);
        box-sizing: border-box;
        display: flex;
        align-items: center;
      }
    }

    .el-tree {
      width: 316px;
      height: 324px;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      padding-left: 9px;
      overflow: auto;
    }

    ul {
      width: 316px;
      height: 324px;
      list-style: none;
      padding: 0;
      margin: 0;
      border: 1px solid rgba(230, 230, 230, 1);
      box-sizing: border-box;
      overflow: auto;
      li {
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        align-items: center;
        i {
          cursor: pointer;
        }
      }
    }
  }

  .el-dialog__footer {
    padding: 24px 30px 0 0;
  }
}
</style>
<style lang="scss">
.el-popover.popperOptions {
  min-width: 0;
  padding: 0;
  height: 167px;
  width: 70px;

  .control-room {
    width: 70px;
    // height: 167px;
    opacity: 1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 0px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    .el-button {
      margin-left: 0;
      height: 24px !important;
      color: rgba(0, 0, 0, 1);
      border: none;
      border-radius: 0;
    }
  }
  .popper__arrow {
    top: 35px !important;
  }
}
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3;
  }
}
</style>