kongdeqiang
2 天以前 66cea4479288064e1e50ee8c0c1d5b38526c67bb
src/components/page/leaderShow/leaderIndex.vue
@@ -2,12 +2,6 @@
    <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>-->
@@ -233,6 +227,7 @@
                    getLogoUrl: this.$systemconfig.basePath + '/statistic/getLogo',
                    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, //统计数据定时器
@@ -290,16 +285,19 @@
                map:'',
                centerLng:'114.225914',
                centerLat:'36.438982',
                pointNum1: '',
                pointNum2: '',
            }
        },
        mounted() {
            BaiduMap.init()
                .then((BMap) => {
                  console.log('地图初始化')
                  this.inits()
                //   this.inits()
                    this.createMap(BMap)
                })
            this.newTimes()
            this.userName = this.getStore('userinfo').name
            this.userName = this.getStore('userinfo')
            this.getData()
            this.$nextTick(() => {
                this.createMap()
@@ -442,30 +440,97 @@
                   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 => {