diff --git a/src/views/records/checkin/index.vue b/src/views/records/checkin/index.vue
index 35dfc54..a979323 100644
--- a/src/views/records/checkin/index.vue
+++ b/src/views/records/checkin/index.vue
@@ -76,7 +76,7 @@
       <!-- 房间 -->
       <el-table-column label="房间" align="center" prop="roomTypeName" />
       <!-- 入住人 -->
-      <el-table-column label="居主人" align="center" prop="graduateName" />
+      <el-table-column label="居住人" align="center" prop="graduateName" />
       <!-- 性别 -->
       <el-table-column label="性别" align="center" prop="genderName">
         <template slot-scope="scope">
diff --git a/src/views/records/live/index.vue b/src/views/records/live/index.vue
new file mode 100644
index 0000000..5c66f48
--- /dev/null
+++ b/src/views/records/live/index.vue
@@ -0,0 +1,467 @@
+<template>
+  <div class="app-container">
+    <!--入住记录数据-->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      label-width="100px"
+    >
+      <el-form-item label="所在区域" prop="deptId">
+        <treeselect
+          v-model="queryParams.deptId"
+          :options="deptOptions"
+          :show-count="true"
+          :normalizer="normalizer"
+          placeholder="请选择所在区域"
+          style="width: 220px"
+          @select="handleTreeSelect"
+          :disable-branch-nodes="true"
+        />
+      </el-form-item>
+      <!-- 公寓 -->
+      <el-form-item label="小区公寓" prop="apartmentId">
+        <el-select
+          v-model="queryParams.apartmentId"
+          placeholder="请选择小区"
+          @change="handleChangeapartment"
+        >
+          <el-option
+            v-for="item in apartmentOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="楼栋" prop="building">
+        <el-select
+          v-model="queryParams.buildingId"
+          placeholder="请选择楼栋"
+          @change="handleChangeBuildingId"
+        >
+          <el-option
+            v-for="item in buildingOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- 单元 -->
+      <el-form-item label="单元" prop="unit">
+        <el-select
+          v-model="queryParams.unitId"
+          placeholder="请选择单元"
+          @change="handleChangeUnitId"
+        >
+          <el-option
+            v-for="item in unitOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <!-- 入住状态 -->
+      <el-form-item label="入住状态" prop="">
+        <el-select
+          v-model="queryParams.checkInState"
+          placeholder="请选择入住状态"
+        >
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="姓名" prop="graduateName">
+        <el-input
+          v-model="queryParams.graduateName"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="graduateTelephone">
+        <el-input
+          v-model="queryParams.graduateTelephone"
+          placeholder="请输入手机号码"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- 身份证 -->
+      <el-form-item label="身份证" prop="graduateIdCard">
+        <el-input
+          v-model="queryParams.graduateIdCard"
+          placeholder="请输入身份证号码"
+          clearable
+          style="width: 220px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="list">
+      <!-- <el-table-column type="selection" width="50" align="center" /> -->
+      <el-table-column label="序号" align="center" key="buildId" type="index" />
+      <!-- 所在区域 -->
+      <el-table-column
+        label="所在区域"
+        align="center"
+        prop="parentName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="小区/公寓"
+        align="center"
+        prop="apartmentName"
+        :show-overflow-tooltip="true"
+      />
+      <!-- 楼号 -->
+      <el-table-column label="楼号" align="center" prop="buildingName" />
+      <!-- 单元 -->
+      <el-table-column label="单元" align="center" prop="unitName" />
+      <!-- 门牌号 -->
+      <el-table-column label="房屋" align="center" prop="houseName" />
+      <!-- 房间 -->
+      <el-table-column label="房间" align="center" prop="roomTypeName" />
+      <!-- 入住人 -->
+      <el-table-column label="居住人" align="center" prop="graduateName" />
+      <!-- 性别 -->
+      <el-table-column label="性别" align="center" prop="genderName">
+        <template slot-scope="scope">
+          {{ scope.row.gender == "1" ? "男" : "女" }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="手机号"
+        align="center"
+        prop="telephone"
+        width="160"
+      />
+      <!-- 居住状态 -->
+      <el-table-column label="当前状态" prop="state">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color:
+                scope.row.state === 1
+                  ? '#08b3b3'
+                  : scope.row.state === 5
+                  ? '#000'
+                  : '#000',
+            }"
+            >{{
+              scope.row.state === 1
+                ? "已入住"
+                : scope.row.state === 5
+                ? "已退房"
+                : ""
+            }}</span
+          >
+        </template>
+      </el-table-column>
+      <!-- 入住时间 -->
+      <el-table-column
+        label="入住日期"
+        align="center"
+        prop="checkInDate"
+        width="160"
+      />
+      <el-table-column
+        label="退房日期"
+        align="center"
+        prop="checkOutDate"
+        width="160"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        width="160"
+        class-name="small-padding fixed-width"
+        fixed="right"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleView(scope.row)"
+            >查看</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <el-dialog title="详情" :visible.sync="open" width="50%">
+      <el-row :gutter="60">
+        <el-col :span="8" class="mb-10">所在区域：{{ info.parentName }}</el-col>
+        <el-col :span="8" class="mb-10"
+          >小区/公寓：{{ info.apartmentName }}</el-col
+        >
+        <el-col :span="8" class="mb-10">楼号：{{ info.buildingName }}</el-col>
+
+        <el-col :span="8" class="mb-10">单元：{{ info.unitName }}</el-col>
+        <el-col :span="8" class="mb-10">房屋：{{ info.houseName }}</el-col>
+        <el-col :span="8" class="mb-10">房间：{{ info.roomTypeName }}</el-col>
+        <el-col :span="24">
+          <div class="line"></div>
+        </el-col>
+        <el-col :span="8" class="mb-10">居住人：{{ info.graduateName }}</el-col>
+        <el-col :span="8" class="mb-10"
+          >性别：{{ info.gender == 1 ? "男" : "女" }}</el-col
+        >
+        <el-col :span="8" class="mb-10">手机号：{{ info.telephone }}</el-col>
+
+        <el-col :span="8" class="mb-10">身份证号：{{ info.idCard }}</el-col>
+        <el-col :span="8" class="mb-10"
+          >入住日期：{{ info.checkInDate }}</el-col
+        >
+        <el-col :span="8" class="mb-10"
+          >退房日期：{{ info.checkOutDate }}</el-col
+        >
+
+        <el-col :span="8" class="mb-10"
+          >办理入住时间：{{ info.handleCheckInDate }}</el-col
+        >
+        <el-col :span="8" class="mb-10"
+          >当前状态：
+         <span
+            :style="{
+              color:
+                info.state === 1
+                  ? '#08b3b3'
+                  : info.state === 5
+                  ? '#000'
+                  : '#000',
+            }"
+            >{{
+              info.state === 1
+                ? "已入住"
+                : info.state === 5
+                ? "已退房"
+                : ""
+            }}</span
+          ></el-col
+        >
+        <el-col :span="8" class="mb-10"></el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="open = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listRecCheckin,
+  getRecCheckinInfo,
+  queryDeptDropdownList,
+} from "@/api/mz/rec";
+import { listDept } from "@/api/system/dept";
+
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "RoomSelection",
+  dicts: ["sys_normal_disable", "sys_user_sex"],
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 公寓表格数据
+      list: null,
+
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        deptId: null,
+        apartmentId: null,
+        houseId: null,
+        houseName: null,
+        graduateName: null,
+        graduateTelephone: null,
+        graduateIdCard: null,
+        status: null,
+        buildingId: null,
+        unitId: null,
+      },
+      info: {},
+      deptOptions: [],
+      apartmentOptions: [],
+      buildingOptions: [],
+      unitOptions: [],
+      open: false,
+      statusOptions: [
+        { value: "1", label: "已入住" },
+        { value: "5", label: "已退房" },
+      ],
+    };
+  },
+  watch: {
+    "queryParams.deptId": {
+      handler(newVal, oldVal) {
+        console.log("newVal", newVal);
+        if (!newVal) this.queryParams.apartmentId = null;
+        this.queryParams.buildingId = null;
+        this.queryParams.unitId = null;
+        this.queryParams.houseId = null;
+        this.apartmentOptions = [];
+        this.buildingOptions = [];
+        this.unitOptions = [];
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {
+    this.getList();
+    this.getDeptTree();
+  },
+  computed: {},
+  methods: {
+    async handleTreeSelect(value) {
+      this.queryParams.deptId = value.deptId;
+      this.queryParams.apartmentId = "";
+      this.queryParams.buildingId = "";
+      this.queryParams.unitId = "";
+      this.queryParams.houseId = "";
+      this.buildingOptions = [];
+      this.unitOptions = [];
+      this.apartmentOptions = await this.getListByParentId("1", value.deptId);
+    },
+    async handleChangeapartment(val) {
+      this.queryParams.apartmentId = val;
+      this.queryParams.buildingId = null;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.buildingOptions = await this.getListByParentId("2", val);
+    },
+    // 三级联动
+    async handleChangeBuildingId(val) {
+      this.queryParams.buildingId = val;
+      this.queryParams.unitId = null;
+      this.queryParams.houseId = null;
+      this.unitOptions = await this.getListByParentId("3", val);
+    },
+    async handleChangeUnitId(val) {
+      this.queryParams.unitId = val;
+      this.queryParams.houseId = null;
+    },
+
+    // 三级联动通用接口
+    getListByParentId(type, id) {
+      return new Promise((resolve, reject) => {
+        queryDeptDropdownList({ type, id }).then((res) => {
+          resolve(res.data);
+        });
+      });
+    },
+    stateComp(val) {
+      return this.statusOptions.find((item) => item.value == val)?.label;
+    },
+    /** 转换公寓数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children,
+      };
+    },
+    /** 查询公寓列表 */
+    getList() {
+      this.loading = true;
+      listRecCheckin(this.queryParams)
+        .then((response) => {
+          this.list = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+    /** 查询公寓下拉树结构 */
+    getDeptTree() {
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(
+          response.data,
+          "deptId",
+          "parentId",
+          "children",
+          2
+        );
+      });
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.deptId = undefined;
+      this.$refs.tree.setCurrentKey(null);
+      this.handleQuery();
+    },
+    handleView(row) {
+      getRecCheckinInfo(row.chooseRecId)
+        .then((response) => {
+          this.info = response.data;
+          this.open = true;
+        })
+        .catch((err) => {
+          this.$message.error(err.msg);
+        });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.line {
+  margin: 30px 0;
+  height: 2px;
+  border-top: 1px solid transparent;
+  background: linear-gradient(white, white) padding-box,
+    repeating-linear-gradient(-45deg, #ccc 0, #ccc 3px, white 0, white 5px);
+}
+</style>