对接楼宇接口,居住党员信息接口等

src/components/MyComponent/MyCount/my-count.vue

@@ -44,7 +44,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const endValue = ref(+props.value)
+    const endValue = ref(+props.value || 0)
     const countRef = ref<null | HTMLElement>(null)
     const countUpInstance = ref<CountUp | null>(null)
     const timer = ref<null | number>(null)
@@ -75,7 +75,7 @@ export default defineComponent({
     watch(
       () => props.value,
       (cur) => {
-        endValue.value = +cur
+        endValue.value = +cur || 0
         if (
           countUpInstance.value &&
           typeof countUpInstance.value.update === 'function'

src/store/actions.ts

 import { Commit, Dispatch } from './index'
+import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
+import dayjs from '@/util/dayjs'
+import state from './state'
 
 interface Method {
   commit: Commit
@@ -6,8 +9,176 @@ interface Method {
 }
 
 export default {
-  example({ commit }: Method): void {
-    // DO SOMETHING
-    commit('SET_LOADING', true)
+  async getBasicInfo({ commit }: Method, query?: string) {
+    commit('SET_BASIC_INFO', {
+      sum: await getSum(query),
+      member: await getMember(query),
+      organization: await getOrganization(query),
+      age: await getAge(query),
+    })
+    commit('SET_FILTER_PATH', query)
   },
 }
+
+async function getSum(query?: string) {
+  if (query && query.includes('所属小区')) {
+    let communityQuery = query.split(',').find((e) => e.includes('所属小区'))
+    if (query.includes('所属楼宇')) {
+      communityQuery = [
+        communityQuery,
+        query.split(',').find((e) => e.includes('所属楼宇')),
+      ].join(',')
+    }
+    const member1 =
+      (
+        await useFetchMember({
+          a: 'id,count',
+          q: `${communityQuery},paths @ "党员身份" && string == "正式党员"`,
+        })
+      )?.[0]?.__aggregate__ || 0
+    const member2 =
+      (
+        await useFetchMember({
+          a: 'id,count',
+          q: `${communityQuery},paths @ "党员身份" && string == "预备党员"`,
+        })
+      )?.[0]?.__aggregate__ || 0
+    return [
+      {
+        name: query.includes('所属楼宇') ? '楼内党员总数' : '居住在该小区党员',
+        value: member1 + member2,
+        unit: '位',
+      },
+      { name: '正式党员', value: member1, unit: '位' },
+      { name: '预备党员', value: member2, unit: '位' },
+    ]
+  }
+  const orgNum =
+    (
+      await useFetchOrg({
+        a: 'id,count',
+        keys: '是否虚拟组织',
+        q: query,
+      })
+    )?.find((e: any) => !e['是否虚拟组织'])?.__aggregate__ || 0
+  const member = await useFetchMember({
+    a: 'id,count',
+    keys: '是否居住在花木街道',
+    q: query,
+  })
+  const inHuamu =
+    member?.find((e: any) => e['是否居住在花木街道'])?.__aggregate__ || 0
+  const notInHuamu =
+    member?.find((e: any) => !e['是否居住在花木街道'])?.__aggregate__ || 0
+
+  return [
+    { name: '党组织', value: orgNum, unit: '个' },
+    { name: '关系在街道内党员', value: inHuamu + notInHuamu, unit: '位' },
+    { name: '街道居民党员', value: inHuamu, unit: '位' },
+  ]
+}
+
+async function getMember(query?: string) {
+  const result = { ...state.basicInfo.member }
+  const res = await useFetchMember({
+    a: 'id,count',
+    keys: '党员类型',
+    q: query,
+  })
+  const total = res.reduce(
+    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
+    0,
+  )
+  result.source.forEach((item) => {
+    const value =
+      res.find((e: any) => item.name === e['党员类型'])?.__aggregate__ || 0
+    item.value = value
+    item.ratio = (value / total) * 100
+  })
+  return result
+}
+
+async function getOrganization(query?: string) {
+  const result = { ...state.basicInfo.organization }
+  if (query && query.includes('所属小区')) {
+    result.source = []
+    return result
+  }
+  result.source = [
+    { name: '党委', value: 0, ratio: 0 },
+    { name: '党总支', value: 0, ratio: 0 },
+    { name: '党支部', value: 0, ratio: 0 },
+    { name: '联合党支部', value: 0, ratio: 0 },
+  ]
+  const res = (
+    await useFetchOrg({
+      a: 'id,count',
+      keys: '等级',
+      q: query,
+    })
+  )?.filter((e: any) => result.source.some((n) => n.name === e['等级']))
+  const total = res.reduce(
+    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
+    0,
+  )
+  result.source.forEach((item) => {
+    const value =
+      res.find((e: any) => item.name === e['等级'])?.__aggregate__ || 0
+    item.value = value
+    item.ratio = (value / total) * 100
+  })
+  return result
+}
+
+async function getAge(query?: string) {
+  const result = { ...state.basicInfo.age }
+  const source = [
+    {
+      name: '18-25岁',
+      range: [
+        dayjs().subtract(25, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(18, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '26-35岁',
+      range: [
+        dayjs().subtract(35, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(26, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '36-50岁',
+      range: [
+        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(36, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '50-70岁',
+      range: [
+        dayjs().subtract(70, 'year').format('YYYY-MM-DD'),
+        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
+      ],
+    },
+    {
+      name: '70岁以上',
+      range: [null, dayjs().subtract(71, 'year').format('YYYY-MM-DD')],
+    },
+  ]
+  const res = await Promise.all(
+    source.map(({ range }) => {
+      const ageQuery = range[0]
+        ? `paths @ "出生日期" && string >= "${range[0]}",paths @ "出生日期" && string <= "${range[1]}"`
+        : `paths @ "出生日期" && string <= "${range[1]}"`
+      return useFetchMember({
+        a: 'id,count',
+        q: query ? `${ageQuery},${query}` : ageQuery,
+      })
+    }),
+  )
+  result.source.forEach(
+    (item, i) => (item.value = res[i]?.[0].__aggregate__ || 0),
+  )
+  return result
+}

src/store/mutations.ts

 import { GlobalStateProps } from './index'
 
+type BasicInfo = Pick<GlobalStateProps, 'basicInfo'>['basicInfo']
+
 export default {
   SET_LOADING(state: GlobalStateProps, val: boolean) {
     state.showLoading = val
@@ -25,4 +27,10 @@ export default {
   SET_STRUCT_MODAL(state: GlobalStateProps, val: boolean) {
     state.showStructModal = val
   },
+  SET_BASIC_INFO(state: GlobalStateProps, data: BasicInfo) {
+    state.basicInfo = data
+  },
+  SET_FILTER_PATH(state: GlobalStateProps, val: string) {
+    state.filterPath = val
+  },
 }

src/store/state.ts

@@ -7,4 +7,48 @@ export default {
   showBuildingDrawer: false,
   showActivityListModal: false,
   showStructModal: false,
+  basicInfo: {
+    sum: [
+      { name: '党组织', value: 0, unit: '个' },
+      { name: '关系在街道内党员', value: 0, unit: '位' },
+      { name: '街道居民党员', value: 0, unit: '位' },
+    ],
+    member: {
+      dimensions: [
+        { name: 'name', displayName: '类型' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        { name: '机关事业单位党员', value: 0, ratio: 0 },
+        { name: '居民区党员', value: 0, ratio: 0 },
+        { name: '两新党员', value: 0, ratio: 0 },
+      ],
+    },
+    organization: {
+      dimensions: [
+        { name: 'name', displayName: '类型' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        { name: '党委', value: 0, ratio: 0 },
+        { name: '党总支', value: 0, ratio: 0 },
+        { name: '党支部', value: 0, ratio: 0 },
+        { name: '联合党支部', value: 0, ratio: 0 },
+      ],
+    },
+    age: {
+      dimensions: [
+        { name: 'name', displayName: '年龄' },
+        { name: 'value', displayName: '数量' },
+      ],
+      source: [
+        { name: '18-25岁', value: 0 },
+        { name: '26-35岁', value: 0 },
+        { name: '36-50岁', value: 0 },
+        { name: '50-70岁', value: 0 },
+        { name: '70岁以上', value: 0 },
+      ],
+    },
+  },
+  filterPath: '', // 地理筛选路径
 }

src/util/dayjs.ts

 import dayjs from 'dayjs'
 import ch from 'dayjs/locale/zh-cn'
 import LocalizedFormat from 'dayjs/plugin/LocalizedFormat'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
 dayjs.extend(LocalizedFormat)
+dayjs.extend(relativeTime)
 dayjs.locale(ch)
 
 export default dayjs

src/util/tags.ts

 export const member = [
-  { name: '荣获区级奖项党员', type: 'primary' },
-  { name: '荣获市级及以上奖项党员', type: 'info' },
+  { name: '荣获区级奖项', type: 'primary' },
+  { name: '荣获市级及以上奖项', type: 'info' },
   { name: '光荣在当党50年', type: 'success' },
-  { name: '党心暖我新', type: 'warning' },
+  { name: '党心暖我心', type: 'warning' },
 ]
 
 export const organization = [
   { name: '荣获区级奖项党组织', type: 'primary' },
   { name: '荣获市级及以上奖项党组织', type: 'info' },
   { name: '光荣在当党50年', type: 'success' },
-  { name: '党心暖我新', type: 'warning' },
+  { name: '党心暖我心', type: 'warning' },
 ]
 export const activity = [
   { name: '支部党员大会', type: 'primary' },

src/view/components/basic-info.vue

@@ -13,9 +13,14 @@
           </n-icon>
         </template>
         <n-collapse-item name="1">
-          <div class="info-wrapper">
+          <div
+            class="info-wrapper"
+            :class="{
+              short: organization.source.length === 0,
+            }"
+          >
             <div class="sum">
-              <div v-for="item in sumList" :key="item.name">
+              <div v-for="item in sum" :key="item.name">
                 <p>
                   <m-count class="count" :value="item.value" />
                   <span>{{ item.unit }}</span>
@@ -27,39 +32,46 @@
               <p class="title">关系在街道党员分类</p>
               <div class="content">
                 <div class="pie">
-                  <m-pie :option="pieOption" :dataset="data1" />
+                  <m-pie :option="pieOption" :dataset="member" />
                 </div>
                 <div>
-                  <div v-for="(item, i) in data1.source" :key="item.name">
+                  <div v-for="(item, i) in member.source" :key="item.name">
                     <p>
                       <i class="dot" :style="`background:${color1[i]}`" />
                       {{ item.name }}
                     </p>
                     <p>
-                      <span><m-count :value="item.ratio" /> %</span>
+                      <span>
+                        <m-count :value="item.ratio" :decimal="1" /> %
+                      </span>
                       <span><m-count :value="item.value" /> 位</span>
                     </p>
                   </div>
                 </div>
               </div>
             </div>
-            <div class="box">
+            <div v-show="organization.source.length > 0" class="box">
               <p class="title">党组织分类</p>
               <div class="content">
                 <div class="pie">
                   <m-pie
                     :option="{ ...pieOption, color: color2 }"
-                    :dataset="data2"
+                    :dataset="organization"
                   />
                 </div>
                 <div>
-                  <div v-for="(item, i) in data2.source" :key="item.name">
+                  <div
+                    v-for="(item, i) in organization.source"
+                    :key="item.name"
+                  >
                     <p>
                       <i class="dot" :style="`background:${color2[i]}`" />
                       {{ item.name }}
                     </p>
                     <p>
-                      <span><m-count :value="item.ratio" /> %</span>
+                      <span>
+                        <m-count :value="item.ratio" :decimal="1" /> %
+                      </span>
                       <span><m-count :value="item.value" /> 个</span>
                     </p>
                   </div>
@@ -69,7 +81,7 @@
             <div class="box">
               <p class="title">关系在街道党员年龄分布</p>
               <div class="content">
-                <m-line :option="lineOption" :dataset="data3" />
+                <m-line :option="lineOption" :dataset="age" />
               </div>
             </div>
           </div>
@@ -95,9 +107,8 @@
 import { ChartTypes } from '@/components/MyComponent'
 import { ref, PropType, computed, onMounted } from 'vue'
 import { CaretForward } from '@vicons/ionicons5'
-import { useFetchOrg, useFetchMember } from '@/hooks/useFetch'
+import { useFetchOrg } from '@/hooks/useFetch'
 import store from '@/store'
-import dayjs from '@/util/dayjs'
 
 const show = computed(() => store.state.showBasicInfo)
 const props = defineProps({
@@ -108,35 +119,10 @@ const props = defineProps({
 })
 
 const visible = computed(() => props.visible)
-
-const sumList = ref([
-  { name: '党组织', value: 0, unit: '个' },
-  { name: '关系在街道内党员', value: 0, unit: '位' },
-  { name: '街道居民党员', value: 0, unit: '位' },
-])
-const getSumList = async () => {
-  const orgNum =
-    (
-      await useFetchOrg({
-        a: 'id,count',
-        keys: '是否虚拟组织',
-      })
-    )?.find((e: any) => !e['是否虚拟组织'])?.__aggregate__ || 0
-  const member = await useFetchMember({
-    a: 'id,count',
-    keys: '是否居住在花木街道',
-  })
-  const inHuamu =
-    member?.find((e: any) => e['是否居住在花木街道'])?.__aggregate__ || 0
-  const notInHuamu =
-    member?.find((e: any) => !e['是否居住在花木街道'])?.__aggregate__ || 0
-
-  sumList.value = [
-    { name: '党组织', value: orgNum, unit: '个' },
-    { name: '关系在街道内党员', value: inHuamu + notInHuamu, unit: '位' },
-    { name: '街道居民党员', value: inHuamu, unit: '位' },
-  ]
-}
+const sum = computed(() => store.state.basicInfo.sum)
+const member = computed(() => store.state.basicInfo.member)
+const organization = computed(() => store.state.basicInfo.organization)
+const age = computed(() => store.state.basicInfo.age)
 
 const color1 = ['#FAADB8', '#C1474F', '#6D2C29']
 const color2 = ['#FAADB8', '#DD505E', '#A53D40', '#6D2C29']
@@ -164,7 +150,7 @@ const lineOption: ChartTypes.LineOption = {
   yAxis: [
     {
       type: 'value',
-      // minInterval: 100,
+      minInterval: 1,
       // maxInterval: 100,
       // interval: 100,
       splitLine: {
@@ -194,129 +180,8 @@ const lineOption: ChartTypes.LineOption = {
     },
   ],
 }
-
-const data1 = ref({
-  dimensions: [
-    { name: 'name', displayName: '类型' },
-    { name: 'value', displayName: '数量' },
-  ],
-  source: [],
-})
-const getData1 = async () => {
-  const res = await useFetchMember({
-    a: 'id,count',
-    keys: '党员类型',
-  })
-  const total = res.reduce(
-    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
-    0,
-  )
-  data1.value.source = res.map((item: any) => ({
-    name: item['党员类型'],
-    value: item.__aggregate__ || 0,
-    ratio: Math.round(((item.__aggregate__ || 0) / total) * 100 || 0),
-  }))
-}
-
-const data2 = ref({
-  dimensions: [
-    { name: 'name', displayName: '类型' },
-    { name: 'value', displayName: '数量' },
-  ],
-  source: [
-    { name: '党委', value: 0, ratio: 0 },
-    { name: '党总支', value: 0, ratio: 0 },
-    { name: '党支部', value: 0, ratio: 0 },
-    { name: '联合党支部', value: 0, ratio: 0 },
-  ],
-})
-const getData2 = async () => {
-  const res = (
-    await useFetchOrg({
-      a: 'id,count',
-      keys: '等级',
-    })
-  )?.filter((e: any) => data2.value.source.some((n) => n.name === e['等级']))
-  const total = res.reduce(
-    (acc: number, cur: any) => acc + (cur.__aggregate__ || 0),
-    0,
-  )
-  data2.value.source.forEach((item) => {
-    const value =
-      res.find((e: any) => item.name === e['等级'])?.__aggregate__ || 0
-    item.value = value
-    item.ratio = Math.round((value / total) * 100)
-  })
-}
-
-const data3 = ref({
-  dimensions: [
-    { name: 'name', displayName: '年龄' },
-    { name: 'value', displayName: '数量' },
-  ],
-  source: [
-    { name: '18-25岁', value: 0 },
-    { name: '26-35岁', value: 0 },
-    { name: '36-50岁', value: 0 },
-    { name: '50-70岁', value: 0 },
-    { name: '70岁以上', value: 0 },
-  ],
-})
-const getData3 = async () => {
-  const source = [
-    {
-      name: '18-25岁',
-      range: [
-        dayjs().subtract(25, 'year').format('YYYY-MM-DD'),
-        dayjs().subtract(18, 'year').format('YYYY-MM-DD'),
-      ],
-    },
-    {
-      name: '26-35岁',
-      range: [
-        dayjs().subtract(35, 'year').format('YYYY-MM-DD'),
-        dayjs().subtract(26, 'year').format('YYYY-MM-DD'),
-      ],
-    },
-    {
-      name: '36-50岁',
-      range: [
-        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
-        dayjs().subtract(36, 'year').format('YYYY-MM-DD'),
-      ],
-    },
-    {
-      name: '50-70岁',
-      range: [
-        dayjs().subtract(70, 'year').format('YYYY-MM-DD'),
-        dayjs().subtract(50, 'year').format('YYYY-MM-DD'),
-      ],
-    },
-    {
-      name: '70岁以上',
-      range: [null, dayjs().subtract(71, 'year').format('YYYY-MM-DD')],
-    },
-  ]
-  const res = await Promise.all(
-    source.map(({ range }) =>
-      useFetchMember({
-        a: 'id,count',
-        q: range[0]
-          ? `paths @ "出生日期" && string >= "${range[0]}",paths @ "出生日期" && string <= "${range[1]}"`
-          : `paths @ "出生日期" && string <= "${range[1]}"`,
-      }),
-    ),
-  )
-  data3.value.source.forEach(
-    (item, i) => (item.value = res[i]?.[0].__aggregate__ || 0),
-  )
-}
-
 onMounted(() => {
-  getSumList()
-  getData1()
-  getData2()
-  getData3()
+  store.dispatch('getBasicInfo')
 })
 
 const curTagKey = ref<string | null>(null)
@@ -358,6 +223,9 @@ const clickTag = async (key: string) => {
     padding .03rem .08rem
     display flex
     flex-direction column
+    transition height .2s ease-in-out
+    &.short
+      height 60vh
     .sum
       display flex
       justify-content space-between

src/view/components/building-drawer.vue

@@ -19,8 +19,8 @@
         <p class="name">{{ path.join('') }}</p>
         <div v-if="showBuildingDetail" class="building">
           <div class="nav">
-            <p :title="curBuilding['小区名称'] + curBuilding['楼宇名称']">
-              {{ curBuilding['小区名称'] + curBuilding['楼宇名称'] }}
+            <p :title="curBuilding['楼宇名称']">
+              {{ curBuilding['楼宇名称'] }}
             </p>
             <span @click="showBuildingDetail = false">
               返回
@@ -55,15 +55,21 @@
                     class="room"
                   >
                     <div class="members">
-                      <n-icon
+                      <n-popover
                         v-for="(m, n) in room.members"
                         :key="n"
-                        class="icon"
-                        size=".1rem"
-                        @click.prevent.stop="selectMember(m)"
+                        class="member-info-popover"
+                        placement="left"
+                        flip
+                        trigger="click"
                       >
-                        <svg-icon :data="member" original />
-                      </n-icon>
+                        <template #trigger>
+                          <n-icon class="icon" size=".1rem">
+                            <svg-icon :data="member" original />
+                          </n-icon>
+                        </template>
+                        <MemberInfo :data="m" />
+                      </n-popover>
                     </div>
                     <p>{{ room['房间号'] }}</p>
                   </div>
@@ -88,7 +94,7 @@
               </n-icon>
               {{ item['楼宇名称'] }}
             </p>
-            <span class="next" @click="buildingNext(item)">
+            <span class="next" @click.prevent.stop="buildingNext(item)">
               下一级
               <n-icon class="icon" size=".1rem" color="#dd505E">
                 <ArrowForward />
@@ -108,6 +114,7 @@ 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'
+import MemberInfo from './member-info.vue'
 
 const props = defineProps({
   list: {
@@ -118,23 +125,53 @@ const props = defineProps({
     type: Array as PropType<any[]>,
     default: () => [],
   },
+  resetInfo: {
+    type: Function as PropType<() => any>,
+    default: null,
+  },
 })
 
 const show = computed(() => store.state.showBuildingDrawer)
-const curBuilding = ref<string | null>(null)
+const curBuilding = ref<any>(null)
 const showBuildingDetail = ref(false)
 
 const back = () => {
+  props.resetInfo && props.resetInfo()
   showBuildingDetail.value = false
   curBuilding.value = null
   store.commit('SET_BUILDING_DRAWER', false)
 }
 const closeDrawer = () => {
   back()
+  store.dispatch('getBasicInfo')
   store.commit('SET_FILTER_DRAWER', false)
+  // TODO 清除撒点
 }
 
-const setBuilding = (building: any) => (curBuilding.value = building)
+const setBuilding = (building: any, causedByNext?: boolean) => {
+  let query = store.state.filterPath
+  const buildingQuery = `paths @ "所属楼宇" && string @ "${building['号']}"`
+  if (
+    (curBuilding.value && curBuilding.value['楼宇名称']) ===
+      (building && building['楼宇名称']) &&
+    !causedByNext
+  ) {
+    curBuilding.value = null
+    query = query.replace(',' + buildingQuery, '')
+  } else {
+    if (query.includes('所属楼宇')) {
+      const arr = query.split(',')
+      const index = arr.findIndex((e) => e.includes('所属楼宇'))
+      arr.splice(index, 1, buildingQuery)
+      query = arr.join(',')
+    } else {
+      query += ',' + buildingQuery
+    }
+    curBuilding.value = building
+  }
+  store.dispatch('getBasicInfo', query)
+  // TODO 地图切换楼宇画面
+}
 const floors = ref<any[]>([])
 
 const getMembers = async (data: any) => {
@@ -194,14 +231,9 @@ const getFloors = async (data: any) => {
 
 const buildingNext = async (building: any) => {
   floors.value = await getFloors(building)
-  setBuilding(building)
+  setBuilding(building, true)
   showBuildingDetail.value = true
 }
-
-const selectMember = (data: any) => {
-  console.log('点击了房间成员：', data)
-  // TODO 展示详情
-}
 </script>
 
 <style lang="stylus" scoped>
@@ -312,7 +344,7 @@ const selectMember = (data: any) => {
             height .4rem
             box-sizing border-box
             overflow hidden
-            >.icon
+            .icon
               padding .04rem
               cursor pointer
               &:hover
@@ -330,9 +362,16 @@ const selectMember = (data: any) => {
       height @width
       color $red
       &.n-carousel__arrow--left
-        left -0.02rem
+        left -0.01rem
       &.n-carousel__arrow--right
-        right -0.02rem
+        right -0.01rem
     .n-carousel__dots
       display none
+.member-info-popover
+  // width 2.8rem
+  // min-height 3rem
+  // max-height 4rem
+  // overflow hidden
+  background rgba(249, 250, 250, 0.9) !important
+  $blur()
 </style>

src/view/components/filter-drawer.vue

@@ -157,7 +157,11 @@
       </div>
     </n-drawer-content>
   </n-drawer>
-  <BuildingDrawer :list="buildingList" :path="curPath" />
+  <BuildingDrawer
+    :list="buildingList"
+    :path="curPath"
+    :reset-info="checkPathThenFetchInfo"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -180,7 +184,11 @@ import exportIcon from '@images/export.svg'
 import dot from '@images/dot.svg'
 
 const show = computed(() => store.state.showFilterDrawer)
-const close = () => store.commit('SET_FILTER_DRAWER', false)
+const close = () => {
+  store.dispatch('getBasicInfo')
+  store.commit('SET_FILTER_DRAWER', false)
+  // TODO 清除撒点
+}
 
 const curTab = ref('tag')
 
@@ -322,23 +330,22 @@ const curGeo = ref('社区')
 const curArea = ref<string | null>(null)
 const curCommittee = ref<string | null>(null)
 const curCommunity = ref<string | null>(null)
-const setArea = (name: string) => {
-  if (curArea.value === name) {
+const setArea = (name: string, causedByNext?: boolean) => {
+  if (curArea.value === name && !causedByNext) {
     curArea.value = null
   } else {
     curArea.value = name
   }
-  console.log(name, curArea.value)
 }
-const setCommittee = (name: string) => {
-  if (curCommittee.value === name) {
+const setCommittee = (name: string, causedByNext?: boolean) => {
+  if (curCommittee.value === name && !causedByNext) {
     curCommittee.value = null
   } else {
     curCommittee.value = name
   }
 }
-const setCommunity = (name: string) => {
-  if (curCommunity.value === name) {
+const setCommunity = (name: string, causedByNext?: boolean) => {
+  if (curCommunity.value === name && !causedByNext) {
     curCommunity.value = null
   } else {
     curCommunity.value = name
@@ -347,12 +354,12 @@ const setCommunity = (name: string) => {
 
 const areaNext = async (name: string) => {
   await getCommittees(name)
-  setArea(name)
+  setArea(name, true)
   curGeo.value = '居委'
 }
 const committeeNext = async (name: string) => {
   await getCommunities(name)
-  setCommittee(name)
+  setCommittee(name, true)
   curGeo.value = '小区'
 }
 
@@ -366,7 +373,7 @@ const getBuildings = async (name: string) => {
 }
 const communityNext = async (name: string) => {
   await getBuildings(name)
-  setCommunity(name)
+  setCommunity(name, true)
   store.commit('SET_BUILDING_DRAWER', true)
 }
 const toPreStep = () => {
@@ -385,21 +392,28 @@ const toPreStep = () => {
 watch(
   () => curGeo.value,
   (cur) => {
+    if (cur === '社区') {
+      curCommittee.value = null
+      curCommunity.value = null
+    }
     if (cur === '居委') {
       if (curArea.value) {
         getCommittees(curArea.value)
       } else {
         getCommittees()
       }
+      curCommunity.value = null
     } else if (cur === '小区') {
       if (curCommittee.value) {
         getCommunities(curCommittee.value)
       } else {
+        curArea.value = null
         getCommunities()
       }
     }
   },
 )
+
 const curPath = computed(() => {
   if (curGeo.value === '社区') return [curArea.value || '社区']
   if (curGeo.value === '居委' && !curArea.value)
@@ -417,6 +431,25 @@ const curPath = computed(() => {
     : curGeo.value === '小区' && result.push('小区')
   return result
 })
+
+const checkPathThenFetchInfo = () => {
+  const area = curArea.value
+  const committee = curCommittee.value
+  const community = curCommunity.value
+  const query = []
+  area && query.push(`paths @ "所属社区" && string == "${area}"`)
+  committee && query.push(`paths @ "所属居委" && string == "${committee}"`)
+  community && query.push(`paths @ "所属小区" && string == "${community}"`)
+  store.dispatch('getBasicInfo', query.length > 0 ? query.join(',') : undefined)
+}
+
+watch(
+  [() => curArea.value, () => curCommittee.value, () => curCommunity.value],
+  () => {
+    checkPathThenFetchInfo()
+    // TODO 地图框出边界并撒点
+  },
+)
 </script>
 
 <style lang="stylus" scoped>

src/view/components/member-info.vue

+<template>
+  <div class="info">
+    <p class="title">{{ data['姓名'] }}</p>
+    <n-space v-show="tags && tags.length > 0">
+      <n-tag v-for="tag in tags" :key="tag.type" :type="tag.type" size="small">
+        {{ tag.name }}
+      </n-tag>
+    </n-space>
+    <p>{{ data['所属党组织名称'] }}</p>
+    <div class="box flex">
+      <div>
+        <span>性别</span>
+        <p>{{ data['性别'] }}</p>
+      </div>
+      <div>
+        <span>出生日期</span>
+        <p>{{ dayjs(data['出生日期']).format('ll') }}</p>
+      </div>
+      <div>
+        <span>学历</span>
+        <p>{{ data['学历'] }}</p>
+      </div>
+      <div>
+        <span>党员身份</span>
+        <p>{{ data['党员身份'] }}</p>
+      </div>
+      <div>
+        <span>入党日期</span>
+        <p>{{ dayjs(data['加入中共党组织日期']).format('ll') }}</p>
+      </div>
+    </div>
+    <div class="box">
+      <div>
+        <span>身份证号码</span>
+        <p>{{ trans(data['身份证号码']) }}</p>
+      </div>
+      <div>
+        <span>居住地址</span>
+        <p>{{ data['所属小区'] + data['所属楼宇'] + data['所属房间'] }}</p>
+      </div>
+      <div>
+        <span>联系电话</span>
+        <p>{{ trans(data['联系方式_手机']) }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { organization } from '@/util/tags'
+import dayjs from '@/util/dayjs'
+import { computed, PropType } from '@vue/runtime-core'
+import { member } from '@/util/tags'
+const props = defineProps({
+  data: {
+    type: Object as PropType<{ [key: string]: any }>,
+    required: true,
+  },
+})
+const trans = (val: string) => {
+  return (val && val.replace(/(\w{3})\w*(\w{4})/, '$1******$2')) || '无'
+}
+console.log(dayjs().diff('1999-09-12', 'year'))
+const tags = computed(() => {
+  const result: { type?: string; name?: string }[] = []
+  const marker: string[] = props.data['标签'] || []
+  const date = props.data['加入中共党组织日期']
+
+  if (dayjs().diff(date, 'year') >= 50 && dayjs().diff(date, 'year') <= 59) {
+    marker.push('光荣在当党50年')
+  } else if (dayjs().diff(date, 'year') >= 60) {
+    marker.push('党心暖我心')
+  }
+  if (marker.length > 0) {
+    marker.forEach((item: string) => {
+      const cur = member.find((e) => e.name === item)
+      cur &&
+        result.push({
+          type: cur.type,
+          name: item,
+        })
+    })
+  }
+  return result
+})
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.info
+  border-radius .04rem
+  box-sizing border-box
+  .title
+    font-size .13rem
+    font-family $font-ping-medium
+    margin-bottom .04rem
+  .box
+    background $white-bg
+    border-radius .03rem
+    margin-top .05rem
+    box-sizing border-box
+    padding .1rem
+    min-width .3rem
+    &.flex
+      display flex
+      flex-wrap wrap
+      >div
+        &:nth-of-type(1)
+        &:nth-of-type(4)
+          width 25%
+        &:nth-of-type(2)
+        &:nth-of-type(5)
+          width 42%
+    span
+      color $gray
+    p
+      margin-bottom .03rem
+      font-family $font-ping-medium
+      white-space nowrap
+</style>

src/view/main.vue

@@ -6,8 +6,8 @@
       <svg-icon :data="reset" original />
     </n-icon>
   </div>
-  <!-- <InforModal class="fix1" /> -->
-  <ActivityDetail class="fix1" />
+  <InforModal class="fix1" />
+  <!-- <ActivityDetail class="fix1" /> -->
   <ListModal class="fix2" pagination />
 </template>