ROBOT-APP/code/HBX/pages/native/plan.vue

<template>
	<view class="nv-work">
		<image class="banner" src="../../static/bg.png"></image>
		<picker class="selectTap" mode="selector" :value="pickeIndex" range-key="robotName" :range="robotList"
			@change="changePicker">
			<view style="flex: 1;display: flex;align-items: center;justify-content: center;">
				<text class="icon iconfont icon-jifang" style="font-size: 16px;color: #fff;"></text>
				<text class="t1">{{robotName}}</text>
			</view>
			<uni-icons style="text-align: right;padding-right: 25rpx;" color="#fff" type="bottom" size="16"></uni-icons>
		</picker>
		<!-- <view class="selectTap" @click="showSelect">
			<view style="flex: 1;display: flex;align-items: center;justify-content: center;">
				<text class="icon iconfont icon-jifang" style="font-size: 16px;color: #fff;"></text>
				<text class="t1">{{robotName}}</text>
			</view>
			<uni-icons style="text-align: right;padding-right: 25rpx;" color="#fff" type="bottom" size="16"></uni-icons>
		</view>
		<view :class="[{secHeight:isSelect}]" :style="{height:heiIndex}" class="selcontent">
			<view class="vv">
				<view class="v1" v-for="(item,index) in robotList" :key="index" @click="changePicker(index)">
					<text class="vt1">{{item.robotName}}</text> 
				</view> 
			</view>
			
		</view> -->
		<view class="nv-header-list">
			<view class="h-l-li">
				<text class="icon iconfont icon-zhukongtongxin"
					:style="{color:robotStatus.wifiCom == 1?'#23E274':'#FB4925'}"></text>
				<text class="h-l-li-t">通讯状态</text>
			</view>
			<view class="h-l-li">
				<text class="icon iconfont icon-80dianliang"
					:style="{color:robotStatus.cap && robotStatus.cap >50 ?'#23E274':'#FB4925'}"></text>
				<text class="h-l-li-t">电量{{robotStatus.cap}}%</text>
			</view>
			<view class="h-l-li">
				<text class="icon iconfont icon-line-batterychargechongdianzhuangtai-01"
					:style="{color:!robotStatus.chargingtfStatus?'#FB4925':' #23E274'}"></text>
				<text class="h-l-li-t">充电状态</text>
			</view>
			<view class="h-l-li">
				<text class="icon iconfont icon-guzhang"
					:style="{color:robotStatus.openRadarStatus == false?'#23E274':'#FB4925'}"></text>
				<text class="h-l-li-t">有无障碍</text>
			</view>
		</view>
		<view class="nv-top" elevation="3px">
			<view class="left bg1">
				<view class="left-l">
					<text class="left-l-t1">{{robotStatus.workTime && robotStatus.workTime.toFixed(0) }} <text
							class="t1-1">小时</text></text>
					<text class="left-l-t2">运行时长</text>
				</view>
				<view class="left-r icon iconfont icon-gongyezujian-yibiaopan"
					style="font-size: 50px;color: #fff;opacity: 0.6;">
				</view>
			</view>
			<view class="left bg2">
				<view class="left-l">
					<text class="left-l-t1">{{robotStatus.workMile && robotStatus.workMile.toFixed(0)}} <text
							class="t1-1">公里</text></text>
					<text class="left-l-t2">运行里程</text>
				</view>
				<view class="left-r icon iconfont icon-lichengduihuanx"
					style="font-size: 50px;color: #fff;opacity: 0.6;">
				</view>
			</view>
		</view>

		<view class="nv-list" elevation="3px" v-for="(item,index) in taskList" :key="index"
			:style="{marginTop:index== 0 ? '180rpx' :'0'}">

			<view @click="changeType(item)">
				<view class="top">
					<text class="icon iconfont icon-xunjianguanlix" style="color: #0581FD;"></text>
					<text class="t2 ">{{item.taskName}}</text>
				</view>
				<view class="nv-done" :style="{background:item.taskStatus == 0 ? '#E8A71C' : item.taskStatus == 1 ? '#EA743B' :item.taskStatus == 2?
				'#959595' : item.taskStatus == 3 ? '#3FBC4E' :item.taskStatus == 4 ? '#0581FD' :'#959595'  }">
					<text class="d-t1">{{taskStatus(item.taskStatus)}}</text>
				</view>
			</view>

			<view class="center">
				<view class="c-v0">
					<view class="c-v0-d1" @click="jumpDetail(0,item)">
						<view class="d1-t">
							<text class="icon iconfont icon-xunjianrenwuguanli"
								style="color: #5FB23A;font-size: 14px;margin-right:10rpx"></text>
							<text>正常点</text>
						</view>
						<view class="d1-b">
							<text style="color: #5FB23A;">{{item.normalPointNum}}</text>
							<text class="icon iconfont icon-xiangyoujiantou"
								style="color: #B4B4B4;font-size: 12px;"></text>
						</view>
					</view>
					<view class="c-v0-d1" @click="jumpDetail(1,item)">
						<view class="d1-t">
							<text class="icon iconfont icon-xunjianrenwuguanli"
								style="color: #E95C2B;font-size: 14px;margin-right:10rpx"></text>
							<text>异常点</text>
						</view>
						<view class="d1-b">
							<text style="color: #E95C2B">{{item.warningPointNum}}</text>
							<text class="icon iconfont icon-xiangyoujiantou"
								style="color: #B4B4B4;font-size: 12px;"></text>
						</view>
					</view>
					<view class="c-v0-d1">
						<view class="d1-t">
							<text class="icon iconfont icon-shijian"
								style="color: #0581FD;font-size: 14px;margin-right:10rpx"></text>
							<text>更新时间</text>
						</view>
						<view class="d1-b">
							<text style="color: #666;font-size: 12px;">{{item.updateTime.substr(5,18)}}</text>
						</view>
					</view>
				</view>
				<view :class="[{activeHeight:item.show},{nomalHeight:true}]">
					<view class="c-v2">
						<view class="v2-1">
							<view class="v2-top">
								<text class="v2-t1">{{item.startTime.substr(5,18)}}</text>
							</view>
							<view class="v2-bottom">
								<text class="icon iconfont text icon-shijian-"></text>
								<text style="color: #31B643;padding-left: 5rpx;" class="text">开始时间</text>
							</view>
						</view>
						<view class="v2-1">
							<view class="v2-top">
								<text class="v2-t1">{{item.endTime.substr(5,18)}}</text>
							</view>
							<view class="v2-bottom">
								<text style="color: #3F9BF1;" class="icon iconfont text icon-shijian-"></text>
								<text style="color: #3F9BF1;padding-left: 5rpx;" class="text">结束时间</text>
							</view>
						</view>
					</view>
					<view class="c-v3" style="position: relative;z-index: 2;">
						<view class="v3-1">
							<text class="v3-1-t1">进度：</text>
							<view class="v3-1-1"><text class="v3-1-t2">{{item.checkedPointNum}}</text><text
									class="v3-1-t3">/{{item.totalPointNum}}</text></view>
						</view>
						<ProgressBar :Width="item.taskProgress" Type="aqua" :Vice="false"></ProgressBar>
					</view>
				</view>
			</view>
		</view>
		<view class="creatView" v-if="noData">
			<text class="icon iconfont icon-zanwu"></text>
			<text class="tx1">暂无任务</text>
			<button class="btn1" type="primary" @click="openDialog">创建任务</button>
		</view>
		<view class="loadingView" v-if="loading">
			<view class="lds-hourglass"></view>
		</view>
		<view class="empty" v-if="onOff">
			<text class="t1">没有更多了...</text>
		</view>
		<view class="moreView" v-if="!onOff && !loading && !noData">
			<view class="lds-ellipsis">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>
	</view>
