巡逻管理样式修改，移动触发

Administrator

2021-06-01 14ea4eb1e9d642e8cd96739968465baac576c332

巡逻管理样式修改，移动触发

 manifest.json

@@ -5,6 +5,9 @@
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    "networkTimeout":{
        "request":10000
    },
    /* 5+App特有相关 */
    "app-plus" : {
        "usingComponents" : true,

 pages/infoRegistration/infoRegistration.vue

@@ -65,59 +65,8 @@
        onLoad() {
            
        },
        // mounted(){
        //     // this.getTenantList();
        // },

        methods: {
			
            //获取客户信息
            // getTenantList(){
            //     var that = this;
            //     uni.request({
            //         url: 'https://web.byisf.com/api/blade-system/tenant/page',
            //         method:'GET',
            //         success: (res) => {
            //             that.tenantArr = res.data.data.records;
            //             if(that.tenantArr.length>0 ){
            //                 for (var i = 0; i < that.tenantArr.length; i++) {
            //                     if(that.tenantArr[i].tenantName!=""){
            //                         that.tenantNameArray.push(that.tenantArr[i].tenantName);
            //                     }
            //                 }
            //             }
            //         }
            //     });
            // },
			
            //客户名称下拉改变事件
            // tenantNameSelect(e) {
            //     var that = this;
            //     this.tenantNameArrayIndex = e.target.value;
            //     this.tenantNameArrayType=this.tenantNameArray[this.tenantNameArrayIndex];
            //     //获取id
            //     for (var i = 0; i < that.tenantArr.length; i++) {
            //         if(that.tenantArr[i].tenantName==that.tenantNameArrayType){
            //             that.id = that.tenantArr[i].id;
            //             that.tenantName = that.tenantArr[i].tenantName;
            //             that.linkman = that.tenantArr[i].linkman;
            //             that.contactNumber = that.tenantArr[i].contactNumber;
            //             that.address = that.tenantArr[i].address;
            //             that.type = that.tenantArr[i].type;
            //             if(that.tenantArr[i].type=="1"){
            //                 that.typeArrayType = '学校';
            //             }
            //             if(that.tenantArr[i].type=="2"){
            //                 that.typeArrayType = '医院';
            //             }
            //             if(that.tenantArr[i].type=="3"){
            //                 that.typeArrayType = '小区';
            //             }
            //             that.domain = that.tenantArr[i].domain;
            //         }
            //     }
				
            // },
			
            //客户类型下拉改变事件
            typeSelect(e){
                var that = this;

 xcxjingqingmap_patrol/css/body.css

@@ -8,60 +8,125 @@
#mapVue {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

#mapVue {
    overflow: hidden;
    /* border: solid 1px springgreen; */
    height: 65%;
}

#seedata {
    position: fixed;
    bottom: 0;
    position: relative;
    width: 100%;
    height: 40%;
    height: 35%;
    z-index: 401;
    background-color: #fff;
    /* background-color: #007AFF; */
    opacity: 0.9;
    display: flex;
    flex-direction: column;
    border-radius: 60px 60px 0 0;
    /* border-radius: 60px; */
}

.title {
    width: 100%;
    height: 14%;
    position: relative;
    z-index: 400;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.title-span {
    position: relative;
    left: 15%;
    top: 10px;
    float: left;
    width: 50%;
}


/* .title::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: springgreen solid 1px;
} */

.main {
    /* display: flex; */
    justify-content: center;
    border-top: 1px solid rgb(138, 138, 138);
}

.f-m-once {
    width: 100%;
    height: 40px;
    position: relative;
    top: 15px;
    left: 15px;
}

.f-m-o-title {
    font-weight: 550;
    font-size: 14px;
}

.f-m-once input {
    width: 200px;
    height: 20px;
    position: relative;
    left: 73px;
    top: -21px;
    border: none;
    font-size: 15px;
    font-family: "微软雅黑";
}

.f-m-once img {
    position: relative;
    left: 85px;
    top: -22px;
    width: 25px;
    height: 25px;
}

.f-m-once textarea {
    position: relative;
    height: 45px;
    line-height: 1.5;
    width: 200px;
    left: 73px;
    top: -21px;
    font-size: 15px;
    font-family: "微软雅黑";
    border: none;
}

.btn {
    width: 90px;
    height: 90px;
    border-radius: 100px;
    border: none;
    color: #FFFFFF;
    background-color: #007AFF;
    position: relative;
    left: 150px;
    top: 40px;
    letter-spacing: 1px;
}

#routeBtn {
    background-color: cornflowerblue;
}

#areaBtn {
    background-color: darkgrey;
}

