courier_mobile_front/src/pages/pjpc.vue

<template>
	<div>
		<backindex :title="titlename"></backindex>
		<p style="text-align: center;font-size: .36rem;margin-top: .2rem;">派件批次 {{dispatchBatchNo}}</p>
		<div class="content">
			<!-- table切换 -->
			<div class="number">
				<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <!-- Slides -->
				        <div v-for="item in resultList" class="swiper-slide">
							<div>
								<p>{{item.build}}/座</p>
								<p>待派送 {{item.waitNum}}  已派送 {{item.alreadyNum}}</p>
							</div>
						</div>
				    </div>

				    <!-- 如果需要翻页按钮 -->
				    <div class="swiper-button-prev">
              <!-- <van-icon name="arrow-left" /> -->
            </div>
				    <div class="swiper-button-next">
              <!-- <van-icon name="arrow" /> -->
            </div>
				</div>
				<div id="mychart"></div>
			</div>
			<!-- 快件查询列表 -->
			<van-checkbox-group v-model="result">
				<van-cell-group>
				<div class="jjlist" v-for="(item,index) in expressList">
					<div class="listinfo">
						<div class="list_top" @click="goInfo(item.expressNo)">
							<div class="list_top_left">
								<img src="../assets/images/ad_icon1.png" alt="">
								<div>
									<p>{{item.expressNo}}</p>
									<p><span>收</span>{{item.recipient}}</p>
									<p>{{item.build}} {{item.sendSeat}} {{item.floor}} {{item.mailRoom}}</p>
								</div>
							</div>
							<!-- <p class="staus1" @click="slide">{{options}}</p> 0-待签收 1-已签收、2-代收、3-拒收、4-延迟',-->
							<p class="staus1" v-if="item.signinStatus == 0">待签收</p>
							<p class="staus1" v-if="item.signinStatus == 1">本人签收</p>
							<p class="staus2" v-if="item.signinStatus == 2">他人代收</p>
							<p class="staus2" v-if="item.signinStatus == 3">拒收</p>
							<p class="staus2" v-if="item.signinStatus == 4">滞留件</p>
              <p class="staus2" v-if="item.signinStatus == 5">问题件</p>
						</div>
					</div>
					<!-- <div>
						<van-checkbox :disabled="item.signinStatus != 0" checked-color="#00c4b8" :name="item.expressNo" ref="checkboxes" />
					</div> -->
				</div>
				</van-cell-group>
			</van-checkbox-group>
			<!-- <div style="margin-top: 16px;">
				<van-field readonly clickable name="picker" :value="phone" label="收件人手机" placeholder="输入手机号后四位查询" @click="addshow1=true"/>
				<van-field readonly type="text" v-model="recipient" label="收件人" />
				<van-button color="#00c4b8" block type="info" @click="signSave">合并签收</van-button>
			</div> -->

			<!-- 填写手机号码 -->
			<!-- <van-popup round v-model="addshow1" class="whrite_add2" closeable @closed="close" :close-on-click-overlay="false">
				<div>
					<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">填写号码</p>
					<van-form @submit="onSubmit">
					  <van-field v-model="phone" name="收件人手机" label="收件人手机" type="number" maxlength="20" placeholder="输入手机号后四位" @change="searchList()"/>
					  <ul>
						  <li v-for="(item,i) in employeeList" @click="choose(i,item)">
							<p>{{item.name}}</p>
							<p>{{item.department}}</p>
							<van-icon v-if="index == i" name="passed" />
						  </li>
					  </ul>
					  <div style="margin-top: 16px;">
					    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
					  </div>
					</van-form>
				</div>
			</van-popup> -->
		</div>
		<!-- 选择下拉 -->
		<!-- <van-popup v-model="showPicker" position="bottom">
		  <van-picker title="" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker=false" />
		</van-popup> -->
		<!-- 筛选 -->
		<!-- <van-popup round v-model="addshow" class="whrite_add" closeable>
			<div>
				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">筛选</p>
				<van-form @submit="search">
				  <van-field v-model="box" name="寄包柜" label="寄包柜" placeholder="请选择" readonly/>
				  <van-field v-model="name" name="收件人" label="收件人" placeholder="请输入收件人"/>
				  <van-field v-model="starttime" name="开始时间" label="开始时间" placeholder="请选择" readonly @click="time(1)"/>
				  <van-field v-model="endtime" name="结束时间" label="结束时间" placeholder="请选择" readonly @click="time(2)"/>
				  <van-field v-model="staus" name="状态" label="状态" placeholder="请选择" readonly @click="ztshow=true"/>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
				  </div>
				</van-form>
			</div>
		</van-popup> -->
		<!-- 时间 -->
		<!-- <van-popup v-model="timeshow" position="bottom">
			<van-datetime-picker
			  v-model="currentDate"
			  type="datetime"
			  title="选择时间"
			  :min-date="minDate"
			  @confirm="timedate"
			  @cancel="timeshow=false"
			/>
		</van-popup> -->
		<!-- 状态 -->
		<!-- <van-popup v-model="ztshow" position="bottom">
			<van-picker title="标状态" show-toolbar :columns="ztlist" @confirm="zt" @cancel="ztshow=false"/>
		</van-popup> -->

	</div>
