修改首页

tanghaolin

2025-04-17 6716b2a7ecc3ce3745c17f8361c781abd63d40d7

 src/views/GB19762-2025.vue

@@ -11,39 +11,28 @@
         </div>
         <!-- 顶部分类菜单 -->
         <div class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px">
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px; padding-left: 20px">
               <div class="flex items-center">
                  <span class="text-gray-500">离心泵类型：</span>
                  <div class="flex flex-1 flex-wrap">
                     <span
                        v-for="item in pumptype"
                        class="ant-tag !px-2"
                        :class="pumpSelect === item.id ? 'ant-tag-checked' : ''"
                        :key="item.id"
                     <span v-for="item in pumptype" class="ant-tag !px-2"
                        :class="pumpSelect === item.id ? 'ant-tag-checked' : ''" :key="item.id"
                        @click="changeSelectPumpType(item.id)"
                        :type="pumpSelect === item.id ? 'primary' : 'default'"
                        size="small"
                     >
                        :type="pumpSelect === item.id ? 'primary' : 'default'" size="small">
                        {{ item.name }}
                     </span>
                  </div>
               </div>
            </div>
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px; padding-left: 20px">
               <div class="flex items-center">
                  <span class="text-gray-500">水泵类型：</span>
                  <div class="flex flex-1 flex-wrap">
                     <span
                        v-for="item in type.filter((c) => {
                           return c.pumpid == pumpSelect;
                        })"
                        class="ant-tag !px-2"
                        :class="typeSelect === item.tag ? 'ant-tag-checked' : ''"
                        :key="item.tag"
                        @click="changeSelectType(item.tag)"
                        :type="typeSelect === item.tag ? 'primary' : 'default'"
                        size="small"
                     >
                     <span v-for="item in type.filter((c) => {
                        return c.pumpid == pumpSelect;
                     })" class="ant-tag !px-2" :class="typeSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag"
                        @click="changeSelectType(item.tag)" :type="typeSelect === item.tag ? 'primary' : 'default'"
                        size="small">
                        {{ item.name }}
                     </span>
                  </div>
@@ -56,7 +45,8 @@
                     <!-- <span class="text-gray-500">最高效率点流量(m³/h)：</span> -->
                     <div class="flex flex-1">
                        <el-form-item prop="MaxFlow" label="最高效率点流量(m³/h)">
                           <el-input v-model="form.MaxFlow" placeholder="请输入最高效率点流量" class="!w-[300px]" clearable> </el-input>
                           <el-input v-model="form.MaxFlow" placeholder="请输入最高效率点流量" class="!w-[300px]" clearable>
                           </el-input>
                        </el-form-item>
                     </div>
                  </div>
@@ -67,7 +57,8 @@
                     <!-- <span class="text-gray-500">最高效率点扬程(m)：</span> -->
                     <div class="flex flex-1">
                        <el-form-item prop="MaxHead" label="最高效率点扬程(m)">
                           <el-input v-model="form.MaxHead" placeholder="请输入最高效率点扬程" class="!w-[300px]" clearable> </el-input>
                           <el-input v-model="form.MaxHead" placeholder="请输入最高效率点扬程" class="!w-[300px]" clearable>
                           </el-input>
                        </el-form-item>
                     </div>
                  </div>
@@ -78,7 +69,20 @@
                     <!-- <span class="text-gray-500">水泵转速(r/min)：</span> -->
                     <div class="flex flex-1">
                        <el-form-item prop="Speed" label="水泵转速(r/min)">
                           <el-input v-model="form.Speed" placeholder="请输入水泵转速" class="!w-[300px]" clearable> </el-input>
                           <el-input v-model="form.Speed" placeholder="请输入水泵转速" class="!w-[300px]" clearable>
                           </el-input>
                        </el-form-item>
                     </div>
                  </div>
               </div>
               <!-- 叶轮数量 -->
               <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
                  <div class="flex items-center">
                     <!-- <span class="text-gray-500">叶轮数量：</span> -->
                     <div class="flex flex-1">
                        <el-form-item prop="ImpellerNumber" label="叶轮数量">
                           <el-input v-model="form.ImpellerNumber" placeholder="请输入叶轮数量" class="!w-[300px]"
                              clearable> </el-input>
                        </el-form-item>
                     </div>
                  </div>
