jsy-app/pages/batch-control/index.vue

<template>
	<z-paging ref="paging" @query="queryList" v-model="dataList" :auto-show-system-loading="true"
		empty-view-text="抱歉，暂时还没有相关数据！" :pull-refresh="false">
		<template #top>
			<!-- 顶部导航栏 -->
			<custom-nav-bar :left="true" @leftClick="" title="批量控制">
				<template v-slot:right>
					<view class="fixed">
						<view align="right" class="icon iconfont icon-fenxiang" @click="share"></view>
						<view align="right" class="icon iconfont icon-jia" @click="editItem()"></view>
					</view>
				</template>
			</custom-nav-bar>
		</template>
		<view class="card">
			<uni-collapse>
				<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
					v-for="item in dataList">
					<template v-slot:title>
						<view class="cards-title">
							<view>
								<view class="text">{{ item.groupName }}</view>
								<view></view>
								<view>已选：{{item.wos.length}}</view>
							</view>
							<view class="title-r">
								<view @click.stop="editItem(item)">
									<u-button type="success" size="mini" text="编辑" />
								</view>
								<view @click.stop="removeItem(item)">
									<u-button class="bg-red" type="success" size="mini" text="删除" />
								</view>
							</view>
						</view>
					</template>
					<view class="content">
						<view class="cards-content">
							<view class="greybar" v-for="wo in item.wos">
								<view>出水口：<span>{{ wo.woName }}</span></view>
								<view v-if="wo.deviceTypeKey == 'valve'">三通阀
									<span>{{valveKey[wo.deviceTypeKey][wo.angleKey]}}</span>
									<span v-if="wo.angle">
										({{`${valveKey[wo.deviceTypeKey][wo.angle.angleKey]}-${wo.angle.angle}`}})
									</span>
								</view>
								<view v-if="wo.deviceTypeKey == 'fiveValve'">五通阀
									<span>{{valveKey[wo.deviceTypeKey][wo.angleKey]}}</span>
									<span>{{valveKey[wo.deviceTypeKey][wo.angleKey]}}</span>
								</view>
							</view>
							<view class="card-font">
								<u-button type="primary" size="mini" text="角度记忆" @click="saveBatchControlAngle(item)"
									:disabled="disabled" />
								<u-button type="success" size="mini" text="关阀" @click="batchControlClose(item)"
									:disabled="disabled" />
								<u-button type="success" size="mini" text="记忆开阀" @click="batchControlExec(1,item)"
									:disabled="disabled" />
								<u-button type="success" size="mini" text="直接开阀" @click="batchControlExec(0,item)"
									:disabled="disabled" />
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</z-paging>
</template>
<script>
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	export default {
		data() {
			return {
				landId: null,
				dataList: [],
				valveKey: {
					"valve": {
						"close": "全关",
						"open1": "①开",
						"open2": "②开",
						"open": "全开 ",
					},
					"fiveValve": {
						"open1": "①开",
						"open2": "②开",
						"open3": "③开",
						"open4": "④开",
					}
				},
				disabled: false
			}
		},
		onLoad(par) {
			if (getApp().ijs.land) {
				this.landId = getApp().ijs.land.id;
			}
		},
		onShow() {
			this.queryList();
		},
		mounted() {},
		methods: {
			queryList() {
				isApi.getBatchControlList(this.landId).then(res => {
					if (res.data) {
						this.$refs.paging.completeByTotal(res.data.groups || []);
					} else {
						this.$refs.paging.completeByTotal([]);
					}

				});
			},
			// 新增
			async editItem(item = null) {
				let url = `/pages/batch-control/edit?landId=${this.landId}`
				if (item) {
					url = `${url}&id=${item.id}`
				}
				uni.navigateTo({
					url: url
				});
			},
			// 删除
			removeItem(item) {
				this.$showConfirm(`删除"${item.groupName}"?`).then(res => {
					if (res.confirm) {
						isApi.removeBatchControl(item.id).then(res => {
							this.queryList();
							this.$toast("删除成功")
						});
					}
				})
			},
			// 开阀
			batchControlExec(isMemory, item) {
				this.$showConfirm("执行批量开阀？").then(res => {
					if (res.confirm) {
						this.disabled = true;
						isApi.batchControlExec(isMemory, item.id).then(res => {
							this.disabled = false;
							if (res.data && res.data.length) {
								this.$toast(`"${res.data.toString()}"以上阀门执行异常`)
							}
							uni.showModal({
								title: '开阀完成',
								content: "仅表示命令发送成功，不代表阀门执行成功，请留意阀门状态，以阀门上报状态为准。",
								showCancel: false,
								success: (res) => {
									uni.navigateBack();
								}
							});
						});
					}
				});
			},
			// 关阀
			batchControlClose(item) {
				this.$showConfirm("执行批量关阀？").then(res => {
					if (res.confirm) {
						this.disabled = true;
						isApi.batchControlClose(item.id).then(res => {
							this.disabled = false;
							if (res.data && res.data.length) {
								this.$toast(`"${res.data.toString()}"以上阀门执行异常`)
							}
							uni.showModal({
								title: '关阀完成',
								content: "仅表示命令发送成功，不代表阀门执行成功，请留意阀门状态，以阀门上报状态为准。",
								showCancel: false,
								success: (res) => {
									uni.navigateBack();
								}
							});
						});
					}
				});
			},
			// 角度记忆
			saveBatchControlAngle(item) {
				this.$showConfirm("执行角度记忆？").then(res => {
					if (res.confirm) {
						this.disabled = true;
						isApi.saveBatchControlAngle(item.id).then(res => {
							this.disabled = false;
							this.$toast("记忆成功");
							this.queryList();
						});
					}
				});

			},
			// 分享
			share() {
				this.$toast("开发中")
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-app,
	uni-page,
	uni-page-wrapper,
	uni-page-body {
		padding-bottom: 38px !important;
	}

	::v-deep .uni-forms {
		margin-right: 10px;
		padding: 0 !important;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 0 !important;
	}

	::v-deep .uni-forms-item__label {
		min-width: 0 !important;
		width: auto !important;
		font-size: 0.8rem;
		height: inherit;
		padding: 0;
	}

	::v-deep .uni-easyinput__content-input {
		height: 20px;
		width: 50px;
		padding-left: 5px !important;
	}
</style>