From 1a9cfa3d9e9946dc4a576cf47d98489017c5f289 Mon Sep 17 00:00:00 2001
From: 1012414140@qq.com <1012414140@qq.com>
Date: 星期五, 26 十二月 2025 14:15:00 +0800
Subject: [PATCH] feat: 地图上鼠标触摸添加车位数等信息
---
src/components/page/leaderShow/leaderIndex.vue | 185 ++++++++++++++++++++++++++++++++-------------
1 files changed, 131 insertions(+), 54 deletions(-)
diff --git a/src/components/page/leaderShow/leaderIndex.vue b/src/components/page/leaderShow/leaderIndex.vue
index c7a8eae..7e21332 100644
--- a/src/components/page/leaderShow/leaderIndex.vue
+++ b/src/components/page/leaderShow/leaderIndex.vue
@@ -3,14 +3,14 @@
<div class="leaderIndex-title">
<h1>宄板嘲鐭垮尯缁煎悎琛屾斂鎵ф硶灞�鏅烘収娉婅溅骞冲彴</h1>
<div class="leader-title-left">
- <h2>娆㈣繋鐧诲綍锛寋{userName}}!</h2>
+ <h2>娆㈣繋鐧诲綍锛寋{userName}}</h2>
</div>
<div class="logout" @click="logout">
閫�鍑虹櫥褰�
</div>
- <div class="leader-title-right" @click="houtaiBtn">
- <h2>鍚庡彴绠＄悊</h2>
- </div>
+<!-- <div class="leader-title-right" @click="houtaiBtn">-->
+<!-- <h2>鍚庡彴绠＄悊</h2>-->
+<!-- </div>-->
<div class="weizhang-content">
<h2 @click="weizhangBtn(item)" v-if="index < 1" v-for="(item,index) in weizhangList" :key="index">杩濇硶杞﹁締锛歿{item.carNo}}杩涘叆{{item.parkName}} {{item.createTime}}</h2>
</div>
@@ -210,6 +210,7 @@
import shangjiZhipaiForm from "./Dialog/shangjiZhipaiForm";
import xunjieOrderForm from "./Dialog/xunjieOrderForm";
import weizhangForm from "./Dialog/weizhangForm";
+ import BaiduMap from "../../common/baiduMap";
export default {
name: "leaderIndex",
components: {
@@ -230,8 +231,9 @@
pageConfig: {
getDataUrl: this.$systemconfig.basePath + '/statistic/getData1',
getLogoUrl: this.$systemconfig.basePath + '/statistic/getLogo',
- findAllUrl: this.$systemconfig.basePath + '/user/findAll',
- illegalCarUrl: this.$systemconfig.basePath + '/notice/illegalCar2',
+ findAllUrl: this.$systemconfig.basePath + '/ffzf/user/findAll',
+ illegalCarUrl: this.$systemconfig.basePath + '/ffzf/notice/illegalCar2',
+ getCarNumUrl: this.$systemconfig.basePath + '/ffzf/park/getCarNum'
},
weizhangTimer:null, //杩濈珷list瀹氭椂鍣�
getDataTimer:null, //缁熻鏁版嵁瀹氭椂鍣�
@@ -289,11 +291,19 @@
map:'',
centerLng:'114.225914',
centerLat:'36.438982',
+ pointNum1: '',
+ pointNum2: '',
}
},
mounted() {
+ BaiduMap.init()
+ .then((BMap) => {
+ console.log('鍦板浘鍒濆鍖�')
+ // this.inits()
+ this.createMap(BMap)
+ })
this.newTimes()
- this.userName = JSON.parse(this.getStore('userinfo')).name
+ this.userName = this.getStore('userinfo')
this.getData()
this.$nextTick(() => {
this.createMap()
@@ -352,7 +362,7 @@
},
illegalCarUrl() {
this.$byutil.postData4(this,this.pageConfig.illegalCarUrl,null,res => {
- this.weizhangList = res.obj
+ this.weizhangList = res.data
})
},
houtaiBtn() { //璺宠浆鍚庡彴椤甸潰
@@ -361,30 +371,30 @@
},
getData() {
this.$byutil.postData4(this,this.pageConfig.getDataUrl,null,res => {
- this.tongjiNumObj.data1 = res.obj.data1
- this.tongjiNumObj.data2 = res.obj.data2
- this.tongjiNumObj.data3 = res.obj.data3
- this.tongjiNumObj.data4 = res.obj.data4
- this.tongjiNumObj.data5 = res.obj.data5
- this.tongjiNumObj.data6 = res.obj.data6
- this.tongjiNumObj.data7 = res.obj.data7
- this.tongjiNumObj.data8 = res.obj.data8
- this.tongjiNumObj.data9 = res.obj.data9
- this.tongjiNumObj.data10 = res.obj.data10
- this.tongjiNumObj.data11 = res.obj.data11
- this.tongjiNumObj.data12 = res.obj.data12
- this.tongjiNumObj.data13 = res.obj.data13
+ this.tongjiNumObj.data1 = res.data.data1
+ this.tongjiNumObj.data2 = res.data.data2
+ this.tongjiNumObj.data3 = res.data.data3
+ this.tongjiNumObj.data4 = res.data.data4
+ this.tongjiNumObj.data5 = res.data.data5
+ this.tongjiNumObj.data6 = res.data.data6
+ this.tongjiNumObj.data7 = res.data.data7
+ this.tongjiNumObj.data8 = res.data.data8
+ this.tongjiNumObj.data9 = res.data.data9
+ this.tongjiNumObj.data10 = res.data.data10
+ this.tongjiNumObj.data11 = res.data.data11
+ this.tongjiNumObj.data12 = res.data.data12
+ this.tongjiNumObj.data13 = res.data.data13
console.log('this.tongjiNumObj.data13--------',this.tongjiNumObj.data13)
this.zhengticheweiliyonglv()
- this.tongjiNumObj.data14 = res.obj.data14
+ this.tongjiNumObj.data14 = res.data.data14
console.log('this.tongjiNumObj.data14--------',this.tongjiNumObj.data14)
this.fakuancheliangchengjiaolv()
- this.tongjiNumObj.data15 = res.obj.data15
- this.tongjiNumObj.data16 = res.obj.data16
- this.tongjiNumObj.data17 = res.obj.data17
- this.tongjiNumObj.data18 = res.obj.data18
- this.tongjiNumObj.data19 = res.obj.data19
- this.tongjiNumObj.data20 = res.obj.data20
+ this.tongjiNumObj.data15 = res.data.data15
+ this.tongjiNumObj.data16 = res.data.data16
+ this.tongjiNumObj.data17 = res.data.data17
+ this.tongjiNumObj.data18 = res.data.data18
+ this.tongjiNumObj.data19 = res.data.data19
+ this.tongjiNumObj.data20 = res.data.data20
})
},
@@ -436,34 +446,101 @@
this.$refs.zhipaiForm.initData()
})
},
- createMap(){ // // 鏂规硶 - 鍒涘缓鍦板浘
+ createMap(BMap){ // // 鏂规硶 - 鍒涘缓鍦板浘
// 鍦ㄧ櫨搴﹀湴鍥惧鍣ㄤ腑鍒涘缓鍦板浘瀹炰緥
- let map = new BMap.Map("container");
- // 灏唌ap鍙橀噺瀛樺偍鍦ㄥ叏灞�
- this.map = map;
- // let goodsData = require('../../../assets/custom_map_config.json')
- // 璁惧畾鍦板浘鐨勪腑蹇冪偣鍜屽潗鏍�
- let point = new BMap.Point(this.centerLng, this.centerLat);
- // let marker = new BMap.Marker(point) // 鍒涘缓鏍囨敞
- // 璁剧疆涓績鐐瑰潗鏍囧拰鍦板浘绾у埆
- this.map.centerAndZoom(point, 1);
- // 娣诲姞鑷畾涔夎鐩栫墿
- // this.map.addOverlay(marker) // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
- // 鍏佽婊氳疆缂╂斁
- this.map.enableScrollWheelZoom(point, 15);
- // 璁剧疆鍦板浘榛樿缂╂斁姣斾緥
- this.map.setZoom(15);
- this.map.setMapStyle({
- style:'midnight'
- // styleJson:goodsData
- });
- this.addHeatMap(this.map)
- this.addMarker(this.map,point)
+ let map = new BMap.Map('container');
+ this.$nextTick(() => {
+ // 灏唌ap鍙橀噺瀛樺偍鍦ㄥ叏灞�
+ this.map = map;
+ // let goodsData = require('../../../assets/custom_map_config.json')
+ // 璁惧畾鍦板浘鐨勪腑蹇冪偣鍜屽潗鏍�
+ // let point = new BMap.Point(this.centerLng, this.centerLat);
+ // let marker = new BMap.Marker(point) // 鍒涘缓鏍囨敞
+ // // 璁剧疆涓績鐐瑰潗鏍囧拰鍦板浘绾у埆
+ // this.map.centerAndZoom(point, 1);
+ // // 娣诲姞鑷畾涔夎鐩栫墿
+ // this.map.addOverlay(marker) // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+
+ const centerPoint = new BMap.Point(114.23123, 36.43123);
+ // 瀹氫箟澶氱偣鍧愭爣
+ const points = [
+ {lng: 114.23123, lat: 36.43123, name: '鏂颁笘绾仠杞﹀満', id: 4 },
+ {lng: 114.18, lat: 36.44, name: '鍏噷鏂瑰仠杞﹀満', id: 36 },
+ {lng: 114.21, lat: 36.43, name: '婊忔簮鍫ゅ仠杞﹀満', id: 34 },
+ {lng: 114.24, lat: 36.42, name: '婊忛槼婀垮湴鍏洯鍋滆溅鍦�', id: 33 },
+ {lng: 114.18, lat: 36.43, name: '闄剁摲鍗氱墿棣嗗仠杞﹀満', id: 30 },
+ {lng: 114.21, lat: 36.42, name: '椋庢湀鍏冲仠杞﹀満', id: 25 },
+ {lng: 114.23, lat: 36.44, name: '娓呮硥鍏洯鍋滆溅鍦�', id: 22 },
+ {lng: 114.21222, lat: 36.43111, name: '宄板嘲瀹鹃鍋滆溅鍦�', id: 7 },
+ {lng: 114.23, lat: 36.42, name: '鍗楀ご鏉戝仠杞﹀満', id: 20 },
+ {lng: 114.24125, lat: 36.43127, name: '鍥藉湡灞�鍋滆溅鍦�', id: 21 },
+ {lng: 114.22127, lat: 36.43129, name: '浜烘皯骞垮満鍦颁笅鍋滆溅鍦�', id: 8 },
+ ];
+ // 娣诲姞涓績鐐规爣璁�
+ const centerMarker = new BMap.Marker(centerPoint);
+ this.map.addOverlay(centerMarker);
+ // 寰幆娣诲姞鍏朵粬鐐�
+ points.forEach(coord => {
+ const point = new BMap.Point(coord.lng, coord.lat);
+ const marker = new BMap.Marker(point);
+ this.map.addOverlay(marker);
+
+ // 娣诲姞榧犳爣鎮仠浜嬩欢
+ marker.addEventListener("mouseover", (e) => {
+ this.$byutil.postData4(this, this.pageConfig.getCarNumUrl, { parkId: coord.id }, res => {
+ this.pointNum1 = res.data.num // 杞︿綅鎬绘暟
+ this.pointNum2 = Math.floor(Number(res.data.num) - Number(res.data.carNum));
+
+ // 鍒涘缓淇℃伅绐楀彛鍐呭
+ const content = `
+ <div style="padding:10px">
+ <h4>${coord.name}</h4>
+ <p>杞︿綅鎬绘暟: ${this.pointNum1}</p>
+ <p>鍓╀綑:${this.pointNum2} </p>
+ </div>
+ `;
+ // 鍒涘缓淇℃伅绐楀彛
+ const infoWindow = new BMap.InfoWindow(content, {
+ width: 200,
+ title: "璇︾粏淇℃伅"
+ });
+
+ // 鍦ㄦ爣璁扮偣浣嶇疆鎵撳紑淇℃伅绐楀彛
+ marker.openInfoWindow(infoWindow, point);
+ })
+ });
+ });
+ // 鍦板浘璁剧疆...
+ this.map.centerAndZoom(centerPoint, 1);
+ this.map.enableScrollWheelZoom(true);
+ this.map.setZoom(15);
+ // 鑷姩璋冩暣瑙嗛噹
+ const bounds = new BMap.Bounds();
+ [centerPoint, ...points].forEach(p => bounds.extend(p));
+ this.map.setViewport(bounds.getSouthWest(), bounds.getNorthEast());
+
+
+ // 鍏佽婊氳疆缂╂斁
+ this.map.enableScrollWheelZoom(point, 15);
+ // 璁剧疆鍦板浘榛樿缂╂斁姣斾緥
+ this.map.setZoom(15);
+ this.map.setMapStyle({
+ // style:'midnight',
+ styleJson:goodsData
+ });
+
+ this.map.addEventListener("tilesloaded", () => {
+ this.addHeatMap(this.map); // 纭繚鍦� tilesloaded 浜嬩欢鍚庤皟鐢�
+ });
+
+ // this.addHeatMap(this.map)
+ this.addMarker(this.map,point)
+ })
},
addHeatMap(map) { //鐑姏鍥�
this.$byutil.postData(this,this.pageConfig.getLogoUrl,null,res => {
- this.reliArry = res.obj
+ this.reliArry = res.data
this.reliArry.forEach(item => {
this.lngData.push({count:70,lat:item.lat,lng:item.lng})
})
@@ -485,7 +562,7 @@
},
addMarker(map,point) { //娣诲姞鑷畾涔夊浘鏍�
this.$byutil.postData(this,this.pageConfig.findAllUrl,null,res => {
- res.obj.forEach(item => {
+ res.data.forEach(item => {
if(item.lat) {
point = new BMap.Point(item.lng,item.lat)
//璁剧疆鏍囨敞鐨勫浘鏍�
@@ -1172,7 +1249,7 @@
}
.leader-title-left{
position: absolute;
- left: 0.2083rem /* 40/192 */;
+ left: 0.3183rem /* 40/192 */;
top:0.0521rem /* 10/192 */;
cursor: pointer;
h2{
@@ -1381,7 +1458,7 @@
background: url('../../../assets/images/wait-bj.png') no-repeat center;
background-size: 100% 100%;
position: absolute;
- right: 0.667rem /* 50/75 */;
+ right: 0.3183rem /* 50/75 */;
top:0.0729rem /* 14/192 */;
color: #fff;
display: flex;
--
Gitblit v1.9.1