bjhedasx/webcode/uni-app/pages/home/calculatorNext.vue

<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-tb-20 padding-lr-30">
				<view class="text-32 text-bold">
					疏散宽度计算
				</view>
				<view class="line-height-100 border-bottom-ed flex align-center text-30 margin-top-10">
					<view>建筑类型</view>
					<view class="flex-one margin-left-30 text-33 text-right text-cut-one">{{dataDetail.place_name}}</view>
				</view>
				<view class="line-height-100 border-bottom-ed flex align-center text-30 margin-top-10">
					<view>位置</view>
					<view class="flex-one margin-left-30 text-33 text-right text-cut-one">{{dataDetail.position_name}}</view>
				</view>
				<view class="margin-top-10 border-bottom-ed flex align-center text-30"
					v-if="dataDetail.is_have_refractory == 1">
					<view>耐火等级</view>
					<view class="flex-one">
						<picker :range="levels" range-key="name" :value="levelIndex" @change="changeLevel"
							class="width-100p">
							<view class="flex line-height-100 align-center justify-end">
								<view class="text-30" :class="levelIndex == null ? 'text-aa' : ''">
									{{levelIndex == null ? '请选择' : levels[levelIndex].name}}
								</view>
								<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
							</view>
						</picker>
					</view>
				</view>
				<view class="margin-top-10 border-bottom-ed flex align-center text-30"
					v-if="dataDetail.calculation_type == 1">
					<view>疏散人数</view>
					<input :placeholder="placeholder" v-model="personNum"
						class="flex-one margin-left-30 line-height-100 text-30 text-right" placeholder-class="text-aa"
						type="number" />
				</view>
				<view class="margin-top-10 border-bottom-ed flex align-center text-30"
					v-if="dataDetail.calculation_type == 2">
					<view>建筑面积（㎡）</view>
					<input placeholder="请输入场所建筑面积" v-model="area"
						class="flex-one margin-left-30 line-height-100 text-30 text-right" placeholder-class="text-aa"
						type="digit" />
				</view>
			</view>
		</view>

		<view class="bottomBox">
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold" @click="toResult">
				开始计算
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1, //1-疏散宽度计算 2-疏散距离查询 3-安全出口数量查询 4-楼梯类型查询 5-防火间距查询
				placeId: '', //场所ID
				positionId: '', //位置id
				personNum: '', //人数
				levels: [], //耐火等级
				levelIndex: null,
				area: '', //建筑面积
				dataDetail: {},
				showPage: false,
				placeholder:'',
			}
		},
		onLoad(options) {
			this.placeId = options.placeId;
			this.positionId = options.positionId;
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.rq.getData('calculator/api/Calculator/getPosition', {
					place_id: this.placeId,
					position_id: this.positionId
				}).then(res => {
					if (res.code == 0) {
						this.levels = res.data.refractory_list;
						this.dataDetail = res.data;
						if(res.data.place_id == 4 || res.data.place_id == 5 || res.data.place_id == 6 || res.data.place_id == 7){
							this.placeholder = '请输入疏散人数或床位数';
						}else if(res.data.place_id == 13 || res.data.place_id == 1||res.data.place_id == 2||res.data.place_id == 3){
							this.placeholder = '请输入疏散人数或座位数';
						}else{
							this.placeholder = '请输入疏散人数';
						}
						
						this.showPage = true;
					}
				})
			},
			changeLevel(e) {
				this.levelIndex = e.detail.value;
			},
			toResult() {
				if (this.dataDetail.is_have_refractory == 1) {
					if (this.levelIndex == null) {
						this.cn.alert('请选择耐火等级');
						return;
					}
				}
				// if (this.dataDetail.calculation_type == 1) {
				// 	if (this.personNum == 0) {
				// 		this.cn.alert('请输入人数或座位数');
				// 		return;
				// 	}
				// 	if (this.personNum > 100) {
				// 		this.cn.alert('疏散人数最大数值为100');
				// 		return;
				// 	}
				// }
				// if (this.dataDetail.calculation_type == 2) {
				// 	if (this.area == '') {
				// 		this.cn.alert('请输入场所面积');
				// 		return;
				// 	}
				// 	if (this.area <= 0) {
				// 		this.cn.alert('建筑面积请输入大于0数值');
				// 		return;
				// 	}
				// }

				this.rq.getData('calculator/api/Calculator/isInputAvailable', {
					place_id: this.placeId,
					position_id: this.positionId,
					refractory_id: this.levelIndex == null ? '' : this.levels[this.levelIndex].id,
					input_value: this.dataDetail.calculation_type == 1 ? this.personNum : this.area
				}).then(res => {
					if (res.code == 0) {
						var rid = this.levelIndex == null ? '' : this.levels[this.levelIndex].id;
						var iv = this.dataDetail.calculation_type == 1 ? this.personNum : this.area;
						if (this.levelIndex == null) {
							uni.navigateTo({
								url: '/pages/home/calculatorResult?placeId=' + this.placeId +
									'&positionId=' +
									this.positionId + '&inputValue=' + iv
							})
						} else {
							uni.navigateTo({
								url: '/pages/home/calculatorResult?placeId=' + this.placeId +
									'&positionId=' +
									this.positionId + '&refractoryId=' + rid + '&inputValue=' + iv
							})
						}
					}
				})

			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
</style>