</template>

<script>
	import {Toast,Dialog,Checkbox,CheckboxGroup} from 'vant'
	import Swiper from 'swiper'
	export default{
		data(){
			return{
				result:[],
				titlename:"派件批次",
				showPicker:false,
				columns:["未派件","待派件"],
				options:"待揽件",
				addshow:false,
				addshow1:false,
				name:"",
				timeshow:false,
				box:"",
				starttime:"",
				endtime:"",
				staus:"",
				currentDate:"",
				minDate:new Date(),
				timetype:"",//时间类别1开始、2结束
				ztshow:false,
				ztlist:["状态一","状态二"],
				total:"",
				resultList:[],//楼道统计列表
				expressList:[],//快件列表
				dispatchBatchNo:'',//批次号
				employeeList:[],//收件人列表
				phone:'',//手机号
				recipient:'',//收件人
				index:'-1',
				yiPaiSong:'',
			}
		},
		updated:function(){

		},
		created:function(){
			this.isLogin();
		},
		methods:{
			// //合并签收
			// signSave(){
			// 	if(this.result.length == 0){
			// 		Toast('请选择需要合并的快递！');
			// 		return;
			// 	}
			// 	if(this.recipient == ''){
			// 		Toast('请选择收件人！');
			// 		return;
			// 	}
			// 	this.$http.post(this.$store.state.host+"/solic/marginSignExpress",
			// 	{expressNoList:this.result.join(','),
			// 	collectAgent:this.recipient},{emulateJSON:true})
			// 		.then(res=>{
			// 			//发送成功
			// 			if(res.body.msg=='success'){
			// 				Toast("合并签收成功！");
			// 				setTimeout(()=>{
			// 				    this.getData();
			// 				    this.result = [];
			// 				    this.recipient = '';
			// 				    this.phone = '';
			// 				},1200)

			// 			}else{
			// 				Toast("合并签收失败！");
			// 			}
			// 	},res=>{
			// 			//发送失败
			// 		Toast("网络错误!")
			// 	})
			// },
			// //选择员工
			// choose(val,item){
			// 	this.index = val
			// 	this.recipient = item.name
			// 	this.phone = item.phone
			// },
			// //手机号后四位搜索
			// searchList(){
			// 	this.$http.post(this.$store.state.host+"/solic/getEmployeeInfoByPhone",{
   //        phone:this.phone,
   //        },{
   //          emulateJSON:true,
   //          })
			// 		.then(res=>{
			// 			//发送成功
			// 			if(res.body.msg=='success'){
			// 				this.employeeList = res.body.employeeList
			// 			}
			// 	},res=>{
			// 			//发送失败
			// 		Toast("网络错误!")
			// 	})
			// },

      //跳转详情
      goInfo(expressNo){
        //收件查询
      	this.$router.push({path:'/Kjsearchinfo',query:{expressNo:expressNo,type:1}})

      },
			// onSubmit(){
			// 	if(this.recipient == ''){
			// 		Toast('请选择收件人')
			// 		return
			// 	}
			// 	this.addshow1=false
			// 	//this.tjshow=true
			// },
			close(){
				//this.phone = ''
				//this.name = ''
				//this.department = ''
				this.index = ''
			},
			toggle(index) {
			    this.$refs.checkboxes[index].toggle();
			},
			//获取数据
			getData(){
				Toast.loading({
				    message: '加载中...',
				    forbidClick: true,
				    duration:0
				});
				this.$http.post(this.$store.state.host+"/solic/getExpressListByBatchNo",{mailRoomId: localStorage.getItem('roomId')},{emulateJSON:true})
					.then(res=>{
						//发送成功
						if(res.body.msg=='success'){
							this.resultList = res.body.resultList;
							this.expressList = res.body.expressList;
							this.dispatchBatchNo = res.body.dispatchBatchNo;
							this.yiPaiSong = res.body.yiPaiSong;
							this.total = res.body.total;
							this.echart();
						}else if(res.body.msg=='未获取到批次'){
              Toast(res.body.msg)
            }
				},res=>{
						//发送失败
					Toast("网络错误!")
				})
				Toast.clear()
			},
			// // 下拉选择属性
			// slide(){
			// 	this.showPicker=true
			// },
			// // 下拉选择赋值
			// onConfirm(e){
			// 	this.options=e
			// 	this.showPicker=false
			// },
			search(){},
			timedate(e){
				var date=new Date(e)
				var year=date.getFullYear()
				var month=date.getMonth()+1
				month=month>9?month:'0'+month
				var day=date.getDate()
				day=day>9?day:'0'+day
				var hour=date.getHours()
				hour=hour>9?hour:'0'+hour
				var minute=date.getMinutes()
				minute=minute>9?minute:'0'+minute
				console.log(month)
				if(this.timetype==1){
					this.starttime=year+'-'+month+'-'+day+' '+hour+':'+minute
				}
				if(this.timetype==2){
					this.endtime=year+'-'+month+'-'+day+' '+hour+':'+minute
				}
				this.timeshow=false

			},
			time(obj){
				this.timeshow=true
				this.timetype=obj

			},
			// 状态显示
			zt(e){
				this.staus=e
				this.ztshow=false
			},
			echart(){
				let myChart = this.$echarts.init(document.getElementById('mychart'))
				var option = {
				    tooltip: {
				        trigger: 'item',
						//show: false,
				    },
				    legend: {
						show:false,
				        top: '30%',
				        right: '5%',
						orient: 'vertical',
						icon: 'circle',
				    },
				    series: [
				        {
				            name: '派送数据',
				            type: 'pie',
							center:["55%","50%"],
				            radius: ['80%', '90%'],
				            avoidLabelOverlap: false,
				            label: {
				               normal: {
				                    show: true,
				                    position: 'center',
				                    color:'#4c4a4a',
				                    formatter: '{active|派送率}'+'\n\r' + '{total|' + Number(this.yiPaiSong/this.total*100).toFixed(2) +'%}',
				                    rich: {
				                        total:{
			                            fontSize: 18,
										fontWeight:'bold',
			                            color:'#00c4b8'
			                        },
			                        active: {
			                            fontSize: 12,
			                            color:'#6c7a89',
			                            lineHeight:30,
			                        },
				                    }
				                },
				                emphasis: {//中间文字显示
				                    show: true,
				                }
				            },
							color:['#00c4b8','#e1fcfa'],
				            // emphasis: {
				            //     label: {
				            //         show: false,
				            //         fontSize: '40',
				            //         fontWeight: 'bold'
				            //     }
				            // },
				            labelLine: {
				                show: false
				            },
				            data: [
								{value: this.yiPaiSong, name: '签收成功'},
								{value: this.total-this.yiPaiSong, name: '待派送'},
							]
				        }
				    ]
				}
				myChart.setOption(option)
				window.addEventListener("resize", () => {myChart.resize();})
			},
			swiper(){
				var mySwiper = new Swiper(".swiper-container", {
				  direction: 'vertical',//垂直滚动
				  //speed: 400,//过渡时间
				  loop: false,//循环
				  //observer:true,
				  autoplay:false,
				  // autoplay: {
				  //   delay: 5000,//自动滚动|时间
				  // },
				  nextButton: '.swiper-button-next',
				  prevButton: '.swiper-button-prev',
				});
			}
		},
		mounted:function(){
			this.getData();
			this.swiper()
			/* setTimeout(()=>{
			    this.echart()
			},1000) */
		}
	}
