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="calcFlow" type="primary" class="animated-button">计算流量</button>
    </div>

    <el-tabs v-model="activeTab" style="width: 100%;">
      <el-tab-pane label="流量计参数" name="meterpar">
        <meterPar v-model="parentMeterPar" />
      </el-tab-pane>

      <el-tab-pane label="天然气组分" name="ngComponents">
        <ngComponents v-model="parentMeterPar.dngComponents" />
      </el-tab-pane>
      <el-tab-pane label="流量计算结果" name="meterresult">
        <meterResult v-model:meterResult="parentMeterResult" />
        <n-g-result v-model:NGResult="parentNGResult"></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 {
        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,
          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
        },

        parentMeterResult: {
          dE: 10,
          dFG: 0,
          dFT: 0,
          dDViscosity: 0,
          dDExpCoefficient: 0,
          dRnPipe: 0,
          dBk: 0,
          dRoughNessPipe: 0,
          dCdCorrect: 0,
          dCdNozell: 0,
          dVFlowb: 100,
          dVFlowf: 100,
          dVFlowUnit: 2,
          dMFlowb: 44,
          dMFlowUnit: 0,
          dEFlowb: 33,
          dEFlowUnit: 0,
          dVelocityFlow: 3,
          dVelocityUnit: 1,
          dPressLost: 300,
          dPressLostUnit: 0,
          dBeta: 0,
          dKappa: 0
        },
        parentNGResult: {
          dMrx: null,
          dZb: null,
          dZf: null,
          dFpv: null,
          dDb: null,
          dDf: null,
          dRhob: null,
          dRhof: null,
          drdIdeal: null,
          drdReal: null,
          dHo: null,
          dH: null,
          dS: null,
          dCpi: null,
          dCp: null,
          dCv: null,
          dk: null,
          dKappa: null,
          dSOS: null,
          dCstar: null,
          dHhvMol: null,
          dLhvMol: null,
          dHhvv: null,
          dLhvv: null,
          dHhvm: null,
          dLhvm: null,
          dZb11062: null,
          dRhob11062: null,
          dRhof11062: null,
          drdIdeal11062: null,
          drdReal11062: null,
          dWobbeIndex: null,
          dPc: null,
          dTC: null,
          dBzsx: null,
          dBzxx: null,
          dTotalC: null,
          dC2: null,
          dC2j: null,
          dC3j: null,
          dC4j: null,
          dC5j: null,
          dC6j: null,
          dC3C4: null,
        },
        componentString: ''
      };
    },
    methods: {
      showMessage() {
        this.isShowMessage = true;
        setTimeout(() => {
          this.isShowMessage = false;
        }, 1000); // 3 秒后自动消失
      },
      calc() {
        console.log(this.parentMeterPar);
        calcNGPar(this.parentMeterPar)
          .then((res) => {
            this.parentNGResult = res.data
            this.activeTab = "meterresult"
            console.log('Response:', res);
          })
          .catch((error) => {
            console.error('Request error:', error);
          });
      },
      calcFlow() {
        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>