修改计算页布局

tanghaolin

2025-04-02 27dc9bdfc57e09b42922dab7d73117ad1486ceb5

 src/views/GB19762-2025.vue

@@ -3,12 +3,18 @@
    </div> -->
    <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px; padding-top: 15px">
        <div class="w-100 h-100" style="background-color: #fff">
            <div class="mb-6 text-gray-500">
            <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>能效等级计算</el-breadcrumb-item>
            </el-breadcrumb>
         </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="flex items-center">
                        <span class="text-gray-500">离心泵类型：</span>
                        <div class="flex flex-1">
                        <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"
                                @click="changeSelectPumpType(item.id)"
@@ -21,7 +27,7 @@
                <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">
                        <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)"
@@ -73,15 +79,17 @@
                        <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="/src/assets/pdf/GB19762-2025.pdf" target="_blank">
                            <a :href="`${SERVE_URL}files/pdf/GB19762-2025.pdf`" target="_blank">
                                离心泵能效限定值及能效等级 GB+19762-2025</a>
                        </span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-4 gap-4" style="padding: 15px 10px; min-height: 30px">
                <img style="width:78px;height: 30px;" v-if="calcResult != null" :src="getImgUrl()">
            <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>
                <!-- <span v-if="level == 0">未计算出能效等级，请检查输入数据!</span> -->
            </div>
        </div>
    </div>
@@ -90,6 +98,7 @@
import { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { SERVE_URL } from '@/constants';

const router = useRouter();
const route = useRoute();
@@ -202,32 +211,33 @@
    Efficiency.value = '';
    typeSelect.value = 1;
    calcResult.value = null;
    level.value = 0;
}

const getImgUrl = () => {
    return "/src/assets/icons/" + calcResult.value + ".png";
    return `${SERVE_URL}static/img/calc-icons/${level.value}.png`;
}
// 计算
const Calc = () => {

    if (MaxFlow.value == null)
    {
    if (MaxFlow.value == null) {
        ElMessage.error("请输入有效流量数据!");
        return;
    }
    if (MaxHead.value == null)
    {
    if (MaxHead.value == null) {
        ElMessage.error("请输入有效扬程数据!");
        return;
    }
    if (Speed.value == null)
    {
    if (Speed.value == null) {
        ElMessage.error("请输入有效转速数据!");
        return;
    }
    if (Efficiency.value == null)
    {
    if (Efficiency.value == null) {
        ElMessage.error("请输入有效效率数据!");
        return;
    }
    if (Efficiency.value < 0 || Efficiency.value > 100) {
        ElMessage.error("请输入有效效率数据【0-100】!");
        return;
    }

@@ -264,7 +274,7 @@

    }
    let level = GetEnergyLevel(c1V, c2V, c3V);
    calcResult.value = level;
    //calcResult.value = level;
}

const GetEnergyLevel = (c1V: number, c2V: number, c3V: number) => {
@@ -273,13 +283,16 @@
        { level: 2, min: c2V, max: c1V },
        { level: 3, min: c3V, max: c2V }
    ]
    let level = 5;
    let levelV = 0;
    for (const range of levelDic) {
        if (Efficiency.value >= range.min && Efficiency.value <= range.max) {
            level = range.level;
            levelV = range.level;
        }
    }
    return level;
    calcResult.value = "计算结果：1级效率值 " + c1V.toFixed(2) + "%，2级效率值 " + c2V.toFixed(2) + "%，3级效率值 " + c3V.toFixed(2) + "%";

    level.value = levelV;
    return levelV;
}

//石油化工离心泵计算
@@ -330,7 +343,7 @@
    c2V = oV + cv[0].c2;
    c3V = oV + cv[0].c3;
    let level = GetEnergyLevel(c1V, c2V, c3V);
    calcResult.value = level;
    //calcResult.value = level;
}

//issingle: 是否单级,isdouble: 是否双吸
@@ -351,21 +364,14 @@
const Speed = ref(null);
const Efficiency = ref(null);
const calcResult = ref(null);
const level = ref(-1)
//监听类型选择筛选
const changeSelectType = (tag: number) => {
    typeSelect.value = tag;
    MaxFlow.value = 0;
    MaxHead.value = 0;
    Speed.value = 0;
    Efficiency.value = 0;
};
const changeSelectPumpType = (tag: number) => {
    pumpSelect.value = tag;
    typeSelect.value = type.filter((c) => { return c.pumpid == tag })[0].tag;
    MaxFlow.value = 0;
    MaxHead.value = 0;
    Speed.value = 0;
    Efficiency.value = 0;
};
</script>
<style lang="scss" scoped>
@@ -376,6 +382,7 @@
.text-gray-500 {
    display: inline-block;
    width: 150px;
    flex-shrink: 0;
}

.h-100 {
@@ -438,6 +445,9 @@
.ant-tag-checked:hover {
    color: #fff;
}
.flex-wrap {
    flex-wrap: wrap;
}


:deep(.el-button--default) {