ruoyi-geek-App/pages_caltools/components/meterResult.vue

<template>
	<view class="app-container">
		<uni-forms :modelValue="meterResult" ref="queryRef" label-position="top" :label-width="160">
			<!-- 响应式网格容器 -->
			<view class="form-grid">

				<!-- 标况体积流量m³/s -->
				<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况体积流量m³/s" name="dVFlowb">
					<a-yjly-inputunit :modelValue="meterResult.dVFlowb" :unit-type="'volumeflow'"
						v-model:unitOrder="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="6"
						:width="selectWidth" :input-disable="true" />
				</uni-forms-item>

				<!-- 工况体积流量 -->
				<uni-forms-item :style="{ width: selectWidth + 'px' }" label="工况体积流量" name="dVFlowf">
					<a-yjly-inputunit :modelValue="meterResult.dVFlowf" :unit-type="'volumeflow'"
						v-model:unitOrder="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="6"
						:input-disable="true" :width="selectWidth" />
				</uni-forms-item>

				<!-- 标况质量流量 -->
				<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况质量流量" name="dMFlowb">
					<a-yjly-inputunit :modelValue="meterResult.dMFlowb" :unit-type="'massflow'"
						v-model:unitOrder="meterResult.dMFlowUnit" :input-disable="true" :show-english-only="true"
						:decimal-places="6" :width="selectWidth" />
				</uni-forms-item>

				<!-- 标况能量流量 -->
				<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况能量流量" name="dEFlowb">
					<a-yjly-inputunit :modelValue="meterResult.dEFlowb" :unit-type="'energyflow'"
						v-model:unitOrder="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="6"
						:width="selectWidth" :input-disable="true" />
				</uni-forms-item>
				<!-- 求超压缩因子 E -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="超压缩因子Fz"
					name="dE">
					<uni-easyinput :modelValue="meterResult.dFpv" placeholder=" " disabled />
				</uni-forms-item>
				<!-- 求渐近速度系数 E -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E"
					name="dE">
					<uni-easyinput :modelValue="meterResult.dE" placeholder=" " disabled />
				</uni-forms-item>

				<!-- 求相对密度系数 FG -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求相对密度系数 FG"
					name="dFG">
					<uni-easyinput :modelValue="meterResult.dFG" placeholder=" " disabled />
				</uni-forms-item>

				<!-- 求流动温度系数 FT -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求流动温度系数 FT"
					name="dFT">
					<uni-easyinput :modelValue="meterResult.dFT" placeholder="" disabled />
				</uni-forms-item>

				<!-- 求动力粘度dlnd -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求动力粘度dlnd"
					name="dDViscosity">
					<uni-easyinput :modelValue="meterResult.dDViscosity" placeholder="" disabled />
				</uni-forms-item>

				<!-- 求可膨胀系数 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求可膨胀系数"
					name="dDExpCoefficient">
					<uni-easyinput :modelValue="meterResult.dDExpCoefficient" placeholder="" disabled />
				</uni-forms-item>

				<!-- 管道雷诺数 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道雷诺数"
					name="dRnPipe">
					<uni-easyinput :modelValue="meterResult.dRnPipe" placeholder="" disabled />
				</uni-forms-item>
				<!-- 流出系数 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="流出系数"
					name="dCdCorrect">
					<uni-easyinput :modelValue="meterResult.dCd" placeholder="" disabled />
				</uni-forms-item>

				<!-- 修正后的流出系数 -->
				<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="修正后的流出系数"
					name="dCdCorrect">
					<uni-easyinput :modelValue="meterResult.dCdCorrect" placeholder="" disabled />
				</uni-forms-item>

				<!-- 喷嘴的流出系数 -->
				<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喷嘴的流出系数"
					name="dCdNozell">
					<uni-easyinput :modelValue="meterResult.dCdNozell" placeholder="" disabled />
				</uni-forms-item>

				<!-- 管道内天然气流速 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道内天然气流速"
					name="dVelocityFlow">
					<a-yjly-inputunit :modelValue="meterResult.dVelocityFlow" :unit-type="'speed'"
						v-model:unitOrder="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
						:input-disable="true" :width="selectWidth" />
				</uni-forms-item>

				<!-- 压力损失 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="压力损失"
					name="dPressLost">
					<a-yjly-inputunit :modelValue="meterResult.dPressLost" :unit-type="'pressure'"
						v-model:unitOrder="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
						:input-disable="true" :width="selectWidth" />
				</uni-forms-item>

				<!-- 直径比 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="直径比"
					name="dBeta">
					<uni-easyinput :modelValue="meterResult.dBeta" placeholder="" disabled />
				</uni-forms-item>

				<!-- 等熵指数 -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="等熵指数"
					name="dKappa">
					<uni-easyinput :modelValue="meterResult.dKappa" placeholder="" disabled />
				</uni-forms-item>

				<!-- 孔板锐利度系数Bk -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板锐利度系数Bk"
					name="dBk">
					<uni-easyinput :modelValue="meterResult.dBk" placeholder="" disabled />
				</uni-forms-item>

				<!-- 管道粗糙度系数 Gme -->
				<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道粗糙度系数 Gme"
					name="dRoughNessPipe">
					<uni-easyinput :modelValue="meterResult.dRoughNessPipe" placeholder="" disabled />
				</uni-forms-item>
			</view>
		</uni-forms>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';


	// 定义 props
	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => ({
				dE: 0,
				dFG: 0,
				dFT: 0,
				dDViscosity: 0,
				dDExpCoefficient: 0,
				dRnPipe: 0,
				dBk: 0,
				dRoughNessPipe: 0,
				dCdCorrect: 0,
				dCdNozell: 0,
				dVFlowb: 0,
				dVFlowf: 0,
				dVFlowUnit: 0,
				dMFlowb: 0,
				dMFlowUnit: 0,
				dEFlowb: 0,
				dEFlowUnit: 0,
				dVelocityFlow: 0,
				dVelocityUnit: 0,
				dPressLost: 0,
				dPressLostUnit: 0,
				dBeta: 0,
				dKappa: 0
			})
		},
		elFormWidth: {
			type: Number,
			default: 180
		},
		dMeterType: {
			type: String,
			default: '0'
		}
	});

	// 定义响应式数据
	const meterResult = ref({
		dE: 0,
		dFG: 0,
		dFT: 0,
		dDViscosity: 0,
		dDExpCoefficient: 0,
		dRnPipe: 0,
		dBk: 0,
		dRoughNessPipe: 0,
		dCdCorrect: 0,
		dCdNozell: 0,
		dVFlowb: 0,
		dVFlowf: 0,
		dVFlowUnit: 0,
		dMFlowb: 0,
		dMFlowUnit: 0,
		dEFlowb: 0,
		dEFlowUnit: 0,
		dVelocityFlow: 0,
		dVelocityUnit: 0,
		dPressLost: 0,
		dPressLostUnit: 0,
		dBeta: 0,
		dKappa: 0
	});
	const selectWidth = ref(0);

	// 监听 elFormWidth 的变化
	watch(
		() => props.elFormWidth,
		(newVal) => {
			selectWidth.value = newVal;
		}, {
			deep: true
		}
	);

	// 监听 value 的变化
	watch(
		() => props.modelValue,
		(newVal) => {
			console.log(newVal);
			const processedValue = {
				...newVal
			};
			for (const key in processedValue) {
				if (processedValue.hasOwnProperty(key)) {
					const value = processedValue[key];
					// 判断是否为有效的数值
					if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
						// 使用 toFixed 方法设置小数点位数
						processedValue[key] = parseFloat(value.toFixed(6));
					}
				}
			}
			meterResult.value = JSON.parse(JSON.stringify(processedValue));
		}, {
			deep: true
		}
	);

	// 挂载后设置 selectWidth
	onMounted(() => {
		// 在 DOM 更新后获取宽度
		selectWidth.value = props.elFormWidth;
	});
