332 lines
8.5 KiB
Vue
332 lines
8.5 KiB
Vue
<template>
|
||
<div>
|
||
<div style="text-align: center; margin-top: 10px; margin-bottom: 10px">
|
||
<!-- <button @click="calc" type="primary" class="animated-button">计算组分参数</button> -->
|
||
<button @click="btnCalc" type="primary" class="animated-button">{{ btnText }}</button>
|
||
</div>
|
||
|
||
<el-tabs v-model="activeTab" style="width: 100%">
|
||
<el-tab-pane label="工况参数" name="meterpar">
|
||
<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="摩尔组分" name="ngComponents">
|
||
<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
|
||
</el-tab-pane>
|
||
<el-tab-pane label="计算结果" name="meterresult">
|
||
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType" v-model:meterResult="parentMeterResult" :el-form-width="elFormItemWidth" />
|
||
<n-g-result v-if="['4', '5', '6', '7'].includes(dMeterType)" :d-meter-type="dMeterType" v-model:NGResult="parentNGResult" :el-form-width="elFormItemWidthmin"></n-g-result>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<div v-if="isShowMessage" class="message-box">{{ message }}</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import meterPar from '@/components/NGTools/meterPar';
|
||
import ngComponents from '@/components/NGTools/NGCom';
|
||
import meterResult from '@/components/NGTools/meterResult';
|
||
import NGResult from '@/components/NGTools/NGResult';
|
||
|
||
import { calcNGPar, calcFlow } from '@/api/ngtools/NGCalcTools.js';
|
||
|
||
export default {
|
||
name: 'TabbedComponentWrapper',
|
||
components: {
|
||
meterPar,
|
||
ngComponents,
|
||
meterResult,
|
||
NGResult
|
||
},
|
||
data() {
|
||
return {
|
||
btnText: '',
|
||
elFormItemWidth: 160,
|
||
elFormItemWidthmin: 140,
|
||
activeTab: 'meterpar',
|
||
isShowMessage: false,
|
||
message: '',
|
||
parentMeterPar: {
|
||
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: '0',
|
||
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 计算 计算不确定度
|
||
},
|
||
|
||
parentMeterResult: {
|
||
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
|
||
},
|
||
parentNGResult: {
|
||
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
|
||
},
|
||
componentString: '',
|
||
dMeterType: 0
|
||
};
|
||
},
|
||
mounted() {
|
||
// console.log('179行', this.dMeterType);
|
||
this.$nextTick(() => {
|
||
this.parentMeterPar.dMeterType = this.dMeterType;
|
||
// console.log('180行', this.parentMeterPar);
|
||
});
|
||
},
|
||
created() {
|
||
// 获取路由的查询参数
|
||
let params = this.$route.query;
|
||
// console.log('186行', params);
|
||
this.dMeterType = params.dMeterType;
|
||
},
|
||
watch: {
|
||
dMeterType(newValue) {
|
||
if (this.dMeterType === '0' || this.dMeterType === '1' || this.dMeterType === '2' || this.dMeterType === '3') {
|
||
this.btnText = '计算流量';
|
||
} else if (this.dMeterType === '4') {
|
||
this.btnText = '计算压缩因子';
|
||
} else if (this.dMeterType === '5') {
|
||
this.btnText = '计算声速';
|
||
} else if (this.dMeterType === '6') {
|
||
this.btnText = '计算发热量';
|
||
} else if (this.dMeterType === '7') {
|
||
this.btnText = '计算其他参数';
|
||
}
|
||
this.parentMeterPar.dMeterType = newValue;
|
||
console.log('dMeterType 变化后，parentMeterPar:', this.parentMeterPar);
|
||
}
|
||
},
|
||
methods: {
|
||
showMessage() {
|
||
this.isShowMessage = true;
|
||
setTimeout(() => {
|
||
this.isShowMessage = false;
|
||
}, 1000); // 3 秒后自动消失
|
||
},
|
||
btnCalc() {
|
||
if (this.dMeterType === '0' || this.dMeterType === '1' || this.dMeterType === '2' || this.dMeterType === '3') {
|
||
this.calcBtnFlow();
|
||
} else if (this.dMeterType === '4' || this.dMeterType === '5' || this.dMeterType === '6' || this.dMeterType === '7') {
|
||
this.calc();
|
||
}
|
||
},
|
||
|
||
calc() {
|
||
console.log(this.parentMeterPar);
|
||
if (this.parentMeterPar.dngComponents === '') {
|
||
this.message = '组分为空，请输入天然气组分!';
|
||
this.showMessage();
|
||
this.activeTab = 'ngComponents';
|
||
return;
|
||
}
|
||
// 遍历对象并将每个属性的值设置为零
|
||
for (const key in this.parentNGResult) {
|
||
if (this.parentNGResult.hasOwnProperty(key)) {
|
||
this.parentNGResult[key] = 0;
|
||
}
|
||
}
|
||
calcNGPar(this.parentMeterPar)
|
||
.then((res) => {
|
||
this.parentNGResult = res.data;
|
||
this.activeTab = 'meterresult';
|
||
console.log('Response:', res);
|
||
})
|
||
.catch((error) => {
|
||
console.error('Request error:', error);
|
||
});
|
||
},
|
||
calcBtnFlow() {
|
||
console.log(this.parentMeterPar);
|
||
if (this.parentMeterPar.dngComponents === '') {
|
||
this.message = '组分为空，请输入天然气组分!';
|
||
this.showMessage();
|
||
this.activeTab = 'ngComponents';
|
||
return;
|
||
}
|
||
// 遍历对象并将每个属性的值设置为零
|
||
for (const key in this.parentMeterResult) {
|
||
if (this.parentMeterResult.hasOwnProperty(key)) {
|
||
this.parentMeterResult[key] = 0;
|
||
}
|
||
}
|
||
calcFlow(this.parentMeterPar)
|
||
.then((res) => {
|
||
this.parentMeterResult = res.data[0];
|
||
console.log('Response:', this.parentMeterResult);
|
||
this.activeTab = 'meterresult';
|
||
})
|
||
.catch((error) => {
|
||
console.error('Request error:', error);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.animated-button {
|
||
background-color: #007bff;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
transition: background-color 0.3s ease;
|
||
}
|
||
|
||
.animated-button:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.animated-button:hover {
|
||
background-color: #0056b3;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.animated-button:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 使用深度选择器 */
|
||
/deep/ .el-tabs__nav {
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
/deep/ .el-tabs__item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 10px;
|
||
}
|
||
|
||
.message-box {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: #333;
|
||
color: white;
|
||
padding: 10px 20px;
|
||
border-radius: 5px;
|
||
z-index: 9999;
|
||
}
|
||
</style>
|