档案弹窗基本完成（业委会成员/设施设备/公共设施暂无数据）

src/ajax/api.ts

@@ -24,9 +24,11 @@ export default {
   GET_LIST: '/service-special-nandong/classifyAddrs', // 根据地址搜索
   GET_ROOM: '/service-special-nandong/households', // 获取分户
   GET_PERSON: '/service-special-nandong/personnels', // 实有人口
-  GET_COMMUNITY_DETAIL: '/service-basicdatasync-ddd/communities',
+  GET_COMMUNITY: '/service-basicdatasync-ddd/communities',
+  GET_MANAGE: '/service-basicdatasync-ddd/css', // 小区管理处
   GET_BUILDING: '/service-basicdatasync-ddd/building', // 门牌幢列表
   GET_INDUSTRY_AUTHORITY: '/service-basicdatasync-ddd/indCous', // 业委会列表
+  GET_HOC_MEMBER: '/service-basicdatasync-ddd/indcou/members', // 业委会成员
   GET_COMMITTEE: '/service-basicdatasync-ddd/residentsCommittees', // 居委会列表
   GET_COMPANY: '/service-basicdatasync-ddd/propCompanies', // 物业列表
   GET_CASE: '/service-special-nandong/compairs', // 案件汇总列表

src/components/MyComponent/MyTable/my-table.vue

@@ -177,7 +177,7 @@ export default defineComponent({
           background transparent
   $full()
   p
-    padding .05rem
+    padding 0 .05rem
     margin 0
     flex 1
     box-sizing border-box

src/view/components/community-list.vue

+<template>
+  <div class="community-list" :class="{ 'select-able': selectAble }">
+    <template v-if="list && list.length > 0">
+      <div
+        v-for="(item, i) in list"
+        :key="i"
+        class="community-item"
+        @click="handleClick(item)"
+      >
+        <div>
+          <p>{{ item.stNameFrst }}</p>
+          <span>
+            <b>{{ item.sectTypeName }}</b>
+          </span>
+          <template v-if="item.cmtName"> | {{ item.cmtName }} | </template>
+        </div>
+        <p>{{ item.addrFrst }}</p>
+        <p>{{ item.cspName }}</p>
+      </div>
+    </template>
+    <m-empty v-else :img="empty" hidden-text />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref } from 'vue'
+import empty from '@/assets/images/empty.png'
+
+export default defineComponent({
+  name: 'CommunityList',
+  props: {
+    list: {
+      type: Array as PropType<any[] | null>,
+      default: () => {
+        return []
+      },
+    },
+    selectAble: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  emits: ['select'],
+  setup(_, ctx) {
+    const handleClick = (data: unknown) => {
+      ctx.emit('select', data)
+    }
+    const data = ref<any>([])
+    return {
+      data,
+      empty,
+      handleClick,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+
+.community-list
+  width 100%
+  height 100%
+  padding-right .05rem
+  overflow-y auto
+  &.select-able
+    .community-item
+      cursor pointer
+      transition all .1s ease
+      &:hover
+        background rgba(70,83,97,.25)
+        box-shadow none
+  .community-item
+    position relative
+    margin-bottom .08rem
+    padding .05rem .08rem
+    overflow hidden
+    background rgba(70,83,97,.45)
+    box-shadow 0 0 .04rem 0 rgba(44,51,70,.65), inset 0 .01rem .02rem 0 rgba(204,204,204,.2)
+    border-radius .04rem
+    >p
+      &:nth-of-type(1)
+        color #ccc
+      &:nth-of-type(2)
+        color $blue
+    >div
+      display flex
+      align-items center
+      border-bottom .01rem dotted rgba(91,213,255,.5)
+      margin-bottom .08rem
+      padding-bottom .06rem
+      color #ccc
+      p
+        font-size .11rem
+        font-weight bold
+        color #fff
+      span
+        display inline-block
+        font-size .08rem
+        padding 0 .06rem
+        border-radius .08rem
+        margin 0 .1rem
+        transform skew(-30deg)
+        background $edge
+        >b
+          display inline-block
+          transform skew(30deg)
+          font-weight normal
+          color #000
+</style>

src/view/components/search-view.vue

@@ -26,7 +26,9 @@
       <template v-else-if="searchType === 'population'">
         <PersonList :list="list" select-able @select="handleSelect" />
       </template>
-      <template v-else-if="searchType === 'community'"></template>
+      <template v-else-if="searchType === 'community'">
+        <CommunityList :list="list" select-able @select="handleSelect" />
+      </template>
     </template>
     <m-empty v-else />
   </div>
@@ -63,6 +65,7 @@ import CommunityDrawer from '@/view/drawers/community-drawer.vue'
 import { ajax, api } from '@/ajax'
 import CaseList from './case-list.vue'
 import PersonList from './person-list.vue'
+import CommunityList from './community-list.vue'
 
 export default defineComponent({
   name: 'SearchView',
@@ -72,6 +75,7 @@ export default defineComponent({
     CommunityDrawer,
     CaseList,
     PersonList,
+    CommunityList,
   },
   setup() {
     const searchType = ref('case')
@@ -96,15 +100,34 @@ export default defineComponent({
       ).data
       return content
     }
-    const searchCommunity = async (address: string, pageSize = 100) => {
+    const searchCommunity = async (
+      address: unknown,
+      sectId: unknown,
+      pageSize = 100
+    ) => {
       const { content } = (
         await ajax.get({
-          url: api.GET_LIST,
-          params: { pageSize, addr_l: address, classifyName: '小区' },
+          url: api.GET_COMMUNITY,
+          params: { addrFrst_l: address, pageSize, sectId },
         })
       ).data
       return content
     }
+    const searchBuilding = async (params: any) => {
+      const { content } = (
+        await ajax.get({
+          url: api.GET_BUILDING,
+          params: { ...params, pageSize: 100 },
+        })
+      ).data
+      return content
+    }
+    const searchCompany = async (id: string) => {
+      const { content } = (
+        await ajax.get({ url: api.GET_COMPANY, params: { cspId: id } })
+      ).data
+      return content
+    }
     const handleSearch = async () => {
       const address = searchKey.value
       switch (searchType.value) {
@@ -115,7 +138,7 @@ export default defineComponent({
           list.value = await searchRoom(address)
           break
         case 'community':
-          list.value = await searchCommunity(address)
+          list.value = await searchCommunity(address, null)
           break
         default:
           list.value = []
@@ -132,82 +155,151 @@ export default defineComponent({
     const caseInfo = ref<any>(null)
     const roomInfo = ref<any>(null)
     const buildingInfo = ref<any>(null)
-    const handleSelect = async (item: any) => {
-      caseInfo.value = item
-      if (item.communityId) {
-        const { content } = (
-          await ajax.get({
-            url: api.GET_COMMUNITY_DETAIL,
-            params: { sectId: item.communityId },
-          })
-        ).data
+    const handleSelect = async (item: unknown) => {
+      switch (searchType.value) {
+        case 'case':
+          await selectCase(item)
+          break
+        case 'population':
+          await selectRoom(item)
+          break
+        case 'community':
+          await selectCommunity(item)
+          break
+        default:
+          communityModal.value = false
+          populationModal.value = false
+          caseModal.value = false
+          break
+      }
+    }
+    async function selectCase(data: any) {
+      caseInfo.value = data
+      if (data.communityId) {
+        const content = await searchCommunity(null, data.communityId)
         communityInfo.value = content && content[0]
         const cspId = content && content[0] && content[0].cspId
         if (cspId) {
-          const { content } = (
-            await ajax.get({ url: api.GET_COMPANY, params: { cspId } })
-          ).data
+          const content = await searchCompany(cspId)
           propertyInfo.value = content && content[0]
         }
       } else {
         communityInfo.value = {}
         propertyInfo.value = {}
       }
-      if (searchType.value === 'case') {
-        caseModal.value = true
-        populationModal.value = false
-        communityModal.value = false
-      } else {
-        const { content } = (
-          await ajax.get({
-            url: api.GET_CASE,
-            params: { pageSize: 200, address_l: item.address || item.addr },
-          })
-        ).data
-        caseInfo.value = content || []
-        if (searchType.value === 'population') {
-          if (item.addr) {
+      caseModal.value = true
+      populationModal.value = false
+      communityModal.value = false
+    }
+    async function selectRoom(data: any) {
+      roomInfo.value = data
+      const content = await searchCase(data.address || data.addr)
+      caseInfo.value = content || []
+      const { buildingId } = data
+      if (buildingId) {
+        const content = await searchBuilding({ unitId: buildingId })
+        buildingInfo.value = content && content[0]
+        const sectId = content && content[0] && content[0].sectId
+        if (sectId) {
+          const content = await searchCommunity(null, sectId)
+          communityInfo.value = content && content[0]
+          const csId = communityInfo.value && communityInfo.value.csId
+          if (csId) {
             const { content } = (
-              await ajax.get({ url: api.GET_ROOM, params: { addr: item.addr } })
+              await ajax.get({
+                url: api.GET_MANAGE,
+                params: { csId },
+              })
             ).data
-            roomInfo.value = content && content[0]
-            const buildingId = content && content[0] && content[0].buildingId
-            if (buildingId) {
-              const { content } = (
-                await ajax.get({
-                  url: api.GET_BUILDING,
-                  params: { unitId: buildingId },
-                })
-              ).data
-              buildingInfo.value = content && content[0]
-              const sectId = content && content[0] && content[0].sectId
-              if (sectId) {
-                const { content } = (
-                  await ajax.get({
-                    url: api.GET_COMMUNITY_DETAIL,
-                    params: { sectId },
-                  })
-                ).data
-                communityInfo.value = content && content[0]
-              } else {
-                communityInfo.value = null
-              }
-            } else {
-              buildingInfo.value = null
-            }
+            communityInfo.value.manageInfo = (content && content[0]) || {}
           } else {
-            roomInfo.value = null
+            communityInfo.value.manageInfo = {}
           }
-
-          populationModal.value = true
-          caseModal.value = false
-          communityModal.value = false
-        } else if (searchType.value === 'community') {
-          communityModal.value = true
-          populationModal.value = false
-          caseModal.value = false
+          const hocId = communityInfo.value && communityInfo.value.hocId
+          if (hocId) {
+            const { content } = (
+              await ajax.get({
+                url: api.GET_INDUSTRY_AUTHORITY,
+                params: { hocId },
+              })
+            ).data
+            communityInfo.value.hocInfo = (content && content[0]) || {}
+            const { content: memberList } = (
+              await ajax.get({
+                url: api.GET_HOC_MEMBER,
+                params: { hocId },
+              })
+            ).data
+            communityInfo.value.hocInfo.memberList = memberList || []
+          } else {
+            communityInfo.value.hocInfo = {}
+          }
+          const cspId = communityInfo.value && communityInfo.value.cspId
+          if (cspId) {
+            const content = await searchCompany(cspId)
+            propertyInfo.value = content && content[0]
+          } else {
+            propertyInfo.value = {}
+          }
+          communityInfo.value.buildingList =
+            (await searchBuilding({ sectId })) || []
+        } else {
+          communityInfo.value = {}
         }
+      } else {
+        buildingInfo.value = {}
+      }
+      populationModal.value = true
+      caseModal.value = false
+      communityModal.value = false
+    }
+    async function selectCommunity(data: any) {
+      const content = await searchCase(data.addrFrst)
+      caseInfo.value = content || []
+      communityInfo.value = data
+      const csId = communityInfo.value && communityInfo.value.csId
+      if (csId) {
+        const { content } = (
+          await ajax.get({
+            url: api.GET_MANAGE,
+            params: { csId },
+          })
+        ).data
+        communityInfo.value.manageInfo = (content && content[0]) || {}
+      } else {
+        communityInfo.value.manageInfo = {}
+      }
+      const hocId = communityInfo.value && communityInfo.value.hocId
+      if (hocId) {
+        const { content } = (
+          await ajax.get({
+            url: api.GET_INDUSTRY_AUTHORITY,
+            params: { hocId },
+          })
+        ).data
+        communityInfo.value.hocInfo = (content && content[0]) || {}
+        const { content: memberList } = (
+          await ajax.get({
+            url: api.GET_HOC_MEMBER,
+            params: { hocId },
+          })
+        ).data
+        communityInfo.value.hocInfo.memberList = memberList || []
+      } else {
+        communityInfo.value.hocInfo = {}
+      }
+      const cspId = communityInfo.value && communityInfo.value.cspId
+      if (cspId) {
+        const content = await searchCompany(cspId)
+        propertyInfo.value = content && content[0]
+      } else {
+        propertyInfo.value = {}
       }
+      communityInfo.value.buildingList =
+        (await searchBuilding({ sectId: data.sectId })) || []
+      communityModal.value = true
+      populationModal.value = false
+      caseModal.value = false
     }
     return {
       searchType,

src/view/components/tabs.vue

@@ -87,7 +87,7 @@ export default defineComponent({
       color $edge
       font-size .09rem
       opacity 0.6
-      transition all .2s ease
+      transition all .1s ease
       &.on
       &:hover
         color #fff

src/view/drawers/community-drawer.vue

@@ -2,35 +2,7 @@
   <div class="community-drawer">
     <m-card title="相关案件">
       <div class="case-wrap">
-        <div
-          v-for="(item, i) in caseInfo"
-          :key="i"
-          class="case-item"
-          :class="{
-            done: item && item.status && item.status.indexOf('已结') >= 0,
-          }"
-        >
-          <div>
-            <p>
-              {{ item.address }}
-              <span v-show="item.managementScoreType">
-                <b>{{ item.managementScoreType }}</b>
-              </span>
-              <span v-show="item.managementType">
-                <b>{{ item.managementType }}</b>
-              </span>
-            </p>
-            <p>{{ item.acceptTime }}</p>
-          </div>
-          <div>{{ item.reportContent || '无' }}</div>
-          <div
-            v-if="item && item.status && item.status.indexOf('已结') >= 0"
-            class="flag"
-          >
-            已结案
-          </div>
-          <div v-else class="flag">处置中</div>
-        </div>
+        <CaseList :list="caseInfo" />
       </div>
     </m-card>
     <m-card title="房屋档案">
@@ -40,13 +12,102 @@
           'address:小区地址|cmtName:所属居委会',
           'totUnits:总门牌幢数|totHous:总户数',
           'stCnstArea:总建筑面积|landArea:占地面积',
-          'range:小区四至范围',
-          'stNotcsparea:四至范围不包括',
+          'range:小区四至范围|stNotcsparea:四至范围不包括',
         ]"
         :data="communityData"
         label-width="1.2rem"
       />
-      <Tabs class="tabs" :list="tabs" horizontal />
+      <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
+      <template v-if="curTab === 'room'">
+        <template v-if="showBuildingRoom">
+          <div class="person-bar">
+            <div class="photo"></div>
+            <div class="back-btn" @click="showBuildingRoom = false">返回</div>
+          </div>
+          <div class="room-table">
+            <m-table
+              :template="['户室|面积', 'houseNo|houseArea']"
+              :data="buildingRoomList"
+            />
+          </div>
+        </template>
+        <template v-else>
+          <div
+            v-if="
+              communityInfo.buildingList &&
+              communityInfo.buildingList.length > 0
+            "
+            class="building-list"
+          >
+            <div
+              v-for="item in communityInfo.buildingList"
+              :key="item.id"
+              @click="selectBuilding(item)"
+            >
+              <p class="title">{{ item.unitNo }}</p>
+              <p class="line" />
+              <p>{{ item.unitFlag ? '有' : '无' }}电梯</p>
+              <p>{{ item.unitKindName }}</p>
+            </div>
+          </div>
+          <div v-else style="height: 30vh">
+            <m-empty />
+          </div>
+        </template>
+      </template>
+      <template v-else-if="curTab === 'property'">
+        <m-form
+          :template="[
+            'cspName:物业企业名称|hpbName:注册区县',
+            'registerAddress:注册地址|orgCode:组织机构代码',
+            'legalRepName:法人代表|cspContacter:企业联系人',
+            'cspTel:企业联系人电话|cspFax:企业联系人传真',
+            'bizLicenseValidDate:营业执照有效期|bizLicenseCode:营业执照号',
+          ]"
+          :data="propertyInfo"
+          label-width="1.4rem"
+        />
+        <SubTitle>小区管理处</SubTitle>
+        <m-form
+          :template="[
+            'csName:管理处名称|csAddress:办公地址',
+            'csContacter:联系人姓名|csTel:联系人电话',
+            'csDayTel:日间报修电话|nightTel:夜间报修电话',
+            'csFax:管理处传真|complaintTel:物业投诉电话',
+          ]"
+          :data="communityInfo.manageInfo"
+          label-width="1.4rem"
+        />
+      </template>
+      <template v-else-if="curTab === 'committee'">
+        <m-form
+          :template="[
+            'hocCode:业主大会代码|hocName:业主大会名称',
+            'hocAddr:办公地址',
+          ]"
+          :data="communityInfo.hocInfo"
+          label-width="1.4rem"
+        />
+        <SubTitle>指挥体系</SubTitle>
+        <m-table
+          v-if="
+            communityInfo.hocInfo.memberList &&
+            communityInfo.hocInfo.memberList.length > 0
+          "
+          :template="[
+            '职位|姓名|性别|联系电话|政治面貌',
+            'dirDuty|dirName|dirSex|phone|dirPoliticsStatus',
+          ]"
+          :data="communityInfo.hocInfo.memberList"
+        />
+        <m-empty v-else />
+      </template>
+      <template v-else-if="curTab === 'device'">
+        <m-empty />
+      </template>
+      <template v-else-if="curTab === 'public'">
+        <m-empty />
+      </template>
     </m-card>
   </div>
 </template>
@@ -55,10 +116,12 @@
 import { defineComponent, ref, PropType, computed } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
+import CaseList from '../components/case-list.vue'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'CommunityDrawer',
-  components: { Tabs, SubTitle },
+  components: { Tabs, SubTitle, CaseList },
   props: {
     communityInfo: {
       type: Object as PropType<{ [key: string]: any } | null>,
@@ -103,28 +166,6 @@ export default defineComponent({
         name: '公共设施',
       },
     ])
-    const data1 = ref({
-      community: '测试文字',
-      building: '测试文字',
-      communityType: '测试文字',
-      roomNo: '测试文字',
-      company: '测试文字',
-      manager: '测试文字',
-      manageOffice: '测试文字',
-      hasElev: '测试文字',
-      yewei: '测试文字',
-      juwei: '测试文字',
-    })
-    const houseData = computed(() => {
-      const { communityInfo, propertyInfo, caseInfo } = props
-      console.log(communityInfo, propertyInfo, caseInfo)
-      return { ...communityInfo, ...propertyInfo }
-    })
-    const data2 = ref({
-      name: '暂无',
-      phone: '暂无',
-      household: '暂无',
-    })
     const communityData = computed(() => {
       const { communityInfo = {}, caseInfo = [] } = props
       const keys = [
@@ -146,20 +187,26 @@ export default defineComponent({
       }
     })
 
-    const showPersonDetail = ref(false)
-    const selectPerson = (person: any) => {
-      console.log('select-person', person)
-      showPersonDetail.value = true
+    const showBuildingRoom = ref(false)
+    const buildingRoomList = ref<any>([])
+    const selectBuilding = async (data: any) => {
+      const { content } = (
+        await ajax.get({
+          url: api.GET_ROOM,
+          params: { pageSize: 100, addr_l: data.unitAddr },
+        })
+      ).data
+      buildingRoomList.value = content
+      showBuildingRoom.value = true
     }
+
     return {
       curTab,
       tabs,
-      houseData,
-      data1,
-      data2,
       communityData,
-      selectPerson,
-      showPersonDetail,
+      showBuildingRoom,
+      selectBuilding,
+      buildingRoomList,
     }
   },
 })
@@ -167,7 +214,6 @@ export default defineComponent({
 
 <style lang="stylus" scoped>
 @import '../../components/MyComponent/main.styl'
-$border = .01rem solid rgba(91,213,255,.3)
 
 .community-drawer
   display flex
@@ -177,57 +223,8 @@ $border = .01rem solid rgba(91,213,255,.3)
     &:last-child
       width 64%
   .case-wrap
-    max-height 85vh
-    overflow-y auto
-    .case-item
-      position relative
-      margin-top .08rem
-      padding .05rem .08rem
-      overflow hidden
-      background rgba(70,83,97,.45)
-      box-shadow 0 0 .04rem 0 rgba(44,51,70,.65)
-      border-radius .04rem
-      &.done
-        .flag
-          background #27C5A2
-      >div
-        &:nth-of-type(1)
-          border-bottom $border
-          padding-bottom .05rem
-          margin-bottom .05rem
-          p
-            &:last-child
-              font-size .09rem
-              color #ccc
-              margin .04rem 0
-            span
-              display inline-block
-              font-size .08rem
-              padding 0 .1rem
-              border-radius .08rem
-              margin-left .1rem
-              transform skew(-30deg)
-              background linear-gradient(to right, #FFF764, #BBA619)
-              >b
-                display inline-block
-                transform skew(30deg)
-                font-weight normal
-                color #000
-              &:last-child
-                background linear-gradient(to right, #64DCFF, #02B2D2)
-      .flag
-        background $secondary-color
-        position absolute
-        top -0.16rem
-        right -0.36rem
-        transform rotate(45deg)
-        height .4rem
-        width .8rem
-        display flex
-        color #000
-        align-items flex-end
-        justify-content center
-        font-size .09rem
+    height 85vh
+    overflow hidden
 .person-bar
   display flex
   justify-content space-between
@@ -236,6 +233,39 @@ $border = .01rem solid rgba(91,213,255,.3)
     background $primary-color
     cursor pointer
     border-radius .02rem
+    margin .04rem 0
+    font-size .09rem
     &:hover
       background $secondary-color
+.building-list
+  max-height 60vh
+  overflow-y auto
+  >div
+    display inline-block
+    width 24%
+    margin .06rem 0 0 .06rem
+    background linear-gradient(to right, rgba(124,139,154,.4), rgba(70,83,97,.4))
+    box-shadow 0 0 .04rem 0 rgba(45,51,66,.5)
+    border-radius .03rem
+    box-sizing border-box
+    padding .04rem .08rem
+    cursor pointer
+    border .01rem solid transparent
+    transition all .1s ease
+    &:hover
+      background linear-gradient(to right, rgba(124,139,154,.2), rgba(70,83,97,.2))
+      border .01rem solid rgba(130,207,255,.3)
+    p
+      color #ccc
+      font-size .09rem
+      &.title
+        font-weight bold
+        font-size .11rem
+        color #fff
+      &.line
+        border-bottom .01rem dotted rgba(91,213,255,.4)
+        margin .04rem 0
+.room-table
+  max-height 38vh
+  overflow-y auto
 </style>

src/view/drawers/population-drawer.vue

@@ -6,7 +6,7 @@
       </div>
     </m-card>
     <m-card title="人口详情">
-      <Tabs class="tabs" :list="tabs" horizontal @select="curTab = $event" />
+      <Tabs class="tabs" :list="tabs" horizontal @select="onSelect" />
       <template v-if="curTab === 'house'">
         <SubTitle>基本信息</SubTitle>
         <m-form
@@ -24,21 +24,122 @@
         <SubTitle>房主信息</SubTitle>
         <m-form
           :template="['name:姓名|phone:手机号码', 'household:户籍|']"
-          :data="data2"
+          :data="{
+            name: '无',
+            phone: '无',
+            household: '无',
+          }"
           label-width="1.2rem"
         />
-        <Tabs class="tabs" :list="tabs2" horizontal />
-        <m-form
-          :template="[
-            'stNameFrst:小区名称',
-            'address:小区地址|cmtName:所属居委会',
-            'totUnits:总门牌幢数|totHous:总户数',
-            'stCnstArea:总建筑面积|landArea:占地面积',
-            'range:小区四至范围|stNotcsparea:四至范围不包括',
-          ]"
-          :data="communityData"
-          label-width="1.2rem"
+        <Tabs
+          class="tabs"
+          :list="tabs2"
+          horizontal
+          @select="curTab2 = $event"
         />
+        <template v-if="curTab2 === 'community'">
+          <m-form
+            :template="[
+              'stNameFrst:小区名称',
+              'address:小区地址|cmtName:所属居委会',
+              'totUnits:总门牌幢数|totHous:总户数',
+              'stCnstArea:总建筑面积|landArea:占地面积',
+              'range:小区四至范围|stNotcsparea:四至范围不包括',
+            ]"
+            :data="communityData"
+            label-width="1.2rem"
+          />
+        </template>
+        <template v-else-if="curTab2 === 'room'">
+          <template v-if="showBuildingRoom">
+            <div class="person-bar">
+              <div class="photo"></div>
+              <div class="back-btn" @click="showBuildingRoom = false">返回</div>
+            </div>
+            <div class="room-table">
+              <m-table
+                :template="['户室|面积', 'houseNo|houseArea']"
+                :data="buildingRoomList"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-if="
+                communityInfo.buildingList &&
+                  communityInfo.buildingList.length > 0
+              "
+              class="building-list"
+            >
+              <div
+                v-for="item in communityInfo.buildingList"
+                :key="item.id"
+                @click="selectBuilding(item)"
+              >
+                <p class="title">{{ item.unitNo }}</p>
+                <p class="line" />
+                <p>{{ item.unitFlag ? '有' : '无' }}电梯</p>
+                <p>{{ item.unitKindName }}</p>
+              </div>
+            </div>
+            <div v-else style="height: 30vh">
+              <m-empty />
+            </div>
+          </template>
+        </template>
+        <template v-else-if="curTab2 === 'property'">
+          <m-form
+            :template="[
+              'cspName:物业企业名称|hpbName:注册区县',
+              'registerAddress:注册地址|orgCode:组织机构代码',
+              'legalRepName:法人代表|cspContacter:企业联系人',
+              'cspTel:企业联系人电话|cspFax:企业联系人传真',
+              'bizLicenseValidDate:营业执照有效期|bizLicenseCode:营业执照号',
+            ]"
+            :data="propertyInfo"
+            label-width="1.4rem"
+          />
+          <SubTitle>小区管理处</SubTitle>
+          <m-form
+            :template="[
+              'csName:管理处名称|csAddress:办公地址',
+              'csContacter:联系人姓名|csTel:联系人电话',
+              'csDayTel:日间报修电话|nightTel:夜间报修电话',
+              'csFax:管理处传真|complaintTel:物业投诉电话',
+            ]"
+            :data="communityInfo.manageInfo"
+            label-width="1.4rem"
+          />
+        </template>
+        <template v-else-if="curTab2 === 'committee'">
+          <m-form
+            :template="[
+              'hocCode:业主大会代码|hocName:业主大会名称',
+              'hocAddr:办公地址',
+            ]"
+            :data="communityInfo.hocInfo"
+            label-width="1.4rem"
+          />
+          <SubTitle>指挥体系</SubTitle>
+          <m-table
+            v-if="
+              communityInfo.hocInfo.memberList &&
+                communityInfo.hocInfo.memberList.length > 0
+            "
+            :template="[
+              '职位|姓名|性别|联系电话|政治面貌',
+              'dirDuty|dirName|dirSex|phone|dirPoliticsStatus',
+            ]"
+            :data="communityInfo.hocInfo.memberList"
+          />
+          <m-empty v-else />
+        </template>
+        <template v-else-if="curTab2 === 'device'">
+          <m-empty />
+        </template>
+        <template v-else-if="curTab2 === 'public'">
+          <m-empty />
+        </template>
       </template>
       <template v-else>
         <template v-if="showPersonDetail">
@@ -55,7 +156,7 @@
               'homtownAdmArea:户籍|certCode:证件号',
               'educationName:学历|maritalStatus:婚姻状况',
             ]"
-            :data="{}"
+            :data="personDetail"
             label-width="1.2rem"
           />
           <SubTitle>标签信息</SubTitle>
@@ -68,17 +169,17 @@
               'cnName|nationalityName|certCode|sex|maritalStatus|time',
             ]"
             selectable
-            :data="[]"
+            :data="roomInfo.personInfo"
             @select="selectPerson"
           />
           <SubTitle>历史居住人</SubTitle>
           <m-table
             :template="[
               '姓名|国籍/户籍|证件号|性别|婚姻状况|入住时间',
-              'name|nation|id|sexual|marry|time',
+              'cnName|nationalityName|certCode|sex|maritalStatus|time',
             ]"
             selectable
-            :data="[]"
+            :data="roomInfo.personInfo"
             @select="selectPerson"
           />
         </template>
@@ -92,6 +193,7 @@ import { defineComponent, ref, PropType, computed } from 'vue'
 import Tabs, { TabsProp } from '../components/tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import CaseList from '../components/case-list.vue'
+import { ajax, api } from '@/ajax'
 
 export default defineComponent({
   name: 'PopulationDrawer',
@@ -140,6 +242,7 @@ export default defineComponent({
         name: '实住人',
       },
     ])
+    const curTab2 = ref('community')
     const tabs2 = ref<TabsProp[]>([
       {
         key: 'community',
@@ -166,28 +269,17 @@ export default defineComponent({
         name: '公共设施',
       },
     ])
-    const data1 = ref({
-      community: '测试文字',
-      building: '测试文字',
-      communityType: '测试文字',
-      roomNo: '测试文字',
-      company: '测试文字',
-      manager: '测试文字',
-      manageOffice: '测试文字',
-      hasElev: '测试文字',
-      yewei: '测试文字',
-      juwei: '测试文字',
-    })
+    const onSelect = (tab: string) => {
+      curTab.value = tab
+      if (tab === 'house') {
+        curTab2.value = 'community'
+      }
+    }
+
     const houseData = computed(() => {
-      const { communityInfo, buildingInfo, roomInfo } = props
-      console.log(communityInfo, buildingInfo, roomInfo)
+      const { communityInfo, buildingInfo, roomInfo, propertyInfo } = props
       return { ...communityInfo, ...buildingInfo, ...roomInfo }
     })
-    const data2 = ref({
-      name: '暂无',
-      phone: '暂无',
-      household: '暂无',
-    })
     const communityData = computed(() => {
       const { communityInfo = {}, caseInfo = [] } = props
       const keys = [
@@ -210,24 +302,43 @@ export default defineComponent({
     })
 
     const showPersonDetail = ref(false)
+    const personDetail = ref<unknown>(null)
     const selectPerson = (person: any) => {
-      console.log('select-person', person)
+      personDetail.value = person
       showPersonDetail.value = true
     }
     const hasElev = (val: boolean | null) => {
       return val ? '有' : '无'
     }
+
+    const showBuildingRoom = ref(false)
+    const buildingRoomList = ref<any>([])
+    const selectBuilding = async (data: any) => {
+      const { content } = (
+        await ajax.get({
+          url: api.GET_ROOM,
+          params: { pageSize: 100, addr_l: data.unitAddr },
+        })
+      ).data
+      buildingRoomList.value = content
+      showBuildingRoom.value = true
+    }
+
     return {
       curTab,
       tabs,
+      curTab2,
       tabs2,
+      onSelect,
       houseData,
-      data1,
-      data2,
       communityData,
       selectPerson,
+      personDetail,
       showPersonDetail,
       hasElev,
+      showBuildingRoom,
+      selectBuilding,
+      buildingRoomList,
     }
   },
 })
@@ -254,6 +365,39 @@ export default defineComponent({
     background $primary-color
     cursor pointer
     border-radius .02rem
+    margin .04rem 0
+    font-size .09rem
     &:hover
       background $secondary-color
+.building-list
+  max-height 40vh
+  overflow-y auto
+  >div
+    display inline-block
+    width 24%
+    margin .06rem 0 0 .06rem
+    background linear-gradient(to right, rgba(124,139,154,.4), rgba(70,83,97,.4))
+    box-shadow 0 0 .04rem 0 rgba(45,51,66,.5)
+    border-radius .03rem
+    box-sizing border-box
+    padding .04rem .08rem
+    cursor pointer
+    border .01rem solid transparent
+    transition all .1s ease
+    &:hover
+      background linear-gradient(to right, rgba(124,139,154,.2), rgba(70,83,97,.2))
+      border .01rem solid rgba(130,207,255,.3)
+    p
+      color #ccc
+      font-size .09rem
+      &.title
+        font-weight bold
+        font-size .11rem
+        color #fff
+      &.line
+        border-bottom .01rem dotted rgba(91,213,255,.4)
+        margin .04rem 0
+.room-table
+  max-height 38vh
+  overflow-y auto
 </style>