jsy-app/pages/irrigation/index.vue

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="false" leftText="" @leftClick="" title="轮灌">
		<template v-slot:right>
			<view class="fixed">
				<view align="right" class="iconfont icon-jia1 icon" @click="editTask()" v-show="tab.current === 0" />
				<view align="right" class="iconfont icon-jia1 icon" @click="editScenario()" v-show="tab.current === 1"
					v-hasPermi="['irrigate:irrigateScenario:saveIrrigateScenario']" />
			</view>
		</template>
	</custom-nav-bar>
	<!-- 选项卡 -->
	<uni-segmented-control :current="tab.current" :values="tab.items" @clickItem="onClickItem" styleType="text"
		activeColor="#39ac4f"></uni-segmented-control>

	<view class="content">
		<view v-show="tab.current === 0">
			<z-paging ref="pagingTask" @query="queryTask" v-model="task" :auto-show-system-loading="true"
				:default-page-size="pageSize" empty-view-text="抱歉，暂时还没有相关数据！" class="custom-z-paging">
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-green" :circle="true" text="轮灌中" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list" @click="taskdetails">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始值：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-orange" :circle="true" text="暂停" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始值：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">任务名称：006</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-red" :circle="true" text="终止" />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list">
										<view class="list1">
											<view><text>轮灌方案：</text>全设备</view>
											<view><text>起始组：</text>外部程曦</view>
											<view><text>开始时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>结束时间：</text>2025-01-05&nbsp;&nbsp;10:11</view>
											<view><text>是否调压：</text>是</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you">
											</view>
										</view>
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</z-paging>
		</view>
		<view v-show="tab.current === 1">
			<z-paging ref="pagingScenario" @query="queryScenario" v-model="scenario" :auto-show-system-loading="true"
				:default-page-size="pageSize" empty-view-text="抱歉，暂时还没有相关数据！" class="custom-z-paging">
				<view class="card">
					<uni-collapse>
						<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
							v-for="item in scenario">
							<template v-slot:title>
								<view class="cards-title">
									<view>
										<view class="text">方案名称：{{item.scenarioName}}</view>
									</view>
									<view class="title-r">
										<uni-tag class="bg-green" :circle="true" text="启用" v-if="item.delFlag == '0'" />
										<uni-tag class="bg-red" :circle="true" text="禁用" v-else />
									</view>
								</view>
							</template>
							<view class="content">
								<view class="cards-content">
									<view class="txt-list" @click="irrigationgroup(item)">
										<view class="list2">
											<view><text>轮灌组数量：</text>{{item.groupNum}}</view>
											<view><text>总时长：</text>{{item.irrigateTotalDuration}}</view>
											<view><text>自动调压：</text>{{item.isAutoAdjust == 0 ? '否':'是'}}</view>
											<view><text>压力：</text>{{`${item.pressureMin} - ${item.pressureMax}`}}</view>
										</view>
										<view class="right">
											<view class="iconfont icon-you" />
										</view>
									</view>
									<view class="card-font">
										<u-button v-hasPermi="['irrigate:irrigateScenario:saveIrrigateScenario']"
											type="success" size="mini" text="编辑" @click="editScenario(item)" />
										<u-button v-hasPermi="['irrigate:irrigateScenario:delFlag']" size="mini"
											type="error" text="禁用" @click="updateScenario(item,true)"
											v-if="item.delFlag == '0'" />
										<u-button v-hasPermi="['irrigate:irrigateScenario:delFlag']" size="mini"
											type="success" text="启用" @click="updateScenario(item,false)" v-else />
									</view>
								</view>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	export default {
		data() {
			return {
				tab: {
					items: ['轮灌详情', '轮灌方案'],
					current: 0,
				},
				landId: null,
				pageSize: 20,
				landId: null,
				task: [],
				scenario: [],
			};
		},
		onShow() {
			if (getApp().ijs.land) {
				this.landId = getApp().ijs.land.id;
			}
		},
		mounted() {},
		methods: {
			onClickItem(e) {
				if (this.tab.current != e.currentIndex) {
					this.tab.current = e.currentIndex;
				}
			},
			async queryTask() {
				this.$refs.pagingTask.completeByTotal([]);
				// this.$refs.pagingTask.completeByTotal(res.rows, res.total);
			},
			async queryScenario() {
				isApi.list({
					landId: this.landId,
					scenarioType: 2,
					status: "0",
					// delFlag: "0",
				}).then(res => {
					this.scenario = res.rows;
					this.$refs.pagingScenario.completeByTotal(res.rows, res.total);
				})
			},
			/********************************* 任务 *********************************/
			editTask(item = null) {
				let url = `/pages/irrigation/task/task`
				if (item) {
					url = `${url}?id=${item.id}`
				} else {
					url = `${url}?landId=${this.landId}`
				}
				uni.navigateTo({
					url: url
				});
			},
			//页面跳转
			taskdetails() {
				uni.navigateTo({
					url: '/pages/irrigation/details/taskdetails'
				});
			},

			/********************************* 方案 *********************************/
			//方案编辑
			editScenario(item = null) {
				let url = `/pages/irrigation/scenario/scenario`
				if (item) {
					url = `${url}?id=${item.id}`
				} else {
					url = `${url}?landId=${this.landId}`
				}
				uni.navigateTo({
					url: url
				});
			},
			//方案详情
			irrigationgroup(item) {
				uni.navigateTo({
					url: `/pages/irrigation/scenario/detail?id=${item.id}`
				});
			},
			//方案删除
			updateScenario(item, disabled) {
				if (disabled) {
					this.$showConfirm(`禁用"${item.scenarioName}"?`).then(() => {
						isApi.disabled(item.id).then(res => {
							this.$toast("禁用成功");
							this.queryScenario();
						})
					}).catch(() => {});
				} else {
					this.$showConfirm(`启用"${item.scenarioName}"?`).then(() => {
						isApi.enable(item.id).then(res => {
							this.$toast("启用成功");
							this.queryScenario();
						})
					}).catch(() => {});
				}
			}



			// // 页面跳转
			// config() {
			// 	uni.navigateTo({
			// 		url: '/pages/irrigation/config'
			// 	});
			// }

		},

	};
</script>

<style lang="scss" scoped>
	// 选项卡
	.segmented-control {
		background-color: #fff;
	}

	.segmented-control__item--text {
		font-weight: bold;
	}

	::v-deep .segmented-control__text {
		font-size: 16px;
	}

	.custom-z-paging {
		margin-top: 80px;
	}
</style>