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

<template>
	<view class="app-container">
		<!--  <div>当前 dMeterType 的值: {{ dMeterType }}</div>
    <div>NGResult 数据: {{ NGResult }}</div> -->
		<view v-if="dMeterType === '4'" class="section-title">GB/T 17747</view>
		<u-divider v-if="dMeterType === '4'"></u-divider>
		<uni-forms v-if="dMeterType === '4'" :label-width="160" :modelValue="NGResult" label-position="top"
			ref="queryRef">

			<view class="form-grid">
				<uni-forms-item class="form-item" label="分子量" name="dMrx">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dMrx"
						placeholder="分子量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="标况压缩因子" name="dZb">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dZb"
						placeholder="标况压缩因子" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="工况压缩因子" name="dZf">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dZf"
						placeholder="工况压缩因子" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="超压缩系数" name="dFpv">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dFpv"
						placeholder="超压缩系数" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="标况摩尔密度" name="dDb">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dDb"
						placeholder="标况摩尔密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="工况摩尔密度" name="dDf">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dDf"
						placeholder="工况摩尔密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="标况质量密度" name="dRhob">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRhob"
						placeholder="标况质量密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="工况质量密度" name="dRhof">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRhof"
						placeholder="工况质量密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="理想气体的相对密度" name="dRD_Ideal">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRD_Ideal"
						placeholder="理想气体的相对密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="真实气体的相对密度" name="dRD_Real">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRD_Real"
						placeholder="真实气体的相对密度" />
				</uni-forms-item>
			</view>
		</uni-forms>

		<view v-if="dMeterType === '5'" class="section-title">AGA No10</view>
		<u-divider v-if="dMeterType === '5'"></u-divider>
		<uni-forms v-if="dMeterType === '5'" :modelValue="NGResult" label-position="top" ref="queryRef"
			:label-width="160">
			<view class="form-grid">
				<uni-forms-item class="form-item" label="理想气体的比焓" name="dHo">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dHo"
						placeholder="理想气体的比焓" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="真实气体的焓" name="dH">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dH"
						placeholder="真实气体的焓" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="真实气体的熵" name="dS">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dS"
						placeholder="真实气体的熵" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="理想气体定压热容" name="dCpi">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dCpi"
						placeholder="理想气体定压热容" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="定压热容" name="dCp">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dCp"
						placeholder="定压热容" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="定容积热容" name="dCv">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dCv"
						placeholder="定容积热容" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="比热比" name="dk">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dk"
						placeholder="比热比" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="等熵指数" name="dKappa">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dKappa"
						placeholder="等熵指数" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="声速m/s" name="dSOS">
					<!-- <a-yjly-inputunit v-model="NGResult.dSOS" :unit-type="'speed'" :show-english-only="true"
						:decimal-places="5" :input-disable="true" :width="selectWidth" /> -->
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dSOS"
						placeholder="声速" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="临界流函数" name="dCstar">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dCstar"
						placeholder="临界流函数" />
				</uni-forms-item>
			</view>
		</uni-forms>

		<view v-if="dMeterType === '6'" class="section-title">GB/T 11062</view>
		<u-divider v-if="dMeterType === '6'"></u-divider>
		<uni-forms v-if="dMeterType === '6'" :modelValue="NGResult" label-position="top" ref="queryRef"
			:label-width="160">
			<view class="form-grid">
				<uni-forms-item class="form-item" label="摩尔高位发热量MJ/mol" name="dHhvMol">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dHhvMol"
						placeholder="摩尔高位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="摩尔低位发热量MJ/mol" name="dLhvMol">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dLhvMol"
						placeholder="摩尔低位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="体积高位发热量MJ/m³" name="dHhvv">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dHhvv"
						placeholder="体积高位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="体积低位发热量MJ/m³" name="dLhvv">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dLhvv"
						placeholder="体积低位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="质量高位发热量MJ/t" name="dHhvm">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dHhvm"
						placeholder="质量高位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="质量地位发热量MJ/t" name="dLhvm">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dLhvm"
						placeholder="质量地位发热量" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="标况压缩因子" name="dZb11062">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dZb11062"
						placeholder="标况压缩因子" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="标况质量密度kg/m³" name="dRhob11062">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRhob11062"
						placeholder="标况质量密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="工况质量密度kg/m³" name="dRhof11062">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRhof11062"
						placeholder="工况质量密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="理想气体的相对密度" name="dRD_Ideal11062">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRD_Ideal11062"
						placeholder="理想气体的相对密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="真实气体的相对密度" name="dRD_Real11062">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dRD_Real11062"
						placeholder="真实气体的相对密度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="真实气体的沃泊指数" name="dWobbeIndex">
					<uni-easyinput disabled :clearable="false" :value="NGResult.dWobbeIndex" placeholder="真实气体的沃泊指数" />
				</uni-forms-item>
			</view>
		</uni-forms>

		<view v-if="dMeterType === '7'" class="section-title">其他</view>
		<uni-forms v-if="dMeterType === '7'" :modelValue="NGResult" label-position="top" ref="queryRef"
			:label-width="160">
			<view class="form-grid">
				<uni-forms-item class="form-item" label="临界压力" name="dPc">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dPc"
						placeholder="临界压力" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="临界温度" name="dTC">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dTC"
						placeholder="临界温度" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="爆炸上限" name="dBzsx">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dBzsx"
						placeholder="爆炸上限" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="爆炸下限" name="dBzxx">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dBzxx"
						placeholder="爆炸下限" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="总炭含量(kg/m3)" name="dTotalC">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dTotalC"
						placeholder="总炭含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C2组分含量(kg/m3)" name="dC2">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC2"
						placeholder="C2组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C2以上组分含量(kg/m3)" name="dC2j">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC2j"
						placeholder="C2以上组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C3以上组分含量(kg/m3)" name="dC3j">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC3j"
						placeholder="C3以上组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C4以上组分含量(kg/m3)" name="dC4j">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC4j"
						placeholder="C4以上组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C5以上组分含量(kg/m3)" name="dC5j">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC5j"
						placeholder="C5以上组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C6以上组分含量(kg/m3)" name="dC6j">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC6j"
						placeholder="C6以上组分含量(kg/m3)" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="C3C4组分含量(kg/m3)" name="dC3C4">
					<uni-easyinput class="easyInput" disabled :clearable="false" :value="NGResult.dC3C4"
						placeholder="C3C4组分含量(kg/m3)" />
				</uni-forms-item>
			</view>
		</uni-forms>
	</view>