.route-area-tab {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    z-index: 999;
}

.route-span {
    width: 30%;
    height: 100%;
    background-color: #007AFF;
    float: left;
    font-size: 16px;
    font-weight: 550;
    text-align: center;
    line-height: 40px;
    border-radius: 20px 20px 0px 0px;
}

.area-span {
    width: 30%;
    height: 100%;
    background-color: darkgrey;
    float: left;
    font-size: 16px;
    font-weight: 550;
    text-align: center;
    line-height: 40px;
    border-radius: 20px 20px 0px 0px;
}

 xcxjingqingmap_patrol/js/move.js

@@ -3,123 +3,138 @@
    this.m = $(dom);
    this.div = $(div);
    this.mapId = $(map);
    this.__xx = null;//鼠标实时位置
    this.__xx = null; //鼠标实时位置
    this.__yy = null;
    this.__sx = null;//鼠标开始位置
    this.__sx = null; //鼠标开始位置
    this.__sy = null;
    this.__dx = null;//dom位置
    this.__dx = null; //dom位置
    this.__dy = null;
    this.mapH = null;//地图高度
    this.__wy = null;//屏幕高度
    this.state = "up";//dom状态默认up
    this.mapH = null; //地图高度
    this.__wy = null; //屏幕高度
    this.state = "up"; //dom状态默认up

    this.getMosePosition = (x, y) => {//获取鼠标位置
    this.getMosePosition = (x, y) => { //获取鼠标位置
        this.__sx = x;
        this.__sy = y;
        // console.log(this.__sy, '鼠标开始');

    }
    this.getDomPosition = () => {//获取dom位置
    this.getDomPosition = () => { //获取dom位置
        this.__dx = this.m.offset().left;
        this.__dy = this.m.offset().top;
        this.__wy = document.documentElement.clientHeight;
        // console.log(this.__dy, 'dom');
        console.log(this.__dy, 'dom');
    }
    this.getMapHeight = () => {//获取地图高度
    this.getMapHeight = () => { //获取地图高度
        var that = this;
        this.mapId.css("height", (index, value) => {
            that.mapH = parseFloat(value);
        })
        // console.log(that.mapH, 'map位置');
                that.mapH = parseFloat(value);
            })
            // console.log(that.mapH, 'map位置');
    }
    this.changeDomPosition = (x, y, dy) => {//改变dom位置
    this.changeDomPosition = (x, y, dy) => { //改变dom位置
        var that = this;
        // this.mapId.css("height", (index, value) => {//改变地图高度
        //     var h = this.mapH + y;
        //     console.log(h);
        //     return h ;
        // })
        this.m.animate({ top: dy + "px" }, 10);
        this.m.animate({ top: this._dy + "px" }, 10);

    }


    //begin
    this.followFinger = (map, state = 14) => {//(地图实例，dom状态判断是向上还是向下)
        // console.log('开始跟随手指');
    this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下)
        console.log('开始跟随手指');
        var that = this;
        if(state != 14){
        if (state != 14) {
            that.state = state;
            // console.log(that.state);
        }
        that.getDomPosition();//获取dom位置
        that.getMapHeight();//获取地图高度
        that.getDomPosition(); //获取dom位置
        that.getMapHeight(); //获取地图高度
        var once = true;
        that.div.on('touchmove', function (e) {//获取鼠标位置
        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;
            if (once) {//获取第一次点击的位置
            if (once) { //获取第一次点击的位置
                once = false;
                that.getMosePosition(that.__xx, that.__yy);
            }
            // console.log(that.__yy, '鼠标');
            var h = that.__yy - that.__sy//鼠标移动距离y
            var h = that.__yy - that.__sy //鼠标移动距离y

            if (that.state == 'down') {//两种模式
            if (that.state == 'down') { //两种模式
                // console.log(that.state);
                if (h >= 0 && h + that.__dy <= that.__wy - 20) {
                    that.changeDomPosition(0, h, h + that.__dy);//改变位置
                if (h >= 0 && h + that.__dy <= that.__wy - 100) {
                    that.changeDomPosition(0, h, h + that.__dy); //改变位置
                    // console.log(that.state,h + that.__dy,112);
                }
            } else if (that.state == 'up') {
            }
            if (that.state == 'up') {
                if (h >= -that.__dy && h <= that.__wy - 20) {
                    that.changeDomPosition(0, h, h + that.__wy - 20);//改变位置
                    that.changeDomPosition(0, h, h + that.__wy - 20); //改变位置
                    // console.log(that.state,h + that.__wy - 20,112);
                }
            }

        });
        that.div.on('touchend', function () {//抬起重置
            once = true;//抬起重置鼠标点击位置
            if (that.state == 'down') {//两种模式
        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;
            } else if (that.state == 'up') {
                var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
            }
            if (chous) {
                that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));//改变位置
                //改变dom位置
                that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'down';
                $('#map').css("height", (index, value) => {//改变地图高度
                    return '50%';
                })
                map.invalidateSize(true);//应用地图高度
                if (this.tab == 1) {
                    $('#map').css("height", (index, value) => { //改变地图高度
                        return '80%';
                    })
                }
                if (this.tab == 2) {
                    $('#map').css("height", (index, value) => { //改变地图高度
                        return '65%';
                    })
                }

                map.invalidateSize(true); //应用地图高度
            } else {
                that.changeDomPosition(0, 0, that.__wy - 50);//改变位置
                // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
                that.changeDomPosition(0, 0, that.__wy); //改变位置
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'up';
                $('#map').css("height", (index, value) => {//改变地图高度
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '100%';
                })
                map.invalidateSize(true);//应用地图高度
                map.invalidateSize(true); //应用地图高度
            }
            that.getMapHeight();//抬起获取map高度
            that.getMapHeight(); //抬起获取map高度
        });
    }
    this.destruction = () => {//初始化销毁
    this.destruction = () => { //初始化销毁
        this.m = $(dom);
        this.div = $(div);
        this.mapId = $(map);
        this.__xx = null;//鼠标实时位置
        this.__xx = null; //鼠标实时位置
        this.__yy = null;
        this.__sx = null;//鼠标开始位置
        this.__sx = null; //鼠标开始位置
        this.__sy = null;
        this.__dx = null;//dom位置
        this.__dx = null; //dom位置
        this.__dy = null;
        this.mapH = null;//地图高度
        this.__wy = null;//屏幕高度
        this.state = "up";//dom状态默认up
        this.mapH = null; //地图高度
        this.__wy = null; //屏幕高度
        this.state = "up"; //dom状态默认up
        this.div.off();
    }
}

 xcxjingqingmap_patrol/js/vueMain.js

@@ -9,8 +9,8 @@
        nowIndex: 1,

        //基础路径
        // pathUrl: "http://localhost:89",
        pathUrl: "https://web.byisf.com/api/blade-jfpts",
        pathUrl: "http://localhost:89",
        // pathUrl: "https://web.byisf.com/api/blade-jfpts",

        layer: null,

@@ -32,27 +32,45 @@
            that.beginCome(tab);
        },

        //巡逻路线区域点击事件
        handleClick(tab) {
            this.tab = tab;
            //路线
            if (tab == 1) {
                //修改样式
                document.getElementById("line").style.display = "block";
                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%";
                //展示巡逻路线
                this.showPolyLine(this.map);

            }

            //区域
            if (tab == 2) {
                //修改样式
                document.getElementById("line").style.display = "none";
                document.getElementById("area").style.display = "block";
                //巡逻区域
                document.getElementById("routeBtn").style.backgroundColor = "darkgrey";
                document.getElementById("areaBtn").style.backgroundColor = "cornflowerblue";
                document.getElementById("seedata").style.height = "20%";
                document.getElementById("map").style.height = "80%";
                //展示巡逻区域
                this.showPolygon(this.map);
            }
        },

        beginCome(tab) {
            this.snumber = this.getQueryVariable('snumber'); //url解码
            this.map = this.beginMap(this.map, this.getdata, tab); //创建并接受map
            this.move = new myDomMove('#seedata', '.title', '#map');
            this.map.invalidateSize(true); //应用地图高度
            //url解码
            this.snumber = this.getQueryVariable('snumber');
            //创建并接受map
            this.map = this.beginMap(this.map, this.getdata, tab);
            this.move = new myDomMove('#seedata', '.route-area-tab', '#map');
            //应用地图高度
            this.map.invalidateSize(true);
            this.move.followFinger(this.map, 'down');
        },

@@ -62,7 +80,8 @@
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); } //解码url 和 JSON
                //解码url 和 JSON
                if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); }
            }
            return (false);
        },
