| | |
| | | <div class="leaderIndex-wrap"> |
| | | <div class="leaderIndex-title"> |
| | | <h1>峰峰矿区综合行政执法局智慧泊车平台</h1> |
| | | <div class="leader-title-left"> |
| | | <h2>欢迎登录,{{userName}}</h2> |
| | | </div> |
| | | <div class="logout" @click="logout"> |
| | | 退出登录 |
| | | </div> |
| | | <!-- <div class="leader-title-right" @click="houtaiBtn">--> |
| | | <!-- <h2>后台管理</h2>--> |
| | | <!-- </div>--> |
| | |
| | | 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: { |
| | |
| | | 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, //统计数据定时器 |
| | |
| | | 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 = this.getStore('name') |
| | | this.userName = this.getStore('userinfo') |
| | | this.getData() |
| | | this.$nextTick(() => { |
| | | this.createMap() |
| | |
| | | this.$refs.zhipaiForm.initData() |
| | | }) |
| | | }, |
| | | createMap(){ // // 方法 - 创建地图 |
| | | createMap(BMap){ // // 方法 - 创建地图 |
| | | // 在百度地图容器中创建地图实例 |
| | | let map = new BMap.Map("container"); |
| | | // 将map变量存储在全局 |
| | | 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(() => { |
| | | // 将map变量存储在全局 |
| | | 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 => { |