地图

liuyg

2021-05-22 c376f7651eb558a72fbfad5860463eeeba68e3ca

地图

 public/xcxjingqingmap/css/body.css

@@ -68,4 +68,31 @@
.el-tabs__nav-scroll{
    display: flex;
    justify-content: center;
}
.f-main{
    /* border: 1px solid springgreen; */
}
.f-m-once{
    /* border: 1px solid rgb(194, 142, 0); */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0 5px 0
}
.f-m-o-title{
    display: flex;
    align-items: center;
    width: 40%;
}
.f-m-o-t-img{
    width: 30px;
    height: 30px;
    padding-right: 10px;
}
.f-m-o-center{
    width: 60%;
}
.el-divider{
margin: 0 auto;
width: 90%;
}

 public/xcxjingqingmap/img/beizhu.png

 public/xcxjingqingmap/img/dianhua.png

 public/xcxjingqingmap/img/leixing.png

 public/xcxjingqingmap/img/ren.png

 public/xcxjingqingmap/img/shijian.png

 public/xcxjingqingmap/js/vueMain.js

@@ -20,7 +20,7 @@
            // var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
            // axios.get(url).then((res) => {
            //     that.getdata = res.data.data;
                that.beginCome();
            that.beginCome();
            // })
        },
        beginCome() {
@@ -54,10 +54,27 @@
            return (false);
        },
        beginMap(map, data) {
            var that = this;
            var center = [data[0].wd,data[0].jd];
            this.seedata = data[0].datas;
            // console.log(this.seedata)
            var that = this,
                center = [data[0].wd, data[0].jd],
                url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            axios.post(url).then((res) => {
                // console.log(res)
                if(res.data.data.length != 0){
                    var dat = res.data.data[0];
                    for(var key in dat){
                        if(dat[key] == null || dat[key] == ''){
                            dat[key] = '暂无'
                        }
                    }
                    this.seedata = dat;
                    
                }else{
                    this.seedata = data[0];
                }
                // console.log(this.seedata, 1524545453)
            })


            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: center,
@@ -149,16 +166,5 @@
    },
    mounted() {
        this.getDataList();
        // this.getdata = this.getQueryVariable('data');//url解码

        // this.map = this.beginMap(this.map, this.getdata);//创建并接受map
        // this.move = new myDomMove('#seedata', '.title', '#map');
        // var dy = document.documentElement.clientHeight - 50;
        // $('#seedata').animate({ top: dy + "px" }, 10);
        // $('#map').css("height", (index, value) => {//改变地图高度
        //     return '100%';
        // })
        // this.map.invalidateSize(true);//应用地图高度
        // this.move.followFinger(this.map, 'up');
    }
})

 public/xcxjingqingmap/xcxmap.html

@@ -60,32 +60,46 @@
                    <el-tab-pane label="警情信息" name="first">
                        <div class="f-main">
                            <div class="f-m-once">
                                <div class="f-m-o-title">使用方</div>
                                <div class="f-m-o-center">{{seedata.place}}</div>
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/ren.png" alt="">
                                    使用方:</div>
                                <div class="f-m-o-center">{{seedata.deptName}}</div>
                            </div>
                            <!-- <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div> -->
                            <div class="f-m-once">
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/ren.png" alt="">
                                    接警人:</div>
                                <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
                            </div>
                            <div class="f-m-once">
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
                                    联系电话:</div>
                                <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
                            </div>
                            <el-divider></el-divider>
                            <div class="f-m-once">
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
                                    报警时间:</div>
                                <div class="f-m-o-center">{{seedata.alarmTime}}</div>
                            </div>
                            <div class="f-m-once">
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
                                    报警类型:</div>
                                <div class="f-m-o-center">{{seedata.alarmType}}</div>
                            </div>
                            <el-divider></el-divider>
                            <div class="f-m-once">
                                <div class="f-m-o-title">
                                    <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
                                    备注:</div>
                                <div class="f-m-o-center">{{seedata.bz}}</div>
                            </div>
                        </div>
                    </el-tab-pane>
                     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                    <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> -->
                    <!--    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
                </el-tabs>