feat(map): 添加楼栋人数统计功能

linwei

2026-06-10 98091511a4fa958ae8d6c243fba27cc9f9bcb62d

 src/components/map/index.vue

@@ -25,6 +25,12 @@
      </el-tooltip>
    </div>

      <div class="home-person-btn">
         <el-tooltip content="楼栋人数" placement="top" effect="dark">
           <i class="el-icon-s-home" style="vertical-align: middle; cursor: pointer" @click.stop="showBuildingPersonBtn = !showBuildingPersonBtn"></i>
       </el-tooltip>
    </div>

    <div class="over-look-btn">
      <el-tooltip content="一键俯视" placement="top" effect="dark">
        <i class="fa fa-eye" style="vertical-align: middle; cursor: pointer" @click="overLookClick"></i>
@@ -43,6 +49,43 @@
        <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="switchShowHomeContent"></i>
      </el-tooltip>
    </div>
     <div class="building-person-list" v-show="showBuildingPersonBtn" @click.stop>
        <div class="building-person-header">
          <span>楼栋人数统计</span>
          <div class="close" @click.stop="showBuildingPersonBtn = false; buildingPersonCurrentPage = 1">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="building-person-search">
          <el-select v-model="buildingPersonSearchTown" placeholder="请选择街道" size="mini" clearable @change="handleTownChange" style="width: 160px; margin-right: 8px;">
            <el-option v-for="item in townList" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
          <el-select v-model="buildingPersonSearchCommunity" placeholder="请选择社区" size="mini" clearable style="width: 160px; margin-right: 8px;">
            <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
          <el-input v-model="buildingPersonSearchName" placeholder="请输入小区名称" size="mini" clearable @keyup.enter.native="searchBuildingPerson" style="width: 200px;"></el-input>
          <el-button type="primary" size="mini" @click="searchBuildingPerson">查询</el-button>
        </div>
        <div class="building-person-content" v-loading="buildingPersonLoading" element-loading-background="rgba(0,0,0,0)">
          <el-table :data="buildingPersonList" style="width: 100%" size="mini">
            <el-table-column prop="town" label="街道" min-width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="community" label="社区" min-width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="aoiName" label="小区名称" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="buildName" label="楼栋名称" min-width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="personCount" label="人数" width="80" align="center"></el-table-column>
          </el-table>
        </div>
        <div class="building-person-pagination">
          <el-pagination
            small
            layout="total, prev, pager, next"
            :total="buildingPersonTotal"
            :page-size="buildingPersonPageSize"
            :current-page.sync="buildingPersonCurrentPage"
            @current-change="handleBuildingPersonPageChange">
          </el-pagination>
        </div>
      </div>
    <!-- 切换矢量图按钮 -->
    <div class="image-switch-icon-btn">
      <el-tooltip content="图层、模型、视角" placement="top" effect="dark">
@@ -50,6 +93,7 @@
          <img src="/img/base_map.png" alt />
        </div>
      </el-tooltip>
      

      <div class="image-switch-img-btn" v-show="showImgBtn" @click.stop>
        <div class="layer-change-box">
@@ -85,6 +129,8 @@
          <el-checkbox v-model="angleCheck" @change="angleChange"></el-checkbox>
        </div>
      </div>

     
    </div>

    <map-popup></map-popup>
