<template>
|
<view class="content">
|
<u-top-tips ref="uTips"></u-top-tips>
|
<!-- <u-button type="info" @click="acc">测试</u-button> -->
|
<!-- <web-view :src="urls" @message="message"></web-view> -->
|
<map :scale='18' id="myMap" style="width: 100%" :style="{height: mapHeight + 'px'}" :markers="markers"
|
:longitude="longitude" :latitude="latitude" :circles="circles" :polyline="mypolylines" show-location="true">
|
|
<cover-view class="dingwBut" @click="mapControlsBack">
|
|
<cover-image src="./map/img/dingwei.png" @click="mapControlsBack" :class="[oncePotion?'oncePotion':'']">
|
</cover-image>
|
</cover-view>
|
|
</map>
|
<view id="Umain" :style="{ height: activeHeight}" @touchstart="touchstart" @touchend="touchend"
|
@touchmove="touchmove">
|
<view :class="['activeTip',activeTip?'isOpens':'notOpens'] " :style="{height:'30px'}"></view>
|
<view class="once-b">
|
巡查详情
|
</view>
|
<view class="once">
|
<span class="once-left">
|
巡查标题
|
</span>
|
<span class="once-right">
|
{{ourData.rname}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
巡查内容
|
</span>
|
<span class="once-right">
|
{{ourData.content}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
发布者
|
</span>
|
<span class="once-right">
|
<span>{{ourData.fname}}</span>
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
联系方式
|
</span>
|
<span class="once-right">
|
<span>{{ourData.phone}}</span>
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
集合点
|
</span>
|
<span class="once-right" @click="openMeeting">
|
{{ourData.gathername}}
|
<u-icon name="map-fill" color="#429FFF"></u-icon>
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
开始时间
|
</span>
|
<span class="once-right">
|
{{ourData.time}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
预计结束
|
</span>
|
<span class="once-right">
|
{{ourData.endtime}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
人数
|
</span>
|
<span class="once-right">
|
{{ourData.num}} / {{ourData.jnum}}
|
</span>
|
</view>
|
<!-- <view class="once">
|
<span class="once-left">
|
队长
|
</span>
|
<span class="once-right">
|
<span>{{ourData.captain}}</span>
|
</span>
|
</view> -->
|
<view class="once">
|
<span class="once-left">
|
参与者
|
</span>
|
<span class="once-right">
|
<span v-for="(item,index) in ourData.teams">{{item}}</span>
|
</span>
|
</view>
|
<view class="once-c" v-if="ourData.buttype == 0">
|
<u-button :type="ourData.butCT == 'beginUp'?'primary':ourData.butCT == 'begin'?'success':'info'"
|
@click="openAPP(ourData.buttype)" :disabled="ourData.butCT== 'over' || ourData.iscation == '0'">
|
{{ourData.butCT == 'beginUp'?(ourData.iscation == '0'?'正在进行':'上传反馈'):ourData.butCT == 'begin'?(ourData.iscation == '0'?'还未开始':'开始任务'):'任务完成'}}
|
</u-button>
|
</view>
|
<view class="once-c" v-if="ourData.buttype == 1">
|
<u-button :type="ourData.num==ourData.jnum?'info':'success'" @click="openAPP(ourData.buttype)"
|
:disabled="(ourData.num==ourData.jnum)&& ourData.buttype==1 ||ourData.type == 1">
|
{{ourData.num==ourData.jnum?"人数已满":'我参与'}}
|
</u-button>
|
</view>
|
|
<view class="once-c" v-if="ourData.buttype == 2">
|
<u-button type="info" :disabled="true">
|
已完成
|
</u-button>
|
</view>
|
|
</view>
|
<u-popup v-model="showIn" mode="bottom" border-radius="14" z-index='1000001' :mask-close-able="true">
|
<view class="Info2">
|
<view class="Info4">是否参加活动</view>
|
<button class="Info5" type="primary" @click="openAPP('oks')">参加</button>
|
<button class="Info5" type="error" @click="openAPP('nos')">取消</button>
|
<!--<view class="Info3">
|
</view> -->
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import $moveUniAppMap from "./map/js/moveUniAppMap.js"
|
export default {
|
data() {
|
return {
|
urls: '',
|
// dataList: [],
|
fn: null,
|
rid: '',
|
webV: null,
|
wv: null,
|
mapHeight: 0,
|
latitude: 28.687205773173343,
|
longitude: 115.8995839881188,
|
circles: [{ //集合点
|
latitude: '',
|
longitude: '',
|
// fillColor: "#429FFF", //填充颜色
|
// color: "#A7B6CB", //描边的颜色
|
// radius: 2, //半径
|
// strokeWidth: 2, //描边的宽度
|
}, {
|
latitude: '',
|
longitude: '',
|
// fillColor: "#D9E6EF", //填充颜色
|
// color: "#A7B6CB", //描边的颜色
|
// radius: 10, //半径
|
// strokeWidth: 2, //描边的宽度
|
}], //圆
|
markers: [{ // 集合点
|
width: '80',
|
height: '80',
|
// label: {
|
// content: "集合点",
|
// color: "#FE0000",
|
// fontSize: 24,
|
// textAlign: "center",
|
// },
|
id: 1,
|
latitude: '',
|
longitude: '',
|
iconPath: '/static/dinw/location7.png',
|
}, {
|
width: '50',
|
height: '50',
|
id: 2,
|
latitude: '',
|
longitude: '',
|
iconPath: '/static/dinw/dinw13.png',
|
}], //标记点
|
jihelatitude: '', //集合点
|
jihelongitude: '', //集合点
|
mypolylines: [{ //指定一系列坐标点，从数组第一项连线至最后一项
|
points: [],
|
color: "#FE0000", //线的颜色
|
width: 10, //线的宽度
|
dottedLine: false, //是否虚线
|
arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
|
},
|
{ //指定一系列坐标点，从数组第一项连线至最后一项
|
points: [],
|
color: "#10a4ff", //线的颜色
|
width: 10, //线的宽度
|
dottedLine: false, //是否虚线
|
arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
|
},
|
],
|
useTime: null,
|
useTimeSet: null,
|
times: 3000,
|
setTimes: 3000,
|
ourData: {},
|
map: null,
|
domMove: null,
|
query: null,
|
showIn: false,
|
customStyle: {
|
backgroundColor: "#FFF",
|
},
|
bye: true,
|
types: '', //android?
|
moveDom: null, //移动实体类
|
activeHeight: "auto ", //活动高度 默认自动
|
afterClass: {},
|
activeTip: false, //是否展开
|
|
mapControls: [{
|
id: "1",
|
position: 20,
|
iconPath: "/static/tabbar/addSelectedIcon.png",
|
clickable: true,
|
}], //地图控件
|
inThere: true,
|
oncePotion: false,
|
}
|
},
|
methods: {
|
openMeeting() {
|
let that = this;
|
if (this.jihelatitude &&
|
this.jihelongitude) {
|
this.map.moveToLocation({
|
latitude: that.jihelatitude,
|
longitude: that.jihelongitude
|
});
|
}
|
},
|
mapControlsBack() {
|
// console.log(1111)
|
this.inThere = true;
|
this.oncePotion = true;
|
this.getLocationInfo("notSet");
|
// this.bye = false;
|
// this.timeBegin(1);
|
},
|
touchstart(e) {
|
// console.log(e.changedTouches[0].clientY)
|
if (this.moveDom) {
|
this.moveDom.ListenerTouchstart(e)
|
}
|
},
|
touchmove(e) {
|
// console.log(e.changedTouches[0].clientY)
|
if (this.moveDom) {
|
this.moveDom.ListenerTouchmove(e)
|
}
|
},
|
touchend(e) {
|
// console.log(e.changedTouches[0].clientY)
|
if (this.moveDom) {
|
this.moveDom.ListenerTouchend(e)
|
}
|
},
|
openAPP(type) {
|
let that = this;
|
if (type == "oks") {
|
let dataAppend = that.ourData;
|
dataAppend["serid"] = "," + (uni.getStorageSync("ids") || that.$store.state.puserID);
|
dataAppend["captain"] = uni.getStorageSync("name") || that.$store.state.puserName;
|
// console.log(dataAppend)
|
// return
|
uni.request({
|
url: that.$store.state.piAPI + "taskqd/Graborder",
|
method: "POST",
|
data: dataAppend,
|
header: {
|
"content-type": "application/json",
|
},
|
success(res) {
|
if (res.data.msg == "抢单成功") {
|
uni.showToast({
|
title: res.data.msg,
|
duration: 2000,
|
});
|
setTimeout(function() {
|
uni.redirectTo({
|
url: "/pages/grabOrders/grabOrdersZAYWXC/grabOrders?in=1"
|
})
|
}, 2200)
|
} else {
|
uni.showToast({
|
title: res.data.msg,
|
icon: 'none',
|
duration: 2000,
|
});
|
}
|
},
|
complete() {
|
that.showIn = false;
|
}
|
})
|
return
|
} else if (type == "nos") {
|
this.showIn = false;
|
return
|
}
|
// console.log(type)
|
if (type != 1) {
|
if (that.ourData.butCT == "beginUp") {
|
// 反馈
|
// if (that.onPosition) {
|
// that.onPosition.overContinued();
|
// }
|
this.bye = true;
|
uni.redirectTo({
|
url: '/pages/grabOrders/grabOrdersZAXC/feedback?data=' + JSON.stringify(this.ourData) +
|
'&other="11111"'
|
});
|
} else if (that.ourData.butCT == "begin") {
|
that.bye = true; //点击开始 这个页面就不用了
|
// 开始任务
|
// that.setUniAppMsg("hBackMsg", {
|
// type: "start",
|
// ourData: {
|
// id: that.ourData.id,
|
// serid: that.ourData.serid
|
// },
|
// fn: function(val) {
|
// if (val == "success") {
|
// // console.log("成功开启任务")
|
// that.ourData.butCT = "beginUp";
|
// that.ourData.rtype = '0';
|
// that.ourData.type = "0";
|
// }
|
// }
|
// })
|
let rid = that.ourData.id,
|
serid = uni.getStorageSync("ids") || that.$store.state.puserID,
|
type = 'start',
|
url = that.$store.state.piAPI + "taskqd/startTask?" +
|
`rid=${rid}&serid=${serid}&type=${type}`;
|
// uni.request({
|
// url: url,
|
// method: "get",
|
// // header: {
|
// // "content-type": "application/json",
|
// // },
|
// success(res) {
|
// // that.timeBegin(1);
|
// // that.ourData.butCT = "beginUp";
|
// // that.ourData.rtype = '0';
|
// // that.ourData.type = "0";
|
// },
|
// complete() {
|
// that.showIn = false;
|
// }
|
// })
|
let d = {
|
rid: rid,
|
serid: serid,
|
type: type,
|
// data: JSON.stringify(item),
|
goto: "grabOrdersZAXC",
|
that: that,
|
fn: () => {
|
// that.getGrabOrders(that.current); //重获取数据
|
// setTimeout(() => {
|
// that.openOnce(item);
|
// }, 500)
|
}
|
}
|
that.$store.commit('useWebScoketApi', d);
|
// axios.get(url).then((res) => {
|
// // console.log(res);
|
|
// })
|
}
|
} else {
|
this.showIn = true;
|
// this.openAPP('oks')
|
// this.$confirm('是否参与活动：' + this.ourData.rname + "?", '提示', {
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// type: 'success',
|
// center: true,
|
// customClass: "customClass"
|
// }).then(() => {
|
// let url = that.ourData.appenUrl + "taskqd/Graborder",
|
// ourDataAppend = that.ourData;
|
// console.log(url, ourDataAppend)
|
|
// }).catch(() => {
|
|
// });
|
}
|
},
|
// message(event) {
|
// let data = event.detail.data;
|
|
// console.log(data);
|
// },
|
// sendRequestData(res, plt = 0) {
|
// let param = JSON.stringify(res)
|
// console.log(param);
|
// if (plt == 1) {
|
// this.webV.postMessage({
|
// type: 'new',
|
// data: param
|
// })
|
// } else {
|
// this.wv.evalJS(`requestData(${param})`);
|
// }
|
// },
|
timeBegin(val) {
|
// console.log(this.bye)
|
let that = this;
|
if (this.bye) {
|
console.log("再见")
|
if (that.useTime) {
|
clearTimeout(that.useTime);
|
that.useTime = null;
|
}
|
if (that.useTimeSet) {
|
clearTimeout(that.useTimeSet);
|
that.useTimeSet = null;
|
}
|
return
|
}
|
if (this.useTime) {
|
return
|
} else {
|
//加入自己的路线基础 索引1
|
// this.mypolylines[1] = { //指定一系列坐标点，从数组第一项连线至最后一项
|
// points: [],
|
// color: "#10a4ff", //线的颜色
|
// width: 10, //线的宽度
|
// dottedLine: false, //是否虚线
|
// arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
|
// }
|
if (val == 1) {
|
that.getLocationInfo();
|
}
|
this.useTime = setTimeout(() => {
|
that.getLocationInfo();
|
clearTimeout(this.useTime);
|
that.useTime = null;
|
that.timeBegin();
|
}, that.times)
|
}
|
},
|
timeBeginSet(d) {
|
let that = this;
|
if (this.useTimeSet) {
|
return
|
} else {
|
that.$store.commit("setMsg", d)
|
this.useTimeSet = setTimeout(() => {
|
clearTimeout(this.useTimeSet);
|
that.useTimeSet = null;
|
}, that.setTimes)
|
}
|
},
|
mover(o, a) {
|
let that = this;
|
uni.createMapContext("myMap", this).moveToLocation({
|
longitude: o,
|
latitude: a,
|
});
|
},
|
getLocationInfo(val) {
|
var that = this;
|
uni.getLocation({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success(res) {
|
// console.log(res, "当前位置");
|
// console.log(res)
|
// return;
|
that.latitude = res.latitude
|
that.longitude = res.longitude
|
// console.log(that.latitude)
|
// console.log(that.longitude)
|
if (that.inThere) {
|
that.inThere = false;
|
that.oncePotion = false;
|
that.map.moveToLocation({
|
latitude: res.latitude,
|
longitude: res.longitude
|
});
|
}
|
// that.mover(res.longitude, res.latitude); //移动
|
// that.$store.commit("setMsg",d)
|
//标记点
|
that.markers[1].latitude = res.latitude;
|
that.markers[1].longitude = res.longitude;
|
that.circles[1].latitude = res.latitude;
|
that.circles[1].longitude = res.longitude;
|
// that.markers = [{
|
// id: 1,
|
// latitude: res.latitude,
|
// longitude: res.longitude,
|
// iconPath: './map/img/dinw/dinw1.png',
|
// }]
|
// that.circles = [{ //在地图上显示圆
|
// latitude: res.latitude,
|
// longitude: res.longitude,
|
// fillColor: "#D9E6EF", //填充颜色
|
// color: "#A7B6CB", //描边的颜色
|
// radius: 10, //半径
|
// strokeWidth: 2 //描边的宽度
|
// }]
|
if (val != "notSet") {
|
let util = require('../../../static/WSCoordinate.js');
|
let ress = util.transformFromGCJToWGS(res.latitude,
|
res.longitude);
|
let d = {
|
id: that.ourData.id,
|
intlat: [ress.longitude, ress.latitude],
|
intlatold: [res.longitude, res.latitude]
|
}
|
that.timeBeginSet(d) //30秒送数据
|
//加入绘制路线
|
let useDataPosition = {
|
latitude: res.latitude,
|
longitude: res.longitude
|
}
|
let lat = useDataPosition.latitude + '';
|
let long = useDataPosition.longitude + '';
|
let oldLat = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
|
that.mypolylines[1].points.length -
|
1].latitude + '';
|
let oldLong = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
|
that.mypolylines[1].points.length -
|
1].longitude + '';
|
if (lat != oldLat && long != oldLong) { //判断如果两次位置不一样 那就添加
|
that.mypolylines[1].points.push(useDataPosition);
|
}
|
// console.log(lat != oldLat && long != oldLong, 222222222222);
|
// console.log(that.mypolylines[1].points.length)
|
}
|
}
|
});
|
},
|
getDom(name, fn) {
|
this.query.select('#Umain').boundingClientRect(data => {
|
if (fn) {
|
fn(data)
|
}
|
}).exec()
|
},
|
checkDomHeight(data) {
|
// 声明定时器
|
var timer = null,
|
that = this;
|
// 检查dom是否执行完成
|
function checkDom() {
|
let useData;
|
that.query.select(data.name).boundingClientRect(data => {
|
// console.log('11111111')
|
// console.log(data);
|
if (data.fn) {
|
//回调函数
|
data.fn(data);
|
return;
|
} else {
|
return data;
|
}
|
}).exec()
|
return;
|
|
}
|
// 首次执行
|
checkDom();
|
},
|
showWindow() {
|
return
|
let sub = uni.getSubNVueById("myMap");
|
sub.show('slide-in-left', 200, () => {
|
console.log('subNVue 原生子窗体显示成功');
|
});
|
sub.setStyle({
|
"position": "absolute",
|
"width": "100%",
|
"height": "50%",
|
"left": "0px",
|
"bottom": "0px",
|
"background-color": "#FFF000",
|
"border-top-left-radius": "15px",
|
"border-top-right-radius": "15px"
|
});
|
},
|
sendMsg(data) {
|
uni.$emit('sub', {
|
project: data
|
});
|
},
|
hideWindow() {
|
let sub = uni.getSubNVueById("sub");
|
sub.hide('fade-out', 300)
|
},
|
},
|
computed: {
|
isOnTaskValue() {
|
if (this.$store.state.changes) {
|
return this.$store.state.isOnTaskValue;
|
} else {
|
return this.$store.state.isOnTaskValue;
|
}
|
},
|
// circlesCom() {
|
// // let d = [...this.circles, ...this.jihecircles];
|
// let d = [{
|
// id: 1,
|
// latitude: +data.latlong[0],
|
// longitude: +data.latlong[1],
|
// iconPath: './map/img/dinw/dinw6.png',
|
// }, {
|
// id: 2,
|
// latitude: +data.latlong[0],
|
// longitude: +data.latlong[1],
|
// iconPath: './map/img/dinw/dinw6.png',
|
// }];
|
|
// return d;
|
// },
|
// markersCom() {
|
// let d = [...this.markers, ...this.jihemarkers];
|
// console.log(d, 6666)
|
// return d;
|
// },
|
// mypolylinesCom() {
|
// // console.log(this.mypolylines,"333333333333333333333")
|
// return this.mypolylines.slice(0);
|
// },
|
socketValue() {
|
return this.$store.state.socketValue;
|
}
|
},
|
watch: {
|
socketValue() {
|
console.log(this.socketValue)
|
if (this.socketValue.type === "stop") {
|
// console.log("任务结束vuevueveu")
|
// this.$store.commit("stopTask", this.socketValue.rid);
|
this.bye = true;
|
uni.redirectTo({
|
url: "/pages/grabOrders/grabOrdersZAXC/grabOrders"
|
});
|
}
|
},
|
isOnTaskValue: {
|
handler(newName, oldName) {
|
// console.log("map", this.isOnTaskValue);
|
for (let k in this.isOnTaskValue) {
|
if (this.isOnTaskValue[k].id == this.rid) {
|
if (this.fn) {
|
this.fn(this.isOnTaskValue[k].intlat);
|
}
|
}
|
}
|
},
|
deep: true
|
}
|
},
|
// mounted() {},
|
mounted() {
|
let that = this;
|
|
this.types = uni.getSystemInfoSync();
|
|
var animation = uni.createAnimation({
|
duration: 1000,
|
timingFunction: 'linear',
|
})
|
|
this.animation = animation;
|
|
let activeHeight = 0;
|
this.getDom("#Umain", (res) => {
|
// console.log(res, 1111111111111111111111111111)
|
that.mapHeight = that.types.windowHeight - res.height + 30;
|
// that.mapHeight = 30;
|
that.activeHeight = res.height;
|
activeHeight = res.height;
|
let minHeight = 4 * 40 + 30
|
let d = {
|
activeDom: "#Umain",
|
adaptDom: "#myMap",
|
uni: uni,
|
maxHeight: activeHeight, //在外面获取活动区域的高度，
|
//在构造中动态获取会实时改变这个值
|
//导致改变固定的最高高度
|
useHeight: minHeight, //缩小后的高度、、可设置成保留高度
|
critical: (activeHeight - minHeight) / 3, //收缩程度，，可设置成总滑动距离的1/2 (maxHeight - useHeight) / 2
|
fn: (res) => {
|
// console.log(res)
|
if (res.state != 'on') {
|
that.mapHeight = that.types.windowHeight - res.height + 30;
|
} else {
|
if (res.translate) {
|
that.activeTip = true;
|
}
|
if (res.translate) {
|
that.activeTip = false;
|
}
|
}
|
|
if (res.translate === true) {
|
that.activeTip = true;
|
} else if (res.translate === false) {
|
that.activeTip = false;
|
}
|
that.activeHeight = res.height + 'px';
|
}
|
}
|
that.moveDom = new $moveUniAppMap(d);
|
})
|
// if (type == "android") {
|
// this.useHeight = "calc(100vh - 40px)";
|
// }
|
// window['hBackMsg'] = (val) => {
|
// // console.log(val)
|
// let d = {
|
// rid: val.data.id,
|
// serid: val.data.serid,
|
// type: val.type,
|
// that: that,
|
// fn: () => {
|
// // that.getGrabOrders(that.current); //重获取数据
|
// if (val.fn) {
|
// // console.log(111)
|
// val.fn("success");
|
// }
|
// }
|
// }
|
// that.$store.commit('useWebScoketApi', d);
|
// }
|
// window['setIntLat'] = (val) => {
|
// // console.log(fn);
|
// that.fn = val.fn || '';
|
// that.rid = val.rid || '';
|
// }
|
// window['showTip '] = (val) => {
|
// that.$refs.uTips.show({
|
// title: val,
|
// type: "warning",
|
// duration: '2300'
|
// })
|
// }
|
},
|
//监听返回
|
onBackPress(event) {
|
this.bye = true;
|
},
|
onLoad: function(options) {
|
this.map = uni.createMapContext("myMap", this);
|
var datas = {},
|
data = {},
|
that = this;
|
if (options.data == undefined) {
|
// data = JSON.stringify({
|
datas = {
|
appenUrl: "http://192.168.0.108:83/",
|
butCT: "begin",
|
buttype: 0,
|
captain: "我",
|
city: "南昌市",
|
content: "测试",
|
district: "西湖区",
|
id: 37,
|
integral: "222",
|
iscation: "1",
|
jnum: 3,
|
line: "LINESTRING(115.8995839881188 28.687205773173343,115.89391916267935 28.678966027079593,115.90404718391959 28.673644524394046,115.91211526863638 28.681369286356936)",
|
num: 1,
|
nums: 0,
|
province: "江西省",
|
publisher: "管理",
|
raddress: null,
|
rname: "测试1",
|
rtype: "0",
|
serid: "1123598821738675201,",
|
team: "你,他,它",
|
time: "2022-02-18 14:15:52",
|
type: "2",
|
fname: "管理者",
|
myid: 111,
|
myName: 222,
|
url: "http://61.131.136.25:2081/zhba/upload/20220218/67f0c8bf3e7b5024c64133691f265072.ico",
|
gather: "28.699957,115.862118",
|
gathername: "江西省南昌市红谷滩区沙井街道凤凰中大道南昌市公安局"
|
// })
|
}
|
} else {
|
datas = options.data;
|
}
|
// if (typeof data == "string") {
|
let i = 0;
|
let toStrings = (val) => {
|
// console.log(i++)
|
// console.log(val)
|
let d = {}
|
if (typeof val == "string") {
|
d = JSON.parse(val)
|
} else {
|
console.log(typeof val == "string")
|
// console.log(val)
|
data = val;
|
return
|
}
|
toStrings(d);
|
}
|
toStrings(datas);
|
// console.log(data)
|
if (data.team) {
|
data["teams"] = data.team.split(",");
|
}
|
if (data.gather) {
|
data["latlong"] = data.gather.split(",");
|
}
|
that.ourData = data;
|
this.latitude = +data.latlong[0];
|
this.longitude = +data.latlong[1];
|
//集合点
|
this.jihelatitude = +data.latlong[0];
|
this.jihelongitude = +data.latlong[1];
|
that.markers[0].latitude = data.latlong[0];
|
that.markers[0].longitude = data.latlong[1];
|
that.circles[0].latitude = data.latlong[0];
|
that.circles[0].longitude = data.latlong[1];
|
//集合标记点
|
// that.jihecircles = [{
|
// id: 444,
|
// latitude: +data.latlong[0],
|
// longitude: +data.latlong[1],
|
// iconPath: './map/img/dinw/dinw6.png',
|
// }]
|
// that.jihemarkers = [{ //在地图上显示圆
|
// latitude: +data.latlong[0],
|
// longitude: +data.latlong[1],
|
// fillColor: "#D9E6EF", //填充颜色
|
// color: "#A7B6CB", //描边的颜色
|
// radius: 20, //半径
|
// strokeWidth: 2 //描边的宽度
|
// }]
|
|
uni.getSystemInfo({ //初始化地图高度
|
success(res) {
|
that.mapHeight = res.windowHeight;
|
}
|
});
|
// console.log(data);
|
// return
|
// console.log(options.html)
|
// var a = options.html != undefined ? options.html : "xcxMapJQ/xcxmap.html";
|
// console.log(a)
|
// let a = "grabOrdersMap/xcxmap.html";
|
// this.urls = "http://61.131.136.25:2082/" + a + "?data=" + data;
|
// let name = 1; //1是本地 2是服务器
|
// // let name = 1;
|
// let b = this.$store.state.piAPI;
|
// if (b == '/api') {
|
// name = 1;
|
// }
|
// // "E:\liumy\qfqk\qfqks\qfqk-android\leafletMapOur\grabOrdersMap\xcxmap.html"
|
// let a = name == 1 ? "http://127.0.0.1:8848/qfqk-android/leafletMapOur/" : b.slice(0, b.indexOf('api'));
|
// // this.urls = a + "grabOrdersMap/xcxmap.html?data=" + data;
|
// // a = a.slice(0, a.indexOf('api'));
|
// this.urls = a + "grabOrdersMap/xcxmap.html?data=" + data;
|
// this.urls = "http://192.168.0.222:5500/xcxmap.html?data=" + data;
|
// // this.urls = "http://localhost:80?data=" + data;
|
// // http://127.0.0.1:8848/qfqk-android/grabOrdersMap/xcxmap.html
|
// // this.dataList = data;
|
// // console.log(this.urls);
|
// let type = uni.getSystemInfoSync().platform;
|
// if (type == "android") {
|
// //webView传值
|
// let currentWebview = this.$scope.$getAppWebview();
|
// setTimeout(() => {
|
// that.wv = currentWebview.children()[0];
|
// console.log(that.wv)
|
// }, 1000)
|
// window.addEventListener('message', e => {
|
// console.log(e)
|
// that.webV = e.source // window的对象
|
// console.log(e.data.data.arg, '接收h5页面发来的消息'); // 接收h5页面发来的消息(11) ====>H5端
|
// }, false)
|
// setTimeout(() => {
|
// that.sendRequestData("给html", 1);
|
// that.sendRequestData("给html", 2);
|
// }, 10000)
|
// }
|
that.query = uni.createSelectorQuery();
|
const _this = this;
|
// uni.getSystemInfo({
|
// success: (res) => {
|
// // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2
|
// // setTimeout(() => {
|
// // that.getDom('#Umain', data => {
|
// // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
|
// // console.log(res.screenHeight - data.height + res
|
// // .statusBarHeight)
|
// // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
|
// that.mapHeight = res.screenHeight - res.statusBarHeight - 466
|
// that.mapHeight = that.mapHeight
|
// // })
|
// // }, 1000)
|
|
// // that.query.select('#Umain').boundingClientRect(data => {
|
// // console.log('11111111')
|
// // console.log(data)
|
// // }).exec();
|
// // console.log(res)
|
// // let info = uni.createSelectorQuery().select("Umain");
|
// // info.boundingClientRect(function(data) { //data - 各种参数
|
// // console.log(data.width) // 获取元素宽度
|
// // }).exec()
|
// }
|
// })
|
// console.log(document.getElementById("Umain"))
|
// this.checkDomHeightId({
|
// domName: "getElementById",
|
// name: "Umain",
|
// fn: function(dom) {
|
// console.log(dom)
|
// let UmainHeights = dom.clientHeight;
|
// uni.getSystemInfo({
|
// success: (res) => {
|
// _this.mapHeight = res.screenHeight - res.statusBarHeight -
|
// UmainHeights
|
// _this.mapHeight = _this.mapHeight
|
// }
|
// })
|
// }
|
// })
|
// this.checkDomHeight({
|
// domName: "getElementsByClassName",
|
// name: "content",
|
// fn: function(dom) {
|
// // console.log(dom[0])
|
// // dom.style.height = h - UmainHeight + "px";
|
// // document.getElementsByClassName("dingwei")[0].style.bottom =
|
// // UmainHeight + 10 + "px";
|
// // that.map.invalidateSize(true);
|
|
// let h = dom[0].clientHeight;
|
// //因为按钮使用v-if所以在识别高度时候，but还没渲染所以手动添加 56px 不会变
|
// // console.log("应用数据")
|
// let UmainHeight = document.getElementById("Umain").clientHeight;
|
// // if (that.ourData.iscation == "1") {
|
// // UmainHeight += 56;
|
// // }
|
// //计算最小单位
|
// let rows = document.getElementsByClassName("once"),
|
// rowsHeight = 45;
|
// for (let ri = 0; ri < 3; ri++) {
|
// rowsHeight += rows[ri].clientHeight;
|
// }
|
// //适应高度
|
// that.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("myMap").style.height = h - res.height + "px";
|
// // console.log(h, res.height)
|
// // uni.getSystemInfo({
|
// // success: (res) => {
|
// // _this.mapHeight = h - res.height
|
// // _this.mapHeight = _this.mapHeight
|
// // }
|
// // })
|
// // 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);
|
// // _this.mapHeight = h - res.height;
|
// // _this.map.moveToLocation({
|
// // latitude: _this.latitude,
|
// // longitude: _this.longitude
|
// // });
|
// document.getElementById("myMap").style.height = h - res
|
// .height + "px";
|
// }
|
// // document.getElementsByClassName("dingwei")[0].style.bottom = res.height +
|
// // 10 + "px";
|
// },
|
// });
|
// that.domMove.init();
|
// }
|
// })
|
|
|
//画线
|
// console.log(data)
|
let line = data.line.split("(")[1].split(")")[0].split(",");
|
// console.log(line[0].split(" ")[1])
|
// console.log(line[0].split(" ")[0])
|
// this.latitude = line[0].split(" ")[1];
|
// this.longitude = line[0].split(" ")[0];
|
// this.map.moveToLocation({
|
// // latitude: line[0].split(" ")[1],
|
// // longitude: line[0].split(" ")[0]
|
// latitude: 40.013305,
|
// longitude: 118.685713
|
// });
|
let ourline = [];
|
for (let k in line) {
|
let ins = line[k].split(" ");
|
ourline.push({
|
latitude: +ins[1],
|
longitude: +ins[0]
|
})
|
}
|
// setTimeout(() => {
|
// this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
|
// points: ourline,
|
// color: "#FE0000", //线的颜色
|
// width: 10, //线的宽度
|
// dottedLine: false, //是否虚线
|
// arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
|
// }
|
that.mypolylines[0].points = ourline;
|
// console.log(this.mypolylines)
|
// }, 1000)
|
this.showWindow();
|
// this.getLocationInfo(data);
|
if (data.butCT == "beginUp" && data.buttype == 0) {
|
this.bye = false;
|
this.timeBegin(1);
|
}
|
},
|
beforeDestroy() {
|
this.$store.commit("changegotuGrabOrders");
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
// flex: 1;
|
// height: 100%;
|
overflow: hidden;
|
// position: relative;
|
}
|
|
#Umain {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.once {
|
width: 100%;
|
min-height: 40px;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
/* margin-bottom: 10px; */
|
border-bottom: 1px solid #e8e8e8;
|
padding: 0 10px;
|
}
|
|
.once-left {
|
width: 25%;
|
text-align: justify;
|
text-align-last: justify;
|
padding-right: 20px;
|
box-sizing: border-box;
|
}
|
|
.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: 60px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 8px 0;
|
background-color: #fff;
|
}
|
|
.once-b {
|
width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fff;
|
border-bottom: 1px solid #e8e8e8;
|
/* margin-bottom: 10px; */
|
}
|
|
.submits {
|
margin: 60rpx 90rpx 0;
|
border: none;
|
width: 572rpx;
|
height: 86rpx;
|
// line-height: 86rpx;
|
box-sizing: border-box;
|
border-radius: 15rpx;
|
background-color: #103289;
|
color: #ffffff;
|
|
&::after {
|
content: none;
|
}
|
|
&::before {
|
content: none;
|
}
|
|
&[disabled='true'] {
|
background: #e4e4e4;
|
font-size: 36rpx;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
}
|
}
|
|
|
.Info2 {
|
width: 100%;
|
// height: 100px;
|
padding: 0 10px;
|
|
.Info3 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 50px;
|
}
|
|
.Info4 {
|
width: 100%;
|
line-height: 50px;
|
font-size: 18px;
|
text-align: center;
|
height: 50px;
|
}
|
|
.Info5 {
|
margin-bottom: 10px !important;
|
width: 70%;
|
}
|
}
|
|
.notOpens {
|
&::after {
|
content: "";
|
display: block;
|
width: 20px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: 10px;
|
left: calc(50% - 10px);
|
border-radius: 5px;
|
transition: all 0.1s;
|
}
|
}
|
|
.activeTip {
|
background-color: #fff;
|
}
|
|
.isOpens {
|
&::after {
|
content: "";
|
display: block;
|
width: 13px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: 10px;
|
left: calc(50% - 12px);
|
border-radius: 5px;
|
transform: rotate(30deg);
|
transition: all 0.1s;
|
}
|
|
&::before {
|
content: "";
|
display: block;
|
width: 13px;
|
height: 4px;
|
background-color: rgba(202, 202, 202, 1);
|
position: absolute;
|
top: 10px;
|
left: calc(50% - 4px);
|
border-radius: 5px;
|
transform: rotate(-30deg);
|
transition: all 0.1s;
|
}
|
}
|
|
.dingwBut {
|
width: 80upx;
|
height: 80upx;
|
background-color: #fff;
|
border-radius: 20upx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
bottom: 40upx;
|
right: 40upx;
|
|
// background-color: red;
|
// .dingwButImg {
|
// width: 80%;
|
// height: 80%;
|
// }
|
// .icon{
|
// }
|
// &::after{
|
// content: url(map/img/dingwei.png);
|
// }
|
}
|
|
.oncePotion {
|
animation: mymove 0.5s infinite;
|
animation-timing-function: linear;
|
}
|
|
.dingwButtip {
|
bottom: 120 upx;
|
background-color: transparent;
|
color: #000000;
|
}
|
|
|
@keyframes mymove {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(1turn);
|
}
|
}
|
</style>
|
