大屏地图对接口

13404089107

2025-03-27 5aca6f3b247ee1ca2acce3bbe2561781b2635e1a

大屏地图对接口

 src/components/MapPanel.vue

@@ -7,6 +7,7 @@
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { mapState } from 'vuex'
import { getHouseMapDistribution } from './service'

export default {
  name: 'MapPanel',
@@ -14,12 +15,27 @@
    return {
      map: null,
      markers: [],
      currentMakers: [],
      infoWindow: null
    }
  },
  watch: {
    mapMarkerStatus(newVal) {
      console.log(newVal)
      if (newVal === 'all') {
        this.markers = this.currentMakers
        this.$nextTick(() => {
          this.map.clearMap()
          this.addMapMarkers()
        })
      } else {
        let arr = this.currentMakers.filter(item => item.info.statusText == newVal)
        this.markers = arr
        this.$nextTick(() => {
          this.map.clearMap()
          this.addMapMarkers()
        })
      }

    }
  },
  computed: {
@@ -28,12 +44,33 @@
    ]),
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
      window.addEventListener('resize', () => {
        this.map && this.map.resize()
    getHouseMapDistribution().then(res => {
      if (res.code === 200) {
        res.data.map((item, index) => {
          item.position = [item.longitude, item.latitude]
          item.info = {
            address: item.houseAddress,
            name: item.houseName,
            status: item.houseStatus,
            rentStatus: item.rentStatus,
            statusText: item.houseStatus == 1 ? '待出租' : item.houseStatus == 2 ? '已出租' : item.houseStatus == 3 ? '维修中' : '欠费',
            tenant: item.tenant,
            rent: item.rent,
            color: item.houseStatus == 1 ? '#FDAE03' : item.houseStatus == 2 ? '#618CE9' : item.houseStatus == 3 ? '#F64E4F' : '#0FBE6B'
          }
          return item
        })
        this.currentMakers = JSON.parse(JSON.stringify(res.data))
        this.markers = res.data
      }
      this.$nextTick(() => {
        this.initMap()
        window.addEventListener('resize', () => {
          this.map && this.map.resize()
        })
      })
    })

  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
@@ -57,70 +94,7 @@
      this.addMapMarkers()
    },
    addMapMarkers() {
      const markers = [
        {
          position: [91.172119, 29.652941],
          info: {
            address: '西花部汾罚藏医院',
            name: '名称名称名称',
            status: 'vacant',
            statusText: '待出租',
            tenant: '张三',
            currentRent: 1600,
            totalRent: 20000,
            quarterlyPaid: 500,
            quarterlyRent: 2000,
            color: '#faad14'
          }
        },
        {
          position: [91.182119, 29.662941],
          info: {
            address: '拉萨市城关区江苏路15号',
            name: '泊江大道B栋',
            status: 'rented',
            statusText: '已出租',
            tenant: '-',
            currentRent: 3000,
            totalRent: 15000,
            quarterlyPaid: 1000,
            quarterlyRent: 4500,
            color: '#4fd9ff'
          }
        },
        {
          position: [91.162119, 29.642941],
          info: {
            address: '拉萨市城关区北京中路8号',
            name: '新城大道C区',
            status: 'maintenance',
            statusText: '维修中',
            tenant: '-',
            currentRent: 0,
            totalRent: 16000,
            quarterlyPaid: 0,
            quarterlyRent: 5400,
            color: '#ff4d4f'
          }
        },
        {
          position: [91.192119, 29.672941],
          info: {
            address: '拉萨市城关区夺底路33号',
            name: '高江路D座',
            status: 'overdue',
            statusText: '欠费',
            tenant: '西藏联通',
            currentRent: 12000,
            totalRent: 20000,
            quarterlyPaid: 4000,
            quarterlyRent: 6600,
            color: '#39c5bb'
          }
        }
      ]

      markers.forEach(marker => {
      this.markers.forEach(marker => {
        const content = `
          <div class="marker-container">
            <svg width="120" height="120" viewBox="0 0 120 120">
@@ -170,20 +144,17 @@
    },
    showInfoWindow(marker, info) {
      const content = `
        <div class="map-info-card" style="color:#000;background-color: #fff !important;padding: 10px;border-radius: 12px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);">
          <div class="info-header">
            <div class="info-title">房屋详情</div>
          </div>
        <div class="map-info-card" style="min-width:300px !important;color:#fff;background-color: rgba(146, 146, 146, 0.5) !important;padding: 10px;border-radius: 12px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);border-radius:0px 35px 35px 0px;">
          <div class="info-body">
            <div class="info-item">房屋地址：${info.address}</div>
            <div class="info-item">房屋名称：${info.name}</div>
            <div class="info-item">房屋状态：<span class="status-tag" style="background: rgba(${info.color.replace(/[^\d,]/g, '')}, 0.1); color: ${info.color};">${info.statusText}</span></div>
            <div class="info-item">租户：${info.tenant}</div>
            <div class="info-item">
              租金状态：${info.currentRent}/${info.totalRent}
              租金状态：${info.rentStatus}
            </div>
            <div class="info-item">
              本季租金：${info.quarterlyPaid}/${info.quarterlyRent}
              本季租金：${info.rent}
            </div>
          </div>
        </div>
@@ -231,7 +202,7 @@
.info-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  color: #fff !important;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
@@ -303,7 +274,7 @@
.map-info-card {
  border: 1px solid rgba(79, 217, 255, 0.2);
  overflow: hidden;
  width: 300px;
  width: 300px !important;
  backdrop-filter: blur(12px);

  .info-header {

 src/components/RightPanel.vue

@@ -188,7 +188,8 @@
  border-radius: 8px;
  margin-top: 10px;
  padding: 15px;
  max-height: 500px;
  max-height: 600px;
  min-height: 500px;
  overflow: hidden;
  flex: 1;
}

 src/components/service.js

@@ -44,3 +44,12 @@
        data
    })
}

// 获取房屋租赁数据
export function getHouseMapDistribution(data) {
    return request({
        url: '/screen/getHouseMapDistribution',
        method: 'get',
        data
    })
}