lanan-old/rescue-user/pages/move/move.vue
愉快的大福 7dc28dc701 init
2024-07-17 14:16:22 +08:00

728 lines
17 KiB
Vue

<template>
<view class="container">
<!-- #ifdef APP-PLUS || H5 -->
<view class="c-top">
<view style="width: 10px; height: 100%;" @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-title">运力</view>
<view style="width: 10px; height: 100%;"></view>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="wx-top">
<view style="width: 10px; " @click="getback()">
<uni-icons type="left" size="18"></uni-icons>
</view>
<view class="c-title">运力</view>
<view style="width: 10px; height: 100%;"></view>
</view>
<!-- #endif -->
<view class="" v-if="arrlist != '' " style="position: relative;">
<view class="dingsi">
<view class="dingsibox">
<view class="shu" style="color: #78CB54;">{{yi}}</view>
<view class="zi">空闲</view>
</view>
<view class="dingsibox" >
<view class="shu" style="color: #FFAD3F;">{{er}}</view>
<view class="zi">暂停</view>
</view>
<view class="dingsibox">
<view class="shu" style="color: #FF3046;">{{san}}</view>
<view class="zi">忙碌</view>
</view>
<view class="dingsibox">
<view class="shu" style="color:#909090;">{{si}}</view>
<view class="zi">离线</view>
</view>
</view>
<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="arrlist[gindex].driverLatitude" :longitude="arrlist[gindex].driverLongitude"
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap' @tap="tap">
</map>
</view>
<view class="" v-if="arrlist == '' ">
<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="latitude" :longitude="longitude"
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap' @tap="tap">
</map>
</view>
<!-- <view class="" v-if="driverInfo != '' ">
<map style="width: 100%;height: 250px;" :layer-style='5' :latitude="detailsinfo.driverInfo.driverLatitude" :longitude="detailsinfo.driverInfo.driverLongitude"
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap' @tap="tap">
</map>
</view> -->
<view class="mubu">
<view class="zzhui">
<view class="sousuo">
<input type="text" placeholder="请输入师傅姓名/车牌号查询" v-model="searchValue" @blur="getmove()">
</view>
<view class="c-box" v-for="(item,index) in arrlist" :key="index" v-if="item.driverStatus == 1" >
<view class="box-title"><text>空闲</text> · {{item.realName || ''}} | {{item.rescueCarNum|| ''}}</view>
<view class="box-zi">
<uni-icons type="location" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 10px;">{{item.driverPositionInfo || ''}}</text>
</view>
<view class="box-bs">
<view class="gwu" style="border-right: 1px solid white;" @click="dwindex(index)">
<uni-icons type="circle-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">定位</text>
</view>
<view class="gwu" @click="gettel(item.phonenumber)">
<uni-icons type="phone-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">拨打电话</text>
</view>
</view>
</view>
<view class="c-box1" v-for="(item,index) in arrlist" :key="index" v-if="item.driverStatus == 2" >
<view class="box-title"><text>暂停</text> · {{item.realName || ''}} | {{item.rescueCarNum|| ''}}</view>
<view class="box-zi">
<uni-icons type="location" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 10px;">{{item.driverPositionInfo || ''}}</text>
</view>
<view class="box-bs">
<view class="gwu" style="border-right: 1px solid white;"@click="dwindex(index)">
<uni-icons type="circle-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">定位</text>
</view>
<view class="gwu" @click="gettel(item.phonenumber)">
<uni-icons type="phone-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">拨打电话</text>
</view>
</view>
</view>
<view class="c-box2" v-for="(item,index) in arrlist" :key="index" v-if="item.driverStatus == 3" >
<view class="box-title"><text>忙碌</text> · {{item.realName || ''}} | {{item.rescueCarNum|| ''}}</view>
<view class="box-zi">
<uni-icons type="location" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 10px;">{{item.driverPositionInfo || ''}}</text>
</view>
<view class="box-bs">
<view class="gwu" style="border-right: 1px solid white;" @click="dwindex(index)">
<uni-icons type="circle-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">定位</text>
</view>
<view class="gwu" @click="gettel(item.phonenumber)">
<uni-icons type="phone-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">拨打电话</text>
</view>
</view>
</view>
<view class="c-box3" v-for="(item,index) in arrlist" :key="index" v-if="item.driverStatus == 4" >
<view class="box-title"><text>离线</text> · {{item.realName || ''}} | {{item.rescueCarNum|| ''}}</view>
<view class="box-zi">
<uni-icons type="location" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 10px;">{{item.driverPositionInfo || ''}}</text>
</view>
<view class="box-bs">
<view class="gwu" style="border-right: 1px solid white;" @click="dwindex(index)">
<uni-icons type="circle-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">定位</text>
</view>
<view class="gwu" @click="gettel(item.phonenumber)">
<uni-icons type="phone-filled" color="#ffffff" size="18"></uni-icons>
<text style="margin-left: 15px;">拨打电话</text>
</view>
</view>
</view>
</view>
</view>
<tabBar :msg="msg"></tabBar>
</view>
</template>
<script>
import request from '../../utils/request';
import tabBar from'../../components/tabBar/tabBar.vue'
export default {
data() {
return {
msg:3,
ggindex: '',
gindex:0,
id:0,
page: 1,
num: 8,
arrlist: [],
searchValue:'',
arr: [],
latitude: 36.858810, //纬度
longitude: 117.749930, //经度
scale: 13, //缩放级别
compass: true,
marker: [],
baseUrl:this.$baseUrl,
detailsinfo:{},
timerId: null,
yi:0,
er:0,
san:0,
si:0
}
},
onLoad(option) {
this.getmove()
this.getPosition()
this.getsige()
},
mounted() {
},
onHide() {
this.destroyTimer();
},
components:{
tabBar,
},
methods: {
dwindex(index){
console.log(index);
this.gindex = index
},
getPosition() {
uni.getLocation({
type: 'wgs84',
getLocation:true,
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
this.longitude = res.longitude
this.latitude = res.latitude
}
});
},
getsige(){
request({
url: '/app/rescueInfo/driverInMap2',
method: 'get',
}).then((res)=>{
console.log(res);
this.yi = res.data.kxNum
this.er = res.data.ztNum
this.san = res.data.mlNum
this.si = res.data.lxNum
})
},
destroyTimer() {
clearInterval(this.timerId);
this.timerId = null;
},
gettel(num){
uni.makePhoneCall({
phoneNumber: num //仅为示例
});
},
getback(){
this.destroyTimer();
uni.navigateBack()
},
zhankai() {
this.num = 999
this.getmap()
},
// 列表
getmove(){
request({
url: '/app/rescueInfo/driverInMap?searchValue='+ this.searchValue,
method: 'get',
}).then((res)=>{
console.log('返回信息',res);
this.arrlist = res.data
let arrcopy = [];
for (var i = 0; i < this.arrlist.length; i++) {
let obj = {}
obj.id = res.data[i].id
obj.latitude = res.data[i].driverLatitude
obj.longitude = res.data[i].driverLongitude
obj.iconPath = res.data[i].carImage
obj.rotate = 0
obj.width = 25
obj.height = 40
obj.alpha = 1
let callout = {}
callout.content = res.data[i].rescueCarNum
callout.color = '#333333'
callout.fontSize = 10
callout.borderRadius = 0
callout.borderWidth = '0'
callout.bgColor = '#ffffff'
callout.display = 'ALWAYS'
console.log(obj);
obj.callout = callout
arrcopy.push(obj)
}
this.marker = arrcopy;
console.log(this.marker)
})
},
getmapdetails(){
request({
url: '/app/rescueInfo/rescueInfoDetail?rescueId='+this.id,
method: 'get',
}).then((res)=>{
console.log('返回信息',res);
this.detailsinfo = res.data
let arrcopy = [];
let obj = {}
obj.id = res.data.rescueInfo.id
obj.latitude = res.data.rescueInfo.rescueLatitude
obj.longitude = res.data.rescueInfo.rescueLongitude
obj.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/recueIcon.png'
obj.rotate = 0
obj.width = 25
obj.height = 40
obj.alpha = 1
let callout = {}
callout.content = ''
callout.color = '#ffffff'
callout.fontSize = 0
callout.borderRadius = 0
callout.borderWidth = '0'
callout.bgColor = 'transparent'
callout.display = 'ALWAYS'
console.log(obj);
obj.callout = callout
arrcopy.push(obj)
let driverPosition = {}
driverPosition.id = res.data.driverInfo.id
driverPosition.latitude = res.data.driverInfo.driverLatitude
driverPosition.longitude = res.data.driverInfo.driverLongitude
driverPosition.iconPath = 'http://www.nuoyunr.com/lananRsc/rescue/car3.png'
driverPosition.rotate = 0
driverPosition.width = 25
driverPosition.height = 40
driverPosition.alpha = 1
driverPosition.callout = callout
arrcopy.push(driverPosition)
this.marker = arrcopy;
console.log(this.marker)
})
},
shou() {
this.num = 8
this.getmap()
},
async getlist(id) {
this.ggindex = id
const res = await request({
url: 'GetMapList',
data: {
id: id,
page: 1,
num: 9999
}
})
uni.showLoading({
title: "加载中",
})
let arrlist = res.data
this.arrlist = arrlist
},
godetails(id) {
uni.navigateTo({
url: "/pages/map/mapDetails?id=" + id
})
},
// 点击标记点时触发
markertap(e) {
console.log('点击标记点时触发', e)
},
// 点击标记点对应的气泡时触发,
callouttap(e) {
console.log('点击标记点对应的气泡时触发', e)
},
// 点击地图时触发
tap(e) {
console.log('点击地图时触发', e)
}
}
}
</script>
<style scoped lang="scss">
.container {
box-sizing: border-box;
padding-bottom: 40rpx;
}
.c-top{
width: 100%;
box-sizing: border-box;
padding: 15px;
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.wx-top{
width: 100%;
height: 88px;
box-sizing: border-box;
padding: 15px;
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.sousuo{
width: 95%;
height: 40px;
margin: 10px auto;
display: flex;align-items: center;
box-sizing: border-box;
padding-left: 15px;
background: #F6F6F6;
border-radius: 50px;
input{
width: 100%;
}
}
.c-title{
font-size: 18px;
font-weight: bold
}
.c-box {
background: linear-gradient(91deg, #78CB54 0%, rgba(120,203,84,0.4) 100%);
width: 95%;
margin: 10px auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
color: white;
}
.c-box1 {
background: linear-gradient(91deg, #FFAD3F 0%, rgba(255,173,63,0.4) 100%);
width: 95%;
margin: 10px auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
color: white;
}
.c-box2 {
background: linear-gradient(91deg, #FF3046 0%, #FFCACA 100%);
width: 95%;
margin: 10px auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
color: white;
}
.c-box3 {
background: linear-gradient(91deg, #909090 0%, rgba(144,144,144,0.4) 100%);
width: 95%;
margin: 10px auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
color: white;
}
.cont-bs{
width: 95%;
margin: 10px auto;
box-sizing: border-box;
border-radius: 10px;
padding: 15px;
background: white;
display: flex;
align-items: center;
justify-content: space-between;
}
.box-title{
font-size: 16px;
font-weight: bold;
}
.box-dtitle{
font-size: 18px;
font-weight: bold;
}
.mubu{
width: 100%;
// background: #f6f6f6;
box-sizing: border-box;
padding-top: 15px;
}
.zzhui{
width: 100%;
height: calc(60vh);
// background: #f6f6f6;
}
.lanniu{
width: 100px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px 10px;
color: white;
background: #2D81FF;
border-radius: 10px;
}
.dix{
display: flex;
align-items: center;
}
.hezi-ga{
width: 100%;
display: flex;
align-items: center;
font-size: 12px;
font-weight: 400;
color: #333333;
margin: 10px auto;
}
.box-top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.bt-box {
width: 25%;
margin-top: 30rpx;
.bt-img {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto;
image {
width: 100%;
height: 100%;
}
}
.zi {
margin-top: 20rpx;
width: 100%;
text-align: center;
font-size: 24rpx;
font-weight: 400;
color: #333333;
line-height: 24rpx;
}
}
// 蓝杠
}
.zi{
margin-right: 30px;
}
.box-bs{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0px auto;
margin-top: 10px;
}
.touxiang{
width: 50px;
height: 50px;
background: #B9B9B9;
border: 3px solid #FF924A;
border-radius: 50%;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
}
.bot-di {
width: 100%;
text-align: center;
font-size: 24rpx;
font-weight: 400;
line-height: 24rpx;
color: #5BA8FF;
margin: 0rpx auto;
margin-top: 30rpx;
}
.dz-box {
margin: 0 auto;
width: 95%;
height: 220rpx;
border-bottom: 2rpx solid #EEEEEE;
box-sizing: border-box;
padding: 30rpx 0px;
overflow: hidden;
display: flex;
}
.dz-left {
width: 256rpx;
height: 160rpx;
border-radius: 10rpx;
overflow: hidden;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.dz-right {
width: 55%;
}
.dz-title {
font-size: 32rpx;
font-weight: 400;
color: #333333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.dz-hui {
width: 100%;
font-size: 24rpx;
font-weight: 400;
color: #999999;
display: flex;
margin-top: 20rpx;
// display: -webkit-box;
// overflow: hidden;
// text-overflow: ellipsis;
// -webkit-line-clamp: 1;
// -webkit-box-orient: vertical;
}
.slue {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.sy {
color: #5BA8FF !important;
font-weight: bold !important;
}
.lan-ga{
width: 100%;
margin: 10px auto;
box-sizing: border-box;
padding-bottom: 15px;
border-bottom: 1px solid #EEEEEE;
}
.ga-top{
display: flex;
align-items: center;
color: #0D2E8D;
font-weight: bold;
}
.img-box{
width: 70px;
height: 70px;
border-radius: 6px;
overflow: hidden;
margin-top: 10px ;
margin-right: 10px;
image{
width: 100%;
height: 100%;
}
}
.wrap-box{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.xhui{
font-size: 12px;
font-weight: 400;
color: #999999;
}
.gain{
font-style: 18px;
font-weight: bold;
margin-right: 10px;
color: #0D2E8D;
}
.dingsi{
width: 90%;
position: absolute;
top: 10px;
display: flex;
box-sizing: border-box;
padding: 10px;
background-color: white;
box-shadow: 0px 0px 34px 6px rgba(224,224,224,0.8);
border-radius: 6px;
transform: translate(-50%);
left: 50%;
z-index: 99999;
}
.dingsibox{
width: 25%;
height: 100%;
text-align: center;
}
.shu{
font-size: 14px;
font-weight: 400;
margin: 0 auto;
}
.zi{
font-size: 14px;
font-weight: 400;
margin: 0 auto;
}
.gwu{
width: 50%;
text-align: center;
}
.box-zi{
margin: 10px auto;
}
.se1{
background: linear-gradient(91deg, #78CB54 0%, rgba(120,203,84,0.4) 100%) !important;
}
.se2{
background: linear-gradient(91deg, #FFAD3F 0%, rgba(255,173,63,0.4) 100%) !important;
}
.se3{
background: linear-gradient(91deg, #FF3046 0%, #FFCACA 100%) !important;
}
.se4{
background: linear-gradient(91deg, #909090 0%, rgba(144,144,144,0.4) 100%) !important;
}
</style>