ruoyi-ui/src/components/NGTools/meterResult.vue

<template>
  <div class="app-container">
    <el-form :model="meterResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px"
      class="result-form">
      <el-form-item label="求渐近速度系数 E" prop="dE" ref="selectRef">
        <el-input disabled v-model="meterResult.dE" placeholder=" " />
      </el-form-item>
      <el-form-item label="求相对密度系数 FG" prop="dFG">
        <el-input disabled v-model="meterResult.dFG" placeholder=" " />
      </el-form-item>
      <el-form-item label="求流动温度系数 FT" prop="dFT">
        <el-input disabled v-model="meterResult.dFT" placeholder="" />
      </el-form-item>
      <el-form-item label="求动力粘度dlnd" prop="dDViscosity">
        <el-input disabled v-model="meterResult.dDViscosity" placeholder="" />
      </el-form-item>
      <el-form-item label="求可膨胀系数" prop="dDExpCoefficient">
        <el-input disabled v-model="meterResult.dDExpCoefficient" placeholder="" />
      </el-form-item>
      <el-form-item label="管道雷诺数" prop="dRnPipe">
        <el-input disabled v-model="meterResult.dRnPipe" placeholder="" />
      </el-form-item>
      <el-form-item label="孔板锐利度系数Bk" prop="dBk">
        <el-input disabled v-model="meterResult.dBk" placeholder="" />
      </el-form-item>
      <el-form-item label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
        <el-input disabled v-model="meterResult.dRoughNessPipe" placeholder="" />
      </el-form-item>
      <el-form-item label="修正后的流出系数" prop="dCdCorrect">
        <el-input disabled v-model="meterResult.dCdCorrect" placeholder="" />
      </el-form-item>
      <el-form-item label="喷嘴的流出系数" prop="dCdNozell">
        <el-input disabled v-model="meterResult.dCdNozell" placeholder="" />
      </el-form-item>
      <el-form-item label="标况体积流量m³/s" prop="dVFlowb">
        <unit-converter v-model="meterResult.dVFlowb" :unit-type="'volumeflow'"
          :unit-order.sync="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="5" :width="selectWidth"
          :input-disable="true" :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="工况体积流量" prop="dVFlowf">
        <unit-converter v-model="meterResult.dVFlowf" :unit-type="'volumeflow'"
          :unit-order.sync="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="5"
          :input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="标况质量流量" prop="dMFlowb">
        <unit-converter v-model="meterResult.dMFlowb" :unit-type="'massflow'" :unit-order.sync="meterResult.dMFlowUnit"
          :input-disable="true" :show-english-only="true" :decimal-places="5" :width="selectWidth"
          :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="标况能量流量" prop="dEFlowb">
        <unit-converter v-model="meterResult.dEFlowb" :unit-type="'energyflow'"
          :unit-order.sync="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="5" :width="selectWidth"
          :input-disable="true" :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="管道内天然气流速" prop="dVelocityFlow">
        <unit-converter v-model="meterResult.dVelocityFlow" :unit-type="'speed'"
          :unit-order.sync="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
          :input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="压力损失" prop="dPressLost">
        <unit-converter v-model="meterResult.dPressLost" :unit-type="'pressure'"
          :unit-order.sync="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
          :input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
      </el-form-item>
      <el-form-item label="直径比" prop="dBeta">
        <el-input disabled v-model="meterResult.dBeta" placeholder="" />
      </el-form-item>
      <el-form-item label="等熵指数" prop="dKappa">
        <el-input disabled v-model="meterResult.dKappa" placeholder="" />
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import unitConverter from '@/components/inputValueUnit/index';
  export default {
    name: 'MeterresultComponent',
    components: {
      unitConverter
    },

    props: {
      value: {
        type: Object,
        default: () => ({
          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: 0,
          dMFlowb: 0,
          dMFlowUnit: 0,
          dEFlowb: 0,
          dEFlowUnit: 0,
          dVelocityFlow: 0,
          dVelocityUnit: 0,
          dPressLost: 0,
          dPressLostUnit: 0,
          dBeta: 0,
          dKappa: 0
        })
      }
    },

    data() {
      return {
        meterResult: [],
        selectWidth: 180
      };
    },

    watch: {
      value: {
        deep: true,
        handler(newVal) {
          console.log(newVal)
          for (const key in newVal) {
            if (newVal.hasOwnProperty(key)) {
              const value = newVal[key];
              // 判断是否为有效的数值
              if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
                // 使用 toFixed 方法设置小数点位数
                newVal[key] = parseFloat(value.toFixed(6));
              }
            }
          }
          this.meterResult = JSON.parse(JSON.stringify(newVal));

        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
        if (this.selectWidth === 0) this.selectWidth = 180
        console.log("wwww", this.selectWidth)
      })

    },
    methods: {}
  };
</script>

<style scoped>
  /* 可按需添加样式 */
  .app-container {
    height: 100%;
  }

  .result-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }

  .total-input>>>.el-input__inner {
    font-weight: bold;
    color: #409eff;
  }
</style>