261 lines
8.2 KiB
Vue
261 lines
8.2 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form :model="meterResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="flex-form">
|
|
<el-form-item :style="{ width: selectWidth + 'px' }" 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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</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"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E" prop="dE">
|
|
<el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" " />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求相对密度系数 FG" prop="dFG">
|
|
<el-input readonly v-model="meterResult.dFG" placeholder=" " />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求流动温度系数 FT" prop="dFT">
|
|
<el-input readonly v-model="meterResult.dFT" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求动力粘度dlnd" prop="dDViscosity">
|
|
<el-input readonly v-model="meterResult.dDViscosity" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求可膨胀系数" prop="dDExpCoefficient">
|
|
<el-input readonly v-model="meterResult.dDExpCoefficient" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道雷诺数" prop="dRnPipe">
|
|
<el-input readonly v-model="meterResult.dRnPipe" placeholder="" />
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="修正后的流出系数" prop="dCdCorrect">
|
|
<el-input readonly v-model="meterResult.dCdCorrect" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喷嘴的流出系数" prop="dCdNozell">
|
|
<el-input readonly v-model="meterResult.dCdNozell" placeholder="" />
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="dMeterType === '0'" 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"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" 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"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="直径比" prop="dBeta">
|
|
<el-input readonly v-model="meterResult.dBeta" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="等熵指数" prop="dKappa">
|
|
<el-input readonly v-model="meterResult.dKappa" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板锐利度系数Bk" prop="dBk">
|
|
<el-input readonly v-model="meterResult.dBk" placeholder="" />
|
|
</el-form-item>
|
|
<el-form-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
|
|
<el-input readonly v-model="meterResult.dRoughNessPipe" 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
|
|
})
|
|
},
|
|
elFormWidth: {
|
|
type: Number,
|
|
default: 180
|
|
},
|
|
dMeterType: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
},
|
|
mounted() {
|
|
this.selectWidth = this.elFormWidth;
|
|
},
|
|
data() {
|
|
return {
|
|
meterResult: {
|
|
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
|
|
},
|
|
selectWidth: 0
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
elFormWidth: {
|
|
deep: true,
|
|
handler(newVal) {
|
|
this.selectWidth = newVal;
|
|
}
|
|
},
|
|
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(() => {
|
|
// 在 DOM 更新后获取宽度
|
|
this.selectWidth = this.elFormWidth;
|
|
});
|
|
},
|
|
methods: {}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可按需添加样式 */
|
|
.app-container {
|
|
height: 100%;
|
|
}
|
|
.flex-form {
|
|
display: grid;
|
|
/* 优化后的自适应规则 */
|
|
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
|
gap: 5px;
|
|
|
|
/* 移动端优化补充 */
|
|
@media (max-width: 768px) {
|
|
/* 手机端强制单列布局 */
|
|
/* grid-template-columns: 1fr; */
|
|
|
|
/* 防止内容溢出 */
|
|
overflow-x: hidden;
|
|
|
|
/* 移动端缩小间距 */
|
|
gap: 2px;
|
|
|
|
/* 表单项最小高度保障 */
|
|
grid-auto-rows: minmax(40px, auto);
|
|
}
|
|
|
|
/* 子元素弹性处理 */
|
|
> * {
|
|
min-width: 0; /* 允许内容收缩 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
</style>
|