373 lines
7.7 KiB
Vue
373 lines
7.7 KiB
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> |