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

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" :title="scenario?.scenarioName || '轮灌方案'"></custom-nav-bar>
	<view class="text-intel" v-if="scenario">
		<view style="width: 50%;">
			<span>轮灌组：</span>
			<span class="font-green">{{`${scenario.groupNum}个`}}</span>
		</view>
		<view style="width: 50%;">
			<span>总时长：</span>
			<span class="font-green">{{`${scenario.groupNum} h`}}</span>
		</view>
	</view>
	<view class="text-intel" v-if="scenario">
		<view style="width: 50%;">
			<span>自动调压：</span>
			<span class="font-green">{{scenario.isAutoAdjust == 0 ? '否':'是'}}</span>
		</view>
		<view style="width: 50%;">
			<span>压力：</span>
			<span class="font-green">{{`${scenario.pressureMin} - ${scenario.pressureMax}`}}</span>
		</view>
	</view>
	<view class="card" v-if="scenario">
		<uni-collapse>
			<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true"
				v-for="group in scenario.groups">
				<template v-slot:title>
					<view class="cards-title">
						<view>
							<view class="text">{{group.groupName}}</view>
							<view>
								<span>时长：</span>
								<span class="font-green">{{`${group.irrigateDuration} h`}}</span>
							</view>
							<view>已选：{{group.wos.length}}</view>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="cards-content">
						<view class="greybar" v-for="wo in group.wos">
							<view>出水口：<span>{{wo.woName}}</span></view>
							<view v-if="wo.deviceTypeKey == 'valve'">三通阀
								<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}</span>
							</view>
							<view v-else-if="wo.deviceTypeKey == 'fiveValve'">五通阀
								<span>{{valveKey[wo.deviceTypeKey][wo.valveNo]}}</span>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

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

	export default {
		data() {
			return {
				scenario: null,
				valveKey: {
					"valve": {
						"1": "①开",
						"2": "②开",
						"3": "全开 ",
						"4": "全关",
					},
					"fiveValve": {
						"1": "①开",
						"2": "②开",
						"3": "③开",
						"4": "④开",
					}
				},
			};
		},
		onLoad(par) {
			this.getItem(par.id || -1);
		},
		methods: {
			getItem(id) {
				uni.showLoading()
				isApi.getIrrigateScenario(id).then(res => {
					uni.hideLoading()
					this.scenario = res.data;
				})
			},
		},

	};
</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>