jsy-app/pages/irrigation/task/detail.vue

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="任务详情"></custom-nav-bar>

	<view class="card">
		<view class="cards-title">
			<view>
				<view class="text">任务名称：{{task.taskName}}</view>
			</view>
			<view class="title-r">
				<uni-tag type="default" :circle="true" text="未轮灌" v-if="task.status == 0" />
				<uni-tag type="primary" :circle="true" text="轮灌中" v-else-if="task.status == 1" />
				<uni-tag type="success" :circle="true" text="已完成" v-else-if="task.status == 2" />
				<uni-tag type="warning" :circle="true" text="已终止" v-else-if="task.status == 3" />
				<uni-tag type="royal" :circle="true" text="暂停" v-else-if="task.status == 4" />
				<uni-tag type="error" :circle="true" text="未知" v-else />
			</view>
		</view>
		<view class="content">
			<view class="cards-content">
				<view class="txt-list">
					<view class="list1">
						<view><text>轮灌方案：</text>{{task.scenarioName}}</view>
						<view><text>轮灌组数：</text>{{task.groupNum}}</view>
						<view><text>起始组：</text>{{task.startGroup}}</view>
						<view><text>总时长：</text>{{task.irrigateTotalDuration}}</view>
						<view><text>是否调压：</text>{{task.isAutoAdjust == 0 ? '否':'是'}}</view>
						<view><text>压力：</text>{{`${task.pressureMin} - ${task.pressureMax}`}}</view>
						<view><text>开始时间：</text>{{task.startTime}}</view>
						<view><text>结束时间：</text>{{task.endTime}}</view>
						<view><text>结束原因：</text>{{task.endReason}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-btn">
			<uni-grid :column="4" :showBorder="false" :square="false">
				<uni-grid-item>
					<button @click="updateTask(3)" :disabled="!(task.status == 1)">
						<view class="iconfont icon-zz"></view>
						<text class="text">终止</text>
					</button>
				</uni-grid-item>
				<uni-grid-item>
					<button @click="updateTask(4)" :disabled="!(task.status == 1)">
						<view class="iconfont icon-zanting"></view>
						<text class="text">暂停</text>
					</button>
				</uni-grid-item>
				<uni-grid-item>
					<button @click="updateTask(1)" :disabled="!(task.status == 4)">
						<view class="iconfont icon-jixu"></view>
						<text class="text">继续</text>
					</button>
				</uni-grid-item>
				<uni-grid-item>
					<button @click="irrigationdetails">
						<view class="iconfont icon-xiangqing"></view>
						<text class="text">详情</text>
					</button>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	import * as taskApi from '@/api/irrigate/task.js'

	export default {
		data() {
			return {
				id: null,
				task: {},
			};
		},
		onLoad(par) {
			this.id = par.id;
			this.loadData();
		},
		methods: {
			loadData() {
				uni.showLoading()
				taskApi.getTask(this.id).then(res => {
					this.task = res.data;
					uni.hideLoading()
				});
			},
			// 页面跳转
			irrigationdetails() {
				uni.navigateTo({
					url: `/pages/irrigation/task/detailGroup?id=${this.task.id}`
				});
			},
			updateTask(status) {
				let title = "";
				switch (status) {
					case 1:
						title = "继续执行?"
						break;
					case 3:
						title = "终止执行?"
						break;
					case 4:
						title = "暂停执行?"
						break;
				}
				this.$showConfirm(title).then(() => {
					taskApi.updateTask({
						id: this.task.id,
						status: status
					}).then(res => {
						this.$toast("删除成功");
						this.loadData();
					}).catch(err => {
						this.$showConfirm(err, false).then(() => {
							this.loadData();
						})
					})
				}).catch(() => {});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.flex-btn {
		width: 90%;
		position: fixed;
		bottom: 10px;
		left: 5%;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
		text-align: center;
		padding: 10px 0;
	}

	.uni-grid-item__box {
		uni-button {
			padding: 0;
			line-height: normal;
			font-size: 0.875rem;
			background-color: transparent;
		}

		uni-button:after {
			border: none;
		}

		.iconfont {
			color: #39ac4f;
			font-size: 2.3rem;
		}
	}
</style>