ldeyun/ruoyi-geek-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
4f29a9f5ad
ruoyi-geek-App/pages_caltools/components/meterPar.vue

677 lines
21 KiB
Vue
Raw Normal View History

适配小程序
2025-11-30 14:19:19 +00:00
<template>
<view class="form-container">
<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }" class="scroll-container">
<view class="form-content">
<view class="form-grid">
<!-- 流量计类别 -->
<view class="form-item" v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)">
<view class="form-label">流量计类别</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" :key="'meter-type-' + meterPar.dMeterType"
v-model="meterPar.dMeterType" :localdata="ngtools_lljlx" placeholder="请选择流量计类别"
clearable></uni-data-select>
</view>
</view>
<!-- 计算标准 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">计算标准</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dFlowCalbz"
:localdata="ngtools_lljsbz" placeholder="请选择计算标准" clearable></uni-data-select>
</view>
</view>
<!-- 压缩因子计算标准 -->
<view class="form-item">
<view class="form-label">压缩因子计算标准</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dZcalbz"
:localdata="ngtools_ysyzjsbz" placeholder="请选择压缩因子计算标准" clearable></uni-data-select>
</view>
</view>
<!-- 计量参比条件压力 -->
<view class="form-item">
<view class="form-label">计量参比条件压力</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dCbtj"
:localdata="ngtools_cbtj" placeholder="请选择计量参比条件压力" clearable></uni-data-select>
</view>
</view>
<!-- 节流装置类型 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">节流装置类型</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dCoreType"
:localdata="ngtools_jlzzlx" placeholder="请选择节流装置类型" clearable></uni-data-select>
</view>
</view>
<!-- 取压方式 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">取压方式</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dPtmode"
:localdata="ngtools_qyfs" placeholder="请选择取压方式" clearable></uni-data-select>
</view>
</view>
<!-- 管道类型 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">管道类型</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dPipeType"
:localdata="ngtools_gdlx" placeholder="请选择管道类型" clearable></uni-data-select>
</view>
</view>
<!-- 管道材料 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">管道材料</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dPipeMaterial"
:localdata="ngtools_gdcz" placeholder="请选择管道材料" clearable></uni-data-select>
</view>
</view>
<!-- 孔板材料 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">孔板材料</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dOrificeMaterial"
:localdata="ngtools_gdcz" placeholder="请选择孔板材料" clearable></uni-data-select>
</view>
</view>
<!-- 管道内径 -->
<view class="form-item" v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'">
<view class="form-label">管道内径</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dPipeD" :unit-type="'length'"
:unitOrder.sync="meterPar.dLenUnit" :show-english-only="true" :decimal-places="5"
:width="selectWidth" />
</view>
</view>
<!-- 孔板孔径 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">孔板孔径</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dOrificeD"
:unit-type="'length'" :unitOrder.sync="meterPar.dOrificeUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 喉部直径 -->
<view class="form-item" v-if="meterPar.dMeterType === '3'">
<view class="form-label">喉部直径</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dOrificeD"
:unit-type="'length'" :unitOrder.sync="meterPar.dOrificeUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 压力类型 -->
<view class="form-item">
<view class="form-label">压力类型</view>
<view class="form-control">
<uni-data-select class="uni-data-select_class" v-model="meterPar.dPfType"
:localdata="ngtools_yllx" placeholder="请选择压力类型" clearable></uni-data-select>
</view>
</view>
<!-- 当地大气压 -->
<view class="form-item" v-if="meterPar.dPfType === '0'">
<view class="form-label">当地大气压</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dPatm" :unit-type="'pressure'"
:unitOrder.sync="meterPar.dPatmUnit" :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 class="unit-input-class" v-model="meterPar.dPf" :unit-type="'pressure'"
:unitOrder.sync="meterPar.dPfUnit" :show-english-only="true" :decimal-places="5"
:width="selectWidth" />
</view>
</view>
<!-- 输入温度 -->
<view class="form-item">
<view class="form-label">输入温度</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dTf" :unit-type="'temperature'"
:unitOrder.sync="meterPar.dTfUnit" :show-english-only="true" :decimal-places="5"
:width="selectWidth" />
</view>
</view>
<!-- 输入差压 -->
<view class="form-item" v-if="meterPar.dMeterType === '0'">
<view class="form-label">输入差压</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dDp" :unit-type="'pressure'"
:unitOrder.sync="meterPar.dDpUnit" :show-english-only="true" :decimal-places="5"
:width="selectWidth" />
</view>
</view>
<!-- 流出系数 -->
<view class="form-item" v-if="meterPar.dMeterType === '3'">
<view class="form-label">流出系数</view>
<view class="form-control">
<uni-easyinput v-model="meterPar.dCd" placeholder="请输入流出系数" />
</view>
</view>
<!-- 仪表系数 -->
<view class="form-item" v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'">
<view class="form-label">仪表系数</view>
<view class="form-control">
<uni-easyinput v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数" />
</view>
</view>
<!-- 脉冲数 -->
<view class="form-item" v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'">
<view class="form-label">脉冲数</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dPulseNum" :unit-type="'user'"
:unitOrder.sync="meterPar.dVGscUnit" :show-english-only="true" :decimal-places="5"
:user-defined="true" :user-definedunit-name="'个'" :enable-convert="false"
:width="selectWidth" />
</view>
</view>
<!-- 管束车容积 -->
<view class="form-item" v-if="meterPar.dMeterType === '8'">
<view class="form-label">管束车容积</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dVGsc" :unit-type="'volume'"
:unitOrder.sync="meterPar.dVGscUnit" :show-english-only="true" :decimal-places="5"
:width="selectWidth" />
</view>
</view>
<!-- 最大体积流量 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">最大体积流量</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dVFlowMax"
:unit-type="'volumeflow'" :unitOrder.sync="meterPar.dVFlowUnit"
:show-english-only="true" :decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 最小体积流量 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">最小体积流量</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dVFlowMin"
:unit-type="'volumeflow'" :unitOrder.sync="meterPar.dVFlowUnit"
:show-english-only="true" :decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 常用流量 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">常用流量</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dVFlowCon"
:unit-type="'volumeflow'" :unitOrder.sync="meterPar.dVFlowUnit"
:show-english-only="true" :decimal-places="5" :enable-convert="true"
:width="selectWidth" />
</view>
</view>
<!-- 压力量程下限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">压力量程下限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dPfRangeMin"
:unit-type="'pressure'" :unitOrder.sync="meterPar.dPfUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 压力量程上限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">压力量程上限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dPfRangeMax"
:unit-type="'pressure'" :unitOrder.sync="meterPar.dPfUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 差压量程下限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">差压量程下限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dDpRangeMin"
:unit-type="'pressure'" :unitOrder.sync="meterPar.dDpUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 差压量程上限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">差压量程上限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dDpRangeMax"
:unit-type="'pressure'" :unitOrder.sync="meterPar.dDpUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 温度计量程下限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">温度计量程下限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dTfRangeMin"
:unit-type="'temperature'" :unitOrder.sync="meterPar.dTfUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
<!-- 温度计量程上限 -->
<view class="form-item" v-if="meterPar.dBqdd === '1'">
<view class="form-label">温度计量程上限</view>
<view class="form-control">
<a-yjly-inputunit class="unit-input-class" v-model="meterPar.dTfRangeMax"
:unit-type="'temperature'" :unitOrder.sync="meterPar.dTfUnit" :show-english-only="true"
:decimal-places="5" :width="selectWidth" />
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<style scoped>
.form-container {
padding: 10rpx;
box-sizing: border-box;
width: 100%;
}
.scroll-container {
width: 100%;
}
.form-content {
padding: 20rpx;
box-sizing: border-box;
}
.form-grid {
display: grid;
gap: 20rpx;
}
.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%;
}
.uni-data-select_class {
background-color: white;
font-weight: 400;
}
.unit-input-class {
background-color: white;
font-weight: 400;
}
/* 移动端：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,
computed,
nextTick
} from 'vue';
// 1. 导入 useDict（确保路径正确）
import {
useDict
} from '@/utils/dict';
// 定义组件名称
const __name = 'meterParComponents';
// 2. 调用 useDict 获取字典（返回的是 Ref 对象集合）
const dictRefs = useDict(
'ngtools_cbtj',
'ngtools_jlzzlx',
'ngtools_lljlx',
'ngtools_qyfs',
'ngtools_gdcz',
'ngtools_lcxsjsff',
'ngtools_gdlx',
'ngtools_yllx',
'ngtools_lljsbz',
'ngtools_ysyzjsbz'
);
// 3. 解构出每个字典的 Ref 对象，并通过 computed 简化 .value 取值（可选，但更优雅）
const ngtools_cbtj = computed(() => {
return (dictRefs.ngtools_cbtj.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_jlzzlx = computed(() => {
return (dictRefs.ngtools_jlzzlx.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_lljlx = computed(() => {
return (dictRefs.ngtools_lljlx.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_qyfs = computed(() => {
return (dictRefs.ngtools_qyfs.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_gdcz = computed(() => {
return (dictRefs.ngtools_gdcz.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_lcxsjsff = computed(() => {
return (dictRefs.ngtools_lcxsjsff.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_gdlx = computed(() => {
return (dictRefs.ngtools_gdlx.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_yllx = computed(() => {
return (dictRefs.ngtools_yllx.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_lljsbz = computed(() => {
return (dictRefs.ngtools_lljsbz.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
const ngtools_ysyzjsbz = computed(() => {
return (dictRefs.ngtools_ysyzjsbz.value || []).map(item => ({
value: item.value,
text: item.label
}))
});
// 4. 添加字典加载状态，避免初始空渲染
const dictLoaded = computed(() => {
// 检查所有必需字典是否已加载（至少有一条数据）
return ngtools_lljlx.value.length > 0 && ngtools_jlzzlx.value.length > 0;
});
// 修复深拷贝函数（确保所有属性被复制）
const deepClone = (obj) => {
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理数组和对象
let clone = Array.isArray(obj) ? [...obj] : {
...obj
};
// 递归复制嵌套属性
Object.keys(clone).forEach(key => {
clone[key] = deepClone(clone[key]);
});
return clone;
};
// 简化对象比较（暂时移除复杂判断，优先保证更新）
const isObjectEqual = (obj1, obj2) => {
// 基础类型直接比较
if (obj1 === obj2) return true;
// 非对象类型直接返回不等
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
return false;
}
// 简单比较键值对（忽略深层嵌套的复杂比较，避免误判）
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) return false;
return keys1.every(key => {
return obj1[key] === obj2[key]; // 仅比较表层值（适合表单场景）
});
};
// 定义 props
const props = defineProps({
modelValue: {
type: Object,
default: () => ({
dFlowCalbz: null,
dZcalbz: null,
dCbtj: null,
dpbM: null,
dtbM: null,
dpbE: null,
dtbE: null,
dPatm: null,
dPatmUnit: null,
dngCompents: null,
dMeterType: null,
dCoreType: null,
dPtmode: null,
dPipeType: null,
dPipeD: null,
dLenUnit: null,
dPipeDtemp: null,
dPileDtempU: null,
dPipeMaterial: null,
dOrificeD: null,
dOrificeUnit: null,
dOrificeDtemp: null,
dOrificeDtempUnit: null,
dOrificeMaterial: null,
dOrificeSharpness: null,
dOrificeRk: null,
dOrificeRkLenU: null,
dPf: null,
dPfUnit: null,
dPfType: null,
dTf: null,
dTfUnit: null,
dDp: null,
dDpUnit: null,
dVFlowUnit: 0,
dVFlowWorkUnit: 0,
dMFlowUnit: 0,
dEFlowUnit: 6,
dCd: null,
dCdCalMethod: null,
dMeterFactor: null,
dPulseNum: null,
dVFlowMax: null,
dVFlowMin: null,
dVFlowCon: null,
dPfRangeMin: null,
dPfRangeMax: null,
dDpRangeMin: null,
dDpRangeMax: null,
dTfRangeMin: null,
dTfRangeMax: null,
dVGsc: null,
dCalcType: 0, // 0 流量 1 天然气 3 管束车
dBqdd: 0 // 0 不计算，1 计算
})
},
elFormWidth: {
type: Number,
default: 180
},
otherComHeight: {
type: Number,
default: 120
},
});
// 定义 emits
const emits = defineEmits(['update:modelValue'])
// 定义响应式数据
const selectWidth = ref(0);
// 修复：确保 meterPar 有初始值
const meterPar = ref(deepClone(props.modelValue || {}));
const isUpdating = ref(false);
// 定义响应式数据
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;
}
};
// 修复：添加组件挂载状态检查
const isMounted = ref(false);
// 在挂载后设置 selectWidth
onMounted(() => {
isMounted.value = true;
selectWidth.value = props.elFormWidth;
// 挂载后再次同步父组件数据（防止父组件数据延迟）
if (!isObjectEqual(props.modelValue, meterPar.value)) {
meterPar.value = deepClone(props.modelValue);
}
});
// 对 meterPar 进行深度监听
watch(
() => meterPar.value,
(newVal) => {
// console.log(11111, newVal)
if (!isObjectEqual(newVal, props.modelValue)) {
// console.log('Emit to parent', newVal);
emits('update:modelValue', deepClone(newVal));
}
}, {
deep: true
}
);
// 对 elFormWidth 进行监听
watch(
() => props.elFormWidth,
(newVal) => {
selectWidth.value = newVal;
}, {
deep: true
}
);
// 对 value 进行深度监听
watch(
() => props.modelValue,
(newVal) => {
if (!isObjectEqual(newVal, meterPar.value)) {
// console.log('Update from parent', newVal);
meterPar.value = deepClone(newVal);
}
}, {
deep: true,
immediate: true
}
);
</script>
Reference in New Issue Copy Permalink