</template>

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

	// 定义 props
	const props = defineProps({
		elFormWidth: {
			type: Number,
			default: 180
		},
		dMeterType: {
			type: String,
			default: '0'
		},
		modelValue: {
			type: Object,
			default: () => ({
				dMrx: 0,
				dZb: 0,
				dZf: 0,
				dFpv: 0,
				dDb: 0,
				dDf: 0,
				dRhob: 0,
				dRhof: 0,
				dRD_Ideal: 0,
				dRD_Real: 0,
				dHo: 0,
				dH: 0,
				dS: 0,
				dCpi: 0,
				dCp: 0,
				dCv: 0,
				dk: 0,
				dKappa: 0,
				dSOS: 0,
				dCstar: 0,
				dHhvMol: 0,
				dLhvMol: 0,
				dHhvv: 0,
				dLhvv: 0,
				dHhvm: 0,
				dLhvm: 0,
				dZb11062: 0,
				dRhob11062: 0,
				dRhof11062: 0,
				dRD_Ideal11062: 0,
				dRD_Real11062: 0,
				dWobbeIndex: 0,
				dPc: 0,
				dTC: 0,
				dBzsx: 0,
				dBzxx: 0,
				dTotalC: 0,
				dC2: 0,
				dC2j: 0,
				dC3j: 0,
				dC4j: 0,
				dC5j: 0,
				dC6j: 0,
				dC3C4: 0
			})
		}
	});

	// 定义响应式数据
	const NGResult = ref({
		dMrx: 0,
		dZb: 0,
		dZf: 0,
		dFpv: 0,
		dDb: 0,
		dDf: 0,
		dRhob: 0,
		dRhof: 0,
		dRD_Ideal: 0,
		dRD_Real: 0,
		dHo: 0,
		dH: 0,
		dS: 0,
		dCpi: 0,
		dCp: 0,
		dCv: 0,
		dk: 0,
		dKappa: 0,
		dSOS: 0,
		dSOSUnit: 0,
		dCstar: 0,
		dHhvMol: 0,
		dLhvMol: 0,
		dHhvv: 0,
		dLhvv: 0,
		dHhvm: 0,
		dLhvm: 0,
		dZb11062: 0,
		dRhob11062: 0,
		dRhof11062: 0,
		dRD_Ideal11062: 0,
		dRD_Real11062: 0,
		dWobbeIndex: 0,
		dPc: 0,
		dTC: 0,
		dBzsx: 0,
		dBzxx: 0,
		dTotalC: 0,
		dC2: 0,
		dC2j: 0,
		dC3j: 0,
		dC4j: 0,
		dC5j: 0,
		dC6j: 0,
		dC3C4: 0
	});
	const selectWidth = ref(180);
	const queryRef = ref(null);

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

	// 监听 value 的变化
	watch(
		() => props.modelValue,
		(newVal) => {
			console.log('NGResult数据更新:', 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));
					}
				}
			}
			NGResult.value = JSON.parse(JSON.stringify(processedValue));
		}, {
			deep: true,
			immediate: true
		}
	);

	// 挂载后设置 selectWidth
	onMounted(() => {
		selectWidth.value = props.elFormWidth;
	});
</script>

<style scoped>
	/* 容器样式 */
	.form-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);
		}
	}

	.easyInput {
		color: blue;
		font-weight: 400;
	}

	/* 优化表单元素样式 */
	: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 10rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

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

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

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

		.form-grid {
			gap: 16rpx;
		}

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

		:deep(.uni-input-input) {
			font-size: 26rpx;
		}
	}
</style>