地理筛选对接接口

src/ajax/api.ts

@@ -33,6 +33,7 @@ export default {
   COMMUNITY: '931687e6-b53a-4f2d-8ab9-83b4a7d5ea8f',
   STREET: 'af3ce0b6-f32d-4914-a336-bb7f6398ff85',
   BUILDING: 'e08e40c6-a15c-447d-8f9e-786216d93443',
+  ROOM: '24b5403c-9b6e-4882-b049-51ef197e3aa7',
   ATTACHMENT: '988fc63e-fa55-4729-851d-24c4355213f2',
   TAG: '54344e11-c0d3-40d5-8f99-771066249328',
 }

src/hooks/useFetch.ts

@@ -64,6 +64,13 @@ export async function useFetchBuilding(params: QueryProps) {
   })
   return res && res.data && res.data.result
 }
+export async function useFetchRoom(params: QueryProps) {
+  const res = await ajax.get({
+    url: api.ROOM,
+    params,
+  })
+  return res && res.data && res.data.result
+}
 export async function useFetchAttachment(params: QueryProps) {
   const res = await ajax.get({
     url: api.ATTACHMENT,

src/view/components/building-drawer.vue

@@ -16,10 +16,10 @@
         </div>
       </template>
       <div class="content">
-        <p class="name">某某社区某某居委某某小区</p>
+        <p class="name">{{ path.join('') }}</p>
         <div v-if="showBuildingDetail" class="building">
           <div class="nav">
-            <p>{{ curBuilding }}</p>
+            <p>{{ curBuilding['小区名称'] + curBuilding['楼宇名称'] }}</p>
             <span @click="showBuildingDetail = false">
               返回
               <n-icon size=".09rem">
@@ -58,11 +58,12 @@
                         :key="n"
                         class="icon"
                         size=".1rem"
+                        @click.prevent.stop="selectMember(m)"
                       >
                         <svg-icon :data="member" original />
                       </n-icon>
                     </div>
-                    <p>{{ room.name }}</p>
+                    <p>{{ room['房间号'] }}</p>
                   </div>
                 </div>
               </n-carousel>
@@ -74,14 +75,16 @@
           <div
             v-for="(item, i) in list"
             :key="i"
-            :class="{ on: curBuilding === item }"
+            :class="{
+              on: (curBuilding && curBuilding['楼宇名称']) === item['楼宇名称'],
+            }"
             @click="setBuilding(item)"
           >
             <p>
               <n-icon class="dot" size=".08rem">
                 <svg-icon :data="dot" />
               </n-icon>
-              {{ item }}
+              {{ item['楼宇名称'] }}
             </p>
             <span class="next" @click="buildingNext(item)">
               下一级
@@ -97,97 +100,99 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, PropType, ref } from 'vue'
 import store from '@/store'
 import dot from '@images/dot.svg'
 import { ArrowForward, ArrowBack, ArrowDown } from '@vicons/ionicons5'
 import member from '@images/member.svg'
+import { useFetchRoom, useFetchMember } from '@/hooks/useFetch'
+
+const props = defineProps({
+  list: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  path: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+})
+
 const show = computed(() => store.state.showBuildingDrawer)
-const back = () => store.commit('SET_BUILDING_DRAWER', false)
+const curBuilding = ref<string | null>(null)
+const showBuildingDetail = ref(false)
+
+const back = () => {
+  showBuildingDetail.value = false
+  curBuilding.value = null
+  store.commit('SET_BUILDING_DRAWER', false)
+}
 const closeDrawer = () => {
   back()
   store.commit('SET_FILTER_DRAWER', false)
 }
 
-const curBuilding = ref<string | null>(null)
-const showBuildingDetail = ref(false)
-onMounted(() => (showBuildingDetail.value = false))
-const setBuilding = (name: string) => (curBuilding.value = name)
+const setBuilding = (building: any) => (curBuilding.value = building)
 const floors = ref<any[]>([])
-const buildingNext = (name: string) => {
-  setBuilding(name)
-  floors.value = [
-    {
-      floor: 'XXF',
-      room: 4,
-      member: 3,
-      rooms: [
-        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-      ],
-    },
-    {
-      floor: 'XXF',
-      room: 4,
-      member: 3,
-      rooms: [
-        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-      ],
-    },
-    {
-      floor: 'XXF',
-      room: 4,
-      member: 3,
-      rooms: [
-        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-      ],
-    },
-    {
-      floor: 'XXF',
-      room: 4,
-      member: 3,
-      rooms: [
-        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-      ],
-    },
-    {
-      floor: 'XXF',
-      room: 4,
-      member: 3,
-      rooms: [
-        { name: 'XXX', members: [1, 2, 3, 4, 5, 6] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-        { name: 'XXX', members: [1, 2, 3, 4, 5] },
-      ],
-    },
-  ]
+
+const getMembers = async (data: any) => {
+  return Promise.all(
+    (
+      await useFetchMember({
+        q: `paths @ "所属小区" && string == "${data['所属小区']}", paths @ "所属楼宇"  && string @ "${data['所属楼宇']}",paths @ "所属房间" && string == ${data['房间号']}`,
+      })
+    ).map((item: any) => item.extra),
+  )
+}
+
+const getRooms = async (query: string) => {
+  return Promise.all(
+    (
+      await useFetchRoom({
+        q: query,
+      })
+    ).map(async (item: any) => {
+      return {
+        ...item.extra,
+        members: await getMembers(item.extra),
+      }
+    }),
+  )
+}
+const getFloors = async (data: any) => {
+  return Promise.all(
+    (
+      await useFetchRoom({
+        a: 'id,count',
+        keys: '层数',
+        q: `paths @ "所属小区" && string == "${data['小区名称']}", paths @ "所属楼宇"  string @ "${data['号']}"`,
+      })
+    ).map(async (item: any) => {
+      const rooms = await getRooms(
+        `paths @ "所属小区" && string == "${data['小区名称']}", paths @ "所属楼宇"  && string @ "${data['号']}",paths @ "层数" && number == ${item['层数']}`,
+      )
+      let memberAmount = 0
+      rooms.forEach((item: any) => (memberAmount += item.members.length))
+      return {
+        floor: `${item['层数']}F`,
+        room: item.__aggregate__ || 0,
+        member: memberAmount,
+        rooms,
+      }
+    }),
+  )
+}
+
+const buildingNext = async (building: any) => {
+  floors.value = await getFloors(building)
+  setBuilding(building)
   showBuildingDetail.value = true
-  // TODO
 }
-const list = [
-  'XX小区某1号楼',
-  'XX小区某2号楼',
-  'XX小区某3号楼',
-  'XX小区某4号楼',
-  'XX小区某5号楼',
-]
+
+const selectMember = (data: any) => {
+  console.log('点击了房间成员：', data)
+  // TODO 展示详情
+}
 </script>
 
 <style lang="stylus" scoped>

src/view/components/filter-drawer.vue

@@ -100,7 +100,7 @@
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next" @click="areaNext(item)">
+                <span class="next" @click.stop="areaNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <ArrowForward />
@@ -110,7 +110,7 @@
             </n-tab-pane>
             <n-tab-pane name="居委" tab="居委" class="geo-list">
               <div
-                v-for="(item, i) in list2"
+                v-for="(item, i) in committees"
                 :key="i"
                 :class="{ on: curCommittee === item }"
                 @click="setCommittee(item)"
@@ -121,7 +121,7 @@
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next" @click="committeeNext(item)">
+                <span class="next" @click.stop="committeeNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <ArrowForward />
@@ -131,7 +131,7 @@
             </n-tab-pane>
             <n-tab-pane name="小区" tab="小区" class="geo-list">
               <div
-                v-for="(item, i) in list3"
+                v-for="(item, i) in communities"
                 :key="i"
                 :class="{ on: curCommunity === item }"
                 @click="setCommunity(item)"
@@ -142,7 +142,7 @@
                   </n-icon>
                   {{ item }}
                 </p>
-                <span class="next" @click="communityNext(item)">
+                <span class="next" @click.stop="communityNext(item)">
                   下一级
                   <n-icon class="icon" size=".1rem" color="#dd505E">
                     <ArrowForward />
@@ -155,6 +155,7 @@
       </div>
     </n-drawer-content>
   </n-drawer>
+  <BuildingDrawer :list="buildingList" :path="curPath" />
 </template>
 
 <script lang="ts" setup>
@@ -165,8 +166,12 @@ import {
   useFetchMember,
   useFetchTag,
   useFetchArea,
+  useFetchCommittee,
+  useFetchCommunity,
+  useFetchBuilding,
 } from '@/hooks/useFetch'
 import useExportFile from '@/hooks/useExportFile'
+import BuildingDrawer from './building-drawer.vue'
 import dayjs from '@/util/dayjs'
 import { CaretForward, ArrowBack, ArrowForward } from '@vicons/ionicons5'
 import exportIcon from '@images/export.svg'
@@ -198,35 +203,49 @@ const getMemberTags = async () => {
 }
 
 const areas = ref([])
-const list2 = [
-  '某某居委1',
-  '某某居委2',
-  '某某居委3',
-  '某某居委4',
-  '某某居委5',
-  '某某居委6',
-]
-const list3 = [
-  '某某小区1',
-  '某某小区2',
-  '某某小区3',
-  '某某小区4',
-  '某某小区5',
-  '某某小区6',
-]
+const committees = ref([])
+const communities = ref([])
 const getAreas = async () => {
   areas.value = (
     await useFetchArea({
       a: 'id,count',
       keys: '所属社区',
     })
-  ).map((item: any) => item['所属社区'])
+  )
+    .map((item: any) => item['所属社区'])
+    .filter((item: string) => !!item)
+}
+const getCommittees = async (name?: string) => {
+  const query = name ? `paths @ "所属社区" && string == "${name}"` : undefined
+  committees.value = (
+    await useFetchCommittee({
+      a: 'id,count',
+      keys: '所属居委',
+      q: query,
+    })
+  )
+    .map((item: any) => item['所属居委'])
+    .filter((item: string) => !!item)
+}
+const getCommunities = async (name?: string) => {
+  const query = name ? `paths @ "所属居委" && string == "${name}"` : undefined
+  communities.value = (
+    await useFetchCommunity({
+      a: 'id,count',
+      keys: '居住区名称',
+      q: query,
+    })
+  )
+    .map((item: any) => item['居住区名称'])
+    .filter((item: string) => !!item)
 }
 
 onMounted(() => {
   getOrgTags()
   getMemberTags()
   getAreas()
+  getCommittees()
+  getCommunities()
 })
 
 const getDetail = async (type: string, name: string) => {
@@ -243,13 +262,11 @@ const getDetail = async (type: string, name: string) => {
           dayjs().subtract(59, 'year').format('YYYY-MM-DD'),
           dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
         ]
-        console.log('---', date)
         res = await useFetchMember({
           q: `paths @ "加入中共党组织日期" && string >= "${date[0]}",paths @ "加入中共党组织日期" && string <= "${date[1]}"`,
         })
       } else if (name === '党心暖我心') {
         const date = dayjs().subtract(60, 'year').format('YYYY-MM-DD')
-
         res = await useFetchMember({
           q: `paths @ "加入中共党组织日期" && string <= "${date}"`,
         })
@@ -305,20 +322,49 @@ const curArea = ref<string | null>(null)
 const curCommittee = ref<string | null>(null)
 const curCommunity = ref<string | null>(null)
 const setArea = (name: string) => {
-  curArea.value = name
+  if (curArea.value === name) {
+    curArea.value = null
+  } else {
+    curArea.value = name
+  }
   console.log(name, curArea.value)
 }
-const setCommittee = (name: string) => (curCommittee.value = name)
-const setCommunity = (name: string) => (curCommunity.value = name)
-const areaNext = (name: string) => {
+const setCommittee = (name: string) => {
+  if (curCommittee.value === name) {
+    curCommittee.value = null
+  } else {
+    curCommittee.value = name
+  }
+}
+const setCommunity = (name: string) => {
+  if (curCommunity.value === name) {
+    curCommunity.value = null
+  } else {
+    curCommunity.value = name
+  }
+}
+
+const areaNext = async (name: string) => {
+  await getCommittees(name)
   setArea(name)
   curGeo.value = '居委'
 }
-const committeeNext = (name: string) => {
+const committeeNext = async (name: string) => {
+  await getCommunities(name)
   setCommittee(name)
   curGeo.value = '小区'
 }
-const communityNext = (name: string) => {
+
+const buildingList = ref([])
+const getBuildings = async (name: string) => {
+  buildingList.value = (
+    await useFetchBuilding({
+      q: `paths @ "小区名称" && string == "${name}"`,
+    })
+  ).map((item: any) => item.extra)
+}
+const communityNext = async (name: string) => {
+  await getBuildings(name)
   setCommunity(name)
   store.commit('SET_BUILDING_DRAWER', true)
 }
@@ -334,17 +380,41 @@ const toPreStep = () => {
     return
   }
 }
+
+watch(
+  () => curGeo.value,
+  (cur) => {
+    if (cur === '居委') {
+      if (curArea.value) {
+        getCommittees(curArea.value)
+      } else {
+        getCommittees()
+      }
+    } else if (cur === '小区') {
+      if (curCommittee.value) {
+        getCommunities(curCommittee.value)
+      } else {
+        getCommunities()
+      }
+    }
+  },
+)
 const curPath = computed(() => {
-  let result = ''
-  curArea.value && (result += curArea.value)
-  curArea.value &&
-    (result +=
-      curGeo.value === '社区' ? '' : `/${curCommittee.value || '居委'}`)
-  curCommittee.value &&
-    (result +=
-      curGeo.value === '居委' ? '' : `/${curCommunity.value || '小区'}`)
-  if (!result) return []
-  return result.split('/')
+  if (curGeo.value === '社区') return [curArea.value || '社区']
+  if (curGeo.value === '居委' && !curArea.value)
+    return [curCommittee.value || '居委']
+  if (curGeo.value === '小区' && !curCommittee.value)
+    return [curCommunity.value || '小区']
+
+  const result = []
+  curArea.value && result.push(curArea.value)
+  curCommittee.value
+    ? result.push(curCommittee.value)
+    : curGeo.value === '居委' && result.push('居委')
+  curCommunity.value
+    ? result.push(curCommunity.value)
+    : curGeo.value === '小区' && result.push('小区')
+  return result
 })
 </script>
 

src/view/components/nav-bar.vue

@@ -96,7 +96,6 @@
     @select="handleSelect"
   />
   <FilterDrawer />
-  <BuildingDrawer />
   <ActivityDrawer />
   <StructModal />
 </template>
@@ -109,7 +108,6 @@ import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
 import FilterDrawer from './filter-drawer.vue'
 import ActivityDrawer from './activity-drawer.vue'
-import BuildingDrawer from './building-drawer.vue'
 import StructModal from './struct-modal.vue'
 import nav1 from '@images/nav1.svg'
 import nav2 from '@images/nav2.svg'