</template>

<script>
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar';
	import {
		BeforeNavigateTo
	} from '../../common/utils.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getRobotStauts,
		currentTask,
		getRobotList,
		addTask
	} from '@/common/api.js'

	export default {
		data() {

			return {
				show: true,
				robotName: null,
				pickeIndex: 0,
				loading: true,
				robotList: [],
				isSelect: false,
				robotData: {},
				pageIndex: 1,
				noData: false,
				heiIndex:0,
				robotStatus: {

				},
				taskList: [],
				onOff: false
			}
		},
		components: {
			ProgressBar,
		},
		onNavigationBarButtonTap(e) {
			const xsubNVue = uni.getSubNVueById('CpopLog3')
			xsubNVue.show('fade-in', 300, () => {
			
			});
		},
		onLoad() {
			this.getRobot()
			uni.$on('ApopLog1', (data) => {
				addTask({
					robotId: this.robotData.robotId
				}).then(res => {
					this.onOff = false
					this.loading = true
					this.noData = false
					this.taskList = []
					this.pageIndex = 1
					this.currentTask()
				}).catch(e => {
					console.log(e)
				})
			
			});
			uni.$on('CpopLog3', (data) => {
				
				const subNVue1 = uni.getSubNVueById('ApopLog1')
				subNVue1.show('fade-in', 300, () => {
				
				});
				
			});
			uni.$on("backhome", () => {
				this.getRobot()
			})
		}, 
		async onPullDownRefresh() {
			this.onOff = false
			this.loading = true
			this.noData = false
			this.taskList = []
			this.pageIndex = 1
			this.getRobotStauts()
			this.currentTask()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.onOff) {
				return
			}
			++this.pageIndex
			this.currentTask()
		},
		computed: {
			...mapGetters([
				'Token'
			]),
		},
		methods: {
			showSelect() { 
				let index = this.robotList.length * 70 +60
				this.isSelect ? this.heiIndex = `0rpx` :this.heiIndex = `${index}rpx`
				this.isSelect = !this.isSelect
			},
			jumpDetail(index, item) {
				uni.setStorageSync("xjapptaskId", {
					flag: index,
					taskId: item.taskId,
					runTimes: item.runTimes
				})
				uni.navigateTo({
					url: '/pages/native/datalist/inProcess'
				})
			},
			openDialog() {
				const subNVue = uni.getSubNVueById('ApopLog1')
				subNVue.show('fade-in', 300, () => {

				});
				//	this.$refs.popup.open()
			},
			async getRobot() {
				this.taskList = []
				this.pageIndex = 1
				let res = await getRobotList()
				this.robotList = res.filter(item => {
					return item.followed == 1
				}) || []
				this.robotName = res[0].robotName
				this.robotData = res[0]
				this.getRobotStauts()
				this.currentTask()
			},
			taskStatus(type) {
				switch (type) {
					case 0:
						return '待执行'
					case 1:
						return '正在执行'
					case 2:
						return '已终止'
					case 3:
						return '已完成'
					case 4:
						return '已超期'
					case 5:
						return '已暂停'
				}
			},
			changeType(item) {
				item.show = item.show == undefined ? false : !item.show
			},
			changePicker(e) {
				this.heiIndex = `0rpx`
				this.isSelect = false 
				let data = this.robotList[e.target.value]
				
				this.loading = true 
				this.pickeIndex = e.target.value
				this.robotData = data
				this.robotName = data.robotName
				this.pageIndex = 1
				this.noData = false
				this.onOff = false
				this.taskList = []
				this.getRobotStauts()
				this.currentTask()
			},
			currentTask() {
				currentTask({
					robotId: this.robotData.robotId,
					pageIndex: this.pageIndex,
					pageSize: 10
				}).then(res => {
					res.map(item => {
						item.show = false
					})
					this.taskList = this.taskList.concat(res)
					if (res.length < 10) this.onOff = true
					if (this.taskList.length == 0) {
						this.noData = true, this.onOff = false
					}
					this.loading = false
				}).catch(e => {
					this.loading = false
					this.noData = true
					this.onOff = false
					console.log(e)
				})
			},
			getRobotStauts() {
				getRobotStauts({
					robotId: this.robotData.robotId
				}).then(res => {
					this.robotStatus = res
				}).catch(e => {
					console.log(e)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/components/p-loading/loading10';
	@import '@/components/p-loading/loading8';

	.creatView {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 230rpx;

		.icon-zanwu {
			font-size: 90px;
			color: #86B5E2;
		}

		.tx1 {
			font-size: 30rpx;
			padding: 15rpx;
			color: #86B5E2;
		}

		.btn1 {
			width: 260rpx;
			margin-top: 93rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
	}

	.loadingView {
		margin-top: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon {
		font-size: 22px;
		color: #23E274;
	}

	.moreView {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty {
		display: flex;
		justify-content: center;
		align-items: center;

		.t1 {
			font-size: 28rpx;
			color: #999;
			padding-bottom: 20rpx;
		}
	}

	.activeHeight {
		height: 330rpx !important;
		transition: height 0.3s;
	}
	.secHeight{
		transition: height 0.3s;
	}
	.nomalHeight {
		height: 0rpx;
		overflow: hidden;
	}

	.nv-work {
		.banner {
			width: 750rpx;
			height: 348rpx;
			background: #0581FD;
		}

		.nv-header-list {
			display: flex;
			position: absolute;
			text-align: center;
			left: 20rpx;
			right: 20rpx;
			top: 120rpx;

			.h-l-li {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.h-l-li-t {
					font-size: 22rpx;
					padding-top: 5rpx;
					color: #fff;
				}
			}
		}

		.nv-top {
			position: absolute;
			background-color: #FFFFFF;
			border-radius: 18rpx;
			box-shadow: 1px 2px 10px 0px #E5E5E5;
			top: 250rpx;

			left: 20rpx;
			right: 20rpx;
			align-items: center;
			padding: 0 10rpx 20rpx 10rpx;
			display: flex;

			.bg1 {
				background: linear-gradient(-83deg, #5B6EFF, #AFB9FF);
			}

			.bg2 {
				background: linear-gradient(-83deg, #1FAEB3, #90E6E9);
			}

			.left {
				width: 300rpx;
				margin: 25rpx 10rpx;
				border-radius: 15rpx;
				height: 100rpx;
				padding: 20rpx;
				display: flex;
				justify-content: space-between;

				.left-l {
					display: flex;
					flex-direction: column;

					.left-l-t1 {
						font-size: 40rpx;
						font-weight: bold;
						color: #fff;

						.t1-1 {
							font-size: 22rpx;
							font-weight: normal;
							margin-left: 25rpx;
						}
					}

					.left-l-t2 {
						font-size: 26rpx;
						margin-top: 18rpx;
						color: #fff;
					}
				}

				.left-r {}
			}
		}
		.selcontent {
			position: absolute;
			top: 80rpx;
			left: 20rpx;
			right: 20rpx;
			
			z-index: 9999999999;  
			display: block;
			overflow: scroll; 
			background-color: #46A0F9;
			height: 0;
			border-radius: 15rpx;   
			border-bottom-right-radius: 15rpx;
			.vv{
				padding: 30rpx 0;
				align-items: center;
				text-align: center;
				
				width: 100%; 
			}
			.v1 { 
				padding: 13rpx; 
				display: block;
				.vt1 {
					display: block;
					color: #fff;
					font-size:30rpx; 
				}
				.active{ 
					color: #46A0F9;
				}
			}
		}

		.selectTap {
			position: absolute;
			top: 20rpx;
			height: 53rpx;
			border-radius: 6px;
			background: #46A0F9;
			left: 20rpx;
			right: 20rpx;
			align-items: center;
			text-align: center;
			display: flex;
			flex-direction: row;

			.t1 {
				color: #fff;
				font-size: 28rpx;
				padding: 0 10rpx 0 5rpx;
			}
		}

		.nv-list {
			position: relative;
			overflow: hidden;
			z-index: 99999;
			margin: 0rpx 20rpx 30rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;
			box-shadow: 1px 2px 10px 0px #E5E5E5;

			.nv-done {
				position: absolute;
				top: 5rpx;
				right: -35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #3FBC4E;
				text-align: center;
				transform: rotate(30deg);

				.d-t1 {
					color: #fff;
					font-size: 20rpx;
				}
			}

			.top {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 0;
				margin: 0rpx 22rpx 0 22rpx;

				.t2 {
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
					padding-left: 10rpx;
				}
			}

			.center {
				padding: 20rpx 20rpx;

				.c-v0 {

					padding: 10rpx 10rpx;
					overflow: hidden;
					flex-direction: row;
					display: flex;
					justify-content: space-between;

					.c-v0-d1 {
						text-align: left;

						.d1-t {
							color: #000000;
							font-size: 24rpx;
							margin-bottom: 10rpx;
						}

						.di-b {
							text-align: right;
							font-size: 28rpx;
						}
					}
				}

				.ct-1 {
					color: #666;
					font-size: 30rpx;
				}

				.c-v1 {
					margin-top: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.ct-2 {
							color: #F76424;
							font-size: 44rpx;
							font-weight: bold;
						}

						.ct-3 {
							color: #F76424;
							font-size: 24rpx;
						}
					}

					.right {
						display: flex;
						align-items: center;

						.r-t1 {
							font-size: 26rpx;
							color: #5B5B5B;
						}
					}
				}

				.c-v2 {
					display: flex;
					margin-top: 30rpx;
					justify-content: space-between;

					.v2-1 {
						width: 325rpx;
						height: 100rpx;
						background: #EEEEEE;
						padding: 15rpx;
						border-radius: 15rpx;
						margin: 0 10rpx;

						.v2-bottom {
							margin-top: 10rpx;

							.text {
								font-size: 26rpx;
							}
						}

						.v2-top {
							.v2-t1 {
								color: #000000;
								font-size: 30rpx;
								font-weight: bold;
							}

							.v2-t2 {
								color: #000000;
								font-weight: bold;
								font-size: 30rpx;
								padding-left: 10rpx;
							}
						}
					}
				}

				.c-v3 {
					width: 640rpx;
					margin: 30rpx 0rpx 30rpx 0;

					.v3-1 {
						display: flex;
						padding: 0 15rpx;
						align-items: center;

						.v3-1-t1 {
							font-size: 30rpx;
							color: #000000;
							padding-right: 5rpx;
						}

						.v3-1-1 {
							.v3-1-t2 {
								color: #3F9BF1;
								font-size: 30rpx;
							}

							.v3-1-t3 {
								color: #000000;
								font-size: 30rpx;
							}
						}
					}
				}

				.c-bottom {
					display: flex;
					align-items: center;
					padding-bottom: 30rpx;
					justify-content: space-around;

					.c-b-l {
						background: linear-gradient(40deg, #87C589, #208E51);
					}

					.c-b-r {
						background: linear-gradient(45deg, #FA7839, #DDBE6A);
					}

					.c-cle {
						align-items: center;
						text-align: center;
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;

						.c-cle-n {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

						}

						.c-cle-l {
							background: #D7F0E1;

							.c-cle-n-t1 {
								font-size: 22rpx;
								color: #2F9659;
							}

							.c-cle-n-t2 {
								font-size: 26rpx;
								color: #2F9659;
								font-weight: bold;
							}
						}

						.c-cle-r {
							background: #FEECD6;

							.c-cle-n-t1 {
								font-size: 22rpx;
								color: #F97C3B;
							}

							.c-cle-n-t2 {
								font-size: 26rpx;
								color: #F97C3B;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>