</script>

<style scoped lang="less">
	.content{
		padding: 0.25rem .37rem;
		.number{
			background: white;
			padding: .33rem;
			border-radius: .05rem;
			font-size: .3rem;
			margin-bottom: .2rem;
			display: flex;
			justify-content: space-between;
			.swiper-container{
				width: 50%;
				height: 2.8rem;
				overflow: hidden;
				.swiper-slide{
					height: 1.2rem !important;
					margin-bottom: .2rem;
					background: #ebfaf9;
					align-items: center;
					display: flex;
					flex-wrap: wrap;
					text-align: center;
					div{
						width: 100%;
						p{
							display: block;
							text-align: center;
						}
						p:nth-of-type(1){
							font-size: .3rem;
							margin-bottom: .1rem;
						}
						p:nth-of-type(2){
							font-size: .24rem;
						}
					}
				}

			}
			#mychart{
				width: 50%;
				height: 2.8rem;
			}
		}
		.sm{
			margin-bottom: .2rem;
			/deep/.van-search{
				width: 100%;
				height: .76rem;
				border-radius: 25px;
				overflow: hidden;
				padding: 0rem;
				background-color: white;
				.van-search__content{
					background-color: white;
				}
				input{
					background-color: white;
				}
			}
			img{
				width:.4rem;
				height: .4rem;
				position: relative;
				top: .18rem;
			}
		}
		.jjlist {
			display: flex;
			align-items: center;
			font-size: .3rem;
			color: #999999;

			.listinfo {
				background: white;
				padding: .33rem .33rem .2rem;
				border-radius: .05rem;
				margin-bottom: .2rem;
				position: relative;
				.list_top {
					display: flex;
					justify-content: space-between;

					.list_top_left {
						img {
							display: inline-block;
							width: .9rem;
							height: .9rem;
							position: relative;
							top: -.1rem;
						}

						div {
							width: 3.5rem;
							margin-left: .2rem;
							display: inline-block;
							position: relative;
							p:nth-of-type(1) {
								font-size: .28rem;
								color: #333;
								font-weight: bold;
							}
							p:nth-of-type(2) {
								font-size: .22rem;
								margin: .1rem 0rem;
								display: flex;
								align-items: center;
								span{
									background: #fa9c22;
									color: white;
									border-radius:50% ;
									display: inline-block;
									width: .4rem;
									height: .4rem;
									text-align: center;
									line-height: .4rem;
									margin-right: .1rem;
								}
							}
							p:nth-of-type(3) {
								font-size: .22rem;
							}
						}
					}
					>p {
						font-size: .24rem;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
					>p:after{
						display: none !important;
						content: "";
						width: .1rem;
						height: .1rem;
						display: inline-block;
						border-right: .01rem solid #7a7a7a;
						border-bottom: .01rem solid #7a7a7a;
						transform: rotate(45deg);
						position: relative;
						margin-left: .05rem;
						top: -.02rem;
					}
					.staus1{
						color: #f5693d;
					}
					.staus2{
						color: #3d82f5;
					}
				}
			}
		}
	}
	.whrite_add{
		width: 6.6rem;
		padding: .4rem .2rem;
		/deep/.van-field__value{
			input{
				text-align: right;
			}

		}
		/deep/.van-popup__close-icon--top-right{
			top: 5px;
			right: 10px;
		}
	}

	.whrite_add2{
		width: 6.6rem;
		padding: .4rem .2rem;
		font-size: .3rem;
		/deep/.van-field__value{
			input{
				text-align: right;
			}

		}
		/deep/.van-popup__close-icon--top-right{
			top: 5px;
			right: 10px;
		}
		ul{
			li{
				padding: 10px 36px 10px 16px;
				display: flex;
				justify-content: space-between;
				position: relative;
				i{
					position: absolute;
					right: 0px;
					top:.25rem

				}
				i:before{
					background: #00c4b8;
					color: white;
					border-radius: 50%;
				}
			}
		}
	}

</style>