增加超声波测液位的页面

This commit is contained in:
廖德云 2025-12-04 00:07:18 +08:00
parent b4ddd5061a
commit 067d3cdc2e
5 changed files with 706 additions and 674 deletions

View File

@ -22,5 +22,17 @@ export function calcFlow(data) {
} }
}) })
} }
// 页面深度计算
export function calcWaterDeep(data) {
return request({
url: '/WaterDeepCalc/calculatedepth',
method: 'post',
data: data,
headers: {
'Content-Type': 'application/json'
}
})
}

View File

@ -1,19 +1,26 @@
<template> <template>
<div class="app-container"> <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 :model="meterPar" ref="dataForm" label-position="top" size="small" :inline="true" label-width="160px"
<el-form-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)" :style="{ width: selectWidth + 'px' }" label="流量计类别" prop="dMeterType"> class="flex-form">
<el-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType" placeholder="请选择流量计类别 " clearable> <el-form-item v-if="['0', '1', '2', '3'].includes(meterPar.dMeterType)"
<el-option v-for="dict in ngtools_lljlx" :key="dict.value" :label="dict.label" :value="dict.value" /> :style="{ width: selectWidth + 'px' }" label="流量计类别" prop="dMeterType">
<el-select :key="'meter-type-' + meterPar.dMeterType" v-model="meterPar.dMeterType"
placeholder="请选择流量计类别 " clearable>
<el-option v-for="dict in ngtools_lljlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="计算标准" prop="dFlowCalbz"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="计算标准"
prop="dFlowCalbz">
<el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable> <el-select v-model="meterPar.dFlowCalbz" placeholder="请选择计算标准 " clearable>
<el-option v-for="dict in ngtools_lljsbz" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_lljsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="压缩因子计算标准" prop="dZcalbz"> <el-form-item :style="{ width: selectWidth + 'px' }" label="压缩因子计算标准" prop="dZcalbz">
<el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable> <el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable>
<el-option v-for="dict in ngtools_ysyzjsbz" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_ysyzjsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="计量参比条件压力" prop="dCbtj"> <el-form-item :style="{ width: selectWidth + 'px' }" label="计量参比条件压力" prop="dCbtj">
@ -22,64 +29,57 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="节流装置类型" prop="dCoreType"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="节流装置类型"
prop="dCoreType">
<el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable> <el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable>
<el-option v-for="dict in ngtools_jlzzlx" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_jlzzlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="取压方式" prop="dPtmode"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="取压方式"
prop="dPtmode">
<el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable> <el-select v-model="meterPar.dPtmode" placeholder="请选择取压方式 " clearable>
<el-option v-for="dict in ngtools_qyfs" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_qyfs" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道类型" prop="dPipeType"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道类型"
prop="dPipeType">
<el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable> <el-select v-model="meterPar.dPipeType" placeholder="请选择管道类型 " clearable>
<el-option v-for="dict in ngtools_gdlx" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_gdlx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道材料" prop="dPipeMaterial"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="管道材料"
prop="dPipeMaterial">
<el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable> <el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable>
<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料" prop="dOrificeMaterial"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料"
prop="dOrificeMaterial">
<el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable> <el-select v-model="meterPar.dOrificeMaterial" placeholder="请选择孔板材料 " clearable>
<el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_gdcz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD"> <el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'"
<unit-converter :style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD">
v-model="meterPar.dPipeD" <unit-converter v-model="meterPar.dPipeD" :unit-type="'length'" v-model:unit-order="meterPar.dLenUnit"
:unit-type="'length'" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
v-model:unit-order="meterPar.dLenUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径" prop="dOrificeD"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径"
<unit-converter prop="dOrificeD">
v-model="meterPar.dOrificeD" <unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
:unit-type="'length'" v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dOrificeUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喉部直径" prop="dOrificeD"> <el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="喉部直径"
<unit-converter prop="dOrificeD">
v-model="meterPar.dOrificeD" <unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'"
:unit-type="'length'" v-model:unit-order="meterPar.dOrificeUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dOrificeUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType"> <el-form-item :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType">
@ -87,185 +87,147 @@
<el-option v-for="dict in ngtools_yllx" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in ngtools_yllx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dPfType === '0'" :style="{ width: selectWidth + 'px' }" label="当地大气压" prop="dPatm"> <el-form-item v-if="meterPar.dPfType === '0'" :style="{ width: selectWidth + 'px' }" label="当地大气压"
<unit-converter prop="dPatm">
v-model="meterPar.dPatm" <unit-converter v-model="meterPar.dPatm" :unit-type="'pressure'" v-model:unit-order="meterPar.dPatmUnit"
:unit-type="'pressure'" :show-english-only="false" :decimal-places="6" :width="selectWidth" />
v-model:unit-order="meterPar.dPatmUnit"
:show-english-only="false"
:decimal-places="6"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="输入压力" prop="dPf"> <el-form-item :style="{ width: selectWidth + 'px' }" label="输入压力" prop="dPf">
<unit-converter <unit-converter v-model="meterPar.dPf" :unit-type="'pressure'" v-model:unit-order="meterPar.dPfUnit"
v-model="meterPar.dPf" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
:unit-type="'pressure'"
v-model:unit-order="meterPar.dPfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item :style="{ width: selectWidth + 'px' }" label="输入温度" prop="dTf"> <el-form-item :style="{ width: selectWidth + 'px' }" label="输入温度" prop="dTf">
<unit-converter <unit-converter v-model="meterPar.dTf" :unit-type="'temperature'" v-model:unit-order="meterPar.dTfUnit"
v-model="meterPar.dTf" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
:unit-type="'temperature'"
v-model:unit-order="meterPar.dTfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="输入差压" prop="dDp"> <el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="输入差压"
<unit-converter prop="dDp">
v-model="meterPar.dDp" <unit-converter v-model="meterPar.dDp" :unit-type="'pressure'" v-model:unit-order="meterPar.dDpUnit"
:unit-type="'pressure'" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
v-model:unit-order="meterPar.dDpUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="流出系数" prop="dCd"> <el-form-item v-if="meterPar.dMeterType === '3'" :style="{ width: selectWidth + 'px' }" label="流出系数"
prop="dCd">
<el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable /> <el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable />
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" :style="{ width: selectWidth + 'px' }" label="仪表系数" prop="dMeterFactor"> <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-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable />
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'" :style="{ width: selectWidth + 'px' }" label="脉冲数" prop="dPulseNum"> <el-form-item v-if="meterPar.dMeterType === '1' || meterPar.dMeterType === '2'"
<unit-converter :style="{ width: selectWidth + 'px' }" label="脉冲数" prop="dPulseNum">
v-model="meterPar.dPulseNum" <unit-converter v-model="meterPar.dPulseNum" :unit-type="'user'" v-model:unit-order="meterPar.dVGscUnit"
:unit-type="'user'" :show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'个'"
v-model:unit-order="meterPar.dVGscUnit" :enable-convert="false" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:user-defined="true"
:user-definedunit-name="'个'"
:enable-convert="false"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dMeterType === '8'" :style="{ width: selectWidth + 'px' }" label="管束车容积" prop="dVGsc"> <el-form-item v-if="meterPar.dMeterType === '8'" :style="{ width: selectWidth + 'px' }" label="管束车容积"
<unit-converter prop="dVGsc">
v-model="meterPar.dVGsc" <unit-converter v-model="meterPar.dVGsc" :unit-type="'volume'" v-model:unit-order="meterPar.dVGscUnit"
:unit-type="'volume'" :show-english-only="false" :decimal-places="5" :width="selectWidth" />
v-model:unit-order="meterPar.dVGscUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量" prop="dVFlowMax"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量"
<unit-converter prop="dVFlowMax">
v-model="meterPar.dVFlowMax" <unit-converter v-model="meterPar.dVFlowMax" :unit-type="'volumeflow'"
:unit-type="'volumeflow'" v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dVFlowUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最小体积流量" prop="dVFlowMin"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最小体积流量"
<unit-converter prop="dVFlowMin">
v-model="meterPar.dVFlowMin" <unit-converter v-model="meterPar.dVFlowMin" :unit-type="'volumeflow'"
:unit-type="'volumeflow'" v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dVFlowUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="常用流量" prop="dVFlowCon"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="常用流量"
<unit-converter prop="dVFlowCon">
v-model="meterPar.dVFlowCon" <unit-converter v-model="meterPar.dVFlowCon" :unit-type="'volumeflow'"
:unit-type="'volumeflow'" v-model:unit-order="meterPar.dVFlowUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dVFlowUnit" :enable-convert="true" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:enable-convert="true"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限" prop="dPfRangeMin"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限"
<unit-converter prop="dPfRangeMin">
v-model="meterPar.dPfRangeMin" <unit-converter v-model="meterPar.dPfRangeMin" :unit-type="'pressure'"
:unit-type="'pressure'" v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dPfUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程上限" prop="dPfRangeMax"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程上限"
<unit-converter prop="dPfRangeMax">
v-model="meterPar.dPfRangeMax" <unit-converter v-model="meterPar.dPfRangeMax" :unit-type="'pressure'"
:unit-type="'pressure'" v-model:unit-order="meterPar.dPfUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dPfUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程下限" prop="dDpRangeMin"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程下限"
<unit-converter prop="dDpRangeMin">
v-model="meterPar.dDpRangeMin" <unit-converter v-model="meterPar.dDpRangeMin" :unit-type="'pressure'"
:unit-type="'pressure'" v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dDpUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程上限" prop="dDpRangeMax"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="差压量程上限"
<unit-converter prop="dDpRangeMax">
v-model="meterPar.dDpRangeMax" <unit-converter v-model="meterPar.dDpRangeMax" :unit-type="'pressure'"
:unit-type="'pressure'" v-model:unit-order="meterPar.dDpUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dDpUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程下限" prop="dTfRangeMin"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程下限"
<unit-converter prop="dTfRangeMin">
v-model="meterPar.dTfRangeMin" <unit-converter v-model="meterPar.dTfRangeMin" :unit-type="'temperature'"
:unit-type="'temperature'" v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dTfUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程上限" prop="dTfRangeMax"> <el-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="温度计量程上限"
<unit-converter prop="dTfRangeMax">
v-model="meterPar.dTfRangeMax" <unit-converter v-model="meterPar.dTfRangeMax" :unit-type="'temperature'"
:unit-type="'temperature'" v-model:unit-order="meterPar.dTfUnit" :show-english-only="false" :decimal-places="5"
v-model:unit-order="meterPar.dTfUnit" :width="selectWidth" />
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
/>
</el-form-item> </el-form-item>
<!-- 液面深度计算 -->
<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="常温层深度"
prop="dVFlowMax">
<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'length'"
v-model:unit-order="meterPar.dVFlowUnit" :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="dVFlowMin">
<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-form-item>
<el-form-item v-if="meterPar.dMeterType === '20'" :style="{ width: selectWidth + 'px' }" label="地温梯度"
prop="dVFlowCon">
<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-form>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, watch, onMounted, inject } from 'vue'; import {
import unitConverter from '@/components/inputValueUnit/index'; ref,
watch,
onMounted,
inject
} from 'vue';
import unitConverter from '@/components/inputValueUnit/index';
// //
const __name = 'meterParComponents'; const __name = 'meterParComponents';
// 1. useDict // 1. useDict
import { useDict } from '@/utils/dict'; import {
// 2. useDict Ref useDict
const dictRefs = useDict( } from '@/utils/dict';
// 2. useDict Ref
const dictRefs = useDict(
'ngtools_cbtj', 'ngtools_cbtj',
'ngtools_jlzzlx', 'ngtools_jlzzlx',
'ngtools_lljlx', 'ngtools_lljlx',
@ -276,29 +238,31 @@ const dictRefs = useDict(
'ngtools_yllx', 'ngtools_yllx',
'ngtools_lljsbz', 'ngtools_lljsbz',
'ngtools_ysyzjsbz' 'ngtools_ysyzjsbz'
); );
// 3. Ref computed .value // 3. Ref computed .value
import { computed } from 'vue'; import {
const ngtools_cbtj = computed(() => dictRefs.ngtools_cbtj.value || []); computed
const ngtools_jlzzlx = computed(() => dictRefs.ngtools_jlzzlx.value || []); } from 'vue';
const ngtools_lljlx = computed(() => dictRefs.ngtools_lljlx.value || []); const ngtools_cbtj = computed(() => dictRefs.ngtools_cbtj.value || []);
const ngtools_qyfs = computed(() => dictRefs.ngtools_qyfs.value || []); const ngtools_jlzzlx = computed(() => dictRefs.ngtools_jlzzlx.value || []);
const ngtools_gdcz = computed(() => dictRefs.ngtools_gdcz.value || []); const ngtools_lljlx = computed(() => dictRefs.ngtools_lljlx.value || []);
const ngtools_lcxsjsff = computed(() => dictRefs.ngtools_lcxsjsff.value || []); const ngtools_qyfs = computed(() => dictRefs.ngtools_qyfs.value || []);
const ngtools_gdlx = computed(() => dictRefs.ngtools_gdlx.value || []); const ngtools_gdcz = computed(() => dictRefs.ngtools_gdcz.value || []);
const ngtools_yllx = computed(() => dictRefs.ngtools_yllx.value || []); const ngtools_lcxsjsff = computed(() => dictRefs.ngtools_lcxsjsff.value || []);
const ngtools_lljsbz = computed(() => dictRefs.ngtools_lljsbz.value || []); const ngtools_gdlx = computed(() => dictRefs.ngtools_gdlx.value || []);
const ngtools_ysyzjsbz = computed(() => dictRefs.ngtools_ysyzjsbz.value || []); const ngtools_yllx = computed(() => dictRefs.ngtools_yllx.value || []);
const ngtools_lljsbz = computed(() => dictRefs.ngtools_lljsbz.value || []);
const ngtools_ysyzjsbz = computed(() => dictRefs.ngtools_ysyzjsbz.value || []);
// 4. // 4.
const dictLoaded = computed(() => { const dictLoaded = computed(() => {
// //
return ngtools_lljlx.value.length > 0 && ngtools_jlzzlx.value.length > 0; return ngtools_lljlx.value.length > 0 && ngtools_jlzzlx.value.length > 0;
}); });
// lodash.cloneDeep // lodash.cloneDeep
const deepClone = (obj) => { const deepClone = (obj) => {
if (obj === null || typeof obj !== 'object') { if (obj === null || typeof obj !== 'object') {
return obj; return obj;
} }
@ -312,10 +276,10 @@ const deepClone = (obj) => {
} }
return clone; return clone;
}; };
// lodash.isEqual // lodash.isEqual
const isObjectEqual = (obj1, obj2) => { const isObjectEqual = (obj1, obj2) => {
// //
if (obj1 === obj2) return true; if (obj1 === obj2) return true;
@ -347,10 +311,10 @@ const isObjectEqual = (obj1, obj2) => {
} }
return true; return true;
}; };
// props // props
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -414,44 +378,46 @@ const props = defineProps({
type: Number, type: Number,
default: 180 default: 180
} }
}); });
// emits // emits
const emits = defineEmits(['update:modelValue']); const emits = defineEmits(['update:modelValue']);
// //
const selectWidth = ref(0); const selectWidth = ref(0);
const meterPar = ref(deepClone(props.modelValue)); const meterPar = ref(deepClone(props.modelValue));
const isUpdating = ref(false); const isUpdating = ref(false);
// selectWidth // selectWidth
onMounted(() => { onMounted(() => {
selectWidth.value = props.elFormWidth; selectWidth.value = props.elFormWidth;
}); });
// meterPar // meterPar
watch( watch(
meterPar, meterPar,
(newVal) => { (newVal) => {
if (!isObjectEqual(newVal, props.modelValue)) { if (!isObjectEqual(newVal, props.modelValue)) {
console.log('Emit to parent', newVal); console.log('Emit to parent', newVal);
emits('update:modelValue', deepClone(newVal)); emits('update:modelValue', deepClone(newVal));
} }
}, }, {
{ deep: true } deep: true
); }
);
// elFormWidth // elFormWidth
watch( watch(
() => props.elFormWidth, () => props.elFormWidth,
(newVal) => { (newVal) => {
selectWidth.value = newVal; selectWidth.value = newVal;
}, }, {
{ deep: true } deep: true
); }
);
// value // value
watch( watch(
() => props.modelValue, () => props.modelValue,
(newVal) => { (newVal) => {
if (!isObjectEqual(newVal, meterPar.value)) { if (!isObjectEqual(newVal, meterPar.value)) {
@ -461,18 +427,21 @@ watch(
dMeterType: String(newVal.dMeterType) // dMeterType: String(newVal.dMeterType) //
}); });
} }
}, }, {
{ deep: true, immediate: true } deep: true,
); immediate: true
}
);
</script> </script>
<style scoped> <style scoped>
.app-container { .app-container {
height: 100%; height: 100%;
} }
.flex-form {
.flex-form {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px; gap: 5px;
} }
</style> </style>

