From 5aca6f3b247ee1ca2acce3bbe2561781b2635e1a Mon Sep 17 00:00:00 2001
From: 13404089107 <puwei@sinata.cn>
Date: 星期四, 27 三月 2025 16:18:53 +0800
Subject: [PATCH] 大屏地图对接口
---
src/components/MapPanel.vue | 125 ++++++++++++++++-------------------------
1 files changed, 48 insertions(+), 77 deletions(-)
diff --git a/src/components/MapPanel.vue b/src/components/MapPanel.vue
index 38f4db6..aa6172c 100644
--- a/src/components/MapPanel.vue
+++ b/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 {
--
Gitblit v1.7.1