diff --git a/src/assets/img/add.png b/src/assets/img/add.png
new file mode 100644
index 00000000..59a8922f
Binary files /dev/null and b/src/assets/img/add.png differ
diff --git a/src/assets/scss/modules/management/categoryMain.scss b/src/assets/scss/modules/management/categoryMain.scss
new file mode 100644
index 00000000..9bda62e4
--- /dev/null
+++ b/src/assets/scss/modules/management/categoryMain.scss
@@ -0,0 +1,81 @@
+.div_main {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  background: #ffffff;
+  border-radius: 5px;
+  padding: 35px 0;
+
+  .div_tip {
+    font-size: 24px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    margin-left: 42px;
+  }
+  .div_room_bar {
+    box-sizing: border-box;
+    margin-top: 5px;
+    height: calc(100vh - 230px);
+  }
+
+  .div_room {
+    // height: calc(88vh - 40px);
+    // margin-top: 9px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin-left: 42px;
+    // margin: 0 21px 0 21px;
+
+    .item {
+      width: 340px;
+      height: 120px;
+      background: #ffffff;
+      box-shadow: 0px 0px 17px 3px #eaeaea;
+      border-radius: 6px;
+      margin-top: 30px;
+      display: flex;
+
+      .item_category {
+        display: flex;
+        align-items: center;
+        padding: 17px 16px;
+        > img {
+          width: 86px;
+          height: 86px;
+        }
+      }
+
+      .item_add {
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 350px;
+        display: flex;
+        align-items: center;
+        padding: 17px 16px;
+
+        > img {
+          width: 86px;
+          height: 86px;
+        }
+
+        > span {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #333333;
+          line-height: 350px;
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+
+  .div_room::after {
+    content: '';
+    flex: 1;
+  }
+}
diff --git a/src/views/modules/base/category/main.vue b/src/views/modules/base/category/main.vue
new file mode 100644
index 00000000..7e8900de
--- /dev/null
+++ b/src/views/modules/base/category/main.vue
@@ -0,0 +1,382 @@
+<template>
+
+  <div class="div_main">
+    <div class="div_tip">
+      类别信息
+    </div>
+    <div class="div_room_bar">
+      <el-scrollbar style="height:100%">
+        <div class="div_room">
+
+          <div v-for="(item,index) in categoryList"
+               :key="index"
+               class="item"
+               @click="handleClickRoom(index)">
+            <div v-if="index==(categoryList.length-1)"
+                 class="item_add">
+
+              <img :src="item.managementIcon"
+                   alt />
+              <span>{{item.columnName}}</span>
+
+            </div>
+            <div v-else
+                 class="item_category">
+              <img :src="item.managementIcon"
+                   alt />
+
+              <div class="item_content">
+                <span class="item_count">{{item.count}}</span>
+                <span class="item_name">{{item.columnName}}</span>
+              </div>
+              <span>{{item.columnName}}</span>
+            </div>
+
+          </div>
+
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+let loading;//加载动画
+
+export default {
+
+  data () {
+    return {
+      //父组件传过来的小区id
+      neighborHoodId: '',
+      neighborHoodName: '',
+      buildingArray: [],//楼栋下拉框数据
+      selBuildingId: '',
+      selBuildingName: '',
+
+
+      roomArray: [],
+      selHouseId: '',
+      selHouseName: '',
+      selHouseIndex: 0,
+
+      userArray: [],
+      selUserName: '',
+      selUserId: '',
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+
+      categoryList: []
+
+    }
+  },
+  async mounted () {
+    this.getCategoryList()
+
+  },
+  methods: {
+    //获取分类信息
+    async getCategoryList () {
+      const url = "/oper/customize/icindividualcategorymanage/individualcategorylist"
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.categoryList = data
+        let obj = {
+          managementIcon: require('@/assets/img/add.png'),
+          columnName: '新建分类'
+        }
+        this.categoryList.push(obj)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //选择房间
+    handleClickRoom (index) {
+      this.selHouseIndex = index
+      this.selHouseId = this.roomArray[index].houseId
+      this.selHouseName = this.roomArray[index].houseName
+
+      // this.$emit('refreshInfoList', this.selHouseId, 'room')
+    },
+
+
+    //点击用户
+    handleClickUser (userId) {
+      this.$emit('toSubAgency', 'people', userId, "")
+    },
+    //获取右侧infolist数据
+    async loadList () {
+
+    },
+
+    //加载楼栋数据
+    async loadBuilding () {
+      const url = "/gov/org/agency/baseinfofamilybuilding"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding"
+      let params = {
+        neighborHoodId: this.neighborHoodId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.buildingArray = data
+        this.buildingArray.forEach(item => {
+          if (!this.buildingArray[0].buildingName) {
+            item.buildingName = '楼'
+          }
+
+        });
+        if (this.buildingArray.length > 0) {
+          this.selBuildingId = this.buildingArray[0].buildingId
+          this.selBuildingName = this.buildingArray[0].buildingName
+
+        } else {
+          this.selBuildingId = ''
+          this.selBuildingName = ''
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载房间数据
+    async loadRoom () {
+      const url = "/gov/org/ichouse/houselist"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
+      let params = {
+        buildingId: this.selBuildingId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.roomArray = data
+
+        if (this.roomArray.length > 0) {
+
+          this.roomArray.forEach(roomItem => {
+            let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
+            let iconArray = []
+
+            if (iconArrayShow.length > 0) {
+              if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
+                roomItem.isParty = true
+                roomItem.partyUrl = iconArrayShow[0].iconUrl
+                iconArrayShow.shift();//删除第一个数据
+              } else {
+                roomItem.isParty = false
+              }
+            }
+            if (iconArrayShow.length > 4) {//去前四个
+              for (let i = 0; i < 4; i++) {
+                iconArray.push(iconArrayShow[i])
+              }
+            } else {
+              iconArray = iconArrayShow
+            }
+            this.$nextTick(() => {
+              // ref_tree 元素的ref   value 绑定的node-key
+              roomItem.iconArrayShow = iconArray
+            });
+
+            roomItem.showAllUser = false
+
+          });
+
+        }
+
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载成员数据
+    async loadUser (houseId, index) {
+      const url = "/epmetuser/icresiuser/getpeoplebyroom"
+      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
+      let params = {
+        homeId: houseId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.userArray = data
+        if (this.userArray.length === 0) {
+          this.$message.warning('该房间下没有住户')
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  props: {
+
+  },
+  computed: {
+    // selectWidth () {
+    //   let width = this.selHouseName.length * 200
+    //   console.log(width)
+    //   return width + 'px';
+    // },
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/management/categoryMain.scss"
+  scoped
+></style>
+
+<style lang=scss scoped>
+.customer_select {
+  /* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
+  /deep/ input::-webkit-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-moz-input-placeholder {
+    color: #fff;
+  }
+  /deep/ input::-ms-input-placeholder {
+    color: #fff;
+  }
+
+  /* 修改的是el-input的样式 */
+  /* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
+  /* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
+  /deep/ .el-select,
+  /deep/ .el-input,
+  /deep/ .el-input__inner {
+    background-color: #08164d00;
+    color: #fff;
+    border: 0px;
+    border-radius: 0px;
+    text-align: left;
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #ffffff;
+    display: flex;
+  }
+
+  /* el-input聚焦的时候 外层的border会有一个样式 */
+  /deep/ .el-select .el-input.is-focus .el-input__inner {
+    border: 0px;
+  }
+
+  /* 修改的是el-input上下的小图标的颜色 */
+  /deep/ .el-select .el-input .el-select__caret::before {
+    color: #fff;
+    content: "";
+    background: url("../../../../assets/img/xiala.png") center center no-repeat;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* 修改总体选项的样式 最外层 */
+  /deep/ .el-select-dropdown {
+    background-color: #08164d;
+    margin: 0px;
+    border: 0px;
+    border-radius: 0px;
+  }
+
+  /* 修改选项整体的样式 */
+  /deep/ .el-select-dropdown__list {
+    padding: 6px 0 20px 0;
+  }
+  /* 修改单个的选项的样式 */
+  /deep/ .el-select-dropdown__item {
+    background-color: transparent;
+    color: #fff;
+  }
+
+  /* item选项的hover样式 */
+  /deep/ .el-select-dropdown__item.hover,
+  /deep/ .el-select-dropdown__item:hover {
+    color: #409eff;
+  }
+
+  /* 修改的是下拉框选项内容上方的尖角 */
+  /deep/ .el-popper .popper__arrow,
+  .el-popper .popper__arrow::after {
+    display: none;
+  }
+}
+</style> 
+
+<style lang=scss >
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>
\ No newline at end of file