| leafletMapOur/grabOrdersMap/css/body.css | ●●●●● patch | view | raw | blame | history | |
| leafletMapOur/grabOrdersMap/js/getPosition.js | patch | view | raw | blame | history | |
| leafletMapOur/grabOrdersMap/js/move.js | ●●●●● patch | view | raw | blame | history | |
| leafletMapOur/grabOrdersMap/js/moveold.js | ●●●●● patch | view | raw | blame | history | |
| leafletMapOur/grabOrdersMap/js/vueMain.js | ●●●●● patch | view | raw | blame | history | |
| leafletMapOur/grabOrdersMap/xcxmap.html | ●●●●● patch | view | raw | blame | history | |
| pages/grabOrders/grabOrders.vue | ●●●●● patch | view | raw | blame | history | |
| pages/grabOrders/map.vue | ●●●●● patch | view | raw | blame | history | |
| pages/home/home.vue | ●●●●● patch | view | raw | blame | history |
leafletMapOur/grabOrdersMap/css/body.css
@@ -19,7 +19,7 @@ #map { width: 100%; height: calc(100% - 300px); height: 100%; z-index: 1; } @@ -32,7 +32,7 @@ position: fixed; width: 38px; height: 38px; bottom: 8.5rem; bottom: 0rem; right: 0; z-index: 10; background-color: #fff; @@ -88,30 +88,59 @@ /* border: 1px solid gray; */ } #Umain{ #Umain { position: absolute; width: 100%; height: 300px; height: auto; left: 0; bottom: 0; background-color: #e8e8e8; z-index: 100; } .once{ .once { width: 100%; height: 40px; min-height: 40px; background-color: #fff; display: flex; align-items: center; /* margin-bottom: 10px; */ border-bottom: 1px solid #e8e8e8; padding:0 10px ; padding: 0 10px; } .once-left{ .once-left { width: 25%; text-align: justify; text-align-last: justify; padding-right: 20px; box-sizing: border-box; } .once-c{ .once-left::after { content: "："; position: absolute; } .once-right { width: calc(75% - 20px); height: auto; /* border: 1px solid red; */ box-sizing: border-box; word-break: break-all; } .once-right span { display: inline-block; padding: 0px 5px 1px; margin: 0 5px; background-color: #ECF5FF; border: 0.5px solid #e4f1ff; color: #429FFF; border-radius: 8px; } .once-c { width: 100%; height: 40px; display: flex; @@ -120,7 +149,8 @@ padding: 8px 0; background-color: #fff; } .once-b{ .once-b { width: 100%; height: 40px; display: flex; @@ -130,7 +160,8 @@ border-bottom: 1px solid #e8e8e8; /* margin-bottom: 10px; */ } .customClass{ .customClass { width: 250px; height: 140px; } } leafletMapOur/grabOrdersMap/js/getPosition.js
leafletMapOur/grabOrdersMap/js/move.js
@@ -1,132 +1,173 @@ // 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom） function myDomMove(dom, div, map) { this.m = $(dom); this.div = $(div); this.mapId = $(map); this.__xx = null; //鼠标实时位置 this.__yy = null; this.__sx = null; //鼠标开始位置 this.__sy = null; this.__dx = null; //dom位置 this.__dy = null; this.mapH = null; //地图高度 this.__wy = null; //屏幕高度 this.state = "up"; //dom状态默认up class $moveWindow { constructor(data) { this.id = data.id; this.start = 0; this.end = 0; this.domHeight = 0; this.domMove = null; this.openValue = false; this.useHeight = data.minHeight; this.maxHeight = data.maxHeight; this.height = data.minHeight; this.critical = data.critical; this.openAnimation = data.openAnimation; let that = this; this.fn = data.fn ? (function(res) { // console.log("回调函数"); data.fn(res); that.changeHeight(res); // if (res.state === true) { // console.log(that.openValue, res.state) // } else if (res.state === false) { // console.log(that.openValue, res.state) // } }) : (function(res) { console.log("未设置回调函数"); console.log(res); }); this.getMosePosition = (x, y) => { //获取鼠标位置 this.__sx = x; this.__sy = y; // console.log(this.__sy, '鼠标开始'); } 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'); } this.getMapHeight = () => { //获取地图高度 var that = this; this.mapId.css("height", (index, value) => { that.mapH = parseFloat(value); }) // console.log(that.mapH, 'map位置'); } 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); } //begin this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下) // console.log('开始跟随手指'); 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) { //获取鼠标位置 e = e || window.event; that.__xx = e.touches[0].clientX; that.__yy = e.touches[0].clientY; if (once) { //获取第一次点击的位置 once = false; that.getMosePosition(that.__xx, that.__yy); } // console.log(that.__yy, '鼠标'); var h = that.__yy - that.__sy //鼠标移动距离y if (that.state == 'down') { //两种模式 // console.log(that.state); if (h >= 0 && h + that.__dy <= that.__wy - 20) { that.changeDomPosition(0, h, h + that.__dy); //改变位置 // console.log(that.state,h + that.__dy,112); } } else if (that.state == 'up') { if (h >= -that.__dy && 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; //抬起重置鼠标点击位置 var chous = null; if (that.state == 'down') { //两种模式 // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4; chous = (that.__sy - that.__yy) < 0; } else if (that.state == 'up') { // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4; chous = (that.__sy - that.__yy) < 0; } if (!chous) { //改变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); //应用地图高度 } else { // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置 that.changeDomPosition(0, 0, that.__wy); //改变位置 // that.getDomPosition();//抬起获取dom位置/持续停留使用 that.state = 'up'; $('#map').css("height", (index, value) => { //改变地图高度 return '100%'; }) map.invalidateSize(true); //应用地图高度 } that.getMapHeight(); //抬起获取map高度 }); } this.destruction = () => { //初始化销毁 this.m = $(dom); this.div = $(div); this.mapId = $(map); this.__xx = null; //鼠标实时位置 this.__yy = null; this.__sx = null; //鼠标开始位置 this.__sy = null; this.__dx = null; //dom位置 this.__dy = null; this.mapH = null; //地图高度 this.__wy = null; //屏幕高度 this.state = "up"; //dom状态默认up this.div.off(); } this.ListenerTouchmove = function(window) { let moseHeight = window.changedTouches[0].clientY; // let windowHeight = document.body.clientHeight; //屏幕宽度 let endOn = moseHeight; // console.log(that.domHeight, that.start, endOn) let cha = that.domHeight + (+that.start - +endOn); if (cha >= that.maxHeight) { cha = that.maxHeight; } else if (cha <= that.useHeight) { cha = that.useHeight; } let d = { state: "on", height: cha, }; that.fn(d); }; this.ListenerTouchstart = function(window) { let moseHeight = window.changedTouches[0].clientY; that.start = moseHeight; // that.domHeight = document // .getElementById(that.id) // .style.cssText.split("px")[0] // .split("height:")[1]; that.domHeight = document .getElementById(that.id) .clientHeight; }; this.ListenerTouchend = function(window) { let moseHeight = window.changedTouches[0].clientY; that.end = moseHeight; let cha, states; if (that.end >= that.start) { states = false; //方向 cha = that.end - that.start; } else { states = true; //方向 cha = that.start - that.end; } if (cha >= that.critical) { //高 that.opens(states, true); //程度 } else if (cha < that.critical) { //低 that.opens(states, false); //程度 } }; return this; } //启动监听事件 init() { // this.domMove = document.getElementById(this.id); let that = this; this.checkDom(that.id, (dom) => { //检测是否有dom that.domMove = dom; if (that.openAnimation) { that.domMove.style.transition = 'all 0.2s'; } that.domMove.addEventListener("touchmove", that.ListenerTouchmove); // 结束位置靠滑动距离判断 that.domMove.addEventListener("touchstart", that.ListenerTouchstart); that.domMove.addEventListener("touchend", that.ListenerTouchend); }); } //关闭监听事件 closeInit() { this.domMove = document.getElementById(this.id); this.domMove.removeEventListener("touchmove", this.ListenerTouchmove); // 结束位置靠滑动距离判断 this.domMove.removeEventListener("touchstart", this.ListenerTouchstart); this.domMove.removeEventListener("touchend", this.ListenerTouchend); } //输出事件 opens(val, chengdu) { if (chengdu) { this.openValue = val; if (val) { this.height = this.maxHeight; } else { this.height = this.useHeight; } } else { this.height = this.domHeight; } let d = { state: this.openValue, height: this.height, }; this.fn(d); } changeHeight(data) { document .getElementById(this.id).style.height = data.height + "px"; } checkDom(name, fn) { // 声明定时器 var timer = null; // 检查dom是否执行完成 function checkDom() { // let dom = that.$refs[name]; let dom = document.getElementById(name); if (dom) { // 执行dom加载完成后的操作 // 清除定时器 if (!timer) { clearTimeout(timer); } if (fn) { //回调函数 fn(dom); return; } else { return dom; } } else { // 自我调用 timer = setTimeout(checkDom, 100); } } // 首次执行 checkDom(); } // 结束位置是一半判断 // domMove.addEventListener("touchend", function (window) { // let moseHeight = window.changedTouches[0].clientY; // let windowHeight = document.body.clientHeight; // let cha = windowHeight - moseHeight; // console.log(cha, "最后位置"); // let centerPoint = // (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight; // if (cha >= centerPoint) { // cha = windowHeight / 2; // } else if (cha < centerPoint) { // cha = that.useHeight; // } // that.height = cha; // }); } // export default myDomMove; // export default moveWindow; // console.log(moveWindow) leafletMapOur/grabOrdersMap/js/moveold.js
New file @@ -0,0 +1,132 @@ // 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom） function myDomMove(dom, div, map) { this.m = $(dom); this.div = $(div); this.mapId = $(map); this.__xx = null; //鼠标实时位置 this.__yy = null; this.__sx = null; //鼠标开始位置 this.__sy = null; this.__dx = null; //dom位置 this.__dy = null; this.mapH = null; //地图高度 this.__wy = null; //屏幕高度 this.state = "up"; //dom状态默认up this.getMosePosition = (x, y) => { //获取鼠标位置 this.__sx = x; this.__sy = y; // console.log(this.__sy, '鼠标开始'); } 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'); } this.getMapHeight = () => { //获取地图高度 var that = this; this.mapId.css("height", (index, value) => { that.mapH = parseFloat(value); }) // console.log(that.mapH, 'map位置'); } 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); } //begin this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下) // console.log('开始跟随手指'); 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) { //获取鼠标位置 e = e || window.event; that.__xx = e.touches[0].clientX; that.__yy = e.touches[0].clientY; if (once) { //获取第一次点击的位置 once = false; that.getMosePosition(that.__xx, that.__yy); } // console.log(that.__yy, '鼠标'); var h = that.__yy - that.__sy //鼠标移动距离y if (that.state == 'down') { //两种模式 // console.log(that.state); if (h >= 0 && h + that.__dy <= that.__wy - 20) { that.changeDomPosition(0, h, h + that.__dy); //改变位置 // console.log(that.state,h + that.__dy,112); } } else if (that.state == 'up') { if (h >= -that.__dy && 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; //抬起重置鼠标点击位置 var chous = null; if (that.state == 'down') { //两种模式 // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4; chous = (that.__sy - that.__yy) < 0; } else if (that.state == 'up') { // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4; chous = (that.__sy - that.__yy) < 0; } if (!chous) { //改变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); //应用地图高度 } else { // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置 that.changeDomPosition(0, 0, that.__wy); //改变位置 // that.getDomPosition();//抬起获取dom位置/持续停留使用 that.state = 'up'; $('#map').css("height", (index, value) => { //改变地图高度 return '100%'; }) map.invalidateSize(true); //应用地图高度 } that.getMapHeight(); //抬起获取map高度 }); } this.destruction = () => { //初始化销毁 this.m = $(dom); this.div = $(div); this.mapId = $(map); this.__xx = null; //鼠标实时位置 this.__yy = null; this.__sx = null; //鼠标开始位置 this.__sy = null; this.__dx = null; //dom位置 this.__dy = null; this.mapH = null; //地图高度 this.__wy = null; //屏幕高度 this.state = "up"; //dom状态默认up this.div.off(); } } // export default myDomMove; leafletMapOur/grabOrdersMap/js/vueMain.js
@@ -136,11 +136,19 @@ serid: "1123598821738675201,", time: "无数据", url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg", buttype: "0", type:'1' buttype: "1", type: '1', captain: '队长', team: "张三,李四", iscation: '0', publisher: '管理者' } //url解码 this.data = this.getQueryVariable('data') || data; if (this.data.team) { this.data.team = this.data.team.split(','); } console.log(this.data) // this.getdata = data; // this.changeDom(this.getdata[0]);//改变地图高度 // console.log(this.getdata[0]); @@ -360,8 +368,9 @@ // }, //定位当前位置 locationMap() { // console.log([this.lat, this.lng]) this.map.setView([this.lat, this.lng], 20); // this.map.setView([this.lat, this.lng], 20); }, toJQposition() { this.map.setView([this.oldlat, this.oldlng], 20); @@ -551,21 +560,85 @@ }) // let point = L.circle([28.67705200351289,115.88518439579809],{color:'#FF0000',fillColor:'#FF0000',radius:1000000,fillOpacity:1}); map.addLayer(polyline) }, checkDomHeight(data) { // 声明定时器 var timer = null; // 检查dom是否执行完成 function checkDom() { let useData; if (data.domName == 'not') { useData = this[data.name]; } else { let dom = document[data.domName](data.name); useData = dom; } if (useData) { // 执行dom加载完成后的操作 // 清除定时器 if (!timer) { clearTimeout(timer); } if (data.fn) { //回调函数 data.fn(useData); return; } else { return dom; } } else { // 自我调用 timer = setTimeout(checkDom, 200); } } // 首次执行 checkDom(); } }, created() {}, mounted() { let that = this; this.getDataList(); // var time = setInterval(() => { // if (this.haveShishiweizhi == 1) { // this.getLocationData(); // // console.log(this.haveShishiweizhi) // } else if (this.haveShishiweizhi == 2) { // clearInterval(time); // time = null; // } // }, 1000) //map适应任务详情高度 // console.log(document.getElementById("map")) let UmainHeight = document.getElementById("Umain").clientHeight; let h = document.getElementById("mapVue").clientHeight; this.checkDomHeight({ domName: "getElementById", name: "map", fn: function(dom) { dom.style.height = h - UmainHeight + "px"; document.getElementsByClassName("dingwei")[0].style.bottom = UmainHeight + 10 + "px"; that.map.invalidateSize(true); } }) //开启滑动 //计算最小单位 let rows = document.getElementsByClassName("once"), rowsHeight = 45; for (let ri = 0; ri < 3; ri++) { rowsHeight += rows[ri].clientHeight; } this.domMove = new $moveWindow({ id: "Umain", minHeight: rowsHeight, maxHeight: UmainHeight, critical: (UmainHeight - rowsHeight) / 4, openAnimation: false, fn: function(res) { // console.log(that.map.options) document.getElementById("map").style.height = h - res.height + "px"; // that.map.setView([that.map.options.center[0], +that.map.options.center[1] + 0.002], that.map // .options.zoom); // console.log(h - res.height) if (res.state === true || res.state === false) { that.map.invalidateSize(true); } document.getElementsByClassName("dingwei")[0].style.bottom = res.height + 10 + "px"; }, }); this.domMove.init(); }, wacth: {} }) leafletMapOur/grabOrdersMap/xcxmap.html
@@ -97,7 +97,7 @@ </div> <div class="once"> <span class="once-left"> 任务标题： 任务标题 </span> <span class="once-right"> {{data.rname}} @@ -105,7 +105,7 @@ </div> <div class="once"> <span class="once-left"> 任务内容： 任务内容 </span> <span class="once-right"> {{data.content}} @@ -113,7 +113,15 @@ </div> <div class="once"> <span class="once-left"> 任务地区： 发布者 </span> <span class="once-right"> {{data.publisher}} </span> </div> <div class="once"> <span class="once-left"> 任务地区 </span> <span class="once-right"> {{data.province}} - {{data.city}} - {{data.district}} @@ -121,7 +129,7 @@ </div> <div class="once"> <span class="once-left"> 开始时间： 开始时间 </span> <span class="once-right"> {{data.time}} @@ -129,17 +137,32 @@ </div> <div class="once"> <span class="once-left"> 人 数： 人数 </span> <span class="once-right"> {{data.num}} / {{data.jnum}} </span> </div> <div class="once-c"> <div class="once"> <span class="once-left"> 队长 </span> <span class="once-right"> <span>{{data.captain}}</span> </span> </div> <div class="once"> <span class="once-left"> 参与者 </span> <span class="once-right"> <span v-for="(item,index) in data.team">{{item}}</span> </span> </div> <div class="once-c" v-if="data.buttype==1 || data.iscation == 1"> <!-- <el-button :type="data.type==1?'success':'primary'" >{{data.type==1?'我参与':'我反馈'}}</el-button> --> <!-- <el-button :type="data.num==data.jnum?'info':(data.type==1?'success':'primary')" @click="openAPP(data.type)" :disabled="data.num==data.jnum">{{data.num==data.jnum?"人数已满":(data.type==1?'我参与':'我反馈')}}</el-button> --> <el-button :type="data.buttype==1?(data.num==data.jnum||data.type==1?'info':'success'):'primary'" <el-button :type="data.buttype==1?(data.num==data.jnum||data.type==1?'info':'success'):'primary'" @click="openAPP(data.buttype)" :disabled="(data.num==data.jnum)&& data.buttype==1 ||data.type == 1"> {{data.buttype==1?(data.num==data.jnum?"人数已满":'我参与'):(data.type == 1?'完成反馈':'上传反馈')}} pages/grabOrders/grabOrders.vue
@@ -170,6 +170,7 @@ confirms() { let that = this; this.popupData["serid"] = uni.getStorageSync("ids") + ","; this.popupData["captain"] = that.$store.state.UserData.nick_name; // console.log(item) // return; uni.request({ pages/grabOrders/map.vue
@@ -30,7 +30,7 @@ // console.log(a) // let a = "grabOrdersMap/xcxmap.html"; // this.urls = "http://223.82.109.183:2082/" + a + "?data=" + data; let name = 2; //1是本地 2是服务器 let name = 1; //1是本地 2是服务器 // let name = 1; let b = this.$store.state.piAPI; if( b == '/api'){ pages/home/home.vue
@@ -42,6 +42,7 @@ <u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index"> <navigator hover-class="none" class="service-item" @click="goBusinessPage(item.url,index)"> <image :src="item.img" mode="widthFix" class="img"></image> <u-badge v-if="item.name == '我参与'" count="1" :offset="[20, 20]"></u-badge> <view class="name">{{ item.name }}</view> </navigator> </u-grid-item>