@@ -70,15 +89,17 @@
        //开始
        beginMap(map, data, tab) {
            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: [28.7012481186582, 115.852228372357],
                //初始化地图
                map = L.map('map', {
                    center: [28.7012481186582, 115.852228372357],
                    zoom: 12,
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
                    zoomControl: false, //去掉缩放
                });
                L.tileLayer( //添加切片图层
                //添加切片图层
                L.tileLayer(
                    //顺丰地图
                    // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {}
@@ -96,10 +117,10 @@
                this.showPolygon(map);
            }

            map.locate({
                setView: true,
                maxZoom: 16
            });
            // map.locate({
            //     setView: true,
            //     maxZoom: 16
            // });
            //抛出map
            return map;
        },

 xcxjingqingmap_patrol/xcxmap.html

@@ -47,49 +47,44 @@

<body>
    <div id="mapVue">
        <div id="map"></div>
        <div id="map">
            <div class="route-area-tab">
                <div class="route-span" @click="handleClick(1)" id="routeBtn">巡逻路线</div>
                <div class="area-span" @click="handleClick(2)" id="areaBtn">巡逻区域</div>
            </div>
        </div>

        <div id="seedata">
            <div class="title">
                <div class="title-span" @click="handleClick(1)">巡逻路线</div>
                <div class="title-span" @click="handleClick(2)">巡逻区域</div>
            </div>
            <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>
                            <div class="f-m-o-center"></div>
                            <input class="f-m-o-center"></input>
                        </div>
                        <div class="f-m-once">
                            <div class="f-m-o-title">路线备注: </div>
                            <div class="f-m-o-center"></div>
                            <textarea class="f-m-o-center"></textarea>
                        </div>
                        <div class="f-m-once">
                        <div class="f-m-once" style="top: 45px;">
                            <div class="f-m-o-title">照片上传: </div>
                            <div class="f-m-o-center"></div>
                            <image src="./img/photo.png"></image>
                        </div>
                        <button class="btn">开始巡逻</button>
                    </div>
                    <!-- </el-tab-pane> -->
                    <!-- <el-tab-pane label="巡逻区域" name="two"> -->
                    <div id="area" class="f-main" style="display: none;">
                        <div class="f-m-once">
                            <div class="f-m-o-title">区域名称: </div>
                            <div class="f-m-o-center"></div>
                            <input class="f-m-o-center"></input>
                        </div>
                        <div class="f-m-once">
                            <div class="f-m-o-title">区域备注: </div>
                            <div class="f-m-o-center"></div>
                            <textarea class="f-m-o-center"></textarea>
                        </div>
                    </div>
                    <!-- </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>
                    <!-- {{seedata.jd}}-{{seedata.wd}} -->
                </div>
            </div>
        </div>