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

修改参数绑定一个，优化界面，适应手机浏览器

Browse Source
This commit is contained in:
廖德云 2025-03-03 22:34:50 +08:00
parent b911a5069a
commit c16280a4ec
6 changed files with 172 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -235,9 +235,31 @@ export default {
<style scoped>
.component-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
margin-bottom: -5px;
gap: 10px; /* 设置表单项之间的间距 */
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 移动端优化补充 */
@media (max-width: 768px) {
/* 手机端强制单列布局 */
/* grid-template-columns: 1fr; */
/* 防止内容溢出 */
overflow-x: hidden;
/* 移动端缩小间距 */
gap: 2px;
/* 表单项最小高度保障 */
grid-auto-rows: minmax(40px, auto);
}
/* 子元素弹性处理 */
> * {
min-width: 0; /* 允许内容收缩 */
overflow: hidden;
text-overflow: ellipsis;
}
}
.total-input >>> .el-input__inner {

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

@ -318,7 +318,30 @@ export default {
}
.flex-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
gap: 10px; /* 设置表单项之间的间距 */
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 移动端优化补充 */
@media (max-width: 768px) {
/* 手机端强制单列布局 */
/* grid-template-columns: 1fr; */
/* 防止内容溢出 */
overflow-x: hidden;
/* 移动端缩小间距 */
gap: 2px;
/* 表单项最小高度保障 */
grid-auto-rows: minmax(40px, auto);
}
/* 子元素弹性处理 */
> * {
min-width: 0; /* 允许内容收缩 */
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

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

@ -325,27 +325,44 @@ export default {
data() {
return {
selectWidth: 0, //下拉选择组件的宽度
meterPar: _.cloneDeep(this.value)
meterPar: _.cloneDeep(this.value),
isUpdating: false //避免循环更新标志
};
},
watch: {
// 新增对meterPar的深度监听
meterPar: {
deep: true,
handler(newVal) {
// 比较新旧值避免循环
if (!_.isEqual(newVal, this.value)) {
console.log('Emit to parent', newVal);
this.$emit('input', _.cloneDeep(newVal));
}
}
},
elFormWidth: {
deep: true,
handler(newVal) {
this.selectWidth = newVal;
}
},
// 修改后的watch配置
value: {
deep: true,
handler(newVal) {
console.log('-------------------', newVal, newVal.dMeterType);
this.meterPar = _.cloneDeep(newVal);
// 强制类型转换（如果必要）
this.meterPar.dMeterType = String(this.meterPar.dMeterType);
}
handler(newVal, oldVal) {
// 深度比较避免不必要的更新
if (!_.isEqual(newVal, this.meterPar)) {
console.log('Update from parent', newVal);
this.meterPar = _.cloneDeep({
...newVal,
dMeterType: String(newVal.dMeterType) // 强制类型转换
});
}
},
methods: {}
immediate: true
}
}
};
</script>
@ -356,7 +373,30 @@ export default {
}
.flex-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
gap: 10px; /* 设置表单项之间的间距 */
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 移动端优化补充 */
@media (max-width: 768px) {
/* 手机端强制单列布局 */
/* grid-template-columns: 1fr; */
/* 防止内容溢出 */
overflow-x: hidden;
/* 移动端缩小间距 */
gap: 2px;
/* 表单项最小高度保障 */
grid-auto-rows: minmax(40px, auto);
}
/* 子元素弹性处理 */
> * {
min-width: 0; /* 允许内容收缩 */
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

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

@ -1,37 +1,7 @@
<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="求渐近速度系数 E" prop="dE">
<el-input class="el-input" readonly v-model="meterResult.dE" placeholder=" " />
</el-form-item>
<el-form-item label="求相对密度系数 FG" prop="dFG">
<el-input readonly v-model="meterResult.dFG" placeholder=" " />
</el-form-item>
<el-form-item label="求流动温度系数 FT" prop="dFT">
<el-input readonly v-model="meterResult.dFT" placeholder="" />
</el-form-item>
<el-form-item label="求动力粘度dlnd" prop="dDViscosity">
<el-input readonly v-model="meterResult.dDViscosity" placeholder="" />
</el-form-item>
<el-form-item label="求可膨胀系数" prop="dDExpCoefficient">
<el-input readonly v-model="meterResult.dDExpCoefficient" placeholder="" />
</el-form-item>
<el-form-item label="管道雷诺数" prop="dRnPipe">
<el-input readonly v-model="meterResult.dRnPipe" placeholder="" />
</el-form-item>
<el-form-item label="孔板锐利度系数Bk" prop="dBk">
<el-input readonly v-model="meterResult.dBk" placeholder="" />
</el-form-item>
<el-form-item label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
<el-input readonly v-model="meterResult.dRoughNessPipe" placeholder="" />
</el-form-item>
<el-form-item label="修正后的流出系数" prop="dCdCorrect">
<el-input readonly v-model="meterResult.dCdCorrect" placeholder="" />
</el-form-item>
<el-form-item label="喷嘴的流出系数" prop="dCdNozell">
<el-input readonly v-model="meterResult.dCdNozell" placeholder="" />
</el-form-item>
<el-form-item label="标况体积流量m³/s" prop="dVFlowb">
<el-form-item :style="{ width: selectWidth + 'px' }" label="标况体积流量m³/s" prop="dVFlowb">
<unit-converter
v-model="meterResult.dVFlowb"
:unit-type="'volumeflow'"
@ -75,7 +45,33 @@
:input-disable="true"
/>
</el-form-item>
<el-form-item label="管道内天然气流速" prop="dVelocityFlow">
<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'"
@ -86,7 +82,7 @@
:width="selectWidth"
/>
</el-form-item>
<el-form-item label="压力损失" prop="dPressLost">
<el-form-item v-if="dMeterType === '0'" label="压力损失" prop="dPressLost">
<unit-converter
v-model="meterResult.dPressLost"
:unit-type="'pressure'"
@ -97,12 +93,18 @@
:width="selectWidth"
/>
</el-form-item>
<el-form-item label="直径比" prop="dBeta">
<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 label="等熵指数" prop="dKappa">
<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>
@ -147,6 +149,10 @@ export default {
elFormWidth: {
type: Number,
default: 180
},
dMeterType: {
type: String,
default: '0'
}
},
mounted() {
@ -225,7 +231,30 @@ export default {
}
.flex-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
gap: 10px; /* 设置表单项之间的间距 */
/* 优化后的自适应规则 */
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: 5px;
/* 移动端优化补充 */
@media (max-width: 768px) {
/* 手机端强制单列布局 */
/* grid-template-columns: 1fr; */
/* 防止内容溢出 */
overflow-x: hidden;
/* 移动端缩小间距 */
gap: 2px;
/* 表单项最小高度保障 */
grid-auto-rows: minmax(40px, auto);
}
/* 子元素弹性处理 */
> * {
min-width: 0; /* 允许内容收缩 */
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>

2
src/views/index.vue
View File

@ -51,7 +51,7 @@
</div>
<!-- 底部区域 -->
<div class="bottom">
<p style="color: blue; font-size: 14px">妍杰丽云工作室版权所有 &copy; ----- 基于若依管理框架系统 V3.8.9</p>
<p style="color: blue; font-size: 14px">妍杰丽云工作室 ----- 基于若依管理框架系统 V3.8.9&copy;</p>
</div>
</div>
</template>

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

@ -14,7 +14,7 @@
<ngComponents v-model="parentMeterPar.dngComponents" :el-form-width="elFormItemWidthmin" />
</el-tab-pane>
<el-tab-pane label="计算结果" name="meterresult">
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" v-model:meterResult="parentMeterResult" :el-form-width="elFormItemWidthmin" />
<meterResult v-if="['0', '1', '2', '3'].includes(dMeterType)" :d-meter-type="dMeterType" v-model:meterResult="parentMeterResult" :el-form-width="elFormItemWidth" />
<n-g-result v-if="['4', '5', '6', '7'].includes(dMeterType)" :d-meter-type="dMeterType" v-model:NGResult="parentNGResult" :el-form-width="elFormItemWidthmin"></n-g-result>
</el-tab-pane>
</el-tabs>
@ -42,8 +42,8 @@ export default {
data() {
return {
btnText: '',
elFormItemWidth: 200,
elFormItemWidthmin: 180,
elFormItemWidth: 160,
elFormItemWidthmin: 140,
activeTab: 'meterpar',
isShowMessage: false,
message: '',