new-ruoyi-geek/ruoyi-geek-app/pages_caltools/pages/main.vue

<template>
	<view>
		<view class="btn-container">
			<button @click="btnCalc" type="primary" class="animated-button">{{ btnText }}</button>
		</view>

		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
			activeColor="#4cd964"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
			</view>
			<view v-show="current === 1">
				<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
			</view>
			<view v-show="current === 2">
				<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType"
					v-model="parentMeterResult" :el-form-width="elFormItemWidth" />
				<NGResult v-if="['4', '5', '6', '7'].includes(dMeterType)" :d-meter-type="dMeterType"
					v-model="parentNGResult" :el-form-width="elFormItemWidthmin"></NGResult>
			</view>
		</view>
		<view v-if="isShowMessage" class="message-box">{{ message }}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeMount,
		watch
	} from 'vue';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app';
	import meterPar from '../components/meterPar';
	import ngComponents from '../components/NGCom';
	import meterResult from '../components/meterResult';
	import NGResult from '../components/NGResult';
	import {
		calcNGPar,
		calcFlow
	} from '@/api/ngtools/NGCalcTools.js';

	// 定义响应式数据
	const items = ref(['工况参数', '组分数据', '计算结果'])
	const current = ref(0)
	const btnText = ref('');
	const elFormItemWidth = ref(160);
	const elFormItemWidthmin = ref(140); 
	const isShowMessage = ref(false);
	const message = ref('');
	const parentMeterPar = ref({
		dFlowCalbz: '0',
		dZcalbz: '0',
		dCbtj: '0',
		dpbM: 0,
		dtbM: 0,
		dpbE: 0,
		dtbE: 0,
		dPatm: 0.0981,
		dPatmUnit: 2,
		dngComponents: '',
		dMeterType: '0',
		dCoreType: '0',
		dPtmode: '1',
		dPipeType: '0',
		dPipeD: 259.38,
		dLenUnit: 3,
		dPipeDtemp: 20,
		dPileDtempU: 0,
		dPipeMaterial: '11.16',
		dOrificeD: 150.25,
		dOrificeUnit: 3,
		dOrificeDtemp: 0,
		dOrificeDtempUnit: 0,
		dOrificeMaterial: '16.6',
		dOrificeSharpness: 0,
		dOrificeRk: 0,
		dOrificeRkLenU: 0,
		dPf: 1.48,
		dPfUnit: 2,
		dPfType: '0',
		dTf: 15,
		dTfUnit: 0,
		dDp: 12.5,
		dDpUnit: 1,
		dVFlowUnit: 0,
		dVFlowWorkUnit: 0,
		dMFlowUnit: 0,
		dEFlowUnit: 6,
		dCd: 0.9957,
		dCdCalMethod: 0,
		dMeterFactor: 2354,
		dPulseNum: 12000,
		dVFlowMax: 6,
		dVFlowMin: 3,
		dVFlowCon: 5,
		dPfRangeMin: 0,
		dPfRangeMax: 0,
		dDpRangeMin: 0,
		dDpRangeMax: 0,
		dTfRangeMin: 0,
		dTfRangeMax: 0,
		dVGsc: 300,
		dVGscUnit: 0,
		dCalcType: 0, //0 流量 1  天然气  3 管束车
		dBqdd: 0 //0 不计算，1 计算  计算不确定度
	});

	const parentMeterResult = 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: 2,
		dMFlowb: 0,
		dMFlowUnit: 0,
		dEFlowb: 0,
		dEFlowUnit: 0,
		dVelocityFlow: 0,
		dVelocityUnit: 0,
		dPressLost: 0,
		dPressLostUnit: 0,
		dBeta: 0,
		dKappa: 0
	});

	const parentNGResult = 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 componentString = ref('');
	const dMeterType = ref('0');

	//在页面加载时获取参数
	onLoad((options) => {
		if (options.dMeterType) {
			dMeterType.value = options.dMeterType;
			parentMeterPar.value.dMeterType = dMeterType.value;
		}
	});
	 

	// 监听 dMeterType 的变化
	watch(dMeterType, (newValue) => {
		if (['0', '1', '2', '3'].includes(newValue)) {
			btnText.value = '计算流量';
		} else if (newValue === '4') {
			btnText.value = '计算压缩因子';
		} else if (newValue === '5') {
			btnText.value = '计算声速';
		} else if (newValue === '6') {
			btnText.value = '计算发热量';
		} else if (newValue === '7') {
			btnText.value = '计算其他参数';
		}
		parentMeterPar.value.dMeterType = newValue;
		console.log('dMeterType 变化后，parentMeterPar:', parentMeterPar.value);
	});

	// 显示消息提示框
	const showMessage = () => {
		isShowMessage.value = true;
		setTimeout(() => {
			isShowMessage.value = false;
		}, 1000); // 1 秒后自动消失
	};

	// 切换tab
	const onClickItem = (e) => {

		current.value = e.currentIndex
	};

	// 计算按钮点击事件
	const btnCalc = () => {
		if (['0', '1', '2', '3'].includes(dMeterType.value)) {
			calcBtnFlow();
		} else if (['4', '5', '6', '7'].includes(dMeterType.value)) {
			calc();
		}
	};

	// 计算天然气参数
	const calc = async () => {
		console.log(parentMeterPar.value);
		if (parentMeterPar.value.dngComponents === '') {
			message.value = '组分为空，请输入天然气组分!';
			showMessage();
			current.value = 1;
			return;
		}
		// 清空 parentNGResult 的值
		for (const key in parentNGResult.value) {
			if (parentNGResult.value.hasOwnProperty(key)) {
				parentNGResult.value[key] = 0;
			}
		}
		try {
			const res = await calcNGPar(parentMeterPar.value);
			parentNGResult.value = res.data;
			current.value = 2;
			console.log('Response:', res);
		} catch (error) {
			console.error('Request error:', error);
			uni.showToast({
				title: '计算失败',
				icon: 'none'
			});
		}
	};

	// 计算流量
	const calcBtnFlow = async () => {
		console.log(parentMeterPar.value);
		if (parentMeterPar.value.dngComponents === '') {
			message.value = '组分为空，请输入天然气组分!';
			showMessage();
			current.value = 1;
			return;
		}
		// 清空 parentMeterResult 的值
		for (const key in parentMeterResult.value) {
			if (parentMeterResult.value.hasOwnProperty(key)) {
				parentMeterResult.value[key] = 0;
			}
		}
		try {
			const res = await calcFlow(parentMeterPar.value);
			parentMeterResult.value = res.data[0];
			console.log('Response:', parentMeterResult.value);
			current.value = 2;
		} catch (error) {
			console.error('Request error:', error);
			uni.showToast({
				title: '计算失败',
				icon: 'none'
			});
		}
	};
</script>

<style scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.btn-container {
		text-align: center;
		margin: 20rpx 0;
		padding: 0 20rpx;
	}

	.animated-button {
		background-color: #007AFF;
		color: white;
		padding: 20rpx 40rpx;
		border: none;
		border-radius: 10rpx;
		font-size: 32rpx;
		transition: all 0.3s ease;
		width: 100%;
		max-width: 400rpx;
	}

	.animated-button:hover {
		background-color: #0056b3;
		transform: scale(1.05);
	}

	.animated-button:active {
		transform: scale(0.95);
	}

	.content {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.tab-content {
		width: 100%;
	}

	.message-box {
		position: fixed;
		top: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #333;
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 10rpx;
		z-index: 9999;
		font-size: 28rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}

	/* 确保分段控制器宽度正确 */
	:deep(.uni-segmented-control) {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	/* 移动端适配 */
	@media (max-width: 750px) {
		.animated-button {
			padding: 24rpx 36rpx;
			font-size: 30rpx;
		}

		.content {
			padding: 15rpx;
		}
	}
</style>