363 lines
10 KiB
Vue
363 lines
10 KiB
Vue
<template>
|
|
<view class="app-container">
|
|
<uni-forms :modelValue="meterResult" ref="queryRef" label-position="top" :label-width="160">
|
|
<!-- 响应式网格容器 -->
|
|
<view class="form-grid">
|
|
|
|
<!-- 标况体积流量m³/s -->
|
|
<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况体积流量m³/s" name="dVFlowb">
|
|
<a-yjly-inputunit :modelValue="meterResult.dVFlowb" :unit-type="'volumeflow'"
|
|
v-model:unitOrder="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="5"
|
|
:width="selectWidth" :input-disable="true" />
|
|
</uni-forms-item>
|
|
|
|
<!-- 工况体积流量 -->
|
|
<uni-forms-item :style="{ width: selectWidth + 'px' }" label="工况体积流量" name="dVFlowf">
|
|
<a-yjly-inputunit :modelValue="meterResult.dVFlowf" :unit-type="'volumeflow'"
|
|
v-model:unitOrder="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="5"
|
|
:input-disable="true" :width="selectWidth" />
|
|
</uni-forms-item>
|
|
|
|
<!-- 标况质量流量 -->
|
|
<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况质量流量" name="dMFlowb">
|
|
<a-yjly-inputunit :modelValue="meterResult.dMFlowb" :unit-type="'massflow'"
|
|
v-model:unitOrder="meterResult.dMFlowUnit" :input-disable="true" :show-english-only="true"
|
|
:decimal-places="5" :width="selectWidth" />
|
|
</uni-forms-item>
|
|
|
|
<!-- 标况能量流量 -->
|
|
<uni-forms-item :style="{ width: selectWidth + 'px' }" label="标况能量流量" name="dEFlowb">
|
|
<a-yjly-inputunit :modelValue="meterResult.dEFlowb" :unit-type="'energyflow'"
|
|
v-model:unitOrder="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="5"
|
|
:width="selectWidth" :input-disable="true" />
|
|
</uni-forms-item>
|
|
<!-- 求超压缩因子 E -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="超压缩因子Fz"
|
|
name="dE">
|
|
<uni-easyinput :modelValue="meterResult.dFpv" placeholder=" " disabled />
|
|
</uni-forms-item>
|
|
<!-- 求渐近速度系数 E -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求渐近速度系数 E"
|
|
name="dE">
|
|
<uni-easyinput :modelValue="meterResult.dE" placeholder=" " disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 求相对密度系数 FG -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求相对密度系数 FG"
|
|
name="dFG">
|
|
<uni-easyinput :modelValue="meterResult.dFG" placeholder=" " disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 求流动温度系数 FT -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求流动温度系数 FT"
|
|
name="dFT">
|
|
<uni-easyinput :modelValue="meterResult.dFT" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 求动力粘度dlnd -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求动力粘度dlnd"
|
|
name="dDViscosity">
|
|
<uni-easyinput :modelValue="meterResult.dDViscosity" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 求可膨胀系数 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="求可膨胀系数"
|
|
name="dDExpCoefficient">
|
|
<uni-easyinput :modelValue="meterResult.dDExpCoefficient" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 管道雷诺数 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道雷诺数"
|
|
name="dRnPipe">
|
|
<uni-easyinput :modelValue="meterResult.dRnPipe" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
<!-- 流出系数 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="流出系数"
|
|
name="dCdCorrect">
|
|
<uni-easyinput :modelValue="meterResult.dCd" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 修正后的流出系数 -->
|
|
<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="修正后的流出系数"
|
|
name="dCdCorrect">
|
|
<uni-easyinput :modelValue="meterResult.dCdCorrect" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 喷嘴的流出系数 -->
|
|
<uni-forms-item v-if="dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喷嘴的流出系数"
|
|
name="dCdNozell">
|
|
<uni-easyinput :modelValue="meterResult.dCdNozell" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 管道内天然气流速 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道内天然气流速"
|
|
name="dVelocityFlow">
|
|
<a-yjly-inputunit :modelValue="meterResult.dVelocityFlow" :unit-type="'speed'"
|
|
v-model:unitOrder="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
|
|
:input-disable="true" :width="selectWidth" />
|
|
</uni-forms-item>
|
|
|
|
<!-- 压力损失 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="压力损失"
|
|
name="dPressLost">
|
|
<a-yjly-inputunit :modelValue="meterResult.dPressLost" :unit-type="'pressure'"
|
|
v-model:unitOrder="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
|
|
:input-disable="true" :width="selectWidth" />
|
|
</uni-forms-item>
|
|
|
|
<!-- 直径比 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="直径比"
|
|
name="dBeta">
|
|
<uni-easyinput :modelValue="meterResult.dBeta" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 等熵指数 -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="等熵指数"
|
|
name="dKappa">
|
|
<uni-easyinput :modelValue="meterResult.dKappa" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 孔板锐利度系数Bk -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板锐利度系数Bk"
|
|
name="dBk">
|
|
<uni-easyinput :modelValue="meterResult.dBk" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
|
|
<!-- 管道粗糙度系数 Gme -->
|
|
<uni-forms-item v-if="dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道粗糙度系数 Gme"
|
|
name="dRoughNessPipe">
|
|
<uni-easyinput :modelValue="meterResult.dRoughNessPipe" placeholder="" disabled />
|
|
</uni-forms-item>
|
|
</view>
|
|
</uni-forms>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
watch,
|
|
onMounted
|
|
} from 'vue';
|
|
|
|
|
|
// 定义 props
|
|
const props = defineProps({
|
|
modelValue: {
|
|
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'
|
|
}
|
|
});
|
|
|
|
// 定义响应式数据
|
|
const meterResult = ref({
|
|
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
|
|
});
|
|
const selectWidth = ref(0);
|
|
|
|
// 监听 elFormWidth 的变化
|
|
watch(
|
|
() => props.elFormWidth,
|
|
(newVal) => {
|
|
selectWidth.value = newVal;
|
|
}, {
|
|
deep: true
|
|
}
|
|
);
|
|
|
|
// 监听 value 的变化
|
|
watch(
|
|
() => props.modelValue,
|
|
(newVal) => {
|
|
console.log(newVal);
|
|
const processedValue = {
|
|
...newVal
|
|
};
|
|
for (const key in processedValue) {
|
|
if (processedValue.hasOwnProperty(key)) {
|
|
const value = processedValue[key];
|
|
// 判断是否为有效的数值
|
|
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
|
|
// 使用 toFixed 方法设置小数点位数
|
|
processedValue[key] = parseFloat(value.toFixed(6));
|
|
}
|
|
}
|
|
}
|
|
meterResult.value = JSON.parse(JSON.stringify(processedValue));
|
|
}, {
|
|
deep: true
|
|
}
|
|
);
|
|
|
|
// 挂载后设置 selectWidth
|
|
onMounted(() => {
|
|
// 在 DOM 更新后获取宽度
|
|
selectWidth.value = props.elFormWidth;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
padding: 5rpx;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 网格布局容器 */
|
|
.form-grid {
|
|
display: grid;
|
|
gap: 24rpx;
|
|
/* 表单项之间的间距 */
|
|
width: 100%;
|
|
}
|
|
|
|
/* 表单项基础样式 */
|
|
.form-item {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 响应式布局 - 屏幕宽度小于768px时显示2列 */
|
|
@media screen and (max-width: 768px) {
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 响应式布局 - 屏幕宽度大于等于768px时显示3列 */
|
|
@media screen and (min-width: 768px) {
|
|
.form-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 优化表单元素样式 */
|
|
:deep(.uni-forms-item) {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
:deep(.uni-forms-item__label) {
|
|
font-size: 22rpx;
|
|
color: #868686;
|
|
margin-bottom: 5rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
:deep(.uni-data-select__input),
|
|
:deep(.uni-easyinput__content),
|
|
:deep(.a-yjly-inputunit) {
|
|
width: 100%;
|
|
min-height: 70rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:deep(.uni-input-input),
|
|
:deep(.uni-easyinput__content input) {
|
|
font-size: 28rpx;
|
|
padding: 0 20rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
|
|
/* 确保小屏幕下表单不溢出 */
|
|
@media screen and (max-width: 480px) {
|
|
.app-container {
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.form-grid {
|
|
gap: 16rpx;
|
|
}
|
|
|
|
:deep(.uni-forms-item__label) {
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
:deep(.uni-input-input) {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
/* 针对输入框禁用状态的样式优化 */
|
|
:deep(.uni-easyinput__content.is-disabled) {
|
|
background-color: #f5f7fa;
|
|
border-color: #e4e7ed;
|
|
}
|
|
|
|
:deep(.uni-input-input:disabled) {
|
|
background-color: #f5f7fa;
|
|
color: #606266;
|
|
-webkit-text-fill-color: #606266;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 自定义输入单位组件的样式调整 */
|
|
:deep(.a-yjly-inputunit) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
:deep(.a-yjly-inputunit .uni-easyinput__content) {
|
|
flex: 1;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
:deep(.a-yjly-inputunit .uni-data-select) {
|
|
flex-shrink: 0;
|
|
width: 120rpx;
|
|
}
|
|
</style> |