ldeyun/ruoyi-geek-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改竖排界面

Browse Source
This commit is contained in:
liaodeyun 2025-12-10 01:55:13 +08:00
parent c187d5de51
commit c1f2a21b1c
5 changed files with 1646 additions and 779 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
src/components/NGTools/NGCom.vue
View File

@ -1,40 +1,73 @@
<template>
<div class="app-container">
<el-form label-position="top" size="small" :inline="true" label-width="160px" class="component-form">
<!-- <el-row> -->
<!-- 常用组分选择框 -->
<!-- <el-col :span="10"> -->
<el-form-item label="常用组分" :style="{ width: selectWidth + 'px' }">
<el-select v-model="selectedComponent" @change="handleComponentChange" placeholder="请选择常用组分" clearable filterable>
<!-- 第一部分：常用组分 + 合计 -->
<!-- 1. 常用组分选择行 -->
<el-row class="form-row" :gutter="10" align="middle">
<!-- 标签列 -->
<el-col :span="10" class="label-col">
<label class="form-label">常用组分</label>
</el-col>
<!-- 下拉控件列 -->
<el-col :span="14" class="control-col">
<el-select v-model="selectedComponent" @change="handleComponentChange" placeholder="请选择常用组分" clearable
filterable :style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_cyzf" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<!-- </el-col> -->
<!-- 合计输入框 -->
<!-- <el-col :span="6"> -->
<el-form-item label="合计" :style="{ width: selectWidth + 'px' }">
<el-input :value="totalPercentage" readonly class="total-input" />
</el-form-item>
<!-- </el-col> -->
<!-- </el-row> -->
</el-form>
</el-col>
</el-row>
<el-form :model="formData" label-position="top" size="small" :inline="true" class="component-form">
<el-form-item v-for="field in componentFields" :key="field.prop" :label="field.label" :prop="field.prop" :style="{ width: selectWidth + 'px' }">
<el-input v-model="formData[field.prop]" controls-position="right" @change="handleValueChange" @focus="selectAllText" />
</el-form-item>
</el-form>
<!-- 2. 合计显示行 -->
<el-row class="form-row" :gutter="10" align="middle">
<!-- 标签列 -->
<el-col :span="10" class="label-col">
<label class="form-label">合计</label>
</el-col>
<!-- 只读输入框列 -->
<el-col :span="14" class="control-col">
<el-input :value="totalPercentage" readonly class="total-input"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 第二部分：循环渲染的组分字段 -->
<el-row v-for="field in componentFields" :key="field.prop" class="form-row" :gutter="10" align="middle">
<!-- 标签列 -->
<el-col :span="10" class="label-col">
<label class="form-label">{{ field.label }}</label>
</el-col>
<!-- 输入框列 -->
<el-col :span="14" class="control-col">
<el-input v-model="formData[field.prop]" controls-position="right" @change="handleValueChange"
@focus="selectAllText" :style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, watch, onMounted, computed,getCurrentInstance } from 'vue';
import { listComponents, getComponents, delComponents, addComponents, updateComponents } from '@/api/ngtools/components';
const { proxy } = getCurrentInstance();
const { ngtools_cyzf } = proxy.useDict('ngtools_cyzf');
// 字段配置元数据
const COMPONENT_FIELDS = [
{
import {
ref,
watch,
onMounted,
computed,
getCurrentInstance
} from 'vue';
import {
listComponents,
getComponents,
delComponents,
addComponents,
updateComponents
} from '@/api/ngtools/components';
const {
proxy
} = getCurrentInstance();
const {
ngtools_cyzf
} = proxy.useDict('ngtools_cyzf');
// 字段配置元数据
const COMPONENT_FIELDS = [{
prop: 'ngC1',
label: '甲烷C1'
},
@ -118,10 +151,10 @@ const COMPONENT_FIELDS = [
prop: 'ngAr',
label: '氩气Ar'
}
];
];
// 定义 props
const props = defineProps({
// 定义 props
const props = defineProps({
modelValue: {
type: String,
default: ''
@ -130,56 +163,56 @@ const props = defineProps({
type: Number,
default: 180
}
});
});
// 定义 emits
const emits = defineEmits(['update:modelValue']);
// 定义 emits
const emits = defineEmits(['update:modelValue']);
// 定义响应式数据
const selectWidth = ref(0);
const selectedComponent = ref(null);
const formData = ref(initFormData());
const componentFields = ref(COMPONENT_FIELDS);
// 定义响应式数据
const selectWidth = ref(0);
const selectedComponent = ref(null);
const formData = ref(initFormData());
const componentFields = ref(COMPONENT_FIELDS);
// 计算属性
const totalPercentage = computed(() => {
// 计算属性
const totalPercentage = computed(() => {
return Object.values(formData.value)
.reduce((sum, val) => sum + (parseFloat(val) || 0), 0)
.toFixed(4);
});
});
// 初始化表单数据
function initFormData() {
// 初始化表单数据
function initFormData() {
return COMPONENT_FIELDS.reduce((acc, field) => {
acc[field.prop] = 0;
return acc;
}, {});
}
}
// 全选输入框文本
function selectAllText(event) {
// 全选输入框文本
function selectAllText(event) {
const inputElement = event.target;
inputElement.select();
}
}
// 解析传入的字符串值
function parseValueString(valueStr) {
// 解析传入的字符串值
function parseValueString(valueStr) {
const values = (valueStr || '').split('_');
componentFields.value.forEach((field, index) => {
const value = parseFloat(values[index]) || 0;
formData.value[field.prop] = value;
});
}
}
// 生成要输出的字符串值
function generateValueString() {
// 生成要输出的字符串值
function generateValueString() {
return Object.values(formData.value)
.map((v) => v.toFixed(4))
.join('_');
}
}
// 处理组件选择变化
async function handleComponentChange(value) {
// 处理组件选择变化
async function handleComponentChange(value) {
if (!value) return;
console.log(value);
try {
@ -194,72 +227,113 @@ async function handleComponentChange(value) {
ElMessage.error('获取标准组分失败');
console.error(error);
}
}
}
// 处理值变化
function handleValueChange() {
// 处理值变化
function handleValueChange() {
nextTick(() => {
emitUpdate();
});
}
}
// 触发更新事件
function emitUpdate() {
// 触发更新事件
function emitUpdate() {
if (Math.abs(parseFloat(totalPercentage.value) - 100) > 0.0001) {
// 这里假设使用了 ElementPlus 的消息提示，需要根据实际情况修改
ElMessage.warning('组分合计不等于100%，请检查输入');
}
console.log(generateValueString());
emits('update:modelValue', generateValueString());
}
}
// 获取组分数据
async function fetchComponentData(params) {
// 获取组分数据
async function fetchComponentData(params) {
try {
const { data } = await getComponents(params);
const {
data
} = await getComponents(params);
parseValueString(data.componentStr);
} catch (error) {
console.error('获取组分数据失败:', error);
}
}
}
// 监听 elFormWidth 的变化
watch(
// 监听 elFormWidth 的变化
watch(
() => props.elFormWidth,
(newVal) => {
selectWidth.value = newVal;
},
{ deep: true }
);
}, {
deep: true
}
);
// 监听 value 的变化
watch(
// 监听 value 的变化
watch(
() => props.modelValue,
(newVal) => {
parseValueString(newVal);
},
{ immediate: true }
);
}, {
immediate: true
}
);
// 挂载后设置 selectWidth
onMounted(() => {
// 挂载后设置 selectWidth
onMounted(() => {
selectWidth.value = props.elFormWidth;
});
});
</script>
<style scoped>
.component-form {
display: grid;
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
}
.app-container {
height: 100%;
}
/* 在 Vue 3 中使用 :deep() 替代 >>> */
/* :deep(.total-input .el-input__inner) {
font-weight: bold;
color: #409eff;
} */
/* 整体容器间距 */
.app-container {
padding: 10px;
}
/* 每行间距，匹配原inline表单的紧凑感 */
.form-row {
margin-bottom: 12px;
}
/* 标签列样式：右对齐、统一颜色和字号 */
.label-col {
text-align: right;
padding-right: 10px;
}
.form-label {
font-size: 12px;
color: #606266;
/* 匹配Element UI默认标签色 */
font-weight: 300;
line-height: 32px;
/* 匹配输入框高度，垂直居中 */
}
/* 控件列样式：左间距 */
.control-col {
padding-left: 10px;
}
/* 合计输入框样式（保留原有类名） */
.total-input {
background-color: #f5f7fa;
/* 只读输入框默认背景色 */
}
/* 小屏幕适配：标签和控件堆叠显示 */
@media (max-width: 768px) {
.form-row .el-col {
span: 24 !important;
}
.label-col {
text-align: left;
margin-bottom: 4px;
padding-right: 0;
}
.control-col {
padding-left: 0;
}
}
</style>

778
src/components/NGTools/NGResult.vue
View File

@ -1,187 +1,3 @@
<template>
<div class="app-container">
<!-- <div>当前 dMeterType 的值: {{ dMeterType }}</div>
<div>NGResult 数据: {{ NGResult }}</div> -->
<h3 v-if="dMeterType === '4'">GB/T 17747</h3>
<el-form v-if="dMeterType === '4'" :model="NGResult" label-position="top" ref="queryRef" size="small"
:inline="false" label-width="160px" class="flex-form">
<el-form-item :style="{ width: selectWidth + 'px' }" label="分子量" prop="dMrx">
<el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况压缩因子" prop="dZb">
<el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="工况压缩因子" prop="dZf">
<el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="超压缩系数" prop="dFpv">
<el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况摩尔密度" prop="dDb">
<el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="工况摩尔密度" prop="dDf">
<el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况质量密度" prop="dRhob">
<el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="工况质量密度" prop="dRhof">
<el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的相对密度" prop="dRD_Ideal">
<el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的相对密度" prop="dRD_Real">
<el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度" />
</el-form-item>
</el-form>
<h3 v-if="dMeterType === '5'">AGA No10</h3>
<el-form v-if="dMeterType === '5'" :model="NGResult" label-position="top" ref="queryRef" size="small"
:inline="false" label-width="160px" class="flex-form">
<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的比焓" prop="dHo">
<el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的焓" prop="dH">
<el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的熵" prop="dS">
<el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体定压热容" prop="dCpi">
<el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="定压热容" prop="dCp">
<el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="定容积热容" prop="dCv">
<el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="比热比" prop="dk">
<el-input readonly v-model="NGResult.dk" placeholder="请输入比热比" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="等熵指数" prop="dKappa">
<el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="声速" prop="dSOS">
<unit-converter v-model="NGResult.dSOS" :unit-type="'speed'" v-model:unit-order="NGResult.dSOSUnit"
:show-english-only="true" :decimal-places="5" :input-disable="true" :width="selectWidth" />
<!-- <el-input readonly v-model="NGResult.dSOS" placeholder="请输入声速" /> -->
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="临界流函数" prop="dCstar">
<el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
</el-form-item>
</el-form>
<h3 v-if="dMeterType === '6'">GB/T 11062</h3>
<el-form v-if="dMeterType === '6'" :model="NGResult" label-position="top" ref="queryRef" size="small"
:inline="false" label-width="160px" class="flex-form">
<el-form-item :style="{ width: selectWidth + 'px' }" label="摩尔高位发热量" prop="dHhvMol">
<el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="摩尔低位发热量" prop="dLhvMol">
<el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="体积高位发热量" prop="dHhvv">
<el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="体积低位发热量" prop="dLhvv">
<el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="质量高位发热量" prop="dHhvm">
<el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="质量地位发热量" prop="dLhvm">
<el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况压缩因子" prop="dZb11062">
<el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况质量密度" prop="dRhob11062">
<el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="工况质量密度" prop="dRhof11062">
<el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="理想气体的相对密度" prop="dRD_Ideal11062">
<el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的相对密度" prop="dRD_Real11062">
<el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="真实气体的沃泊指数" prop="dWobbeIndex">
<el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
</el-form-item>
</el-form>
<h3 v-if="dMeterType === '7'">其他</h3>
<el-form v-if="dMeterType === '7'" :model="NGResult" label-position="top" ref="queryRef" size="small"
:inline="false" label-width="160px" class="flex-form">
<el-form-item :style="{ width: selectWidth + 'px' }" label="临界压力" prop="dPc">
<el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="临界温度" prop="dTC">
<el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="爆炸上限" prop="dBzsx">
<el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="爆炸下限" prop="dBzxx">
<el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="总炭含量(kg/m3)" prop="dTotalC">
<el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C2组分含量(kg/m3)" prop="dC2">
<el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C2以上组分含量(kg/m3)" prop="dC2j">
<el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C3以上组分含量(kg/m3)" prop="dC3j">
<el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C4以上组分含量(kg/m3)" prop="dC4j">
<el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C5以上组分含量(kg/m3)" prop="dC5j">
<el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C6以上组分含量(kg/m3)" prop="dC6j">
<el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="C3C4组分含量(kg/m3)" prop="dC3C4">
<el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)" />
</el-form-item>
</el-form>
<h3 v-if="dMeterType === '20'">井下液面深度</h3>
<el-form v-if="dMeterType === '20'" :model="NGResult" 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="dPc">
<el-input readonly v-model="NGResult.initialSOS" placeholder="井口声速" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="粗算深度(m)" prop="dPc">
<el-input readonly v-model="NGResult.initialEstimate" placeholder="粗算深度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="修正深度(m)" prop="dTC">
<el-input readonly v-model="NGResult.correctedDepth" placeholder="修正深度" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="迭代次数" prop="dBzsx">
<el-input readonly v-model="NGResult.iterations" placeholder="迭代次数" />
</el-form-item>
</el-form>
<ul>
<view v-for="item,index in NGResult.dataSegment" style="width: 100%;">
<li>{{item}}</li>
</view>
</ul>
</div>
</template>
<script setup>
import {
ref,
@ -341,16 +157,596 @@
});
</script>
<template>
<div class="app-container" ref="queryRef">
<!-- 调试信息（如需启用可取消注释） -->
<!-- <div>当前 dMeterType 的值: {{ dMeterType }}</div>
<div>NGResult 数据: {{ NGResult }}</div> -->
<!-- 1. dMeterType === '4'：GB/T 17747 -->
<h3 v-if="dMeterType === '4'">GB/T 17747</h3>
<div v-if="dMeterType === '4'" class="form-section">
<!-- 分子量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">分子量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 标况压缩因子 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况压缩因子</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 工况压缩因子 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">工况压缩因子</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 超压缩系数 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">超压缩系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 标况摩尔密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况摩尔密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 工况摩尔密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">工况摩尔密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 标况质量密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况质量密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 工况质量密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">工况质量密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 理想气体的相对密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">理想气体的相对密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 真实气体的相对密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">真实气体的相对密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
<!-- 2. dMeterType === '5'：AGA No10 -->
<h3 v-if="dMeterType === '5'">AGA No10</h3>
<div v-if="dMeterType === '5'" class="form-section">
<!-- 理想气体的比焓 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">理想气体的比焓</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 真实气体的焓 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">真实气体的焓</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 真实气体的熵 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">真实气体的熵</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 理想气体定压热容 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">理想气体定压热容</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 定压热容 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">定压热容</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 定容积热容 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">定容积热容</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 比热比 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">比热比</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dk" placeholder="请输入比热比"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 等熵指数 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">等熵指数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 声速 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">声速</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="NGResult.dSOS" :unit-type="'speed'" v-model:unit-order="NGResult.dSOSUnit"
:show-english-only="true" :decimal-places="5" :input-disable="true" :width="selectWidth" />
</el-col>
</el-row>
<!-- 临界流函数 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">临界流函数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
<!-- 3. dMeterType === '6'：GB/T 11062 -->
<h3 v-if="dMeterType === '6'">GB/T 11062</h3>
<div v-if="dMeterType === '6'" class="form-section">
<!-- 摩尔高位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">摩尔高位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 摩尔低位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">摩尔低位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 体积高位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">体积高位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 体积低位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">体积低位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 质量高位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">质量高位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 质量地位发热量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">质量地位发热量</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 标况压缩因子 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况压缩因子</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 标况质量密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况质量密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 工况质量密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">工况质量密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 理想气体的相对密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">理想气体的相对密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 真实气体的相对密度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">真实气体的相对密度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 真实气体的沃泊指数 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">真实气体的沃泊指数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
<!-- 4. dMeterType === '7'：其他 -->
<h3 v-if="dMeterType === '7'">其他</h3>
<div v-if="dMeterType === '7'" class="form-section">
<!-- 临界压力 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">临界压力</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 临界温度 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">临界温度</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 爆炸上限 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">爆炸上限</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 爆炸下限 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">爆炸下限</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 总炭含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">总炭含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C2组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C2组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C2以上组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C2以上组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C3以上组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C3以上组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C4以上组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C4以上组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C5以上组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C5以上组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C6以上组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C6以上组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- C3C4组分含量(kg/m3) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">C3C4组分含量(kg/m3)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
<!-- 5. dMeterType === '20'：井下液面深度 -->
<h3 v-if="dMeterType === '20'">井下液面深度</h3>
<div v-if="dMeterType === '20'" class="form-section">
<!-- 井口声速(m/s) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">井口声速(m/s)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.initialSOS" placeholder="井口声速"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 粗算深度(m) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">粗算深度(m)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.initialEstimate" placeholder="粗算深度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 修正深度(m) -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">修正深度(m)</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.correctedDepth" placeholder="修正深度"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 迭代次数 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">迭代次数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="NGResult.iterations" placeholder="迭代次数"
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
</div>
<!-- 数据段列表 -->
<ul class="data-list">
<li v-for="(item, index) in NGResult.dataSegment" :key="index" class="data-item">
{{ item }}
</li>
</ul>
</div>
</template>
<style scoped>
/* 可按需添加样式 */
/* 整体容器样式 */
.app-container {
height: 100%;
padding: 10px;
}
.flex-form {
display: grid;
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 每个分类表单区域的间距 */
.form-section {
margin-bottom: 20px;
}
/* 每行间距与垂直居中 */
.form-row {
margin-bottom: 12px;
align-items: center;
}
/* 标签列样式：右对齐、统一字号/颜色 */
.label-col {
text-align: right;
padding-right: 10px;
}
.form-label {
font-size: 12px;
color: #606266;
/* 匹配Element UI默认标签色 */
font-weight: 300;
line-height: 32px;
/* 匹配输入框高度，垂直居中 */
}
/* 控件列样式：左间距 */
.control-col {
padding-left: 10px;
}
/* 只读输入框样式优化 */
.el-input[readonly] {
background-color: #f5f7fa;
color: #606266;
}
/* 数据列表样式 */
.data-list {
margin-top: 20px;
padding-left: 20px;
width: 100%;
}
.data-item {
width: 100%;
line-height: 24px;
color: #606266;
}
/* 小屏幕适配：标签和控件堆叠显示 */
@media (max-width: 768px) {
.form-row .el-col {
span: 24 !important;
}
.label-col {
text-align: left;
margin-bottom: 4px;
padding-right: 0;
}
.control-col {
padding-left: 0;
}
}
</style>

457
src/components/NGTools/meterPar.vue
View File

@ -1,213 +1,409 @@
<template>
<div class="app-container">
<el-form :model="meterPar" ref="dataForm" label-position="top" size="small" :inline="true" label-width="160px"
class="flex-form">
<el-form-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)"
:style="{ width: selectWidth + 'px' }" label="流量计类别" prop="dMeterType">
<!-- 外层容器：替代原el-form，保留数据模型和引用（如需表单验证可保留ref） -->
<div ref="dataForm" class="meter-par-container">
<!-- 1. 流量计类别 -->
<el-row v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)" class="form-row" :gutter="10">
<!-- 左列：标签 -->
<el-col :span="10" class="label-col">
<label class="form-label">流量计类别</label>
</el-col>
<!-- 右列：下拉框 -->
<el-col :span="14" class="control-col">
<el-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType"
placeholder="请选择流量计类别 " clearable>
placeholder="请选择流量计类别 " clearable :style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_lljlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="计算标准"
prop="dFlowCalbz">
<el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable>
</el-col>
</el-row>
<!-- 2. 计算标准（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">计算标准</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_lljsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="压缩因子计算标准" prop="dZcalbz">
<el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable>
</el-col>
</el-row>
<!-- 3. 压缩因子计算标准 -->
<el-row class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">压缩因子计算标准</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_ysyzjsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="计量参比条件压力" prop="dCbtj">
<el-select v-model="meterPar.dCbtj" placeholder="请选择计量参比条件压力 " clearable>
</el-col>
</el-row>
<!-- 4. 计量参比条件压力 -->
<el-row class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">计量参比条件压力</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dCbtj" placeholder="请选择计量参比条件压力 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_cbtj" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="节流装置类型"
prop="dCoreType">
<el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable>
<!-- 5. 节流装置类型（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">节流装置类型</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_jlzzlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="取压方式"
prop="dPtmode">
<el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable>
</el-col>
</el-row>
<!-- 6. 取压方式（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">取压方式</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_qyfs" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道类型"
prop="dPipeType">
<el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable>
</el-col>
</el-row>
<!-- 7. 管道类型（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">管道类型</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_gdlx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道材料"
prop="dPipeMaterial">
<el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable>
<!-- 8. 管道材料（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">管道材料</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料"
prop="dOrificeMaterial">
<el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable>
<!-- 9. 孔板材料（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">孔板材料</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'"
:style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD">
<!-- 10. 管道内径（dMeterType='0'/'3'显示） -->
<el-row v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">管道内径</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPipeD" :unit-type="'length'" v-model:unit-order="meterPar.dLenUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径"
prop="dOrificeD">
<!-- 11. 孔板孔径（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">孔板孔径</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喉部直径"
prop="dOrificeD">
</el-col>
</el-row>
<!-- 12. 喉部直径（仅dMeterType='3'显示） -->
<el-row v-if="meterPar.dMeterType === '3'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">喉部直径</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType">
<el-select v-model="meterPar.dPfType" placeholder="请选择压力类型 " clearable>
<!-- 13. 压力类型 -->
<el-row class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">压力类型</label>
</el-col>
<el-col :span="14" class="control-col">
<el-select v-model="meterPar.dPfType" placeholder="请选择压力类型 " clearable
:style="{ width: selectWidth + 'px' }">
<el-option v-for="dict in ngtools_yllx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item v-if="meterPar.dPfType === '0'" :style="{ width: selectWidth + 'px' }" label="当地大气压"
prop="dPatm">
</el-col>
</el-row>
<!-- 14. 当地大气压（仅dPfType='0'显示） -->
<el-row v-if="meterPar.dPfType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">当地大气压</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPatm" :unit-type="'pressure'" v-model:unit-order="meterPar.dPatmUnit"
:show-english-only="false" :decimal-places="6" :width="selectWidth" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="输入压力" prop="dPf">
</el-col>
</el-row>
<!-- 15. 输入压力 -->
<el-row class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">输入压力</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPf" :unit-type="'pressure'" v-model:unit-order="meterPar.dPfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" />
</el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="输入温度" prop="dTf">
</el-col>
</el-row>
<!-- 16. 输入温度 -->
<el-row class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">输入温度</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dTf" :unit-type="'temperature'" v-model:unit-order="meterPar.dTfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="输入差压"
prop="dDp">
</el-col>
</el-row>
<!-- 17. 输入差压（仅dMeterType='0'显示） -->
<el-row v-if="meterPar.dMeterType === '0'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">输入差压</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dDp" :unit-type="'pressure'" v-model:unit-order="meterPar.dDpUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="流出系数"
prop="dCd">
<el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable />
</el-form-item>
<!-- 18. 流出系数（仅dMeterType='3'显示） -->
<el-row v-if="meterPar.dMeterType === '3'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">流出系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'"
:style="{ width: selectWidth + 'px' }" label="仪表系数" prop="dMeterFactor">
<el-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable />
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'"
:style="{ width: selectWidth + 'px' }" label="脉冲数" prop="dPulseNum">
<!-- 19. 仪表系数（dMeterType='1'/'2'显示） -->
<el-row v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">仪表系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 20. 脉冲数（dMeterType='1'/'2'显示） -->
<el-row v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">脉冲数</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPulseNum" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'个'"
:enable-convert="false" :width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dMeterType === '8'" :style="{ width: selectWidth + 'px' }" label="管束车容积"
prop="dVGsc">
<!-- 21. 管束车容积（仅dMeterType='8'显示） -->
<el-row v-if="meterPar.dMeterType === '8'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">管束车容积</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVGsc" :unit-type="'volume'" v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量"
prop="dVFlowMax">
<!-- 22. 最大体积流量（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">最大体积流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'volumeflow'"
v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最小体积流量"
prop="dVFlowMin">
</el-col>
</el-row>
<!-- 23. 最小体积流量（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">最小体积流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowMin" :unit-type="'volumeflow'"
v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="常用流量"
prop="dVFlowCon">
</el-col>
</el-row>
<!-- 24. 常用流量（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">常用流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowCon" :unit-type="'volumeflow'"
v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
:enable-convert="true" :width="selectWidth" />
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限"
prop="dPfRangeMin">
<!-- 25. 压力量程下限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">压力量程下限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPfRangeMin" :unit-type="'pressure'"
v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程上限"
prop="dPfRangeMax">
</el-col>
</el-row>
<!-- 26. 压力量程上限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">压力量程上限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dPfRangeMax" :unit-type="'pressure'"
v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程下限"
prop="dDpRangeMin">
</el-col>
</el-row>
<!-- 27. 差压量程下限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">差压量程下限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dDpRangeMin" :unit-type="'pressure'"
v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程上限"
prop="dDpRangeMax">
</el-col>
</el-row>
<!-- 28. 差压量程上限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">差压量程上限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dDpRangeMax" :unit-type="'pressure'"
v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程下限"
prop="dTfRangeMin">
</el-col>
</el-row>
<!-- 29. 温度计量程下限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">温度计量程下限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dTfRangeMin" :unit-type="'temperature'"
v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程上限"
prop="dTfRangeMax">
</el-col>
</el-row>
<!-- 30. 温度计量程上限（仅dBqdd='1'显示） -->
<el-row v-if="meterPar.dBqdd === '1'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">温度计量程上限</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dTfRangeMax" :unit-type="'temperature'"
v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
:width="selectWidth" />
</el-form-item>
<!-- 液面深度计算 -->
<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="常温层深度"
prop="dVFlowMax">
</el-col>
</el-row>
<!-- 31. 常温层深度（仅dMeterType='20'显示） -->
<el-row v-if="meterPar.dMeterType === '20'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">常温层深度</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'米'"
:enable-convert="false" :width="selectWidth" />
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="测量时间"
prop="dVFlowMin">
</el-col>
</el-row>
<!-- 32. 测量时间（仅dMeterType='20'显示） -->
<el-row v-if="meterPar.dMeterType === '20'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">测量时间</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowMin" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'秒'"
:enable-convert="false" :width="selectWidth" />
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="地温梯度"
prop="dVFlowCon">
<!-- 33. 地温梯度（仅dMeterType='20'显示） -->
<el-row v-if="meterPar.dMeterType === '20'" class="form-row" :gutter="10">
<el-col :span="10" class="label-col">
<label class="form-label">地温梯度</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterPar.dVFlowCon" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'度/米'"
:enable-convert="false" :width="selectWidth" />
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script setup>
@ -435,13 +631,34 @@
</script>
<style scoped>
.app-container {
height: 100%;
/* 整体容器样式 */
.meter-par-container {
padding: 10px;
}
.flex-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 每一行的间距 */
.form-row {
margin-bottom: 12px;
align-items: center;
/* 标签和控件垂直居中对齐 */
}
/* 标签列样式 */
.label-col {
text-align: right;
/* 标签右对齐，视觉更规整 */
padding-right: 10px;
}
.form-label {
font-size: 12px;
color: #606266;
/* 匹配Element UI默认标签颜色 */
font-weight: 300;
}
/* 控件列样式 */
.control-col {
padding-left: 10px;
}
</style>

426
src/components/NGTools/meterResult.vue
View File

@ -1,119 +1,223 @@
<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'"
v-model:unit-order="meterResult.dVFlowUnit"
:show-english-only="true"
:decimal-places="6"
:width="selectWidth"
:input-disable="true"
/>
</el-form-item>
<el-form-item label="工况体积流量" prop="dVFlowf">
<unit-converter
v-model="meterResult.dVFlowf"
:unit-type="'volumeflow'"
v-model:unit-order="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'"
v-model:unit-order="meterResult.dMFlowUnit"
:input-disable="true"
:show-english-only="true"
:decimal-places="6"
:width="selectWidth"
/>
</el-form-item>
<el-form-item label="标况能量流量" prop="dEFlowb">
<unit-converter
v-model="meterResult.dEFlowb"
:unit-type="'energyflow'"
v-model:unit-order="meterResult.dEFlowUnit"
:show-english-only="true"
:decimal-places="6"
: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>
<div class="app-container" ref="queryRef">
<!-- 1. 标况体积流量m³/s -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况体积流量m³/s</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dVFlowb" :unit-type="'volumeflow'"
v-model:unit-order="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="6"
:width="selectWidth" :input-disable="true" />
</el-col>
</el-row>
<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>
<!-- 2. 工况体积流量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">工况体积流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dVFlowf" :unit-type="'volumeflow'"
v-model:unit-order="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" />
</el-col>
</el-row>
<el-form-item v-if="dMeterType === '0'" label="管道内天然气流速" prop="dVelocityFlow">
<unit-converter
v-model="meterResult.dVelocityFlow"
:unit-type="'speed'"
v-model:unit-order="meterResult.dVelocityUnit"
:show-english-only="true"
:decimal-places="5"
:input-disable="true"
:width="selectWidth"
<!-- 3. 标况质量流量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况质量流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dMFlowb" :unit-type="'massflow'"
v-model:unit-order="meterResult.dMFlowUnit" :input-disable="true" :show-english-only="true"
:decimal-places="6" :width="selectWidth" />
</el-col>
</el-row>
<!-- 4. 标况能量流量 -->
<el-row class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">标况能量流量</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dEFlowb" :unit-type="'energyflow'"
v-model:unit-order="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="6"
:width="selectWidth" :input-disable="true" />
</el-col>
</el-row>
<!-- 5. 求渐近速度系数 E（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">求渐近速度系数 E</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" "
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 6. 求相对密度系数 FG（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">求相对密度系数 FG</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dFG" placeholder=" " :style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 7. 求流动温度系数 FT（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">求流动温度系数 FT</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dFT" placeholder="" :style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 8. 求动力粘度dlnd（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">求动力粘度dlnd</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dDViscosity" placeholder=""
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 9. 求可膨胀系数（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">求可膨胀系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dDExpCoefficient" placeholder=""
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 10. 管道雷诺数（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">管道雷诺数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dRnPipe" placeholder=""
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 11. 修正后的流出系数（仅dMeterType='3'显示） -->
<el-row v-if="dMeterType === '3'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">修正后的流出系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dCdCorrect" placeholder=""
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 12. 喷嘴的流出系数（仅dMeterType='3'显示） -->
<el-row v-if="dMeterType === '3'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">喷嘴的流出系数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dCdNozell" placeholder=""
:style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 13. 管道内天然气流速（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">管道内天然气流速</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dVelocityFlow" :unit-type="'speed'"
v-model:unit-order="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" />
</el-col>
</el-row>
<!-- 14. 压力损失（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">压力损失</label>
</el-col>
<el-col :span="14" class="control-col">
<unit-converter v-model="meterResult.dPressLost" :unit-type="'pressure'"
v-model:unit-order="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" />
</el-col>
</el-row>
<!-- 15. 直径比（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">直径比</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dBeta" placeholder="" :style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 16. 等熵指数（仅dMeterType='0'显示） -->
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">等熵指数</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input readonly v-model="meterResult.dKappa" placeholder="" :style="{ width: selectWidth + 'px' }" />
</el-col>
</el-row>
<!-- 注释的字段：保留结构，如需启用可取消注释 -->
<!-- <el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">孔板锐利度系数Bk</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input
readonly
v-model="meterResult.dBk"
placeholder=""
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item v-if="dMeterType === '0'" label="压力损失" prop="dPressLost">
<unit-converter
v-model="meterResult.dPressLost"
:unit-type="'pressure'"
v-model:unit-order="meterResult.dPressLostUnit"
:show-english-only="true"
:decimal-places="5"
:input-disable="true"
:width="selectWidth"
</el-col>
</el-row>
<el-row v-if="dMeterType === '0'" class="form-row" :gutter="10" align="middle">
<el-col :span="10" class="label-col">
<label class="form-label">管道粗糙度系数 Gme</label>
</el-col>
<el-col :span="14" class="control-col">
<el-input
readonly
v-model="meterResult.dRoughNessPipe"
placeholder=""
:style="{ width: selectWidth + 'px' }"
/>
</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>
</el-col>
</el-row> -->
</div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import unitConverter from '@/components/inputValueUnit/index';
// 定义 props
const props = defineProps({
<script setup>
import {
ref,
watch,
onMounted
} from 'vue';
import unitConverter from '@/components/inputValueUnit/index';
// 定义 props
const props = defineProps({
modelValue: {
type: Object,
default: () => ({
@ -150,10 +254,10 @@ const props = defineProps({
type: String,
default: '0'
}
});
});
// 定义响应式数据
const meterResult = ref({
// 定义响应式数据
const meterResult = ref({
dE: 0,
dFG: 0,
dFT: 0,
@ -177,24 +281,27 @@ const meterResult = ref({
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
});
const selectWidth = ref(0);
});
const selectWidth = ref(0);
// 监听 elFormWidth 的变化
watch(
// 监听 elFormWidth 的变化
watch(
() => props.elFormWidth,
(newVal) => {
selectWidth.value = newVal;
},
{ deep: true }
);
}, {
deep: true
}
);
// 监听 value 的变化
watch(
// 监听 value 的变化
watch(
() => props.modelValue,
(newVal) => {
console.log(newVal);
const processedValue = { ...newVal };
const processedValue = {
...newVal
};
for (const key in processedValue) {
if (processedValue.hasOwnProperty(key)) {
const value = processedValue[key];
@ -206,26 +313,71 @@ watch(
}
}
meterResult.value = JSON.parse(JSON.stringify(processedValue));
},
{ deep: true }
);
}, {
deep: true
}
);
// 挂载后设置 selectWidth
onMounted(() => {
// 挂载后设置 selectWidth
onMounted(() => {
// 在 DOM 更新后获取宽度
selectWidth.value = props.elFormWidth;
});
});
</script>
<style scoped>
/* 可按需添加样式 */
.app-container {
height: 100%;
}
.flex-form {
display: grid;
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 10px;
}
/* 整体容器样式 */
.app-container {
padding: 10px;
}
/* 每行间距与垂直居中 */
.form-row {
margin-bottom: 12px;
align-items: center;
}
/* 标签列样式：右对齐、统一字号/颜色 */
.label-col {
text-align: right;
padding-right: 10px;
}
.form-label {
font-size: 12px;
color: #606266;
/* 匹配Element UI默认标签色 */
font-weight: 300;
line-height: 32px;
/* 匹配输入框高度，垂直居中 */
}
/* 控件列样式：左间距 */
.control-col {
padding-left: 10px;
}
/* 只读输入框样式优化（匹配原表单只读样式） */
.el-input[readonly] {
background-color: #f5f7fa;
color: #606266;
}
/* 小屏幕适配：标签和控件堆叠显示 */
@media (max-width: 768px) {
.form-row .el-col {
span: 24 !important;
}
.label-col {
text-align: left;
margin-bottom: 4px;
padding-right: 0;
}
.control-col {
padding-left: 0;
}
}
</style>

44
src/views/ngtools/FlowCal/index.vue
View File

@ -4,21 +4,49 @@
<button @click="btnCalc" type="primary" class="animated-button">{{ btnText }}</button>
</div>
<el-tabs v-model="activeTab" style="width: 100%">
<el-tab-pane label="工况参数" name="meterpar">
<!-- <el-row style="display: flex;flex-direction: column;height: 100vh;margin: 0%;padding: 0%;">
<el-col style="flex: 1;width: 30%;box-sizing: border-box;">
<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
</el-tab-pane>
<el-tab-pane label="摩尔组分" name="ngComponents">
</el-col>
<el-col style="flex: 1;width: 30%;box-sizing: border-box;">
<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
</el-tab-pane>
<el-tab-pane label="计算结果" name="meterresult">
</el-col>
<el-col style="flex: 1;width: 30%;box-sizing: border-box;">
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType"
v-model="parentMeterResult" :el-form-width="elFormItemWidth" />
<NGResult v-if="['4', '5', '6', '7','20'].includes(dMeterType)" :d-meter-type="dMeterType"
v-model="parentNGResult" :el-form-width="elFormItemWidthmin"></NGResult>
</el-col>
</el-row> -->
<el-row :gutter="16" style="width: 100%;">
<!-- 横向三等分：每个el-col占8列（24/3=8） -->
<el-col :span="8">
<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
</el-col>
<el-col :span="8">
<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
</el-col>
<el-col :span="8">
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType"
v-model="parentMeterResult" :el-form-width="elFormItemWidth" />
<NGResult v-if="['4', '5', '6', '7','20'].includes(dMeterType)" :d-meter-type="dMeterType"
v-model="parentNGResult" :el-form-width="elFormItemWidthmin"></NGResult>
</el-col>
</el-row>
<!-- <el-tabs v-model="activeTab" style="width: 100%">
<el-tab-pane label="工况参数" name="meterpar">
</el-tab-pane>
</el-tabs>
<el-tab-pane label="摩尔组分" name="ngComponents">
</el-tab-pane>
<el-tab-pane label="计算结果" name="meterresult">
</el-tab-pane>
</el-tabs> -->
<div v-if="isShowMessage" class="message-box">{{ message }}</div>
</div>