</script>

<style scoped>
	.app-container {
		padding: 5rpx;
		box-sizing: border-box;
		width: 100%;
	}

	/* 网格布局容器 */
	.form-grid {
		display: grid;
		gap: 24rpx;
		/* 表单项之间的间距 */
		width: 100%;
	}

	/* 表单项基础样式 */
	.form-item {
		width: 100%;
		margin: 0;
	}

	/* 响应式布局 - 屏幕宽度小于768px时显示2列 */
	@media screen and (max-width: 768px) {
		.form-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* 响应式布局 - 屏幕宽度大于等于768px时显示3列 */
	@media screen and (min-width: 768px) {
		.form-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	/* 优化表单元素样式 */
	:deep(.uni-forms-item) {
		margin-bottom: 0 !important;
	}

	:deep(.uni-forms-item__label) {
		font-size: 22rpx;
		color: #868686;
		margin-bottom: 5rpx;
		line-height: 1.4;
	}

	:deep(.uni-data-select__input),
	:deep(.uni-easyinput__content),
	:deep(.a-yjly-inputunit) {
		width: 100%;
		min-height: 70rpx;
		box-sizing: border-box;
	}

	:deep(.uni-input-input),
	:deep(.uni-easyinput__content input) {
		font-size: 28rpx;
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	/* 确保小屏幕下表单不溢出 */
	@media screen and (max-width: 480px) {
		.app-container {
			padding: 10rpx;
		}

		.form-grid {
			gap: 16rpx;
		}

		:deep(.uni-forms-item__label) {
			font-size: 22rpx;
		}

		:deep(.uni-input-input) {
			font-size: 28rpx;
		}
	}

	/* 针对输入框禁用状态的样式优化 */
	:deep(.uni-easyinput__content.is-disabled) {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
	}

	:deep(.uni-input-input:disabled) {
		background-color: #f5f7fa;
		color: #606266;
		-webkit-text-fill-color: #606266;
		opacity: 1;
	}

	/* 自定义输入单位组件的样式调整 */
	:deep(.a-yjly-inputunit) {
		display: flex;
		align-items: center;
	}

	:deep(.a-yjly-inputunit .uni-easyinput__content) {
		flex: 1;
		margin-right: 8rpx;
	}

	:deep(.a-yjly-inputunit .uni-data-select) {
		flex-shrink: 0;
		width: 120rpx;
	}
</style>