426 lines
11 KiB
Vue
426 lines
11 KiB
Vue
<template>
|
||
<view class="result-container">
|
||
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }" class="scroll-area">
|
||
<view class="form-content">
|
||
<view class="form-grid">
|
||
<!-- 标况体积流量m³/s -->
|
||
<view class="form-item">
|
||
<view class="form-label">标况体积流量m³/s</view>
|
||
<view class="form-control">
|
||
<a-yjly-inputunit :modelValue="meterResult.dVFlowb" :unit-type="'volumeflow'"
|
||
v-model:unitOrder="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="6"
|
||
:input-disable="true" :width="selectWidth"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 工况体积流量 -->
|
||
<view class="form-item">
|
||
<view class="form-label">工况体积流量</view>
|
||
<view class="form-control">
|
||
<a-yjly-inputunit :modelValue="meterResult.dVFlowf" :unit-type="'volumeflow'"
|
||
v-model:unitOrder="meterResult.dVFlowWorkUnit" :show-english-only="true"
|
||
:decimal-places="6" :input-disable="true" :width="selectWidth" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 标况质量流量 -->
|
||
<view class="form-item">
|
||
<view class="form-label">标况质量流量</view>
|
||
<view class="form-control">
|
||
<a-yjly-inputunit :modelValue="meterResult.dMFlowb" :unit-type="'massflow'"
|
||
v-model:unitOrder="meterResult.dMFlowUnit" :input-disable="true"
|
||
:show-english-only="true" :decimal-places="6" :width="selectWidth"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 标况能量流量 -->
|
||
<view class="form-item">
|
||
<view class="form-label">标况能量流量</view>
|
||
<view class="form-control">
|
||
<a-yjly-inputunit :modelValue="meterResult.dEFlowb" :unit-type="'energyflow'"
|
||
v-model:unitOrder="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="6"
|
||
:input-disable="true" :width="selectWidth"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求超压缩因子 E -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">超压缩因子Fz</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dFpv" placeholder=" "
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求渐近速度系数 E -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">求渐近速度系数E</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dE" placeholder=" "
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求相对密度系数 FG -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">求相对密度系数FG</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dFG" placeholder=" "
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求流动温度系数 FT -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">求流动温度系数FT</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dFT" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求动力粘度dlnd -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">求动力粘度μ</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dDViscosity"
|
||
placeholder="" disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 求可膨胀系数 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">求可膨胀系数ε</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dDExpCoefficient"
|
||
placeholder="" disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 管道雷诺数 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">管道雷诺数ReD</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dRnPipe" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 流出系数 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">流出系数C</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dCd" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 修正后的流出系数 -->
|
||
<view class="form-item" v-if="dMeterType === '3'">
|
||
<view class="form-label">修正后的流出系数</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dCdCorrect"
|
||
placeholder="" disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 喷嘴的流出系数 -->
|
||
<view class="form-item" v-if="dMeterType === '3'">
|
||
<view class="form-label">喷嘴的流出系数C</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dCdNozell" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 管道内天然气流速 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">管道内天然气流速</view>
|
||
<view class="form-control">
|
||
<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"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 压力损失 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">压力损失</view>
|
||
<view class="form-control">
|
||
<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"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 直径比 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">直径比β</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dBeta" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 等熵指数 -->
|
||
<view class="form-item" v-if="dMeterType === '0'">
|
||
<view class="form-label">等熵指数</view>
|
||
<view class="form-control">
|
||
<uni-easyinput class="input-result-class" :modelValue="meterResult.dKappa" placeholder=""
|
||
disabled />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.result-container {
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-area {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-content {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.input-result-class {
|
||
color: #000000 !important;
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
/* 确保输入框内部的文字也是黑色 */
|
||
.input-result-class ::v-deep .uni-easyinput__content {
|
||
color: #000000 !important;
|
||
background-color: #ffffff !important;
|
||
}
|
||
|
||
.input-result-class ::v-deep .uni-input-input {
|
||
color: #000000 !important;
|
||
background-color: #ffffff !important;
|
||
-webkit-text-fill-color: #000000 !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
.form-item {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 12px;
|
||
color: #606266;
|
||
margin-bottom: 8rpx;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 移动端：2列 */
|
||
@media screen and (max-width: 768px) {
|
||
.form-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* 桌面：3列 */
|
||
@media screen and (min-width: 1200px) {
|
||
.form-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
watch,
|
||
onMounted,
|
||
nextTick
|
||
} 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'
|
||
},
|
||
otherComHeight: {
|
||
type: Number,
|
||
default: 120
|
||
},
|
||
});
|
||
|
||
// 定义响应式数据
|
||
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
|
||
}
|
||
);
|
||
watch(
|
||
() => props.otherComHeight,
|
||
(newVal) => {
|
||
calculateScrollViewHeight(newVal)
|
||
})
|
||
// 定义响应式数据
|
||
const scrollViewHeight = ref(0);
|
||
|
||
// 获取屏幕高度并计算scroll-view高度
|
||
const calculateScrollViewHeight = (h) => {
|
||
try {
|
||
// 获取系统信息
|
||
let systemInfo = {};
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序平台
|
||
try {
|
||
// 获取窗口信息
|
||
const windowInfo = wx.getWindowInfo();
|
||
// 获取设备信息
|
||
const deviceInfo = wx.getDeviceInfo();
|
||
|
||
// 将两个新API获取到的信息合并成一个对象，方便使用
|
||
systemInfo = {
|
||
...windowInfo,
|
||
...deviceInfo
|
||
};
|
||
|
||
// 注意：如果你还需要获取系统设置或授权信息，可以按需添加
|
||
// const systemSetting = wx.getSystemSetting();
|
||
// const appAuthorizeSetting = wx.getAppAuthorizeSetting();
|
||
// systemInfo = { ...systemInfo, ...systemSetting, ...appAuthorizeSetting };
|
||
|
||
} catch (e) {
|
||
console.error("获取微信小程序系统信息失败:", e);
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef H5 || APP-PLUS
|
||
// H5 或 App 平台
|
||
try {
|
||
systemInfo = uni.getSystemInfoSync();
|
||
} catch (e) {
|
||
console.error("获取系统信息失败:", e);
|
||
}
|
||
// #endif
|
||
const screenHeight = systemInfo.windowHeight;
|
||
// 计算scroll-view高度
|
||
scrollViewHeight.value = screenHeight - h - 20;
|
||
} catch (error) {
|
||
console.error('获取系统信息失败:', error);
|
||
// 设置默认高度
|
||
scrollViewHeight.value = 400;
|
||
}
|
||
};
|
||
// 挂载后设置 selectWidth
|
||
onMounted(() => {
|
||
// 在 DOM 更新后获取宽度
|
||
selectWidth.value = props.elFormWidth;
|
||
|
||
});
|
||
</script> |