View File

@ -36,6 +36,7 @@ function hasOneShowingChild(children: RouteItem[] = [], parent: RouteItem) {
}; };
function resolvePath(routePath: string, routeQuery?: any) { function resolvePath(routePath: string, routeQuery?: any) {
console.log(routeQuery);
if (isExternal(routePath)) return routePath if (isExternal(routePath)) return routePath
if (isExternal(props.basePath!)) return props.basePath if (isExternal(props.basePath!)) return props.basePath

View File

@ -13,8 +13,10 @@
<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" /> <ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="计算结果" name="meterresult"> <el-tab-pane label="计算结果" name="meterresult">
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType" v-model="parentMeterResult" :el-form-width="elFormItemWidth" /> <meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType"
<NGResult v-if="['4', '5', '6', '7'].includes(dMeterType)" :d-meter-type="dMeterType" v-model="parentNGResult" :el-form-width="elFormItemWidthmin"></NGResult> 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-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -23,22 +25,33 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeMount, watch } from 'vue'; import {
import { useRoute } from 'vue-router'; ref,
import meterPar from '@/components/NGTools/meterPar'; onMounted,
import ngComponents from '@/components/NGTools/NGCom'; onBeforeMount,
import meterResult from '@/components/NGTools/meterResult'; watch
import NGResult from '@/components/NGTools/NGResult'; } from 'vue';
import { calcNGPar, calcFlow } from '@/api/ngtools/NGCalcTools.js'; import {
useRoute
} from 'vue-router';
import meterPar from '@/components/NGTools/meterPar';
import ngComponents from '@/components/NGTools/NGCom';
import meterResult from '@/components/NGTools/meterResult';
import NGResult from '@/components/NGTools/NGResult';
import {
calcNGPar,
calcFlow,
calcWaterDeep
} from '@/api/ngtools/NGCalcTools.js';
// //
const btnText = ref(''); const btnText = ref('');
const elFormItemWidth = ref(160); const elFormItemWidth = ref(160);
const elFormItemWidthmin = ref(140); const elFormItemWidthmin = ref(140);
const activeTab = ref('meterpar'); const activeTab = ref('meterpar');
const isShowMessage = ref(false); const isShowMessage = ref(false);
const message = ref(''); const message = ref('');
const parentMeterPar = ref({ const parentMeterPar = ref({
dFlowCalbz: '0', dFlowCalbz: '0',
dZcalbz: '0', dZcalbz: '0',
dCbtj: '0', dCbtj: '0',
@ -81,9 +94,9 @@ const parentMeterPar = ref({
dCdCalMethod: 0, dCdCalMethod: 0,
dMeterFactor: 2354, dMeterFactor: 2354,
dPulseNum: 12000, dPulseNum: 12000,
dVFlowMax: 6, dVFlowMax: 50,
dVFlowMin: 3, dVFlowMin: 8,
dVFlowCon: 5, dVFlowCon: 0.025,
dPfRangeMin: 0, dPfRangeMin: 0,
dPfRangeMax: 0, dPfRangeMax: 0,
dDpRangeMin: 0, dDpRangeMin: 0,
@ -94,9 +107,9 @@ const parentMeterPar = ref({
dVGscUnit: 0, dVGscUnit: 0,
dCalcType: 0, //0 1 3 dCalcType: 0, //0 1 3
dBqdd: 0 //0 1 dBqdd: 0 //0 1
}); });
const parentMeterResult = ref({ const parentMeterResult = ref({
dE: 0, dE: 0,
dFG: 0, dFG: 0,
dFT: 0, dFT: 0,
@ -120,9 +133,9 @@ const parentMeterResult = ref({
dPressLostUnit: 0, dPressLostUnit: 0,
dBeta: 0, dBeta: 0,
dKappa: 0 dKappa: 0
}); });
const parentNGResult = ref({ const parentNGResult = ref({
dMrx: 0, dMrx: 0,
dZb: 0, dZb: 0,
dZf: 0, dZf: 0,
@ -168,27 +181,27 @@ const parentNGResult = ref({
dC5j: 0, dC5j: 0,
dC6j: 0, dC6j: 0,
dC3C4: 0 dC3C4: 0
}); });
const componentString = ref(''); const componentString = ref('');
const dMeterType = ref(0); const dMeterType = ref(0);
// //
const route = useRoute(); const route = useRoute();
// //
onBeforeMount(() => { onBeforeMount(() => {
const params = route.query; const params = route.query;
dMeterType.value = params.dMeterType; dMeterType.value = params.dMeterType;
}); });
// parentMeterPar dMeterType // parentMeterPar dMeterType
onMounted(() => { onMounted(() => {
parentMeterPar.value.dMeterType = dMeterType.value; parentMeterPar.value.dMeterType = dMeterType.value;
}); });
// dMeterType // dMeterType
watch(dMeterType, (newValue) => { watch(dMeterType, (newValue) => {
if (['0', '1', '2', '3'].includes(newValue)) { if (['0', '1', '2', '3'].includes(newValue)) {
btnText.value = '计算流量'; btnText.value = '计算流量';
} else if (newValue === '4') { } else if (newValue === '4') {
@ -199,32 +212,37 @@ watch(dMeterType, (newValue) => {
btnText.value = '计算发热量'; btnText.value = '计算发热量';
} else if (newValue === '7') { } else if (newValue === '7') {
btnText.value = '计算其他参数'; btnText.value = '计算其他参数';
} else if (newValue === '20') {
btnText.value = '计算井下页面深度';
} }
parentMeterPar.value.dMeterType = newValue; parentMeterPar.value.dMeterType = newValue;
console.log('dMeterType 变化后parentMeterPar:', parentMeterPar.value); console.log('dMeterType 变化后parentMeterPar:', parentMeterPar.value);
}); });
// //
const showMessage = () => { const showMessage = () => {
isShowMessage.value = true; isShowMessage.value = true;
setTimeout(() => { setTimeout(() => {
isShowMessage.value = false; isShowMessage.value = false;
}, 1000); // 1 }, 1000); // 1
}; };
// //
const btnCalc = () => { const btnCalc = () => {
if (['0', '1', '2', '3'].includes(dMeterType.value)) { if (['0', '1', '2', '3'].includes(dMeterType.value)) {
calcBtnFlow(); calcBtnFlow();
} else if (['4', '5', '6', '7'].includes(dMeterType.value)) { } else if (['4', '5', '6', '7', ].includes(dMeterType.value)) {
calc(); calc();
} }
}; else if ([ '20'].includes(dMeterType.value)) {
calcBtnWaterDeep();
}
};
// //
const calc = async () => { const calc = async () => {
console.log(parentMeterPar.value); console.log(parentMeterPar.value);
if (parentMeterPar.value.dngComponents === '') { if (parentMeterPar.value.dngComponents === '') {
message.value = '组分为空,请输入天然气组分!'; message.value = '组分为空,请输入天然气组分!';
@ -239,6 +257,8 @@ const calc = async () => {
} }
} }
try { try {
console.log(parentMeterPar.value)
console.log(dMeterType.value)
const res = await calcNGPar(parentMeterPar.value); const res = await calcNGPar(parentMeterPar.value);
parentNGResult.value = res.data; parentNGResult.value = res.data;
activeTab.value = 'meterresult'; activeTab.value = 'meterresult';
@ -246,10 +266,39 @@ const calc = async () => {
} catch (error) { } catch (error) {
console.error('Request error:', error); console.error('Request error:', error);
} }
}; };
// //
const calcBtnFlow = async () => { const calcBtnWaterDeep = async () => {
console.log(parentMeterPar.value);
if (parentMeterPar.value.dngComponents === '') {
message.value = '组分为空,请输入天然气组分!';
showMessage();
activeTab.value = 'ngComponents';
return;
}
// parentNGResult
for (const key in parentNGResult.value) {
if (parentNGResult.value.hasOwnProperty(key)) {
parentNGResult.value[key] = 0;
}
}
try {
console.log(parentMeterPar.value)
console.log(dMeterType.value)
const res = await calcWaterDeep(parentMeterPar.value);
parentNGResult.value = res.data;
activeTab.value = 'meterresult';
console.log('Response:', res);
} catch (error) {
console.error('Request error:', error);
}
};
//
const calcBtnFlow = async () => {
console.log(parentMeterPar.value); console.log(parentMeterPar.value);
if (parentMeterPar.value.dngComponents === '') { if (parentMeterPar.value.dngComponents === '') {
message.value = '组分为空,请输入天然气组分!'; message.value = '组分为空,请输入天然气组分!';
@ -271,11 +320,11 @@ const calcBtnFlow = async () => {
} catch (error) { } catch (error) {
console.error('Request error:', error); console.error('Request error:', error);
} }
}; };
</script> </script>
<style scoped> <style scoped>
.animated-button { .animated-button {
background-color: #007bff; background-color: #007bff;
color: white; color: white;
padding: 10px 20px; padding: 10px 20px;
@ -284,36 +333,36 @@ const calcBtnFlow = async () => {
cursor: pointer; cursor: pointer;
margin-right: 10px; margin-right: 10px;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.animated-button:last-child { .animated-button:last-child {
margin-right: 0; margin-right: 0;
} }
.animated-button:hover { .animated-button:hover {
background-color: #0056b3; background-color: #0056b3;
transform: scale(1.05); transform: scale(1.05);
} }
.animated-button:active { .animated-button:active {
transform: scale(0.95); transform: scale(0.95);
} }
/* 在 Vue 3 中使用 :deep() 替代 /deep/ */ /* 在 Vue 3 中使用 :deep() 替代 /deep/ */
:deep(.el-tabs__nav) { :deep(.el-tabs__nav) {
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
width: 100%; width: 100%;
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.message-box { .message-box {
position: fixed; position: fixed;
top: 20px; top: 20px;
left: 50%; left: 50%;
@ -323,5 +372,5 @@ const calcBtnFlow = async () => {
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
z-index: 9999; z-index: 9999;
} }
</style> </style>

View File

@ -31,7 +31,8 @@ export default defineConfig(({ mode, command }) => {
proxy: { proxy: {
// https://cn.vitejs.dev/config/#server-proxy // https://cn.vitejs.dev/config/#server-proxy
'/dev-api': { '/dev-api': {
target: 'http://ngtools.cn:9999',
target: 'http://192.168.3.19:9999',
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '') rewrite: (p) => p.replace(/^\/dev-api/, '')
}, },