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

src/components/NGTools/NGCom.vue

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

src/components/NGTools/NGResult.vue

@@ -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: 10px;
+
+  /* 移动端优化补充 */
+  @media (max-width: 768px) {
+    /* 手机端强制单列布局 */
+    grid-template-columns: 1fr;
+
+    /* 防止内容溢出 */
+    overflow-x: hidden;
+
+    /* 移动端缩小间距 */
+    gap: 5px;
+
+    /* 表单项最小高度保障 */
+    grid-auto-rows: minmax(40px, auto);
+  }
+
+  /* 子元素弹性处理 */
+  > * {
+    min-width: 0; /* 允许内容收缩 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>

src/components/NGTools/meterPar.vue

@@ -114,7 +114,7 @@
         <el-input v-model="meterPar.dCd" placeholder="请输入流出系数 " clearable />
       </el-form-item>
       <!-- <el-form-item :style="{ width: selectWidth + 'px' }"    label="流出系数计算方法" prop="dCdCalMethod">
-        <el-select v-model="meterPar.dCdCalMethod" placeholder="请选择流出系数计算方法 " clearable >
+        <el-select  v-model="meterPar.dCdCalMethod" placeholder="请选择流出系数计算方法 " clearable >
           <el-option  v-for="dict in dict.type.ngtools_lcxsjsff" :key="dict.value" :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item > -->
@@ -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) {
+      handler(newVal, oldVal) {
-        console.log('-------------------', newVal, newVal.dMeterType);
+        // 深度比较避免不必要的更新
-        this.meterPar = _.cloneDeep(newVal);
+        if (!_.isEqual(newVal, this.meterPar)) {
-        // 强制类型转换（如果必要）
+          console.log('Update from parent', newVal);
-        this.meterPar.dMeterType = String(this.meterPar.dMeterType);
+          this.meterPar = _.cloneDeep({
-      }
+            ...newVal,
+            dMeterType: String(newVal.dMeterType) // 强制类型转换
+          });
+        }
+      },
+      immediate: true
     }
-  },
+  }
-  methods: {}
 };
 </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: 10px;
+
+  /* 移动端优化补充 */
+  @media (max-width: 768px) {
+    /* 手机端强制单列布局 */
+    grid-template-columns: 1fr;
+
+    /* 防止内容溢出 */
+    overflow-x: hidden;
+
+    /* 移动端缩小间距 */
+    gap: 5px;
+
+    /* 表单项最小高度保障 */
+    grid-auto-rows: minmax(40px, auto);
+  }
+
+  /* 子元素弹性处理 */
+  > * {
+    min-width: 0; /* 允许内容收缩 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>

src/components/NGTools/meterResult.vue

@@ -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-form-item :style="{ width: selectWidth + 'px' }" label="标况体积流量m³/s" prop="dVFlowb">
-        <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">
         <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: 10px;
+
+  /* 移动端优化补充 */
+  @media (max-width: 768px) {
+    /* 手机端强制单列布局 */
+    grid-template-columns: 1fr;
+
+    /* 防止内容溢出 */
+    overflow-x: hidden;
+
+    /* 移动端缩小间距 */
+    gap: 5px;
+
+    /* 表单项最小高度保障 */
+    grid-auto-rows: minmax(40px, auto);
+  }
+
+  /* 子元素弹性处理 */
+  > * {
+    min-width: 0; /* 允许内容收缩 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>

src/views/index.vue

@@ -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>

src/views/ngtools/FlowCal/index.vue

@@ -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,
+      elFormItemWidth: 160,
-      elFormItemWidthmin: 180,
+      elFormItemWidthmin: 140,
       activeTab: 'meterpar',
       isShowMessage: false,
       message: '',