| | |
| | | <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> |
| | |
| | | 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 = JSON.parse(this.getStore('userinfo')).name |
| | | this.userName = this.getStore('userinfo') |
| | | this.getData() |
| | | this.$nextTick(() => { |
| | | this.createMap() |
| | |
| | | }, |
| | | illegalCarUrl() { |
| | | this.$byutil.postData4(this,this.pageConfig.illegalCarUrl,null,res => { |
| | | this.weizhangList = res.obj |
| | | this.weizhangList = res.data |
| | | }) |
| | | }, |
| | | houtaiBtn() { //跳转后台页面 |
| | |
| | | }, |
| | | 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 |
| | | |
| | | }) |
| | | }, |
| | |
| | | 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 => { |
| | | this.reliArry = res.obj |
| | | this.reliArry = res.data |
| | | this.reliArry.forEach(item => { |
| | | this.lngData.push({count:70,lat:item.lat,lng:item.lng}) |
| | | }) |
| | |
| | | }, |
| | | 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) |
| | | //设置标注的图标 |
| | |
| | | } |
| | | .leader-title-left{ |
| | | position: absolute; |
| | | left: 0.2083rem /* 40/192 */; |
| | | left: 0.3183rem /* 40/192 */; |
| | | top:0.0521rem /* 10/192 */; |
| | | cursor: pointer; |
| | | h2{ |
| | |
| | | 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; |