巡逻路线地图高度调整

Administrator

2021-06-01 1d4f85faf10cf42580f478e7f0fb0669f0452fe1

巡逻路线地图高度调整

 pages/patrol/patrol.vue

@@ -8,14 +8,15 @@
    export default {
        data() {
            return {
                urls: '',
                // dataList: [],
                urls: ''
            }
        },
        methods: {},
        mounted() {},
        onLoad: function(options) {
            this.urls = "https://web.byisf.com/xcxjingqingmap_patrol/xcxmap.html?snumber="+this.$store.state.puserID;
            //long 转换为字符串
            var code = JSON.stringify(this.$store.state.puserID.toString());
            this.urls = "https://web.byisf.com/xcxjingqingmap_patrol/xcxmap.html?snumber="+code;
        },
    }
</script>

 xcxjingqingmap_patrol/css/body.css

@@ -13,13 +13,13 @@

#map {
    width: 100%;
    height: 65%;
    height: 60%;
}

#seedata {
    position: relative;
    width: 100%;
    height: 35%;
    height: 40%;
    z-index: 401;
    /* background-color: #007AFF; */
    opacity: 0.9;
@@ -54,7 +54,7 @@
    left: 73px;
    top: -21px;
    border: none;
    font-size: 15px;
    font-size: 14px;
    font-family: "微软雅黑";
}

@@ -73,7 +73,7 @@
    width: 200px;
    left: 73px;
    top: -21px;
    font-size: 15px;
    font-size: 14px;
    font-family: "微软雅黑";
    border: none;
}
@@ -86,8 +86,8 @@
    color: #FFFFFF;
    background-color: #007AFF;
    position: relative;
    left: 150px;
    top: 40px;
    left: 140px;
    top: 45px;
    letter-spacing: 1px;
}


 xcxjingqingmap_patrol/js/move.js

@@ -50,14 +50,11 @@
        var that = this;
        if (state != 14) {
            that.state = state;
            // console.log(that.state);
        }
        that.getDomPosition(); //获取dom位置
        that.getMapHeight(); //获取地图高度
        var once = true;
        that.div.on('touchmove', function(e) { //获取鼠标位置
            // debugger;
            console.log(e, 111);
            e = e || window.event;
            that.__xx = e.touches[0].clientX;
            that.__yy = e.touches[0].clientY;
@@ -85,7 +82,6 @@
        });
        that.div.on('touchend', function() { //抬起重置
            console.log("触摸停止")
                // debugger;
            once = true; //抬起重置鼠标点击位置
            if (that.state == 'down') { //两种模式
                var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
@@ -104,7 +100,7 @@
                }
                if (this.tab == 2) {
                    $('#map').css("height", (index, value) => { //改变地图高度
                        return '65%';
                        return '60%';
                    })
                }


 xcxjingqingmap_patrol/js/vueMain.js

@@ -21,6 +21,14 @@
        move: null, //存放移动实例

        seedata: '',

        //路线数据
        routeName: "",
        lxbz: "",

        //区域数据
        regionName: "",
        qybz: ""
    },
    created() {},
    mounted() {
@@ -42,8 +50,8 @@
                document.getElementById("area").style.display = "none";
                document.getElementById("routeBtn").style.backgroundColor = "cornflowerblue";
                document.getElementById("areaBtn").style.backgroundColor = "darkgrey";
                document.getElementById("seedata").style.height = "35%";
                document.getElementById("map").style.height = "65%";
                document.getElementById("seedata").style.height = "40%";
                document.getElementById("map").style.height = "60%";
                //展示巡逻路线
                this.showPolyLine(this.map);

@@ -154,6 +162,8 @@
                            if (that.nowIndex == 2) {
                                map.removeLayer(that.layer);
                            }
                            that.routeName = result.data[0].routeName;
                            that.lxbz = result.data[0].lxbz;
                            that.layer = L.polyline(entityArr, { color: 'red' }).addTo(map);
                            map.addLayer(that.layer);
                            that.nowIndex = 2;
@@ -196,6 +206,8 @@
                                map.removeLayer(that.layer);
                            }
                            that.layer = L.polygon(entityArr, { color: 'red' }).addTo(map);
                            that.regionName = result.data[0].regionName;
                            that.qybz = result.data[0].qybz;
                            map.addLayer(that.layer);
                            that.nowIndex = 2;
                            // zoom the map to the polygon

 xcxjingqingmap_patrol/xcxmap.html

@@ -57,14 +57,16 @@
        <div id="seedata">
            <div class="main">
                <div>
                    <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> -->
                    <!-- <el-tab-pane label="巡逻路线" name="first" @click="handleClick"> -->
                    <div id="line" class="f-main">
                        <div class="f-m-once">
                            <div class="f-m-o-title">路线名称: </div>
                            <input class="f-m-o-center"></input>
                            <input class="f-m-o-center" v-model="routeName" />
                        </div>
                        <div class="f-m-once">
                            <div class="f-m-o-title">路线备注: </div>
                            <textarea class="f-m-o-center"></textarea>
                            <textarea class="f-m-o-center">{{lxbz}}</textarea>
                        </div>
                        <div class="f-m-once" style="top: 45px;">
                            <div class="f-m-o-title">照片上传: </div>
@@ -77,11 +79,11 @@
                    <div id="area" class="f-main" style="display: none;">
                        <div class="f-m-once">
                            <div class="f-m-o-title">区域名称: </div>
                            <input class="f-m-o-center"></input>
                            <input class="f-m-o-center" v-model="regionName" />
                        </div>
                        <div class="f-m-once">
                            <div class="f-m-o-title">区域备注: </div>
                            <textarea class="f-m-o-center"></textarea>
                            <textarea class="f-m-o-center">{{qybz}}</textarea>
                        </div>
                    </div>
                    </el-tabs>