<template>
|
<view class="content">
|
<u-top-tips ref="uTips"></u-top-tips>
|
<map id="map" style="width: 100%; height: 30vh;" scale="14" :latitude="latitude" :longitude="longitude"
|
:polyline="polyline">
|
<!-- <cover-view class="dingwBut" @click="getSelfLocation">
|
<cover-image src="../../static/images/map/img/dingwei.png"></cover-image>
|
</cover-view> -->
|
</map>
|
<view id="Umain" style="height: 71%;z-index: 9999;">
|
<view class="once-b">
|
巡查详情
|
</view>
|
<view class="once">
|
<span class="once-left">
|
巡查标题
|
</span>
|
<span class="once-right">
|
{{taskinfoData.title}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
巡查内容
|
</span>
|
<span class="once-right">
|
{{taskinfoData.content}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
开始时间
|
</span>
|
<span class="once-right">
|
{{taskinfoData.startTime}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
预计结束
|
</span>
|
<span class="once-right">
|
{{taskinfoData.endTime}}
|
</span>
|
</view>
|
<view class="once">
|
<span class="once-left">
|
状态
|
</span>
|
<span class="once-right">
|
{{taskinfoData.state == 0?'待开始':taskinfoData.state == 1?'正在进行':'已完成'}}
|
</span>
|
</view>
|
<view class="once-c">
|
<u-button v-if="taskinfoData.state == 0" type="success" @click="startTask(taskinfoData)">开始任务</u-button>
|
<u-button v-if="taskinfoData.state == 1" type="success" @click="finishTask(taskinfoData)">完成任务</u-button>
|
<u-button v-if="taskinfoData.state == 1" type="error" @click="goToEventsReported(taskinfoData.id)">事件上报</u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getDetail,
|
update
|
} from "@/api/taskinfo/taskinfo"
|
export default {
|
data() {
|
return {
|
id: 0,
|
taskinfoData: {},
|
_mapContext: null,
|
latitude: '',
|
longitude: '',
|
polyline: null,
|
//路线默认属性
|
polylineObj: {
|
color: "#10a4ff", //线的颜色
|
width: 10, //线的宽度
|
dottedLine: false, //是否虚线
|
arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
|
},
|
}
|
},
|
methods: {
|
getSelfLocation() {
|
var _that = this;
|
uni.getLocation({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success(res) {
|
_that.latitude = res.latitude
|
_that.longitude = res.longitude
|
}
|
})
|
},
|
getTaskinfoDetail() {
|
var _that = this
|
getDetail(_that.id).then(res => {
|
_that.taskinfoData = res.data;
|
let routeRange = _that.taskinfoData.routeRange
|
if (routeRange) {
|
//处理地图路线 //
|
routeRange = _that.taskinfoData.routeRange.replace('LINESTRING', '')
|
.replace('\(', '').replace('\)', '')
|
let ranges = routeRange.split(',')
|
var pointsArr = []
|
for (var i = 0; i < ranges.length; i++) {
|
let postion = ranges[i].split(' ')
|
var points = {
|
longitude: postion[0],
|
latitude: postion[1]
|
}
|
pointsArr.push(points)
|
|
}
|
_that.polylineObj.points = pointsArr
|
_that.polyline = [_that.polylineObj]
|
_that.longitude = ranges[0].split(' ')[0]
|
_that.latitude = ranges[0].split(' ')[1]
|
|
} else {
|
_that.getSelfLocation() //如果没有绘制路线显示当前位置地图
|
}
|
})
|
|
},
|
//任务开始事件
|
startTask(item) {
|
uni.showModal({
|
title: "提示",
|
content: "是否开始任务？",
|
success: (res) => {
|
if (res.confirm) {
|
item.state = '1'
|
item.routeRange = '\'' + item.routeRange + '\''
|
update(item).then(res => {
|
if (res.code == 200) {
|
this.getTaskinfoDetail()
|
}
|
})
|
}
|
}
|
})
|
},
|
finishTask(item) {
|
uni.showModal({
|
title: "提示",
|
content: "是否结束任务？",
|
success: (res) => {
|
if (res.confirm) {
|
item.state = '2'
|
item.routeRange = '\'' + item.routeRange + '\''
|
update(item).then(res => {
|
if (res.code == 200) {
|
this.getTaskinfoDetail()
|
}
|
})
|
}
|
}
|
})
|
},
|
goToEventsReported(id) {
|
uni.navigateTo({
|
url: "/pages/eventgm/eventsReported?id="+id
|
})
|
},
|
},
|
onLoad: function(options) {
|
if (options.id) {
|
this.id = options.id
|
this.getTaskinfoDetail()
|
}
|
},
|
onReady() {
|
console.log(this.polyline)
|
}
|
}
|
</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;
|
position: absolute;
|
bottom: 0;
|
}
|
|
.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;
|
}
|
|
.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>
|
