地图点击楼栋直接展示楼宇侧边栏,活动详情弹窗增加下载人员名单功能

package.json

@@ -6,7 +6,7 @@
   "author": "GuoMingyao",
   "private": true,
   "scripts": {
-    "dev": "vue-tsc --noEmit && vite",
+    "dev": "vite",
     "start": "npm run dev",
     "build": "vue-tsc --noEmit && vite build --mode production",
     "build:sit": "vue-tsc --noEmit && vite build --mode sit",

src/ajax/api.ts

@@ -4,18 +4,18 @@ let BASE_URL: string = ''
 let MAP_CONFIG: { jsApiUrl: string; cssUrl: string } = {
   jsApiUrl: '',
   cssUrl: '',
-};
+}
 
-let TOKEN = getCookie("__DM_TOKEN__");
-let mdtUser = getCookie("__DM_MDT_USER__");
-let imperToken = getCookie("__DM_IMPER_TOKEN__");
-let imperMdtUser = getCookie("__DM_IMPER_MDT_USER__");
+const TOKEN = getCookie('__DM_TOKEN__')
+const mdtUser = getCookie('__DM_MDT_USER__')
+const imperToken = getCookie('__DM_IMPER_TOKEN__')
+const imperMdtUser = getCookie('__DM_IMPER_MDT_USER__')
 
 switch (process.env.NODE_ENV) {
   case 'production':
     BASE_URL = 'https://www.maicedata.com/collector/data/' // 生产环境
 
-//    TOKEN = getToken()
+    //    TOKEN = getToken()
     MAP_CONFIG = {
       jsApiUrl: 'http://10.108.3.48/api418/arcgis_js_api/library/4.18/init.js',
       cssUrl:
@@ -24,8 +24,7 @@ switch (process.env.NODE_ENV) {
     break
   case 'sit':
     BASE_URL = 'https://survey.maicedata.com/api/data/' // 测试环境（暂时部署在测绘院用）
-//    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
-  
+    // TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
     MAP_CONFIG = {
       jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
       cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
@@ -33,9 +32,7 @@ switch (process.env.NODE_ENV) {
     break
   default:
     BASE_URL = '/api' // vite.config 代理 https://survey.maicedata.com/api/data/
-//    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
-    
-  
+    // TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
     MAP_CONFIG = {
       jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
       cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',

src/hooks/useInitMap.ts

@@ -9,6 +9,7 @@ import {
   transActivityHtml,
 } from '@/util/data2html'
 import { api } from '@/ajax'
+import store from '@/store'
 
 export default async function useInitMap(el: HTMLElement, camera: any) {
   const config = api.MAP_CONFIG
@@ -236,6 +237,9 @@ function addEventListener() {
                 html = transOrgHtml(data)
               } else if (data?.isList) {
                 html = transListHtml(data)
+              } else if (data?.NAME) {
+                if (!data.NAME) return
+                store.dispatch('getBuildingDetail', data.NAME)
               }
 
               if (!html) return

src/store/actions.ts

@@ -6,6 +6,8 @@ import {
   useFetchUser,
   useFetchOrgAuth,
   useFetchMenus,
+  useFetchBuilding,
+  useFetchRoom,
 } from '@/hooks/useFetch'
 import dayjs from '@/util/dayjs'
 import state from './state'
@@ -102,6 +104,27 @@ export default {
     })
     commit('SET_MENUS', result)
   },
+
+  /** 地图直接点击楼栋获取数据 */
+  async getBuildingDetail({ commit }: Method, id: string) {
+    if (state.showFilterDrawer) return
+    commit('SET_SHOW_BUILDING_DETAIL', false)
+    commit('SET_LOADING', true)
+    const building =
+      (
+        await useFetchBuilding({
+          q: `paths @ "OBJECTID" && string == "${id}"`,
+        })
+      )?.[0]?.extra || null
+    if (!building) {
+      commit('SET_LOADING', false)
+      return
+    }
+    const floors = await getFloors(building)
+    commit('SET_BUILDING_DETAIL', { building, floors })
+    commit('SET_SHOW_BUILDING_DETAIL', true)
+    commit('SET_LOADING', false)
+  },
 }
 
 async function getSum(query?: string) {
@@ -266,3 +289,50 @@ async function getAge(query?: string) {
   )
   return result
 }
+
+async function getFloors(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,
+      }
+    }),
+  )
+}
+async function getRooms(query: string) {
+  return Promise.all(
+    (
+      await useFetchRoom({
+        q: query,
+      })
+    ).map(async (item: any) => {
+      return {
+        ...item.extra,
+        members: await getMembers(item.extra),
+      }
+    }),
+  )
+}
+async function getMembers(data: any) {
+  return Promise.all(
+    (
+      await useFetchMember({
+        q: `paths @ "所属小区" && string == "${data['所属小区']}", paths @ "所属楼宇"  && string @ "${data['所属楼宇']}",paths @ "所属房间" && string == ${data['房间号']}`,
+      })
+    ).map((item: any) => item.extra),
+  )
+}