@@ -194,7 +240,8 @@
import { mapGetters } from "vuex"
import { getLineSpeed } from "@/utils/turfPolygon"
import {
  get3dTiles
  get3dTiles,
  getBuildingPersonStatistic
} from "@/api/dept/index.js"
export default {
  name: "mapBox",
@@ -228,6 +275,51 @@
      videoTotal: 0,
      carTotal: 0,
      showImgBtn: false,
      showBuildingPersonBtn: false,
      buildingPersonLoading: false,
      buildingPersonList: [],
      buildingPersonTotal: 0,
      buildingPersonCurrentPage: 1,
      buildingPersonPageSize: 10,
      buildingPersonSearchName: '',
      buildingPersonSearchTown: '',
      buildingPersonSearchCommunity: '',
      // 街道列表（静态数据）
      townList: [
        { id: 'xingyuan', name: '兴园街道' },
        { id: 'dongtuan', name: '董团乡' }
      ],
      // 社区列表（根据街道动态变化）
      communityList: [],
      // 社区映射数据（静态数据）
      communityMap: {
        '兴园街道': [
          { id: 'sujiacun', name: '苏家村' },
          { id: 'longmen', name: '龙门村' },
          { id: 'wuyi', name: '武夷社区' },
          { id: 'huangyuan', name: '黄源社区' },
          { id: 'lingchuang', name: '领创社区' },
          { id: 'fenghuang', name: '凤凰社区' },
          { id: 'binhe', name: '滨河社区' },
          { id: 'xinke', name: '新科社区' },
          { id: 'bincheng', name: '滨城社区' },
          { id: 'banqiao', name: '板桥村' },
          { id: 'qianshan', name: '前山社区' }
        ],
        '董团乡': [
          { id: 'dongtuan', name: '董团村' },
          { id: 'xianshan', name: '仙山村' },
          { id: 'taiping', name: '太平村' },
          { id: 'wuzhou', name: '吴洲村' },
          { id: 'zhongwei', name: '中魏村' },
          { id: 'zhonglu', name: '中路村' },
          { id: 'dadi', name: '大地村' },
          { id: 'lianxing', name: '联星村' },
          { id: 'lianhe', name: '联合村' },
          { id: 'liansheng', name: '联胜村' },
          { id: 'hongshi', name: '红石村' }
        ]
      },
      imgtype: 0,
      tilesetLayerType: "",
      angleCheck: true,
@@ -702,7 +794,85 @@
    })
  },

  watch: {
    showBuildingPersonBtn (newVal) {
      if (newVal && this.buildingPersonList.length === 0) {
        this.fetchBuildingPersonStatistic()
      }
    }
  },

  methods: {
    /**
     * @description: 获取楼栋人数统计数据
     * @return {void}
     */
    fetchBuildingPersonStatistic () {
      this.buildingPersonLoading = true
      const params = {
        current: this.buildingPersonCurrentPage,
        size: this.buildingPersonPageSize
      }
      // 添加街道参数
      if (this.buildingPersonSearchTown) {
        params.town = this.buildingPersonSearchTown
      }
      // 添加社区参数
      if (this.buildingPersonSearchCommunity) {
        params.community = this.buildingPersonSearchCommunity
      }
      // 添加小区名称参数
      if (this.buildingPersonSearchName) {
        params.aoiName = this.buildingPersonSearchName
      }
      getBuildingPersonStatistic(params).then(res => {
        if (res.data && res.data.data) {
          this.buildingPersonList = res.data.data.records || res.data.data
          this.buildingPersonTotal = res.data.data.total || 0
        }
      }).catch(err => {
        console.error('获取楼栋人数统计失败:', err)
      }).finally(() => {
        this.buildingPersonLoading = false
      })
    },

    /**
     * @description: 街道选择变化时获取社区列表
     * @param {string} townName - 选中的街道名称
     * @return {void}
     */
    handleTownChange (townName) {
      // 步骤1: 清空社区选择
      this.buildingPersonSearchCommunity = ''
      // 步骤2: 如果街道被清空，清空社区列表
      if (!townName) {
        this.communityList = []
        return
      }
      // 步骤3: 根据选中的街道名称从静态数据中获取社区列表
      this.communityList = this.communityMap[townName] || []
    },

    /**
     * @description: 搜索楼栋人数
     * @return {void}
     */
    searchBuildingPerson () {
      this.buildingPersonCurrentPage = 1
      this.fetchBuildingPersonStatistic()
    },

    /**
     * @description: 分页改变事件
     * @param {number} page - 当前页码
     * @return {void}
     */
    handleBuildingPersonPageChange (page) {
      this.buildingPersonCurrentPage = page
      this.fetchBuildingPersonStatistic()
    },

    /**
      * @description: 获取3D模型列表数据
      * @param {Object} params - 请求参数
@@ -734,7 +904,7 @@
          }
        })
        // 发起请求
        // const response = await this.$http.get('http://47.212.32.95:12210/shangrao-3d-upload/model/list', {
        // const response = await this.$http.get('http://47.212.37.25:12210/shangrao-3d-upload/model/list', {
        //   params: requestParams
        // })

@@ -1033,6 +1203,7 @@
          .querySelector(".dc-container .dc-zoom-controller")
          .classList.add("homebottom")
        document.querySelector(".screen-full-btn").classList.add("homebottom")
        document.querySelector(".home-person-btn").classList.add("homebottom")
        document.querySelector(".over-look-btn").classList.add("homebottom")
        document.querySelector(".compass-btn").classList.add("homebottom")
        document
@@ -1046,6 +1217,8 @@
        document
          .querySelector(".screen-full-btn")
          .classList.remove("homebottom")
        document.querySelector(".home-person-btn").classList.remove("homebottom")

        document.querySelector(".over-look-btn").classList.remove("homebottom")
        document.querySelector(".compass-btn").classList.remove("homebottom")
        document