带单位输入组件inputUnit，天然气参数meterPar、组分NGCom、结果组件NGResult MeterResult,修改本地预存单位数据的存储器unitdata.js
This commit is contained in:
parent
4080f1171b
commit
6bb827e955
@ -21,6 +21,7 @@
|
|||||||
"@vueuse/core": "14.1.0",
|
"@vueuse/core": "14.1.0",
|
||||||
"axios": "1.13.2",
|
"axios": "1.13.2",
|
||||||
"clipboard": "2.0.11",
|
"clipboard": "2.0.11",
|
||||||
|
"cnpm": "^9.4.0",
|
||||||
"echarts": "5.6.0",
|
"echarts": "5.6.0",
|
||||||
"element-plus": "2.13.1",
|
"element-plus": "2.13.1",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
@ -30,11 +31,13 @@
|
|||||||
"jsencrypt": "3.3.2",
|
"jsencrypt": "3.3.2",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"pinia": "3.0.4",
|
"pinia": "3.0.4",
|
||||||
|
"sortablejs": "^1.15.6",
|
||||||
"splitpanes": "4.0.4",
|
"splitpanes": "4.0.4",
|
||||||
"vue": "3.5.26",
|
"vue": "3.5.26",
|
||||||
"vue-cropper": "1.1.1",
|
"vue-cropper": "1.1.1",
|
||||||
"vue-router": "4.6.4",
|
"vue-router": "4.6.4",
|
||||||
"vuedraggable": "4.1.0"
|
"vuedraggable": "4.1.0",
|
||||||
|
"yarn": "^1.22.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "5.2.4",
|
"@vitejs/plugin-vue": "5.2.4",
|
||||||
|
|||||||
4849
pnpm-lock.yaml
Normal file
4849
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
44
src/api/system/convert.js
Normal file
44
src/api/system/convert.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】列表
|
||||||
|
export function listConvert(query) {
|
||||||
|
return request({
|
||||||
|
url: '/system/convert/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询【请填写功能名称】详细
|
||||||
|
export function getConvert(id) {
|
||||||
|
return request({
|
||||||
|
url: '/system/convert/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增【请填写功能名称】
|
||||||
|
export function addConvert(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/convert',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改【请填写功能名称】
|
||||||
|
export function updateConvert(data) {
|
||||||
|
return request({
|
||||||
|
url: '/system/convert',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除【请填写功能名称】
|
||||||
|
export function delConvert(id) {
|
||||||
|
return request({
|
||||||
|
url: '/system/convert/' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
265
src/components/NGTools/NGCom.vue
Normal file
265
src/components/NGTools/NGCom.vue
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<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>
|
||||||
|
<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-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>
|
||||||
|
</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 = [
|
||||||
|
{
|
||||||
|
prop: 'ngC1',
|
||||||
|
label: '甲烷C1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngN2',
|
||||||
|
label: '氮气N2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngCo2',
|
||||||
|
label: '二氧化碳CO2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC2',
|
||||||
|
label: '乙烷C2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC3',
|
||||||
|
label: '丙烷C3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngH2o',
|
||||||
|
label: '水H2O'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngH2s',
|
||||||
|
label: '硫化氢H2S'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngH2',
|
||||||
|
label: '氢气H2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngCo',
|
||||||
|
label: '一氧化碳CO'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngO2',
|
||||||
|
label: '氧气O2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngIc4',
|
||||||
|
label: '异丁烷iC4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngNc4',
|
||||||
|
label: '正丁烷nC4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngIc5',
|
||||||
|
label: '异戊烷iC5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngNc5',
|
||||||
|
label: '正戊烷nC5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC6',
|
||||||
|
label: '己烷C6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC7',
|
||||||
|
label: '庚烷C7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC8',
|
||||||
|
label: '辛烷C8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC9',
|
||||||
|
label: '壬烷C9'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngC10',
|
||||||
|
label: '癸烷C10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngHe',
|
||||||
|
label: '氦气He'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ngAr',
|
||||||
|
label: '氩气Ar'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 定义 props
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
elFormWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义 emits
|
||||||
|
const emits = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
// 定义响应式数据
|
||||||
|
const selectWidth = ref(0);
|
||||||
|
const selectedComponent = ref(null);
|
||||||
|
const formData = ref(initFormData());
|
||||||
|
const componentFields = ref(COMPONENT_FIELDS);
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const totalPercentage = computed(() => {
|
||||||
|
return Object.values(formData.value)
|
||||||
|
.reduce((sum, val) => sum + (parseFloat(val) || 0), 0)
|
||||||
|
.toFixed(4);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化表单数据
|
||||||
|
function initFormData() {
|
||||||
|
return COMPONENT_FIELDS.reduce((acc, field) => {
|
||||||
|
acc[field.prop] = 0;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全选输入框文本
|
||||||
|
function selectAllText(event) {
|
||||||
|
const inputElement = event.target;
|
||||||
|
inputElement.select();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析传入的字符串值
|
||||||
|
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() {
|
||||||
|
return Object.values(formData.value)
|
||||||
|
.map((v) => v.toFixed(4))
|
||||||
|
.join('_');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理组件选择变化
|
||||||
|
async function handleComponentChange(value) {
|
||||||
|
if (!value) return;
|
||||||
|
console.log(value);
|
||||||
|
try {
|
||||||
|
const temp = value.replace(/\\'"/g, '"').replace(/'/g, '"');
|
||||||
|
const componentData = Object.assign({}, formData.value, JSON.parse(temp));
|
||||||
|
Object.keys(formData.value).forEach((key) => {
|
||||||
|
formData.value[key] = parseFloat(componentData[key]) || 0;
|
||||||
|
});
|
||||||
|
emitUpdate();
|
||||||
|
} catch (error) {
|
||||||
|
// 这里假设使用了 ElementPlus 的消息提示，需要根据实际情况修改
|
||||||
|
ElMessage.error('获取标准组分失败');
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理值变化
|
||||||
|
function handleValueChange() {
|
||||||
|
nextTick(() => {
|
||||||
|
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) {
|
||||||
|
try {
|
||||||
|
const { data } = await getComponents(params);
|
||||||
|
parseValueString(data.componentStr);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取组分数据失败:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 监听 elFormWidth 的变化
|
||||||
|
watch(
|
||||||
|
() => props.elFormWidth,
|
||||||
|
(newVal) => {
|
||||||
|
selectWidth.value = newVal;
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 value 的变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
parseValueString(newVal);
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 挂载后设置 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;
|
||||||
|
} */
|
||||||
|
</style>
|
||||||
356
src/components/NGTools/NGResult.vue
Normal file
356
src/components/NGTools/NGResult.vue
Normal file
@ -0,0 +1,356 @@
|
|||||||
|
<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,
|
||||||
|
watch,
|
||||||
|
onMounted
|
||||||
|
} from 'vue';
|
||||||
|
import unitConverter from '@/components/inputValueUnit/index';
|
||||||
|
|
||||||
|
// 定义 props
|
||||||
|
const props = defineProps({
|
||||||
|
elFormWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
},
|
||||||
|
dMeterType: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
dMrx: 0,
|
||||||
|
dZb: 0,
|
||||||
|
dZf: 0,
|
||||||
|
dFpv: 0,
|
||||||
|
dDb: 0,
|
||||||
|
dDf: 0,
|
||||||
|
dRhob: 0,
|
||||||
|
dRhof: 0,
|
||||||
|
dRD_Ideal: 0,
|
||||||
|
dRD_Real: 0,
|
||||||
|
dHo: 0,
|
||||||
|
dH: 0,
|
||||||
|
dS: 0,
|
||||||
|
dCpi: 0,
|
||||||
|
dCp: 0,
|
||||||
|
dCv: 0,
|
||||||
|
dk: 0,
|
||||||
|
dKappa: 0,
|
||||||
|
dSOS: 0,
|
||||||
|
dCstar: 0,
|
||||||
|
dHhvMol: 0,
|
||||||
|
dLhvMol: 0,
|
||||||
|
dHhvv: 0,
|
||||||
|
dLhvv: 0,
|
||||||
|
dHhvm: 0,
|
||||||
|
dLhvm: 0,
|
||||||
|
dZb11062: 0,
|
||||||
|
dRhob11062: 0,
|
||||||
|
dRhof11062: 0,
|
||||||
|
dRD_Ideal11062: 0,
|
||||||
|
dRD_Real11062: 0,
|
||||||
|
dWobbeIndex: 0,
|
||||||
|
dPc: 0,
|
||||||
|
dTC: 0,
|
||||||
|
dBzsx: 0,
|
||||||
|
dBzxx: 0,
|
||||||
|
dTotalC: 0,
|
||||||
|
dC2: 0,
|
||||||
|
dC2j: 0,
|
||||||
|
dC3j: 0,
|
||||||
|
dC4j: 0,
|
||||||
|
dC5j: 0,
|
||||||
|
dC6j: 0,
|
||||||
|
dC3C4: 0
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义响应式数据
|
||||||
|
const NGResult = ref({
|
||||||
|
dMrx: 0,
|
||||||
|
dZb: 0,
|
||||||
|
dZf: 0,
|
||||||
|
dFpv: 0,
|
||||||
|
dDb: 0,
|
||||||
|
dDf: 0,
|
||||||
|
dRhob: 0,
|
||||||
|
dRhof: 0,
|
||||||
|
dRD_Ideal: 0,
|
||||||
|
dRD_Real: 0,
|
||||||
|
dHo: 0,
|
||||||
|
dH: 0,
|
||||||
|
dS: 0,
|
||||||
|
dCpi: 0,
|
||||||
|
dCp: 0,
|
||||||
|
dCv: 0,
|
||||||
|
dk: 0,
|
||||||
|
dKappa: 0,
|
||||||
|
dSOS: 0,
|
||||||
|
dSOSUnit: 0,
|
||||||
|
dCstar: 0,
|
||||||
|
dHhvMol: 0,
|
||||||
|
dLhvMol: 0,
|
||||||
|
dHhvv: 0,
|
||||||
|
dLhvv: 0,
|
||||||
|
dHhvm: 0,
|
||||||
|
dLhvm: 0,
|
||||||
|
dZb11062: 0,
|
||||||
|
dRhob11062: 0,
|
||||||
|
dRhof11062: 0,
|
||||||
|
dRD_Ideal11062: 0,
|
||||||
|
dRD_Real11062: 0,
|
||||||
|
dWobbeIndex: 0,
|
||||||
|
dPc: 0,
|
||||||
|
dTC: 0,
|
||||||
|
dBzsx: 0,
|
||||||
|
dBzxx: 0,
|
||||||
|
dTotalC: 0,
|
||||||
|
dC2: 0,
|
||||||
|
dC2j: 0,
|
||||||
|
dC3j: 0,
|
||||||
|
dC4j: 0,
|
||||||
|
dC5j: 0,
|
||||||
|
dC6j: 0,
|
||||||
|
dC3C4: 0
|
||||||
|
});
|
||||||
|
const selectWidth = ref(180);
|
||||||
|
|
||||||
|
// 监听 elFormWidth 的变化
|
||||||
|
watch(
|
||||||
|
() => props.elFormWidth,
|
||||||
|
(newVal) => {
|
||||||
|
selectWidth.value = newVal;
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 value 的变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
console.log(newVal);
|
||||||
|
const processedValue = {
|
||||||
|
...newVal
|
||||||
|
};
|
||||||
|
for (const key in processedValue) {
|
||||||
|
if (processedValue.hasOwnProperty(key)) {
|
||||||
|
const value = processedValue[key];
|
||||||
|
// 判断是否为有效的数值
|
||||||
|
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
|
||||||
|
// 使用 toFixed 方法设置小数点位数
|
||||||
|
processedValue[key] = parseFloat(value.toFixed(6));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
NGResult.value = JSON.parse(JSON.stringify(processedValue));
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 挂载后设置 selectWidth
|
||||||
|
onMounted(() => {
|
||||||
|
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: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
447
src/components/NGTools/meterPar.vue
Normal file
447
src/components/NGTools/meterPar.vue
Normal file
@ -0,0 +1,447 @@
|
|||||||
|
<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-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-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-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-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-option v-for="dict in ngtools_cbtj" :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="dCoreType">
|
||||||
|
<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-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-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-option v-for="dict in ngtools_gdlx" :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="dPipeMaterial">
|
||||||
|
<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-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板材料"
|
||||||
|
prop="dOrificeMaterial">
|
||||||
|
<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-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item v-if="meterPar.dMeterType === '0' || meterPar.dMeterType === '3'"
|
||||||
|
:style="{ width: selectWidth + 'px' }" label="管道内径" prop="dPipeD">
|
||||||
|
<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-form-item v-if="meterPar.dMeterType === '0'" :style="{ width: selectWidth + 'px' }" label="孔板孔径"
|
||||||
|
prop="dOrificeD">
|
||||||
|
<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">
|
||||||
|
<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 :style="{ width: selectWidth + 'px' }" label="压力类型" prop="dPfType">
|
||||||
|
<el-select v-model="meterPar.dPfType" placeholder="请选择压力类型 " clearable>
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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-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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<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-form-item v-if="meterPar.dMeterType === '8'" :style="{ width: selectWidth + 'px' }" label="管束车容积"
|
||||||
|
prop="dVGsc">
|
||||||
|
<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-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="最大体积流量"
|
||||||
|
prop="dVFlowMax">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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-form-item v-if="meterPar.dBqdd === '1'" :style="{ width: selectWidth + 'px' }" label="压力量程下限"
|
||||||
|
prop="dPfRangeMin">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
onMounted,
|
||||||
|
inject
|
||||||
|
} from 'vue';
|
||||||
|
import unitConverter from '@/components/inputValueUnit/index';
|
||||||
|
|
||||||
|
// 定义组件名称
|
||||||
|
const __name = 'meterParComponents';
|
||||||
|
|
||||||
|
// 1. 导入 useDict（确保路径正确）
|
||||||
|
import {
|
||||||
|
useDict
|
||||||
|
} from '@/utils/dict';
|
||||||
|
// 2. 调用 useDict 获取字典（返回的是 Ref 对象集合）
|
||||||
|
const dictRefs = useDict(
|
||||||
|
'ngtools_cbtj',
|
||||||
|
'ngtools_jlzzlx',
|
||||||
|
'ngtools_lljlx',
|
||||||
|
'ngtools_qyfs',
|
||||||
|
'ngtools_gdcz',
|
||||||
|
'ngtools_lcxsjsff',
|
||||||
|
'ngtools_gdlx',
|
||||||
|
'ngtools_yllx',
|
||||||
|
'ngtools_lljsbz',
|
||||||
|
'ngtools_ysyzjsbz'
|
||||||
|
);
|
||||||
|
|
||||||
|
// 3. 解构出每个字典的 Ref 对象，并通过 computed 简化 .value 取值（可选，但更优雅）
|
||||||
|
import {
|
||||||
|
computed
|
||||||
|
} from 'vue';
|
||||||
|
const ngtools_cbtj = computed(() => dictRefs.ngtools_cbtj.value || []);
|
||||||
|
const ngtools_jlzzlx = computed(() => dictRefs.ngtools_jlzzlx.value || []);
|
||||||
|
const ngtools_lljlx = computed(() => dictRefs.ngtools_lljlx.value || []);
|
||||||
|
const ngtools_qyfs = computed(() => dictRefs.ngtools_qyfs.value || []);
|
||||||
|
const ngtools_gdcz = computed(() => dictRefs.ngtools_gdcz.value || []);
|
||||||
|
const ngtools_lcxsjsff = computed(() => dictRefs.ngtools_lcxsjsff.value || []);
|
||||||
|
const ngtools_gdlx = computed(() => dictRefs.ngtools_gdlx.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. 添加字典加载状态，避免初始空渲染
|
||||||
|
const dictLoaded = computed(() => {
|
||||||
|
// 检查所有必需字典是否已加载（至少有一条数据）
|
||||||
|
return ngtools_lljlx.value.length > 0 && ngtools_jlzzlx.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自定义深拷贝函数，替代 lodash.cloneDeep
|
||||||
|
const deepClone = (obj) => {
|
||||||
|
if (obj === null || typeof obj !== 'object') {
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
let clone = Array.isArray(obj) ? [] : {};
|
||||||
|
|
||||||
|
for (let key in obj) {
|
||||||
|
if (obj.hasOwnProperty(key)) {
|
||||||
|
clone[key] = deepClone(obj[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return clone;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 自定义对象比较函数，替代 lodash.isEqual
|
||||||
|
const isObjectEqual = (obj1, obj2) => {
|
||||||
|
// 基本类型比较
|
||||||
|
if (obj1 === obj2) return true;
|
||||||
|
|
||||||
|
// 类型不同
|
||||||
|
if (typeof obj1 !== typeof obj2) return false;
|
||||||
|
|
||||||
|
// 非对象类型
|
||||||
|
if (typeof obj1 !== 'object' || obj1 === null || obj2 === null) return false;
|
||||||
|
|
||||||
|
// 数组比较
|
||||||
|
if (Array.isArray(obj1) && Array.isArray(obj2)) {
|
||||||
|
if (obj1.length !== obj2.length) return false;
|
||||||
|
for (let i = 0; i < obj1.length; i++) {
|
||||||
|
if (!isObjectEqual(obj1[i], obj2[i])) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对象比较
|
||||||
|
const keys1 = Object.keys(obj1);
|
||||||
|
const keys2 = Object.keys(obj2);
|
||||||
|
|
||||||
|
if (keys1.length !== keys2.length) return false;
|
||||||
|
|
||||||
|
for (let key of keys1) {
|
||||||
|
if (!keys2.includes(key) || !isObjectEqual(obj1[key], obj2[key])) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 定义 props
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
dFlowCalbz: null,
|
||||||
|
dZcalbz: null,
|
||||||
|
dCbtj: null,
|
||||||
|
dpbM: null,
|
||||||
|
dtbM: null,
|
||||||
|
dpbE: null,
|
||||||
|
dtbE: null,
|
||||||
|
dPatm: null,
|
||||||
|
dPatmUnit: null,
|
||||||
|
dngCompents: null,
|
||||||
|
dMeterType: null,
|
||||||
|
dCoreType: null,
|
||||||
|
dPtmode: null,
|
||||||
|
dPipeType: null,
|
||||||
|
dPipeD: null,
|
||||||
|
dLenUnit: null,
|
||||||
|
dPipeDtemp: null,
|
||||||
|
dPileDtempU: null,
|
||||||
|
dPipeMaterial: null,
|
||||||
|
dOrificeD: null,
|
||||||
|
dOrificeUnit: null,
|
||||||
|
dOrificeDtemp: null,
|
||||||
|
dOrificeDtempUnit: null,
|
||||||
|
dOrificeMaterial: null,
|
||||||
|
dOrificeSharpness: null,
|
||||||
|
dOrificeRk: null,
|
||||||
|
dOrificeRkLenU: null,
|
||||||
|
dPf: null,
|
||||||
|
dPfUnit: null,
|
||||||
|
dPfType: null,
|
||||||
|
dTf: null,
|
||||||
|
dTfUnit: null,
|
||||||
|
dDp: null,
|
||||||
|
dDpUnit: null,
|
||||||
|
dVFlowUnit: 0,
|
||||||
|
dVFlowWorkUnit: 0,
|
||||||
|
dMFlowUnit: 0,
|
||||||
|
dEFlowUnit: 6,
|
||||||
|
dCd: null,
|
||||||
|
dCdCalMethod: null,
|
||||||
|
dMeterFactor: null,
|
||||||
|
dPulseNum: null,
|
||||||
|
dVFlowMax: null,
|
||||||
|
dVFlowMin: null,
|
||||||
|
dVFlowCon: null,
|
||||||
|
dPfRangeMin: null,
|
||||||
|
dPfRangeMax: null,
|
||||||
|
dDpRangeMin: null,
|
||||||
|
dDpRangeMax: null,
|
||||||
|
dTfRangeMin: null,
|
||||||
|
dTfRangeMax: null,
|
||||||
|
dVGsc: null,
|
||||||
|
dCalcType: 0, // 0 流量 1 天然气 3 管束车
|
||||||
|
dBqdd: 0 // 0 不计算，1 计算
|
||||||
|
})
|
||||||
|
},
|
||||||
|
elFormWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义 emits
|
||||||
|
const emits = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
// 定义响应式数据
|
||||||
|
const selectWidth = ref(0);
|
||||||
|
const meterPar = ref(deepClone(props.modelValue));
|
||||||
|
const isUpdating = ref(false);
|
||||||
|
|
||||||
|
// 在挂载后设置 selectWidth
|
||||||
|
onMounted(() => {
|
||||||
|
selectWidth.value = props.elFormWidth;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 对 meterPar 进行深度监听
|
||||||
|
watch(
|
||||||
|
meterPar,
|
||||||
|
(newVal) => {
|
||||||
|
if (!isObjectEqual(newVal, props.modelValue)) {
|
||||||
|
console.log('Emit to parent', newVal);
|
||||||
|
emits('update:modelValue', deepClone(newVal));
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 对 elFormWidth 进行监听
|
||||||
|
watch(
|
||||||
|
() => props.elFormWidth,
|
||||||
|
(newVal) => {
|
||||||
|
selectWidth.value = newVal;
|
||||||
|
}, {
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 对 value 进行深度监听
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
if (!isObjectEqual(newVal, meterPar.value)) {
|
||||||
|
console.log('Update from parent', newVal);
|
||||||
|
meterPar.value = deepClone({
|
||||||
|
...newVal,
|
||||||
|
dMeterType: String(newVal.dMeterType) // 强制类型转换
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.app-container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
231
src/components/NGTools/meterResult.vue
Normal file
231
src/components/NGTools/meterResult.vue
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</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-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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted } from 'vue';
|
||||||
|
import unitConverter from '@/components/inputValueUnit/index';
|
||||||
|
|
||||||
|
// 定义 props
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({
|
||||||
|
dE: 0,
|
||||||
|
dFG: 0,
|
||||||
|
dFT: 0,
|
||||||
|
dDViscosity: 0,
|
||||||
|
dDExpCoefficient: 0,
|
||||||
|
dRnPipe: 0,
|
||||||
|
dBk: 0,
|
||||||
|
dRoughNessPipe: 0,
|
||||||
|
dCdCorrect: 0,
|
||||||
|
dCdNozell: 0,
|
||||||
|
dVFlowb: 0,
|
||||||
|
dVFlowf: 0,
|
||||||
|
dVFlowUnit: 0,
|
||||||
|
dMFlowb: 0,
|
||||||
|
dMFlowUnit: 0,
|
||||||
|
dEFlowb: 0,
|
||||||
|
dEFlowUnit: 0,
|
||||||
|
dVelocityFlow: 0,
|
||||||
|
dVelocityUnit: 0,
|
||||||
|
dPressLost: 0,
|
||||||
|
dPressLostUnit: 0,
|
||||||
|
dBeta: 0,
|
||||||
|
dKappa: 0
|
||||||
|
})
|
||||||
|
},
|
||||||
|
elFormWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 180
|
||||||
|
},
|
||||||
|
dMeterType: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义响应式数据
|
||||||
|
const meterResult = ref({
|
||||||
|
dE: 0,
|
||||||
|
dFG: 0,
|
||||||
|
dFT: 0,
|
||||||
|
dDViscosity: 0,
|
||||||
|
dDExpCoefficient: 0,
|
||||||
|
dRnPipe: 0,
|
||||||
|
dBk: 0,
|
||||||
|
dRoughNessPipe: 0,
|
||||||
|
dCdCorrect: 0,
|
||||||
|
dCdNozell: 0,
|
||||||
|
dVFlowb: 0,
|
||||||
|
dVFlowf: 0,
|
||||||
|
dVFlowUnit: 0,
|
||||||
|
dMFlowb: 0,
|
||||||
|
dMFlowUnit: 0,
|
||||||
|
dEFlowb: 0,
|
||||||
|
dEFlowUnit: 0,
|
||||||
|
dVelocityFlow: 0,
|
||||||
|
dVelocityUnit: 0,
|
||||||
|
dPressLost: 0,
|
||||||
|
dPressLostUnit: 0,
|
||||||
|
dBeta: 0,
|
||||||
|
dKappa: 0
|
||||||
|
});
|
||||||
|
const selectWidth = ref(0);
|
||||||
|
|
||||||
|
// 监听 elFormWidth 的变化
|
||||||
|
watch(
|
||||||
|
() => props.elFormWidth,
|
||||||
|
(newVal) => {
|
||||||
|
selectWidth.value = newVal;
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 value 的变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
console.log(newVal);
|
||||||
|
const processedValue = { ...newVal };
|
||||||
|
for (const key in processedValue) {
|
||||||
|
if (processedValue.hasOwnProperty(key)) {
|
||||||
|
const value = processedValue[key];
|
||||||
|
// 判断是否为有效的数值
|
||||||
|
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
|
||||||
|
// 使用 toFixed 方法设置小数点位数
|
||||||
|
processedValue[key] = parseFloat(value.toFixed(6));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
meterResult.value = JSON.parse(JSON.stringify(processedValue));
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 挂载后设置 selectWidth
|
||||||
|
onMounted(() => {
|
||||||
|
// 在 DOM 更新后获取宽度
|
||||||
|
selectWidth.value = props.elFormWidth;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 可按需添加样式 */
|
||||||
|
.app-container {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.flex-form {
|
||||||
|
display: grid;
|
||||||
|
/* 优化后的自适应规则 */
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
492
src/components/inputValueUnit/index.vue
Normal file
492
src/components/inputValueUnit/index.vue
Normal file
@ -0,0 +1,492 @@
|
|||||||
|
<template>
|
||||||
|
<div class="unit-converter" :style="{ width: width + 'px' }">
|
||||||
|
<!-- 数值输入框 -->
|
||||||
|
<input
|
||||||
|
v-model.number="inputValue"
|
||||||
|
:disabled="inputDisable"
|
||||||
|
class="input-field"
|
||||||
|
type="number"
|
||||||
|
ref="inputRef"
|
||||||
|
:style="{ width: inputWidth + 'px', height: height + 'px' }"
|
||||||
|
@change="handleInputChange"
|
||||||
|
@focus="selectAllText"
|
||||||
|
/>
|
||||||
|
<!-- 单位标签 -->
|
||||||
|
<span v-if="enableConvert" ref="unitLabel" @click="cycleUnit" @dblclick="toggleUnitSelector" class="unit-label" :style="{ color: 'blue', height: height + 'px' }">
|
||||||
|
{{ ' ' + textUnitName + ' ' }}
|
||||||
|
</span>
|
||||||
|
<span v-else ref="unitLabel" class="unit-label" :style="{ color: 'blue', height: height + 'px' }">
|
||||||
|
{{ ' ' + textUnitName + ' ' }}
|
||||||
|
</span>
|
||||||
|
<!-- 单位选择弹出窗口 -->
|
||||||
|
<div v-if="showUnitSelector" class="unit-selector" ref="unitSelector" :style="{ left: unitSelectorLeft + 'px', top: unitSelectorTop + 'px' }">
|
||||||
|
<div v-for="unit in sortedUnits" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
|
||||||
|
{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
|
||||||
|
import { listConvert } from '@/api/system/convert.js';
|
||||||
|
|
||||||
|
// 定义 props
|
||||||
|
const props = defineProps({
|
||||||
|
unitType: {
|
||||||
|
// 当前单位类型 (required)
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
unitOrder: {
|
||||||
|
// 当前单位序号 (sync)
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
// 输入数值 (sync)
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
showEnglishOnly: {
|
||||||
|
// 是否只显示英文
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
decimalPlaces: {
|
||||||
|
// 小数位数
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
validator: (v) => v >= 0 && v <= 10
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 180
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 24
|
||||||
|
},
|
||||||
|
enableConvert: {
|
||||||
|
//是否能够进行单位换算
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
userDefined: {
|
||||||
|
//自定义输入单位显示
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
userDefinedunitName: {
|
||||||
|
//自定义输入单位显示
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
inputDisable: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义 emits
|
||||||
|
// 修改2：调整emits定义
|
||||||
|
const emits = defineEmits([
|
||||||
|
'update:modelValue', // 替换原来的update:value
|
||||||
|
'update:unitOrder', // 保持原有事件
|
||||||
|
'conversion'
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 定义响应式数据
|
||||||
|
// 修改3：调整所有value相关操作
|
||||||
|
const inputValue = ref(props.modelValue); // 初始化使用modelValue
|
||||||
|
const unitData = ref([]); // 原始单位数据
|
||||||
|
const showUnitSelector = ref(false); // 显示选择器
|
||||||
|
const currentUnit = ref(null); // 当前选中单位
|
||||||
|
const baseUnit = ref(null); // 基准单位
|
||||||
|
const inputWidth = ref(120); //输入框的宽度
|
||||||
|
const textUnitName = ref('');
|
||||||
|
const unitSelectorLeft = ref(0);
|
||||||
|
const unitSelectorTop = ref(0);
|
||||||
|
// 新增三个数据项
|
||||||
|
const originalValue = ref(props.value); // 原始输入值
|
||||||
|
const originalUnit = ref(null); // 原始输入单位
|
||||||
|
const isInternalUpdate = ref(false); // 更新锁定标志
|
||||||
|
|
||||||
|
// 定义 ref
|
||||||
|
const inputRef = ref(null);
|
||||||
|
const unitLabel = ref(null);
|
||||||
|
const unitSelector = ref(null);
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const displayUnitText = computed(() => {
|
||||||
|
if (!currentUnit.value) return '';
|
||||||
|
return props.showEnglishOnly ? currentUnit.value.unitName.split('(')[0].trim() : currentUnit.value.unitName;
|
||||||
|
});
|
||||||
|
|
||||||
|
const sortedUnits = computed(() => {
|
||||||
|
return unitData.value.filter((u) => u.unitType === props.unitType).sort((a, b) => a.unitOrder - b.unitOrder);
|
||||||
|
});
|
||||||
|
|
||||||
|
const popupPosition = computed(() => {
|
||||||
|
if (!unitLabel.value) return {};
|
||||||
|
const rect = unitLabel.value.getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
top: `${rect.bottom + window.scrollY}px`,
|
||||||
|
left: `${rect.left + window.scrollX}px`
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 安全宽度更新方法
|
||||||
|
const safeUpdateWidth = () => {
|
||||||
|
if (unitLabel.value) {
|
||||||
|
updateInputWidth();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectAllText = (event) => {
|
||||||
|
// 通过 event.target 获取触发事件的 input 元素
|
||||||
|
const input = event.target;
|
||||||
|
// 调用 select() 方法全选文本
|
||||||
|
input.select();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (event) => {
|
||||||
|
if (showUnitSelector.value) {
|
||||||
|
// 鼠标右下方偏移量
|
||||||
|
const offsetX = 10;
|
||||||
|
const offsetY = 10;
|
||||||
|
unitSelectorLeft.value = event.clientX;
|
||||||
|
unitSelectorTop.value = event.clientY + offsetY - 100;
|
||||||
|
// 获取弹窗元素
|
||||||
|
if (unitSelector.value) {
|
||||||
|
// 检查是否超出屏幕右边界
|
||||||
|
if (unitSelectorLeft.value + unitSelector.value.offsetWidth > window.innerWidth) {
|
||||||
|
unitSelectorLeft.value = window.innerWidth - unitSelector.value.offsetWidth;
|
||||||
|
}
|
||||||
|
// 检查是否超出屏幕下边界
|
||||||
|
if (unitSelectorTop.value + unitSelector.value.offsetHeight > window.innerHeight) {
|
||||||
|
unitSelectorTop.value = window.innerHeight - unitSelector.value.offsetHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateInputWidth = () => {
|
||||||
|
// 安全访问检查
|
||||||
|
if (!unitLabel.value) {
|
||||||
|
console.warn('Unit label ref not available');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const spanWidth = unitLabel.value.offsetWidth + 10;
|
||||||
|
inputWidth.value = Math.max(50, props.width - spanWidth); // 添加最小宽度限制
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理全局点击事件
|
||||||
|
const handleClickOutside = (event) => {
|
||||||
|
if (unitSelector.value && !unitSelector.value.contains(event.target)) {
|
||||||
|
showUnitSelector.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换单位选择器的显示状态
|
||||||
|
const toggleUnitSelector = () => {
|
||||||
|
showUnitSelector.value = !showUnitSelector.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 加载单位数据
|
||||||
|
const loadUnits = async (unitType) => {
|
||||||
|
try {
|
||||||
|
|
||||||
|
var unitDatalist =JSON.parse( localStorage.getItem("unitData"));
|
||||||
|
|
||||||
|
unitData.value = unitDatalist[unitType];
|
||||||
|
|
||||||
|
baseUnit.value = unitData.value.find((u) => u.baseUnit === 'Y');
|
||||||
|
console.log(baseUnit.value);
|
||||||
|
|
||||||
|
// const res = await listConvert({
|
||||||
|
// unitType: unitType,
|
||||||
|
// status: 'Y'
|
||||||
|
// });
|
||||||
|
// console.log(111,res)
|
||||||
|
// unitData.value = res.rows;
|
||||||
|
// baseUnit.value = unitData.value.find((u) => u.baseUnit === 'Y');
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error('单位数据加载失败:', e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化当前单位
|
||||||
|
const initCurrentUnit = () => {
|
||||||
|
const target = sortedUnits.value.find((u) => u.unitOrder === props.unitOrder);
|
||||||
|
currentUnit.value = target || baseUnit.value || sortedUnits.value[0];
|
||||||
|
// 初始化时设置原始单位（关键修复）
|
||||||
|
originalUnit.value = currentUnit.value;
|
||||||
|
// 安全设置单位名称
|
||||||
|
textUnitName.value = currentUnit.value ? (props.showEnglishOnly ? currentUnit.value.unitName.split('(')[0].trim() : currentUnit.value.unitName) : '';
|
||||||
|
nextTick(() => {
|
||||||
|
updateInputWidth();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 输入变化处理
|
||||||
|
const handleInputChange = () => {
|
||||||
|
// 记录原始值和单位
|
||||||
|
originalValue.value = inputValue.value;
|
||||||
|
originalUnit.value = currentUnit.value;
|
||||||
|
emits('update:modelValue', inputValue.value); // 触发modelValue更新
|
||||||
|
};
|
||||||
|
|
||||||
|
// 循环切换单位
|
||||||
|
const cycleUnit = () => {
|
||||||
|
const index = sortedUnits.value.findIndex((u) => u === currentUnit.value);
|
||||||
|
const newUnit = sortedUnits.value[(index + 1) % sortedUnits.value.length];
|
||||||
|
currentUnit.value = newUnit;
|
||||||
|
console.log(index, newUnit, currentUnit.value);
|
||||||
|
textUnitName.value = props.showEnglishOnly ? newUnit.unitName.split('(')[0].trim() : newUnit.unitName;
|
||||||
|
nextTick(() => {
|
||||||
|
if (unitLabel.value) {
|
||||||
|
updateInputWidth();
|
||||||
|
convertAndEmit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择单位
|
||||||
|
const selectUnit = (unit) => {
|
||||||
|
currentUnit.value = unit;
|
||||||
|
showUnitSelector.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
updateInputWidth();
|
||||||
|
convertAndEmit(); // 触发转换
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 执行换算并提交事件
|
||||||
|
const convertAndEmit = () => {
|
||||||
|
// 移除参数
|
||||||
|
if (!currentUnit.value || !baseUnit.value || !originalUnit.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let newValue = 0;
|
||||||
|
if (props.unitType === 'temperature') {
|
||||||
|
newValue = handleTemperatureConversion(originalUnit.value, currentUnit.value);
|
||||||
|
} else {
|
||||||
|
// 通过基准单位进行两次精确转换
|
||||||
|
const baseValue = originalValue.value / originalUnit.value.conversionFactor;
|
||||||
|
newValue = baseValue * currentUnit.value.conversionFactor;
|
||||||
|
}
|
||||||
|
|
||||||
|
const roundedValue = roundValue(newValue);
|
||||||
|
isInternalUpdate.value = true; // 锁定更新
|
||||||
|
inputValue.value = roundedValue;
|
||||||
|
// 同时触发两个更新事件
|
||||||
|
emits('update:modelValue', roundedValue);
|
||||||
|
emits('update:unitOrder', currentUnit.value.unitOrder);
|
||||||
|
|
||||||
|
emits('conversion', {
|
||||||
|
initialValue: originalValue.value,
|
||||||
|
newValue: roundedValue,
|
||||||
|
oldUnit: originalUnit.value.unitName,
|
||||||
|
newUnit: currentUnit.value.unitName,
|
||||||
|
oldOrder: originalUnit.value.unitOrder,
|
||||||
|
newOrder: currentUnit.value.unitOrder
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 温度单位换算
|
||||||
|
const handleTemperatureConversion = (oldUnit, newUnit) => {
|
||||||
|
const oldOrder = oldUnit.unitOrder;
|
||||||
|
const newOrder = newUnit.unitOrder;
|
||||||
|
let celsius;
|
||||||
|
switch (oldOrder) {
|
||||||
|
case 0:
|
||||||
|
celsius = originalValue.value;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
celsius = ((originalValue.value - 32) * 5) / 9;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
celsius = originalValue.value - 273.15;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('无效温度单位');
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (newOrder) {
|
||||||
|
case 0:
|
||||||
|
return celsius;
|
||||||
|
case 1:
|
||||||
|
return (celsius * 9) / 5 + 32;
|
||||||
|
case 2:
|
||||||
|
return celsius + 273.15;
|
||||||
|
default:
|
||||||
|
throw new Error('无效温度单位');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 四舍六入五成双
|
||||||
|
const roundValue = (value) => {
|
||||||
|
const multiplier = Math.pow(10, props.decimalPlaces);
|
||||||
|
const val = value * multiplier;
|
||||||
|
const intVal = Math.trunc(val);
|
||||||
|
const decimalPart = val - intVal;
|
||||||
|
if (decimalPart < 0.5) {
|
||||||
|
return intVal / multiplier;
|
||||||
|
} else if (decimalPart > 0.5) {
|
||||||
|
return (intVal + 1) / multiplier;
|
||||||
|
} else {
|
||||||
|
return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听单位类型变化
|
||||||
|
watch(
|
||||||
|
() => props.unitType,
|
||||||
|
async (newType) => {
|
||||||
|
if (props.userDefined) {
|
||||||
|
textUnitName.value = props.userDefinedunitName;
|
||||||
|
nextTick(() => {
|
||||||
|
safeUpdateWidth();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
let temp = JSON.parse(localStorage.getItem('unitData'));
|
||||||
|
unitData.value = temp ? temp[newType] : [];
|
||||||
|
if (!unitData.value) {
|
||||||
|
await loadUnits(newType);
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
baseUnit.value = unitData.value.find((u) => u.baseUnit === 'Y');
|
||||||
|
safeUpdateWidth();
|
||||||
|
initCurrentUnit();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听外部单位序号变化
|
||||||
|
watch(
|
||||||
|
() => props.unitOrder,
|
||||||
|
(newOrder) => {
|
||||||
|
if (props.userDefined) {
|
||||||
|
textUnitName.value = props.userDefinedunitName;
|
||||||
|
nextTick(safeUpdateWidth);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 安全查找单位
|
||||||
|
const target = sortedUnits.value.find((u) => u.unitOrder === newOrder);
|
||||||
|
if (!target) {
|
||||||
|
console.warn(`单位序号 ${newOrder} 未找到，使用基准单位`);
|
||||||
|
currentUnit.value = baseUnit.value || sortedUnits.value[0];
|
||||||
|
textUnitName.value = currentUnit.value ? (props.showEnglishOnly ? currentUnit.value.unitName?.split('(')[0]?.trim() : currentUnit.value.unitName) : '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
currentUnit.value = target;
|
||||||
|
textUnitName.value = props.showEnglishOnly ? target.unitName?.split('(')[0]?.trim() : target.unitName;
|
||||||
|
|
||||||
|
nextTick(safeUpdateWidth);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听输入值变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(newVal) => {
|
||||||
|
console.log('收到父组件值更新:', newVal);
|
||||||
|
if (!isInternalUpdate.value && !isNaN(newVal)) {
|
||||||
|
originalValue.value = Number(newVal);
|
||||||
|
inputValue.value = originalValue.value;
|
||||||
|
console.log('外部更新处理:', {
|
||||||
|
original: originalValue.value,
|
||||||
|
input: inputValue.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
isInternalUpdate.value = false;
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
safeUpdateWidth();
|
||||||
|
});
|
||||||
|
// 在挂载时添加全局点击事件监听器
|
||||||
|
document.addEventListener('click', handleClickOutside);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
// 清除所有未完成的异步操作
|
||||||
|
showUnitSelector.value = false;
|
||||||
|
document.removeEventListener('click', handleClickOutside);
|
||||||
|
|
||||||
|
// 清除引用
|
||||||
|
inputRef.value = null;
|
||||||
|
unitLabel.value = null;
|
||||||
|
unitSelector.value = null;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.unit-converter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field {
|
||||||
|
border: 1px solid #d6d5d5;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-label {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid #d6d5d5;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 8px; /* 可根据需要调整左右内边距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-label:hover {
|
||||||
|
background: #f0f8ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-selector {
|
||||||
|
/* 设置容器的最大高度，当内容超出这个高度时会出现滚动条 */
|
||||||
|
max-height: 100px;
|
||||||
|
/* 超出内容时显示纵向滚动条 */
|
||||||
|
overflow-y: auto;
|
||||||
|
/* 横向内容不溢出，隐藏多余部分 */
|
||||||
|
overflow-x: hidden;
|
||||||
|
/* 其他样式保持不变 */
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
padding: 2px 0;
|
||||||
|
min-width: 180px;
|
||||||
|
list-style-type: none;
|
||||||
|
margin-left: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-option {
|
||||||
|
padding: 2px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-option:hover {
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
171
src/store/modules/unitData.js
Normal file
171
src/store/modules/unitData.js
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
import { listConvert } from '@/api/system/convert.js'
|
||||||
|
|
||||||
|
// 创建一个简单的单位数据管理器
|
||||||
|
const UnitStore = {
|
||||||
|
// 状态数据
|
||||||
|
data: {
|
||||||
|
unitData: [],
|
||||||
|
groupedUnitData: {},
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
unitType: null,
|
||||||
|
unitName: null,
|
||||||
|
baseUnit: null,
|
||||||
|
conversionFactor: null,
|
||||||
|
unitTypeName: null,
|
||||||
|
status: null,
|
||||||
|
unitOrder: null
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// 按单位类型分组
|
||||||
|
groupByUnitType(data) {
|
||||||
|
return data.reduce((acc, unit) => {
|
||||||
|
const type = unit.unitType
|
||||||
|
if (!acc[type]) {
|
||||||
|
acc[type] = []
|
||||||
|
}
|
||||||
|
acc[type].push({
|
||||||
|
id: unit.id,
|
||||||
|
unitType: unit.unitType,
|
||||||
|
unitName: unit.unitName,
|
||||||
|
conversionFactor: unit.conversionFactor,
|
||||||
|
unitOrder: unit.unitOrder,
|
||||||
|
baseUnit: unit.baseUnit,
|
||||||
|
status: unit.status,
|
||||||
|
unitTypeName: unit.unitTypeName
|
||||||
|
})
|
||||||
|
// 按单位排序
|
||||||
|
acc[type].sort((a, b) => (a.unitOrder || 0) - (b.unitOrder || 0))
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置查询参数
|
||||||
|
setQueryParams(params) {
|
||||||
|
Object.assign(this.data.queryParams, params)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置查询参数
|
||||||
|
resetQueryParams() {
|
||||||
|
this.data.queryParams = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
unitType: null,
|
||||||
|
unitName: null,
|
||||||
|
baseUnit: null,
|
||||||
|
conversionFactor: null,
|
||||||
|
unitTypeName: null,
|
||||||
|
status: null,
|
||||||
|
unitOrder: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取单位列表
|
||||||
|
async getList() {
|
||||||
|
this.data.loading = true
|
||||||
|
try {
|
||||||
|
const res = await listConvert(this.data.queryParams)
|
||||||
|
this.data.unitData = res.rows || []
|
||||||
|
this.data.total = res.total || 0
|
||||||
|
this.data.groupedUnitData = this.groupByUnitType(this.data.unitData)
|
||||||
|
|
||||||
|
// 保存到localStorage
|
||||||
|
localStorage.setItem('unitData', JSON.stringify(this.data.groupedUnitData))
|
||||||
|
|
||||||
|
return res
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取单位数据失败:', error)
|
||||||
|
throw error
|
||||||
|
} finally {
|
||||||
|
this.data.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 从localStorage加载缓存的单位数据
|
||||||
|
loadFromLocalStorage() {
|
||||||
|
try {
|
||||||
|
const storedData = localStorage.getItem('unitData')
|
||||||
|
if (storedData) {
|
||||||
|
this.data.groupedUnitData = JSON.parse(storedData)
|
||||||
|
// 从分组数据中提取所有单位
|
||||||
|
this.data.unitData = Object.values(this.data.groupedUnitData).flat()
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('从localStorage加载单位数据失败:', error)
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除localStorage中的单位数据
|
||||||
|
clearLocalStorage() {
|
||||||
|
localStorage.removeItem('unitData')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 单位转换方法
|
||||||
|
convertUnit(value, fromUnit, toUnit) {
|
||||||
|
if (fromUnit.unitType !== toUnit.unitType) {
|
||||||
|
throw new Error('单位类型不匹配，无法转换')
|
||||||
|
}
|
||||||
|
|
||||||
|
const valueInBaseUnit = value * (fromUnit.conversionFactor || 1)
|
||||||
|
return valueInBaseUnit / (toUnit.conversionFactor || 1)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据单位名称查找单位
|
||||||
|
findUnitByName(unitName) {
|
||||||
|
return this.data.unitData.find(unit => unit.unitName === unitName)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据ID查找单位
|
||||||
|
findUnitById(id) {
|
||||||
|
return this.data.unitData.find(unit => unit.id === id)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 刷新单位数据
|
||||||
|
async refresh() {
|
||||||
|
return await this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取有效的单位列表
|
||||||
|
getActiveUnits(unitType) {
|
||||||
|
const units = unitType
|
||||||
|
? (this.data.groupedUnitData[unitType] || [])
|
||||||
|
: this.data.unitData
|
||||||
|
|
||||||
|
return units.filter(unit => unit.status === '0')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据类型和名称模糊查询单位
|
||||||
|
searchUnits(type, keyword) {
|
||||||
|
const units = this.data.groupedUnitData[type] || []
|
||||||
|
return units.filter(unit =>
|
||||||
|
unit.unitName.includes(keyword) ||
|
||||||
|
(unit.unitTypeName && unit.unitTypeName.includes(keyword))
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
// getter 方法
|
||||||
|
getUnitTypes() {
|
||||||
|
return Object.keys(this.data.groupedUnitData)
|
||||||
|
},
|
||||||
|
|
||||||
|
getUnitsByType(unitType) {
|
||||||
|
return this.data.groupedUnitData[unitType] || []
|
||||||
|
},
|
||||||
|
|
||||||
|
getBaseUnit(unitType) {
|
||||||
|
const units = this.data.groupedUnitData[unitType] || []
|
||||||
|
return units.find(unit => unit.baseUnit === '1') || units[0]
|
||||||
|
},
|
||||||
|
|
||||||
|
getSortedUnitTypes() {
|
||||||
|
return Object.keys(this.data.groupedUnitData).sort()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UnitStore
|
||||||
1751
src/views/index.vue
1751
src/views/index.vue
File diff suppressed because it is too large
Load Diff
@ -61,6 +61,8 @@
|
|||||||
<div class="el-login-footer">
|
<div class="el-login-footer">
|
||||||
<span>{{ footerContent }}</span>
|
<span>{{ footerContent }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -374,12 +374,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<meterPar v-model="parentMeterPar" :el-form-width="elFormItemWidth" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="Flowresult">
|
<script setup name="Flowresult">
|
||||||
import { listFlowresult, getFlowresult, delFlowresult, addFlowresult, updateFlowresult } from "@/api/production/plc/flowresult/flowresult"
|
import { listFlowresult, getFlowresult, delFlowresult, addFlowresult, updateFlowresult } from "@/api/production/plc/flowresult/flowresult"
|
||||||
|
|
||||||
|
|
||||||
|
import meterPar from '@/components/NGTools/meterPar';
|
||||||
|
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance()
|
const { proxy } = getCurrentInstance()
|
||||||
|
|
||||||
const flowresultList = ref([])
|
const flowresultList = ref([])
|
||||||
@ -391,7 +396,64 @@ const single = ref(true)
|
|||||||
const multiple = ref(true)
|
const multiple = ref(true)
|
||||||
const total = ref(0)
|
const total = ref(0)
|
||||||
const title = ref("")
|
const title = ref("")
|
||||||
|
const elFormItemWidth = ref(160);
|
||||||
|
const parentMeterPar = ref({
|
||||||
|
dFlowCalbz: '0',
|
||||||
|
dZcalbz: '0',
|
||||||
|
dCbtj: '0',
|
||||||
|
dpbM: 0,
|
||||||
|
dtbM: 0,
|
||||||
|
dpbE: 0,
|
||||||
|
dtbE: 0,
|
||||||
|
dPatm: 0.0981,
|
||||||
|
dPatmUnit: 2,
|
||||||
|
dngComponents: '',
|
||||||
|
dMeterType: '0',
|
||||||
|
dCoreType: '0',
|
||||||
|
dPtmode: '0',
|
||||||
|
dPipeType: '0',
|
||||||
|
dPipeD: 259.38,
|
||||||
|
dLenUnit: 3,
|
||||||
|
dPipeDtemp: 20,
|
||||||
|
dPileDtempU: 0,
|
||||||
|
dPipeMaterial: '11.16',
|
||||||
|
dOrificeD: 150.25,
|
||||||
|
dOrificeUnit: 3,
|
||||||
|
dOrificeDtemp: 0,
|
||||||
|
dOrificeDtempUnit: 0,
|
||||||
|
dOrificeMaterial: '16.6',
|
||||||
|
dOrificeSharpness: 0,
|
||||||
|
dOrificeRk: 0,
|
||||||
|
dOrificeRkLenU: 0,
|
||||||
|
dPf: 1.48,
|
||||||
|
dPfUnit: 2,
|
||||||
|
dPfType: '0',
|
||||||
|
dTf: 15,
|
||||||
|
dTfUnit: 0,
|
||||||
|
dDp: 12.5,
|
||||||
|
dDpUnit: 1,
|
||||||
|
dVFlowUnit: 0,
|
||||||
|
dVFlowWorkUnit: 0,
|
||||||
|
dMFlowUnit: 0,
|
||||||
|
dEFlowUnit: 6,
|
||||||
|
dCd: 0.9957,
|
||||||
|
dCdCalMethod: 0,
|
||||||
|
dMeterFactor: 2354,
|
||||||
|
dPulseNum: 12000,
|
||||||
|
dVFlowMax: 30,
|
||||||
|
dVFlowMin: 12,
|
||||||
|
dVFlowCon: 0.03,
|
||||||
|
dPfRangeMin: 0,
|
||||||
|
dPfRangeMax: 0,
|
||||||
|
dDpRangeMin: 0,
|
||||||
|
dDpRangeMax: 0,
|
||||||
|
dTfRangeMin: 0,
|
||||||
|
dTfRangeMax: 0,
|
||||||
|
dVGsc: 300,
|
||||||
|
dVGscUnit: 0,
|
||||||
|
dCalcType: 0, //0 流量 1 天然气 3 管束车
|
||||||
|
dBqdd: 0 //0 不计算，1 计算 计算不确定度
|
||||||
|
});
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
form: {},
|
form: {},
|
||||||
queryParams: {
|
queryParams: {
|
||||||
|
|||||||
316
src/views/system/convert/index.vue
Normal file
316
src/views/system/convert/index.vue
Normal file
@ -0,0 +1,316 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||||
|
<el-form-item label="单位名称" prop="unitName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.unitName"
|
||||||
|
placeholder="请输入单位名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否基准" prop="baseUnit">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.baseUnit"
|
||||||
|
placeholder="请输入是否基准"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="换算因子" prop="conversionFactor">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.conversionFactor"
|
||||||
|
placeholder="请输入换算因子"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型名称" prop="unitTypeName">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.unitTypeName"
|
||||||
|
placeholder="请输入类型名称"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单位序号" prop="unitOrder">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.unitOrder"
|
||||||
|
placeholder="请输入单位序号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter.native="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||||
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
icon="el-icon-plus"
|
||||||
|
size="mini"
|
||||||
|
@click="handleAdd"
|
||||||
|
v-hasPermi="['system:convert:add']"
|
||||||
|
>新增</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
size="mini"
|
||||||
|
:disabled="single"
|
||||||
|
@click="handleUpdate"
|
||||||
|
v-hasPermi="['system:convert:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
size="mini"
|
||||||
|
:disabled="multiple"
|
||||||
|
@click="handleDelete"
|
||||||
|
v-hasPermi="['system:convert:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="1.5">
|
||||||
|
<el-button
|
||||||
|
type="warning"
|
||||||
|
plain
|
||||||
|
icon="el-icon-download"
|
||||||
|
size="mini"
|
||||||
|
@click="handleExport"
|
||||||
|
v-hasPermi="['system:convert:export']"
|
||||||
|
>导出</el-button>
|
||||||
|
</el-col>
|
||||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-table v-loading="loading" :data="convertList" @selection-change="handleSelectionChange">
|
||||||
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
|
<el-table-column label="${comment}" align="center" prop="id" />
|
||||||
|
<el-table-column label="单位类型" align="center" prop="unitType" />
|
||||||
|
<el-table-column label="单位名称" align="center" prop="unitName" />
|
||||||
|
<el-table-column label="是否基准" align="center" prop="baseUnit" />
|
||||||
|
<el-table-column label="换算因子" align="center" prop="conversionFactor" />
|
||||||
|
<el-table-column label="类型名称" align="center" prop="unitTypeName" />
|
||||||
|
<el-table-column label="状态" align="center" prop="status" />
|
||||||
|
<el-table-column label="单位序号" align="center" prop="unitOrder" />
|
||||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleUpdate(scope.row)"
|
||||||
|
v-hasPermi="['system:convert:edit']"
|
||||||
|
>修改</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="text"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
@click="handleDelete(scope.row)"
|
||||||
|
v-hasPermi="['system:convert:remove']"
|
||||||
|
>删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination
|
||||||
|
v-show="total>0"
|
||||||
|
:total="total"
|
||||||
|
:page.sync="queryParams.pageNum"
|
||||||
|
:limit.sync="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 添加或修改【请填写功能名称】对话框 -->
|
||||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="单位名称" prop="unitName">
|
||||||
|
<el-input v-model="form.unitName" placeholder="请输入单位名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="是否基准" prop="baseUnit">
|
||||||
|
<el-input v-model="form.baseUnit" placeholder="请输入是否基准" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="换算因子" prop="conversionFactor">
|
||||||
|
<el-input v-model="form.conversionFactor" placeholder="请输入换算因子" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="类型名称" prop="unitTypeName">
|
||||||
|
<el-input v-model="form.unitTypeName" placeholder="请输入类型名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="单位序号" prop="unitOrder">
|
||||||
|
<el-input v-model="form.unitOrder" placeholder="请输入单位序号" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||||
|
<el-button @click="cancel">取 消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { listConvert, getConvert, delConvert, addConvert, updateConvert } from "@/api/system/convert"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Convert",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
// 选中数组
|
||||||
|
ids: [],
|
||||||
|
// 非单个禁用
|
||||||
|
single: true,
|
||||||
|
// 非多个禁用
|
||||||
|
multiple: true,
|
||||||
|
// 显示搜索条件
|
||||||
|
showSearch: true,
|
||||||
|
// 总条数
|
||||||
|
total: 0,
|
||||||
|
// 【请填写功能名称】表格数据
|
||||||
|
convertList: [],
|
||||||
|
// 弹出层标题
|
||||||
|
title: "",
|
||||||
|
// 是否显示弹出层
|
||||||
|
open: false,
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
unitType: null,
|
||||||
|
unitName: null,
|
||||||
|
baseUnit: null,
|
||||||
|
conversionFactor: null,
|
||||||
|
unitTypeName: null,
|
||||||
|
status: null,
|
||||||
|
unitOrder: null
|
||||||
|
},
|
||||||
|
// 表单参数
|
||||||
|
form: {},
|
||||||
|
// 表单校验
|
||||||
|
rules: {
|
||||||
|
unitType: [
|
||||||
|
{ required: true, message: "单位类型不能为空", trigger: "change" }
|
||||||
|
],
|
||||||
|
unitName: [
|
||||||
|
{ required: true, message: "单位名称不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
unitTypeName: [
|
||||||
|
{ required: true, message: "类型名称不能为空", trigger: "blur" }
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 查询【请填写功能名称】列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
listConvert(this.queryParams).then(response => {
|
||||||
|
this.convertList = response.rows
|
||||||
|
this.total = response.total
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.open = false
|
||||||
|
this.reset()
|
||||||
|
},
|
||||||
|
// 表单重置
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
id: null,
|
||||||
|
unitType: null,
|
||||||
|
unitName: null,
|
||||||
|
baseUnit: null,
|
||||||
|
conversionFactor: null,
|
||||||
|
unitTypeName: null,
|
||||||
|
status: null,
|
||||||
|
unitOrder: null
|
||||||
|
}
|
||||||
|
this.resetForm("form")
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
resetQuery() {
|
||||||
|
this.resetForm("queryForm")
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
// 多选框选中数据
|
||||||
|
handleSelectionChange(selection) {
|
||||||
|
this.ids = selection.map(item => item.id)
|
||||||
|
this.single = selection.length!==1
|
||||||
|
this.multiple = !selection.length
|
||||||
|
},
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.reset()
|
||||||
|
this.open = true
|
||||||
|
this.title = "添加【请填写功能名称】"
|
||||||
|
},
|
||||||
|
/** 修改按钮操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.reset()
|
||||||
|
const id = row.id || this.ids
|
||||||
|
getConvert(id).then(response => {
|
||||||
|
this.form = response.data
|
||||||
|
this.open = true
|
||||||
|
this.title = "修改【请填写功能名称】"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 提交按钮 */
|
||||||
|
submitForm() {
|
||||||
|
this.$refs["form"].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.form.id != null) {
|
||||||
|
updateConvert(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("修改成功")
|
||||||
|
this.open = false
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
addConvert(this.form).then(response => {
|
||||||
|
this.$modal.msgSuccess("新增成功")
|
||||||
|
this.open = false
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
const ids = row.id || this.ids
|
||||||
|
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
|
||||||
|
return delConvert(ids)
|
||||||
|
}).then(() => {
|
||||||
|
this.getList()
|
||||||
|
this.$modal.msgSuccess("删除成功")
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
handleExport() {
|
||||||
|
this.download('system/convert/export', {
|
||||||
|
...this.queryParams
|
||||||
|
}, `convert_${new Date().getTime()}.xlsx`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user