src/store/mutations.ts

@@ -48,4 +48,16 @@ export default {
   SET_MAP_POINTS(state: GlobalStateProps, data: any[] = []) {
     state.mapPoints = data
   },
+  SET_SHOW_BUILDING_DETAIL(state: GlobalStateProps, val: boolean) {
+    state.showBuildingDetail = val
+  },
+  SET_BUILDING_DETAIL(
+    state: GlobalStateProps,
+    data: {
+      building: any
+      floors: any[]
+    },
+  ) {
+    state.buildingDetail = data
+  },
 }

src/store/state.ts

@@ -60,4 +60,9 @@ export default {
   filterPath: '', // 地理筛选路径
   mapPoints: [{}],
   menus: [] as { key: string; name: string; children?: any[] }[],
+  showBuildingDetail: false,
+  buildingDetail: { building: {}, floors: [] } as {
+    building: any
+    floors: any[]
+  },
 }

src/util/clientLayersOperate.ts

@@ -25,6 +25,7 @@ export default {
 
     let clientOperateLayer
     const geometryType = 'point'
+    console.log('落点数据', Parameters.result)
     const graphicSource = Parameters.result.map((item: any) => {
       const point = new Point({
         x: item['上海2000经度'],
@@ -39,7 +40,6 @@ export default {
         },
       })
     })
-
     const renderer = {
       type: 'simple', // autocasts as new SimpleRenderer()
       symbol: {

src/util/data2html.ts

 import { organization, member } from '@/util/tags'
 import switchOrgLevel from '@/util/switchOrgLevel'
 import dayjs from 'dayjs'
-// import useExportXlsx from '@/hooks/useExportXlsx'
 
 const trans = (val: string) => {
   if (!val) return '无'
@@ -135,6 +134,21 @@ const style = `
   .pop-container .wrapper > .item span {
     color: rgba(0,0,0,.6);
   }
+  .export-btn {
+    text-align: center;
+    color: #fff;
+    background: #dd505E;
+    border-radius: .04rem;
+    padding: .05rem .1rem;
+    margin: .05rem auto;
+    box-shadow: 0 0 0.01rem 0 rgb(0 0 0 / 30%);
+    display: inline-block;
+    white-space: nowrap;
+    text-decoration: none;
+  }
+  .export-btn:hover{
+    opacity: 0.8;
+  }
 </style>
 `
 const getOrgTags = (tags: string) => {
@@ -258,46 +272,26 @@ export const transMemberHtml = (data: any) => {
 }
 
 export const transActivityHtml = (data: any) => {
-  // const mock = [
-  //   {
-  //     出席率: 67,
-  //     标签类别: '主题党日活动',
-  //     活动名称: '牡丹活动',
-  //     活动地址:
-  //       '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
-  //     活动日期: 1632240000,
-  //     党组织名称: '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
-  //     党组织编号: '001.001.031.014.205.002.001.601.701',
-  //     签到表照片: [],
-  //     上海2000纬度: -2581.95914975792,
-  //     上海2000经度: 7037.33995731356,
-  //     台账记录照片: [],
-  //     实际参与人数: 40,
-  //     活动内容描述: '描述',
-  //     不计入参与活动党员人数: 3,
-  //   },
-  // ]
-
   return `
     ${style}
     <div class="pop-container">
       <p class="title">${data['活动名称']}</p>
       <p>${data['党组织名称']}</p>
       <div class="wrapper">
-        <div class="box inline">
-          <div>
+        <div class="box">
+          <div class="inline">
             <span>活动日期：</span>
             <p>${dayjs(+(data['活动日期'] + '000')).format('YYYY-MM-DD')}</p>
           </div>
-          <div>
+          <div class="inline">
             <span>活动地址：</span>
             <p>${data['活动地址']}</p>
           </div>
-          <div>
+          <div class="inline">
             <span>参与人数：</span>
             <p>${data['实际参与人数']}人</p>
           </div>
-          <div>
+          <div class="inline">
             <span>出席率：</span>
             <p>${data['出席率']}%</p>
           </div>
@@ -316,6 +310,20 @@ export const transActivityHtml = (data: any) => {
               ?.join('')}</p>
           </div>
         </div>
+        <div style="text-align:center">
+          ${(data?.['签到表文件'] || [])
+            .map(
+              (url) =>
+                `<a class="export-btn" href="${url}" _blank>参加人员名单下载</a>`,
+            )
+            .join('')}
+          ${(data?.['签到表照片'] || [])
+            .map(
+              (url) =>
+                `<a class="export-btn" href="${url}" _blank>参加人员名单下载</a>`,
+            )
+            .join('')}
+        </div>
       </div>
     </div>
     `
@@ -339,7 +347,7 @@ export const transListHtml = (data: any) => {
         }</p><div class=${'wrapper'}><div class=${'box'}><div class=${'inline'}><span>活动日期：</span><p>${dayjs(
           +(data['活动日期'] + '000'),
         ).format(
-          'll',
+          'YYYY-MM-DD',
         )}</p></div><div class=${'inline'}><span>活动地址：</span><p>${
           data['活动地址']
         }</p></div><div class=${'inline'}><span>参与人数：</span><p>${
@@ -351,8 +359,20 @@ export const transListHtml = (data: any) => {
         }</p></div></div><div class=${'box'}><div><span>活动照片</span><p>${(
           data?.['活动照片'] || []
         )
-          ?.map((e) => `<img src=${e}>`)
-          ?.join('')}</p></div></div></div>`
+          ?.map((item) => `<img src=${item}>`)
+          ?.join('')}</p></div></div><div style=${'text-align:center'}>${(
+          data?.['签到表文件'] || []
+        )
+          .map(
+            (url) =>
+              `<a class=${'export-btn'} href=${url}>参加人员名单下载</a>`,
+          )
+          .join('')}${(data?.['签到表照片'] || [])
+          .map(
+            (url) =>
+              `<a class=${'export-btn'} href=${url}>参加人员名单下载</a>`,
+          )
+          .join('')}</div></div>`
       case '党组织':
         return `<p class=${'title'}>${data?.['党组织名称']}</p>${getOrgTags(
           data?.['标签'],
@@ -389,7 +409,7 @@ export const transListHtml = (data: any) => {
         }</p></div><div><span>入党日期</span><p>${dayjs(
           data['加入中共党组织日期'],
         ).format(
-          'll',
+          'YYYY-MM-DD',
         )}</p></div></div><div class=${'box'}><div><span>身份证号码</span><p>${trans(
           data['身份证号码'],
         )}</p></div><div><span>居住地址</span><p>${transAddress(

src/util/switchOrgLevel.ts

 export default function switchOrgLevel(data: any, label: string) {
   const level = data?.['等级']
-  console.log(label)
   switch (label) {
     case '书记':
       if (level === '党工委') return '党工委书记'

src/view/components/activity-detail.vue

-<template>
-  <div class="info">
-    <p class="title">某某党员大会</p>
-    <p>上海市浦东新区梅花路1099号</p>
-    <div class="content">
-      <div class="box">
-        <div>
-          <span>活动日期：</span>
-          <span>2020年1月3日</span>
-        </div>
-        <div>
-          <span>活动地址：</span>
-          <span>某某活动地址</span>
-        </div>
-        <div>
-          <span>参与人数：</span>
-          <span>20人</span>
-        </div>
-        <div>
-          <span>出席率：</span>
-          <span>50%</span>
-        </div>
-      </div>
-      <div class="box">
-        <span>活动内容描述</span>
-        <p>XXXXXXXXXXXXXXXXXXXXX</p>
-        <p>XXXXXXXXXXXXXXXXXXXXX</p>
-        <p>XXXXXXXXXXXXXXXXXXXXX</p>
-        <p>XXXXXXXXXXXXXXXXXXXXX</p>
-      </div>
-      <div class="box">
-        <span>活动照片</span>
-        <div class="photos">
-          <div class="photo"></div>
-          <div class="photo"></div>
-          <div class="photo"></div>
-        </div>
-      </div>
-    </div>
-    <n-button class="export-btn" type="primary" size="small">
-      <template #icon>
-        <n-icon size=".12rem">
-          <svg-icon :data="exportIcon" original />
-        </n-icon>
-      </template>
-      参加人员名单下载
-    </n-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import exportIcon from '@images/export.svg'
-</script>
-
-<style lang="stylus" scoped>
-@import '../../components/MyComponent/main.styl'
-.info
-  background $bg
-  $blur()
-  border-radius .04rem
-  box-sizing border-box
-  padding .1rem
-  width 3rem
-  max-height 50vh
-  display flex
-  flex-direction column
-  .title
-    font-size .13rem
-    font-family $font-ping-medium
-  .content
-    flex 1
-    overflow-y auto
-    margin .05rem 0 .1rem
-  .box
-    background $white-bg
-    border-radius .03rem
-    margin-top .05rem
-    box-sizing border-box
-    padding .1rem
-    >div
-      $flex-align()
-      margin-bottom .05rem
-    span
-      display inline-block
-      &:nth-of-type(1)
-        color $gray
-        width 26%
-      &:nth-of-type(2)
-        flex 1
-        $text-overflow()
-    .photos
-      $flex-align()
-      justify-content space-between
-      >.photo
-        width 32%
-        height .6rem
-        border-radius .04rem
-        background $light-gray
-  .export-btn
-    width 50%
-    margin 0 auto
-</style>

src/view/components/activity-drawer.vue

@@ -93,15 +93,24 @@ import ActivityListModal from './activity-list-modal.vue'
 import { useFetchActivity } from '@/hooks/useFetch'
 import dayjs from '@/util/dayjs'
 
+const emit = defineEmits(['close'])
 const show = computed(() => store.state.showActivityDrawer)
 const closeDrawer = () => {
   store.commit('SET_ACTIVITY_DRAWER', false)
   store.commit('SET_SHOW_BASIC_INFO', true)
   store.commit('SET_SHOW_TAG', true)
+  emit('close')
+}
+
+watch(
+  () => show.value,
+  (val) => {
+    if (!val) {
       dateRange.value = []
-  store.commit('SET_MAP_POINTS')
       list.value.forEach((item) => (item.onMap = false))
-}
+    }
+  },
+)
 
 const dateRange = ref<number[]>([])
 const list = ref([

src/view/components/activity-list-modal.vue

@@ -182,16 +182,6 @@ watch(
   { deep: true },
 )
 
-const mockData = {
-  name: '某某活动',
-  type: '某某标签',
-  orgName: '某某党组织',
-  date: 1630425600000,
-  address: '某区某路XX号XX中心',
-  count: 20,
-  excludeCount: 10,
-  fileType: 'file',
-}
 const activityData = ref<any>(null)
 const openNewDrawer = (data: any = null) => {
   activityData.value = data

src/view/components/building-detail-drawer.vue

+<template>
+  <n-drawer
+    to="#main"
+    :show="show"
+    :on-update:show="closeDrawer"
+    width="2.8rem"
+    :mask-closable="false"
+  >
+    <n-drawer-content closable title="楼宇">
+      <div class="content">
+        <p class="name">{{ path.join('') }}</p>
+        <div class="building">
+          <div class="nav">
+            <p :title="curBuilding['楼宇名称']">
+              {{ curBuilding['楼宇名称'] }}
+            </p>
+          </div>
+          <div v-if="floors && floors.length > 0" class="floors">
+            <div v-for="(item, i) in floors" :key="i">
+              <div class="title">
+                <p>{{ item.floor }}</p>
+                <div>
+                  <span>户数：{{ item.room }} </span>
+                  <span>党员数：{{ item.member }}</span>
+                </div>
+              </div>
+              <n-carousel :show-arrow="item.length > 4">
+                <div
+                  v-for="(_, segmentIndex) in new Array(
+                    Math.ceil(item.rooms.length / 4),
+                  )"
+                  :key="segmentIndex"
+                  class="rooms"
+                >
+                  <div
+                    v-for="(room, index) in item.rooms.slice(
+                      segmentIndex * 4,
+                      segmentIndex + 4,
+                    )"
+                    :key="index"
+                    class="room"
+                  >
+                    <div class="members">
+                      <n-popover
+                        v-for="(m, n) in room.members"
+                        :key="n"
+                        class="member-info-popover"
+                        placement="left"
+                        flip
+                        trigger="click"
+                      >
+                        <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>
+                </div>
+              </n-carousel>
+            </div>
+          </div>
+          <n-empty v-else style="margin-top: 0.2rem" size="small" />
+        </div>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, PropType, ref, watch } 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'
+import MemberInfo from './member-info.vue'
+
+const curBuilding = computed(() => store.state.buildingDetail.building)
+const floors = computed(() => store.state.buildingDetail.floors)
+const path = computed(() => {
+  const building = curBuilding.value
+  return [
+    building?.['所属社区'] || '',
+    building?.['所属居委'] || '',
+    building?.['小区名称'] || '',
+  ]
+})
+const show = computed(() => store.state.showBuildingDetail)
+
+watch(
+  () => show.value,
+  (val) => {
+    if (!val) {
+      store.dispatch('getBasicInfo')
+    } else {
+      store.commit('SET_FILTER_DRAWER', false)
+      store.commit('SET_ACTIVITY_DRAWER', false)
+      store.commit('SET_STRUCT_MODAL', false)
+    }
+    store.commit('SET_SHOW_TAG', !val)
+    store.commit('SET_CUR_TAG', '')
+  },
+)
+watch(
+  () => curBuilding.value,
+  (building) => {
+    if (!building) return
+    const query = [
+      `paths @ "所属社区" && string == "${building?.['所属社区']}"`,
+      `paths @ "所属居委" && string == "${building?.['所属居委']}"`,
+      `paths @ "所属小区" && string == "${building?.['小区名称']}"`,
+      `paths @ "所属楼宇" && string @ "${building?.['号']}"`,
+    ]
+    store.dispatch('getBasicInfo', query.join(','))
+  },
+)
+
+const closeDrawer = () => {
+  store.commit('SET_SHOW_BUILDING_DETAIL', false)
+  store.commit('SET_SHOW_TAG', true)
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../../components/MyComponent/main.styl'
+.content
+  display flex
+  flex-direction column
+  height 100%
+.name
+  margin .1rem
+.building
+  display flex
+  flex-direction column
+  flex 1
+  overflow-y auto
+  overflow-x hidden
+  .nav
+    $flex-align()
+    justify-content space-between
+    padding .08rem
+    background #f7f7f7
+    box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
+    p
+      font-family $font-ping-medium
+      flex 1
+      $text-overflow()
+    span
+      color $red
+      font-size .09rem
+      cursor pointer
+      width .3rem
+      white-space nowrap
+  .floors
+    padding .08rem
+    background $light-gray
+    flex 1
+    overflow-y auto
+    >div
+      background $white-bg
+      border-radius .04rem
+      padding .08rem 0
+      margin-bottom .08rem
+      box-shadow  0 0.02rem .05rem rgba(0,0,0,0.1)
+      .title
+        $flex-align()
+        justify-content space-between
+        margin-bottom .05rem
+        padding 0 .1rem
+        font-family $font-ping-medium
+        p
+          color $red
+        span
+          color $font
+          font-size .08rem
+          margin-left .1rem
+      .rooms
+        overflow hidden
+        white-space nowrap
+        padding 0 .1rem
+        .room
+          width 23%
+          border-radius .04rem
+          border .01rem solid $light-gray
+          display inline-block
+          margin-right 1.6%
+          .members
+            display flex
+            flex-wrap wrap
+            background $light-red
+            height .4rem
+            box-sizing border-box
+            overflow hidden
+            .icon
+              padding .04rem
+              cursor pointer
+              &:hover
+              &.on
+                color $pink
+          p
+            text-align center
+</style>
+<style lang="stylus">
+@import '../../components/MyComponent/main.styl'
+.floors
+  .n-carousel
+    .n-carousel__arrow
+      width .16rem
+      height @width
+      color $red
+      &.n-carousel__arrow--left
+        left -0.01rem
+      &.n-carousel__arrow--right
+        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/building-drawer.vue

@@ -174,9 +174,8 @@ const setBuilding = (building: any, causedByNext?: boolean) => {
     }
     curBuilding.value = building
   }
-  // TODO 地图切换楼宇画面
-  emit('building', curBuilding.value?.OBJECTID || null)
   store.dispatch('getBasicInfo', query)
+  emit('building', curBuilding.value?.OBJECTID || null)
 }
 const floors = ref<any[]>([])
 
@@ -293,6 +292,7 @@ const buildingNext = async (building: any) => {
   flex-direction column
   flex 1
   overflow-y auto
+  overflow-x hidden
   .nav
     $flex-align()
     justify-content space-between

src/view/components/filter-drawer.vue

@@ -193,11 +193,16 @@ const close = () => {
   store.commit('SET_FILTER_DRAWER', false)
   store.commit('SET_SHOW_TAG', true)
   store.commit('SET_CUR_TAG', '')
-  reset()
   emit('close')
-  // TODO 清除撒点
-  store.commit('SET_MAP_POINTS')
 }
+watch(
+  () => show.value,
+  (val) => {
+    if (!val) {
+      reset()
+    }
+  },
+)
 
 const curTab = ref('tag')
 const setTab = (val: string) => {

src/view/components/info-modal.vue

-<template>
-  <div class="info">
-    <p class="title">某某党组织</p>
-    <n-space>
-      <n-tag class="tag" type="primary" size="small">荣获区级奖项党组织</n-tag>
-      <n-tag class="tag" type="info" size="small">
-        荣获市级及以上奖项党组织
-      </n-tag>
-    </n-space>
-    <p>上海市浦东新区梅花路1099号</p>
-    <div class="box flex">
-      <div>
-        <span>党员数量</span>
-        <p>1000</p>
-      </div>
-      <div>
-        <span>党委书记</span>
-        <p>刘某某</p>
-      </div>
-    </div>
-    <div class="box">
-      <div>
-        <span>党委副书记</span>
-        <p>陈某某</p>
-      </div>
-      <div>
-        <span>上级党组织名称</span>
-        <p>xxxxxx</p>
-      </div>
-      <div>
-        <span>联系电话</span>
-        <p>189********</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup></script>
-
-<style lang="stylus" scoped>
-@import '../../components/MyComponent/main.styl'
-.info
-  background $bg
-  $blur()
-  border-radius .04rem
-  box-sizing border-box
-  padding .1rem
-  width 3rem
-  max-height 50vh
-  .title
-    font-size .13rem
-    font-family $font-ping-medium
-  .tag
-    margin .05rem 0
-  .box
-    background $white-bg
-    border-radius .03rem
-    margin-top .05rem
-    box-sizing border-box
-    padding .1rem
-    &.flex
-      display flex
-      >div
-        margin-right .2rem
-    span
-      color $gray
-    p
-      margin-bottom .03rem
-      font-family $font-ping-medium
-</style>

src/view/components/list-modal.vue

-<template>
-  <div class="list">
-    <p class="title">此处12个XXXX</p>
-    <div class="wrapper">
-      <div v-for="(item, i) in list" :key="i" class="item">
-        <p>{{ item.name }}</p>
-        <span>{{ item.address }}</span>
-        <n-icon class="icon" size=".12rem" color="#dd505E">
-          <ArrowForward />
-        </n-icon>
-      </div>
-    </div>
-    <div v-if="pagination" class="pagination">
-      <n-icon size=".2rem" class="btn" @click="prePage">
-        <ChevronBack />
-      </n-icon>
-      <p>
-        <n-input-number
-          v-model:value="curPage"
-          class="page"
-          :show-button="false"
-          size="small"
-          :min="1"
-          :max="pageSize"
-          :placeholder="null"
-          :on-blur="toInt"
-          @keydown.enter="fetchPage"
-        />
-        <span>/</span>
-        <span>{{ pageSize }}</span>
-      </p>
-      <n-icon size=".2rem" class="btn" @click="nextPage">
-        <ChevronForward />
-      </n-icon>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ArrowForward, ChevronBack, ChevronForward } from '@vicons/ionicons5'
-import { PropType, ref } from 'vue'
-import useDebounce from '@/hooks/useDebounce'
-const props = defineProps({
-  pagination: {
-    type: Boolean as PropType<boolean>,
-    default: false,
-  },
-})
-const list = [
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-  { name: '某某社区党组织', address: '上海市浦东新区327号' },
-]
-const pageSize = ref(999)
-const curPage = ref(1)
-const toInt = () => {
-  if (curPage.value % 1 !== 0) {
-    curPage.value = Math.floor(curPage.value)
-  }
-}
-const fetchPage = useDebounce(() => {
-  // TODO
-  toInt()
-})
-const prePage = () => {
-  curPage.value -= 1
-  if (curPage.value <= 0) {
-    curPage.value = 1
-    return
-  }
-  fetchPage()
-}
-const nextPage = () => {
-  curPage.value += 1
-  if (curPage.value > pageSize.value) {
-    curPage.value = pageSize.value
-    return
-  }
-  fetchPage()
-}
-</script>
-
-<style lang="stylus" scoped>
-@import '../../components/MyComponent/main.styl'
-
-.list
-  background $bg
-  $blur()
-  border-radius .04rem
-  box-sizing border-box
-  padding .1rem .08rem
-  width 3rem
-  max-height 50vh
-  display flex
-  flex-direction column
-  .title
-    font-size .12rem
-    border-bottom .01rem solid rgba(0,0,0,.06)
-    padding 0 .08rem .05rem
-  .wrapper
-    flex 1
-    padding-bottom .1rem
-    overflow-y auto
-  .item
-    border-radius .03rem
-    position relative
-    background transparent
-    cursor pointer
-    box-sizing border-box
-    padding .05rem .08rem
-    p
-      font-family $font-ping-medium
-      $text-overflow()
-    span
-      color $gray
-      $text-overflow()
-    .icon
-      display none
-      position absolute
-      top 0
-      bottom 0
-      right 0
-      margin auto .1rem
-    &:hover
-      background $light-red
-      &>.icon
-        display inline-block
-  .pagination
-    $center()
-    p
-      width 30%
-      $flex-align()
-      justify-content space-around
-      margin 0 .15rem
-     .page
-        text-align center
-        width .4rem
-    .btn
-      color rgba(0,0,0,0.35)
-      cursor pointer
-      border-radius .03rem
-      &:hover
-        color $red
-        background $light-red
-</style>
-<style lang="stylus">
-.pagination
-  .n-input
-    border-radius .05rem
-    .n-input__input-el
-      height .2rem
-</style>

src/view/components/map.vue

@@ -177,6 +177,7 @@ function showCommunity(name: string) {
 }
 
 function showBuilding(name: string) {
+  if (!window.sceneView) return
   window.sceneView
     .whenLayerView(window.sceneLayer0)
     .then(async (layerView: any) => {

src/view/components/nav-bar.vue

@@ -140,7 +140,9 @@ const onClick = (type: string) => {
   store.commit('SET_FILTER_DRAWER', false)
   store.commit('SET_ACTIVITY_DRAWER', false)
   store.commit('SET_STRUCT_MODAL', false)
+  store.commit('SET_BUILDING_DRAWER', false)
   store.commit('SET_SHOW_TAG', false)
+  store.commit('SET_SHOW_BUILDING_DETAIL', false)
   switch (type) {
     case 'filter':
       store.commit('SET_FILTER_DRAWER', true)

src/view/components/struct-modal.vue

@@ -390,13 +390,22 @@ import useExportXlsx from '@/hooks/useExportXlsx'
 
 const code = computed(() => store.state.auth.code)
 
+const emit = defineEmits(['close'])
 const show = computed(() => store.state.showStructModal)
 const close = () => {
   store.commit('SET_STRUCT_MODAL', false)
   store.commit('SET_SHOW_BASIC_INFO', true)
   store.commit('SET_SHOW_TAG', true)
-  clear()
+  emit('close')
 }
+watch(
+  () => show.value,
+  (val) => {
+    if (!val) {
+      clear()
+    }
+  },
+)
 function clear() {
   if (onlyOne.value) return
   subKey.value = null

src/view/main.vue

@@ -4,16 +4,13 @@
   <BasicInfo />
   <div v-if="showReset" class="reset" @click="resetMap">
     <n-icon class="icon" size=".14rem">
-      <svg-icon :data="reset" original />
+      <svg-icon :data="resetIcon" original />
     </n-icon>
   </div>
   <FilterDrawer @boundary="setBoundary" @close="resetMap" />
-  <ActivityDrawer />
-  <StructModal />
-
-  <!-- <InforModal class="fix1" /> -->
-  <!-- <ListModal class="fix1" /> -->
-  <!-- <ActivityDetail class="fix1" /> -->
+  <ActivityDrawer @close="resetMap" />
+  <StructModal @close="resetMap" />
+  <BuildingDetailDrawer />
 </template>
 
 <script lang="ts" setup>
@@ -24,10 +21,8 @@ import BasicInfo from './components/basic-info.vue'
 import FilterDrawer from './components/filter-drawer.vue'
 import ActivityDrawer from './components/activity-drawer.vue'
 import StructModal from './components/struct-modal.vue'
-import InforModal from './components/info-modal.vue'
-import ListModal from './components/list-modal.vue'
-import ActivityDetail from './components/activity-detail.vue'
-import reset from '@images/reset.svg'
+import BuildingDetailDrawer from './components/building-detail-drawer.vue'
+import resetIcon from '@images/reset.svg'
 import store from '@/store'
 
 store.dispatch('getAuth')
@@ -109,7 +104,6 @@ watch(
     const data = checkSamePositionPoints(
       points.map((point) => JSON.parse(JSON.stringify(point))) || [],
     )
-    console.log('开始撒点：', data)
     map.value.addPoints('撒点', data)
   },
 )
@@ -131,18 +125,6 @@ watch(
   &:hover
     .icon
       color $red
-.fix1
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-.fix2
-  position fixed
-  top 50%
-  left 50%
-  transform translate(-50%, -50%)
-  margin-left 4rem
-
 .n-form-item-label__asterisk
   color $red !important
 .n-input .n-input-wrapper