diff --git a/Web/src/common/api/requests/business/houseProjectInfo.js b/Web/src/common/api/requests/business/houseProjectInfo.js
new file mode 100644
index 0000000..4d9490b
--- /dev/null
+++ b/Web/src/common/api/requests/business/houseProjectInfo.js
@@ -0,0 +1,3 @@
+export default {
+    getHouseProjectPage :['/houseProjectInfo/page','get'],
+}
\ No newline at end of file
diff --git a/Web/src/common/api/requests/business/index.js b/Web/src/common/api/requests/business/index.js
new file mode 100644
index 0000000..9688ff2
--- /dev/null
+++ b/Web/src/common/api/requests/business/index.js
@@ -0,0 +1,5 @@
+import houseProjectInfo from './houseProjectInfo'
+
+export default {
+    ...houseProjectInfo
+}
\ No newline at end of file
diff --git a/Web/src/pages/business/houseprojectinfo/index.vue b/Web/src/pages/business/houseprojectinfo/index.vue
new file mode 100644
index 0000000..28cf4f5
--- /dev/null
+++ b/Web/src/pages/business/houseprojectinfo/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <yo-tree-layout :load-data="loadTreeData" @select="onSelect" default-expanded-keys ref="tree-layout">
+    <container></container>
+  </yo-tree-layout>
+</template>
+<script>
+import YoTreeLayout from '@/components/yoTreeLayout';
+
+export default {
+  components: {
+    YoTreeLayout,
+  },
+  data() {
+    return {
+      query: {},
+      columns: [
+        {
+          title: '项目名称',
+          width: '400px',
+          dataIndex: 'name',
+          sorter: true,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    /**
+     * 树形选择界面必要的方法
+     * 传给yo-table-layout以示意数据接口
+     */
+    loadTreeData() {
+      return this.$api.getAreaTree().then((res) => {
+        return res.data;
+      });
+    },
+
+    onSelect([id]) {
+      this.query = {
+        pid: id,
+      };
+      this.onQuery();
+    },
+
+    /**
+     * 必要的方法
+     * 传给yo-table以示意数据接口及其参数和返回的数据结构
+     */
+    loadData(params) {
+      return this.$api
+        .getHouseProjectPage({
+          ...params,
+          ...this.query,
+        })
+        .then((res) => {
+          return res.data;
+        });
+    },
+
+    /**
+     * 有查询功能时的必要方法
+     * 加载数据时初始化分页信息
+     */
+    onQuery() {
+      this.$refs.table.onReloadData(true);
+    },
+
+    onReset() {
+      Object.keys(this.query).forEach((p) => {
+        if (p !== 'pid') {
+          this.query[p] = undefined;
+        }
+      });
+      this.onQuery();
+    },
+
+    /**
+     * 必要方法
+     * 重新列表数据
+     */
+    onReloadData() {
+      this.$refs.table.onReloadData();
+      this.$refs['tree-layout'].onReloadData();
+    },
+
+    /**
+     * 有编辑新增功能的必要方法
+     * 从列表页调用窗口的打开方法
+     */
+    // onOpen(formName, record) {
+    //   this.$refs[formName].onOpen(record, this.query['pid']);
+    // },
+
+    // onDelete(record) {
+    //   this.$api.sysOrgDelete(record).then(({ success }) => {
+    //     if (success) {
+    //       this.$message.success('删除成功');
+    //       this.onReloadData();
+    //       if (this.query['pid'] == record.id) {
+    //         delete this.query.pid;
+    //       }
+    //     }
+    //   });
+    // },
+  },
+};
+</script>