lanan-app/pages/move/move.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">
         <image style="width: 18px;height: 18px;margin-right: 5px" src="../../static/move/Search@2x.png"></image>
				 <input type="text" placeholder="请输入师傅姓名/车牌号查询" v-model="searchValue" @blur="getmove()">
			 </view>

      <view class="list">
        <view class="c-box" v-for="(item,index) in arrlist" :key="index">
          <view class="inline" style="padding: 15px 15px 0 15px;">
            <view v-if="item.driverStatus == 1" class="item-state state-blue">空闲</view>
            <view v-if="item.driverStatus == 2" class="item-state state-orange">暂停</view>
            <view v-if="item.driverStatus == 3" class="item-state state-red">忙碌</view>
            <view v-if="item.driverStatus == 4" class="item-state state-grey">离线</view>
            <view class="inline-item"> {{item.realName || ''}} | {{item.rescueCarNum|| ''}}</view>
          </view>

          <view class="inline box-zi" style="padding: 15px 15px 0 15px;align-items: flex-start;">
            <u-icon name="../../static/move/Sent@2x.png" color="#ffffff" size="28"></u-icon>
            <text style="margin-left: 10px;font-size: 16px">{{item.driverPositionInfo || ''}}</text>
          </view>
          <view class="box-bs">
            <view style="border-radius: 0 0 0 10px" class="gwu inline" @click="dwindex(index)">
              <u-icon name="../../static/move/dingwei.png" color="#ffffff" size="28"></u-icon>
              <text style="margin-left: 5px;font-size: 18px;color: #71a2ff">定位</text>
            </view>
            <view style="border-radius: 0 0 10px 0" class="gwu inline" @click="gettel(item.phonenumber)">
              <u-icon name="../../static/move/编组 7@2x.png" color="#ffffff" size="28"></u-icon>
              <text style="margin-left: 5px;font-size: 18px;color: #71a2ff">拨打电话</text>
            </view>
          </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: [
          // {
          //   driverStatus: 1,
          //   realName: '孙强',
          //   rescueCarNum: '鲁A8L2P8',
          //   driverPositionInfo: '山东省济南市山东省济南市山东省济南市山东省济南市',
          //   phonenumber: '13589497326'
          // },
          // {
          //   driverStatus: 2,
          //   realName: '孙强',
          //   rescueCarNum: '鲁A8L2P8',
          //   driverPositionInfo: '山东省济南市山东省济南市山东省济南市山东省济南市',
          //   phonenumber: '13589497326'
          // },
          // {
          //   driverStatus: 3,
          //   realName: '孙强',
          //   rescueCarNum: '鲁A8L2P8',
          //   driverPositionInfo: '山东省济南市山东省济南市山东省济南市山东省济南市',
          //   phonenumber: '13589497326'
          // },
          // {
          //   driverStatus: 4,
          //   realName: '孙强',
          //   rescueCarNum: '鲁A8L2P8',
          //   driverPositionInfo: '山东省济南市山东省济南市山东省济南市山东省济南市',
          //   phonenumber: '13589497326'
          // }
        ],
				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">
.list{
  height: calc(100% - 70px);
  overflow-y: auto;
  min-height: calc(100% - 70px);
}
.inline{
  display: flex;
  align-items: center;
}
.inline-item{
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}
  .item-state{
    color: white;
    width: 55px;
    height: 28px;
    border-radius: 15px 0 15px 0;
    text-align: center;
    line-height: 28px;
  }
  .state-red{
    background: #fe5c46;
  }
  .state-blue{
    background: #317dfa;
  }
  .state-grey{
    background: #8e8e8e;
  }
  .state-orange{
    background: #d37c33;
  }
	.container {
		box-sizing: border-box;
		padding-bottom: 40rpx;
    background: #f7faf4;
	}
	.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: #f0ede6;
		border-radius: 10px;
		input{
			width: 100%;
		}

	}
	.c-title{
		font-size: 18px;
	}
	.c-box {
		width: 95%;
		margin: 10px auto;
		box-sizing: border-box;
		border-radius: 10px;
		color: #151515;
    background: white;
    box-shadow: 0 0 8px -5px #888888;
	}
	.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%;
    height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
    margin: 0;
	}
	.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%;
    height: 60px;
		text-align: center;
    background: #f3f3f3;
    justify-content: center;
    border: #dfe2eb 1px solid;
  }
	.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>