ruoyi-ui/src/views/ngtools/FlowCal/index.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)" v-model:meterResult="parentMeterResult" :el-form-width="elFormItemWidthmin" />
        <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: 200,
      elFormItemWidthmin: 180,
      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>