lanan-app/pages/rescue/trafficPolice.vue

<!-- 道路救援 首页-->
<template>
	<view class="content">
		<view class="dil">
		<!-- 顶部 -->
		<view class="top-two">
			<view class="top-left">
				<view class="left1">
					<text>当前时间</text>
				</view>
				<view class="left2">
					<text>{{currentTime || ''}}</text>
				</view>
			</view>
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="top-right">
				<view class="">
					<uni-icons type="location-filled" color="#4282D8" size="16"></uni-icons>
				</view>
				<view class="">{{positionInfo}}</view>
			</view>
			<!-- #endif -->
			
		</view>

		<!-- 标签切换  -->
		<!-- <view class="yijian">
			<view class="y-left" @click="gosg()">
				<view class="">救援</view>
			</view>
		</view> -->
		<view class="box">
			<view class="xz-box" id="y3" @click="getsxs(6)">
				<view class="box-wenzi">事故救援</view>
			</view>
			<view class="xz-box" id="y3" @click="getsxs(7)">
				<view class="box-wenzi">秩序救援</view>
			</view>
			<view class="xz-box" id="y3" @click="getsxs(5)">
				<view class="box-wenzi">扣车</view>
			</view>
			<view class="xz-box" id="y4" @click="getsx()">
				<view class="box-wenzi">解扣</view>
			</view>
			
		</view>
		<view class="box-tap">
			<view class="tap-left">
				
				<view class="left-img1" @click="getone()" v-if="one == true">
					<image src="../../static/jyz.png" mode=""></image>
					<view class="gang"></view>
				</view>
				
			
				<view class="zi3" style="margin-right: 20px;" v-if="one == false" @click="getone()">救援中</view>
				
				<view class="left-img1" v-if="one == false" @click="getone()">
					<image src="../../static/jyls.png" mode=""></image>
					<view class="gang"></view>
				</view>
				
				<!-- <view class="zi3" @click="getone()" v-if="one == true">救援历史</view> -->
			</view>
			<view class="tap-right" @click="gohistory()">
				<view class="zi3">
					历史订单
				</view>
				<view class="">
					<uni-icons color: #666666; type="right" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="tap-box">
			<view class="ques" v-if="orderList.length== 0 ">
				<image src="../../static/quesheng.png" mode=""></image>
			</view>
			<view class="boxt" v-for="(item,index) in orderList" :key="index" >
				<view class="boxt-left" @click="godetail(item.id)">
					<view class="left-lan">
						<view class="">{{item.rescueTypeStr}}</view>
					</view>
					<view class="text1">{{item.rescuePosition}}</view>
					<view class="" v-if="item.rescueStatus == 1">
						<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">预约单</view>
						<view class="text2" >{{item.rescueTime || ''}}</view>
					</view>
					<view class="" v-if="item.rescueStatus == 2">
						<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">系统正在派单中...</view>
						<view class="text2" >{{item.rescueTime || ''}}</view>
						
					</view>
					
					<view class=""  v-if="item.rescueStatus  > 2">
						<view class="text2">救援车辆距 <text class="lanzi"> {{item.distance / 1000 || 0}}KM</text> </view>
						<view class="text2">预计 <text class="lanzi">{{item.needTime || 0}}分钟</text> 到达</view>
					</view>
					
				</view>
				<view class="boxt-right">
					<view class="zhtai">
						<view class="">{{item.rescueStatusStr}}</view>
					</view>
					<!-- v-if="role[0] == 'ddzx'" -->
					
					<view class="dianhua" v-if="role[0] == 'ddzx' && item.rescueStatus <= 2  " @click="getzhipai(item.id)">
						
						<view class="">指派司机</view>
					</view>
					<view class="dianhua"  v-if="item.rescueStatus > 2" @click="gettel(item.driverPhoneNum)">
						<view class="ticon">
							<image src="../../static/dh.png" mode=""></image>
						</view>
						<view class="">联系司机</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 一键救援 -->
		<!-- <view class="kou" v-if="role[0] == 'jjdd'  " @click="getsx()">
			<image src="../../static/kou.png" mode=""></image>
		</view> -->
			<view style="width: 100%; height: 80px; "></view>
		<!-- dibu -->
		</view>
			<u-picker :show="show" :columns="columns" @confirm="confirms"  @cancel="cancels" keyName="realName"></u-picker>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from'../../components/tabBar/tabBar.vue'
	// import { getWeather } from'../../utils/Weather'
	export default{
		data(){
			return{
				show:false,
				id:'',
				dqcNum:0,
				dzfNum:0,
				jyzNum:0,
				ywcNum:0,
				role:[],
				currentTime:'',
				cityName:'济南',
				positionInfo:'泸州',
				msg:'1',
				total:0,
				pageNum: 1,//第几页
				pageSize: 10,//一页多少张
				totalPages: 0,//总数
				orderList:[],
				sjlist:[],
				arrbox:[
					// {text:'待支付',id:1},
					// {text:'待评价',id:2},
				],
				 columns: [
				                   
				                ],
				one:true,
				
			}
		},
		onLoad() {
			this.role = uni.getStorageSync('role')
		},
		onShow() {
			this.Fourhammers()
			this.timeWeekFormat()
			this.getsjlist()
			this.getlist()
		},
		onReachBottom() {
			console.log('执行了');
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			
			} else {
				this.pageNum++
				
				this.getlist()
			}
		},
		components:{
			tabBar,
		},
		methods:{
			gosg(){
				uni.navigateTo({
					url:'/pages/rescue/PoliceOder'
				})
			},
			gettel(num){
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			getsjlist(){
				request({
					url: '/app/rescueInfo/driverInMap?searchValue=',
					method: 'get',	
				}).then((res)=>{
					console.log('返回信息',res);
					this.columns.push(res.data)
					
					})
			},
			getzhipai(id){
				this.id = id
				this.show = true
			},
			confirms(e){
				console.log(e);
				let data = {
					rescueId:this.id,
					driverId:e.value[0].id
				}
				request({
					url: '/system/rescueInfo/designateDriver',
					method: 'post',
					params:data
				}).then((res)=>{
					console.log('确认司机',res);
					if(res.code == 200){
						uni.showToast({
							title:'指派成功'
						})
						this.getlist()
					}
					
					})
				this.show = false
			},
			cancels(){
				this.show = false
			},
			Fourhammers(){
				request({
					url: '/app/rescueInfo/getRescueStatistics',
					method: 'get',
				}).then((res)=>{
					console.log('四个',res);
					this.dqcNum = res.data.dqcNum
					this.dzfNum = res.data.dzfNum
					this.jyzNum = res.data.jyzNum
					this.ywcNum = res.data.ywcNum
				})
			},
			getsxs(id){
				if(id==8){
					uni.navigateTo({
						url:'/pages/Detain/Detain'
					})
				}else{
					uni.navigateTo({
						url:'/pages/rescue/initiate?id='+id+'&isAppointment='+this.isAppointment
					})
				}
			},
			timeWeekFormat() {
				//定义一个日期对象;
				var dateTime = new Date();
				//获得系统年份;
				var year = dateTime.getFullYear();
				//获得系统月份;
				var month = dateTime.getMonth() + 1;
				//获得系统当月分天数;
				var day = dateTime.getDate();
				//获得系统小时;
				var hours = dateTime.getHours();
				//获得系统分钟;
				var minutes = dateTime.getMinutes();
				//获得系统秒数;
				var second = dateTime.getSeconds();
				//获得系统星期几;
				var dayCycle = dateTime.getDay();
				//使用数组更改日期样式;
				var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (var i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				month < 10 ? month = '0' + month : month;
				day < 10 ? day = '0' + day : day;
				hours < 10 ? hours = '0' + hours : hours;
				minutes < 10 ? minutes = '0' + minutes : minutes;
				second < 10 ? second = '0' + second : second;
				//打印完整的系统日期;
				// this.dateStr = year + '-' + month + '-' + day + ' ';
				this.currentTime = '星期' + dayCycle
				// this.time = hours + ':' + minutes + ':' + second
				console.log(this.week);
				// return dateStr;
				},
			getlist(){
				let data = {
					rescueStatus:1,
					pageSize:this.pageSize,
					pageNum:this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params:data
				}).then((res)=>{
					console.log('首页',res);
					if(res.code == 200 ){
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						}else{
							this.orderList = res.rows
							}
						let total =  res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}
					
				})
			},
			getone(){
				this.one =! this.one
			},
			//一键救援
			getyi(){
				uni.navigateTo({
					url:'/pages/rescue/order'
				})
			},
			goisAppointment(){
				uni.navigateTo({
					url:'/pages/rescue/order?isAppointment=1'
				})
			},
			getsx(){
				uni.navigateTo({
					url:'/pages/Detain/Detain'
				})
			},
			//预约
			getyue(){
				uni.navigateTo({
					url:'/pages/rescue/order'
				})
			},
			godetail(id){
				uni.navigateTo({
					url:'/pages/details/details?id='+id
				})
			},
			gohistory(){
				uni.navigateTo({
					url:'/pages/rescue/historylist?id=1'
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		
	}
	.dil{
		background-color: #F6F6F6;
			box-sizing: border-box;
			padding: 45px 12px;
	}
	.top-two{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-left{
		width: 180px;
		height: 26px;
		box-sizing: border-box;
		border-radius: 50px;
		background-color: #D1EDFF;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
	}
	.left1{
		width: 50%;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
		font-size: 13px;
		color: white;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.left2{
		width: 50%;
		background: #D1EDFF;
		font-size: 13px;
		color: #207EFE;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top-right{
		display: flex;
		align-items: center;
		font-size: 14px;
		font-weight: 400;
		color: #4282D8;
	}
	.four-box{
		margin-top: 15px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		
	}
	.ques{
		width: 80%;
		margin: 10px auto;
		image{
			width: 100%;
		}
	}
	.boxf{
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/dzf.png');
		background-size: cover;
		background-position: center;
	}
	.boxf1{
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/dpq.png');
		background-size: cover;
		background-position: center;
	}
	.boxf2{
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/zxz.png');
		background-size: cover;
		background-position: center;
	}
	.boxf3{
		margin-top: 6px;
		height: 84px;
		width: 49%;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('../../static/yyd.png');
		background-size: cover;
		background-position: center;
	}
	.zi1{
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
	}
	.zi2{
		width: 100%;
		text-align: center;
		font-size: 26px;
		font-weight: bold;
		color: #FFFFFF;
	}
	.box-tap{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25px;
	}
	.tap-left{
		display: flex;
		
	}
	.tap-right{
		display: flex;
		align-items: center;
	}
	.zi3{
		font-size: 14px;
		font-weight: 400;
		color: #666666;
	}
	.left-img1{
		width: 65px;
		height: 15px;
		margin-right: 20px;
		// smargin-bottom: 10px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.gang{
		width: 60px;
		height: 5px;
		border-radius: 50px;
		margin-top: 6px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}
	.tap-box{
		margin-top: 24px;
		background-color: #F6F6F6;
	}
	.boxt{
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 15px;
	}
	.boxt-left{
		width: 50%;
		height: 100%;
	}
	.left-lan{
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}
	.text1{
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}
	.lanzi{
		font-weight: bold;
		color: #4C98FF;
	}
	.text2{
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}
	.boxt-right{
		width: 50%;
		height: 100%;
		position: relative;
	}
	.zhtai{
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;
		
	}
	.zhtait{
		position: absolute;
		top: 50px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #d5e8ff;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #53b5ff;
		font-size: 14px;
		
	}
	.dianhua{
		position: absolute;
		bottom: -110px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;
		
	}
	.ticon{
	
		
		width: 12px;
		height: 13px;
		margin-right: 5px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.yijian{
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		background: #F3BA60;
		color: #542F0E;
		margin-top: 22px;
	}
	.y-left{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
			border-radius: 10px;
		background: #FFE3AC;
	}
	.y-right{
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.kou{
		position: fixed;
		right: 5px;
		bottom: 80px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		z-index: 99;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.box{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.xz-box{
		height: 80px;
		width: 48%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		background-size: cover;
		background-position: center;
		margin-top: 20px;
		
	}
	#y1{
		background-image: url('../../static/tc.png');
	}
	#y2{
		background-image: url('../../static/sy.png');
	}
	#y3{
		background-image: url('../../static/dd.png');
	}
	#y4{
		background-image: url('../../static/ht.png');
	}
	#y5{
		background-image: url('../../static/kc.png');
	}
</style>