@@ -89,26 +93,43 @@
                     <!-- <span class="text-gray-500" style="color:blue">水泵效率(%)：</span> -->
                     <div class="flex flex-1">
                        <el-form-item prop="Efficiency" label="水泵效率(%)">
                           <el-input v-model="form.Efficiency" placeholder="请输入效率" class="!w-[300px]" clearable> </el-input>
                           <template #label>
                              <lable class="text-gray-500" style="color: blue">水泵效率(%)：</lable>
                           </template>
                           <el-input v-model="form.Efficiency" placeholder="请输入效率" class="!w-[300px]" clearable>
                           </el-input>
                        </el-form-item>
                     </div>
                  </div>
               </div>
            </el-form>
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <el-button type="primary" @click="Calc">计算</el-button>
                  <el-button @click="clear" type="info">清空</el-button>
                  <span style="margin-left: 85px">参考国标文件：</span>
                  <span style="color: dodgerblue; cursor: pointer; font-weight: bold">
                     <a :href="`${SERVE_URL}files/pdf/GB19762-2025.pdf`" target="_blank"> 离心泵能效限定值及能效等级 GB+19762-2025</a>
                  </span>

            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="position: relative; padding: 10px">
               <label class="warn-info-text"><el-icon>
                     <Warning />
                  </el-icon>国标于2026年3月1日开始实施</label>
               <div class="flex items-end">
                  <div>
                     <el-button type="primary" @click="Calc">计算</el-button>
                     <el-button @click="clear" type="info">清空</el-button>
                  </div>
                  <div class="flex">
                     <div>
                        <span style="margin-left: 85px">参考国标文件：</span>
                        <span style="color: dodgerblue; cursor: pointer; font-weight: bold">
                           <a :href="`${SERVE_URL}files/pdf/GB19762-2025.pdf`" target="_blank"> 离心泵能效限定值及能效等级
                              GB+19762-2025</a>
                        </span>
                     </div>

                  </div>
               </div>
            </div>
         </div>

         <div class="grid" style="padding: 15px 10px; min-height: 30px">
            <img v-if="level > -1" style="width: 78px; height: 30px" :src="getImgUrl()" /><span v-if="level > -1">{{ calcResult }}</span>
            <img v-if="level > -1" style="width: 78px; height: 30px" :src="getImgUrl()" /><span v-if="level > -1">{{
               calcResult }}</span>
            <!-- <span v-if="level == 0">未计算出能效等级，请检查输入数据!</span> -->
         </div>
      </div>
@@ -282,6 +303,7 @@
      MaxFlow: '',
      MaxHead: '',
      Speed: '',
      ImpellerNumber: 1,
      Efficiency: '',
   };
   typeSelect.value = 1;
@@ -363,11 +385,11 @@
         8.73 * Math.log(form.value.MaxFlow) -
         cv[0].c3;
   }
   let level = GetEnergyLevel(c1V, c2V, c3V);
   let level = GetEnergyLevel(c1V, c2V, c3V, speedrate);
   //calcResult.value = level;
};

const GetEnergyLevel = (c1V: number, c2V: number, c3V: number) => {
const GetEnergyLevel = (c1V: number, c2V: number, c3V: number, speedrate: number) => {
   let levelDic = [
      { level: 1, min: c1V, max: 100 },
      { level: 2, min: c2V, max: c1V },
@@ -380,7 +402,7 @@
      }
   }
   calcResult.value =
      '计算结果：1级效率值 ' + c1V.toFixed(2) + '%，2级效率值 ' + c2V.toFixed(2) + '%，3级效率值 ' + c3V.toFixed(2) + '%';
      '计算结果：比转速：' + speedrate.toFixed(2) + '，1级效率值 ' + c1V.toFixed(2) + '%，2级效率值 ' + c2V.toFixed(2) + '%，3级效率值 ' + c3V.toFixed(2) + '%';

   level.value = levelV;
   return levelV;
@@ -451,7 +473,7 @@
   c1V = oV + cv[0].c1;
   c2V = oV + cv[0].c2;
   c3V = oV + cv[0].c3;
   let level = GetEnergyLevel(c1V, c2V, c3V);
   let level = GetEnergyLevel(c1V, c2V, c3V, speedrate);
   //calcResult.value = level;
};

@@ -459,7 +481,7 @@
const SpeedRate = (speed: number, q: number, h: number, issingle: boolean, isdouble: boolean) => {
   let singleV = 1;
   let doubleV = 1;
   if (!issingle) singleV = 5;
   if (!issingle) singleV = form.value.ImpellerNumber;
   if (isdouble) doubleV = 2;
   return (3.65 * speed * Math.pow(q / 3600 / doubleV, 0.5)) / Math.pow(h / singleV, 0.75);
};
@@ -478,10 +500,6 @@
// 选中状态
const typeSelect = ref(1);
const pumpSelect = ref(1);
const MaxFlow = ref(null);
const MaxHead = ref(null);
const Speed = ref(null);
const Efficiency = ref(null);
const calcResult = ref(null);
const level = ref(-1);

@@ -491,11 +509,13 @@
   MaxHead: null,
   Speed: null,
   Efficiency: null,
   ImpellerNumber:1,
});
const rules = ref({
   MaxFlow: [{ required: true, message: '请输入最高效率点流量' }],
   MaxHead: [{ required: true, message: '请输入最高效率点扬程' }],
   Speed: [{ required: true, message: '请输入水泵转速' }],
   ImpellerNumber:[{ required: true, message: '请输入叶轮数量' }],
   Efficiency: [{ required: true, validator: validateEfficiency }],
});
//监听类型选择筛选
@@ -580,12 +600,29 @@
.ant-tag-checked:hover {
   color: #fff;
}

.flex-wrap {
   flex-wrap: wrap;
}

.warn-info-text {
   position: absolute;
   top: 4px;
   left: 217px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
   color: #bfb5b5;
   padding: unset;
   padding-left: 10px;
}

:deep(.el-form-item__label) {
   justify-content: flex-start;
   color: #303133;
}

:deep(.el-form-item) {
   margin-bottom: 0;
}