修改能效标识查询页面

tanghaolin

2025-02-13 a009c0021cd72a2c7379b7b04eacd694e0cb98f2

修改能效标识查询页面

 public/static/EecProductData/CompanyData.json

@@ -1,6 +1,6 @@
[
  {
    "CompanyId": "2cfd8af2-15d7-47c8-af88-b77266cad36b",
    "CompanyId": "1",
    "CompanyAllName": "上海中韩杜科泵业制造有限公司",
    "CompanyAbbName": "上海中韩",
    "Type": [
@@ -8,7 +8,7 @@
    ]
  },
  {
    "CompanyId": "0ef4c9a0-14ae-4228-8b99-337dfdaa0cbf",
    "CompanyId": "2",
    "CompanyAllName": "上海斯可洛压缩机有限公司",
    "CompanyAbbName": "斯可洛",
    "Type": [
@@ -16,7 +16,7 @@
    ]
  },
  {
    "CompanyId": "d95c2b35-96e3-43cd-90b4-f7fb2ca2bc79",
    "CompanyId": "3",
    "CompanyAllName": "上海德惠特种风机厂",
    "CompanyAbbName": "上海德惠",
    "Type": [
@@ -24,7 +24,7 @@
    ]
  },
  {
    "CompanyId": "f1c5c03b-36a3-4878-a47e-3b89eec33f04",
    "CompanyId": "4",
    "CompanyAllName": "克莱门特",
    "CompanyAbbName": "克莱门特",
    "Type": [
@@ -32,7 +32,7 @@
    ]
  },
  {
    "CompanyId": "50cce396-e793-42cb-b9b5-e4b25a125ff0",
    "CompanyId": "5",
    "CompanyAllName": "上海上力防爆电机公司",
    "CompanyAbbName": "上海上力",
    "Type": [

 src/views/EecLabel.vue

@@ -1,302 +1,351 @@
<template>
    <div class="flag-search-div">
        <div class="top">
            <span>能效标识查询</span>
        </div>
        <div class="flag-search-content">
            <el-card class="w100 h100" shadow="never">
                <el-form size="medium" style="height: 56px; flex-shrink: 0;" :model="state.m_formData" ref="ruleFormRef"
                    inline="true" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="产品型号" prop="ProductModel">
                        <el-input class="w-180-px" v-model="state.m_formData.ProductModel"></el-input>
                    </el-form-item>
                    <el-form-item label="产品类型" prop="ProductType">
                        <el-input class="w-180-px" v-model="state.m_formData.ProductType"
                            placeholder="请输入产品类型"></el-input>
                    </el-form-item>
                    <el-form-item label="备案号" prop="RecordNumber">
                        <el-input class="w-180-px" v-model="state.m_formData.RecordNumber"
                            placeholder="请输入备案号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="onSubmit">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="w100" style="flex: 1; display: flex; height: calc(100% - 56px); flex-direction: column;">
                    <el-table class="w100" :data="state.m_tableData" style="width: 100%" border
                        header-cell-class-name="table-header-cell-style">
                        <el-table-column prop="ProductType" label="产品类型" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="ProductModel" label="产品型号" align="center" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="RecordNumber" label="备案号" align="center">
                        </el-table-column>
                        <el-table-column prop="EecGrade" label="能效等级" align="center">
                        </el-table-column>
                        <el-table-column prop="RecordType" label="备案类型" align="center">
                        </el-table-column>
                        <el-table-column prop="NoticeDate" label="公告时间" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="80px">
                            <template #default="scope">
                                <span class="table-detail-span">详细</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="w100" style="display: flex; justify-content: flex-end; height: 40px; flex-shrink: 0;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="state.m_paginationConfig.currentPage" :page-sizes="[10, 20, 30, 40]"
                            :page-size="state.m_paginationConfig.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="state.m_tableData.length" />
                    </div>
                </div>
            </el-card>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" width="500">
            <el-form size="medium" :model="state.m_detailDialogInfo">
                <el-form-item label="备案号" prop="RecordNumber">
                    <el-input class="w-180-px" v-model="state.m_formData.RecordNumber" placeholder="请输入备案号"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div class="flag-search-div">
        <div class="top">
            <span>能效标识查询</span>
        </div>
        <div class="flag-search-content">
            <el-card class="w100 h100" shadow="never">
                <el-form
                    style="height: 56px; flex-shrink: 0"
                    :model="state.m_formData"
                    ref="ruleFormRef"
                    :inline="true"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="产品类型" prop="ProductType">
                        <el-select
                            class="w-180-px"
                            v-model="state.m_formData.ProductType"
                            placeholder="请选择产品类型"
                            @change="changeProductType"
                        >
                            <el-option v-for="item in state.type" :key="item.tag" :value="item.tag" :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号" prop="ProductModel">
                        <el-input class="w-180-px" v-model="state.m_formData.ProductModel" placeholder="请输入产品型号"></el-input>
                    </el-form-item>

                    <el-form-item label="备案号" prop="RecordNumber">
                        <el-input class="w-180-px" v-model="state.m_formData.RecordNumber" placeholder="请输入备案号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="initData">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" @click="resertForm">重置</el-button>
                    </el-form-item>
                </el-form>
                <div
                    class="w100"
                    style="flex: 1; display: flex; height: calc(100% - 56px); flex-direction: column"
                    v-loading="state.m_PageLoading"
                >
                    <el-table
                        class="w100"
                        :data="state.m_dispTableData"
                        style="width: 100%"
                        border
                        header-cell-class-name="table-header-cell-style"
                    >
                        <el-table-column prop="TableIndex" label="序号" align="center" width="60"> </el-table-column>
                        <el-table-column prop="ModelType" label="产品类型" align="center" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="Model" label="产品型号" align="center" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="RecordNumber" label="备案号" align="center" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="EnergyEfficiencyClass" label="能效等级" align="center" width="80"> </el-table-column>
                        <el-table-column prop="RecordTime" label="备案时间" align="center"> </el-table-column>
                        <el-table-column prop="CompanyName" label="厂商" align="center" show-overflow-tooltip> </el-table-column>
                        <el-table-column label="操作" align="center" width="80px">
                            <template #default="scope">
                                <span class="table-detail-span" @click="clickDetail(scope.row)">详细</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="w100" style="display: flex; justify-content: flex-end; height: 40px; flex-shrink: 0">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :background="true"
                            :current-page="state.m_paginationConfig.currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="state.m_paginationConfig.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="state.filterProductData.length"
                        />
                    </div>
                </div>
            </el-card>
        </div>
        <el-dialog v-model="dialogVisible" title="详细" width="500">
            <el-form :model="state.m_detailDialogInfo" label-width="120px">
                <el-form-item label="产品类型" prop="ModelType">
                    <span>{{ state.m_detailDialogInfo.ModelType }}</span>
                </el-form-item>
                <el-form-item label="产品型号" prop="Model">
                    <span>{{ state.m_detailDialogInfo.Model }}</span>
                </el-form-item>
                <el-form-item label="生产厂商" prop="CompanyName">
                    <span>{{ state.m_detailDialogInfo.CompanyName }}</span>
                </el-form-item>
                <el-form-item label="能效等级" prop="EnergyEfficiencyClass">
                    <span>{{ state.m_detailDialogInfo.EnergyEfficiencyClass }}</span>
                </el-form-item>
                <el-form-item label="备案号" prop="RecordNumber">
                    <span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
                </el-form-item>
                <el-form-item label="备案时间" prop="RecordTime">
                    <span>{{ state.m_detailDialogInfo.RecordTime }}</span>
                </el-form-item>
                <el-form-item label="依据国家标准" prop="RecordNumber">
                    <span></span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="">
<script setup lang="ts" name="EecLabel">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { el } from 'element-plus/es/locale';
const route = useRoute();
const router = useRouter();
const dialogVisible = ref(false);
let state = reactive({
    m_formData: {
        ProductModel: '',
        ProductType: '',
        RecordNumber: ''
    },
    m_tableData: [],
    m_dispTableData: [],
    m_formData: {
        ProductModel: '',
        ProductType: 1,
        RecordNumber: '',
    },
    allEecProduct: [],
    filterProductData: [],
    m_dispTableData: [],

    m_paginationConfig: {
        currentPage: 1,
        pageSize: 10,
    },
    m_detailDialogInfo: {
        id: 633881725577,
        ProductType: "电力变压器 2024版",
        ProductModel: "SFP22-1170000/500-NX1",
        registrationNumber: "20250212-CEL0202024-485225",
        EecGrade: "1",
        NoticeDate: "2025-02-12",
        registrationType: "0",
        ProductTypeCode: "80"
    }
})
    m_paginationConfig: {
        currentPage: 1,
        pageSize: 10,
    },
    m_detailDialogInfo: {
        ModelType: '',
        Model: '',
        CompanyName: '',
        EnergyEfficiencyClass: '',
        RecordTime: '',
        RecordNumber: '',
    },
    typeSelect: 1,
    // 分类选项
    type: [
        { name: '泵', tag: 1 },
        { name: '容积式空压机', tag: 2 },
        { name: '通风机', tag: 3 },
        { name: '冷水机组', tag: 4 },
        { name: '电力变压器', tag: 5 },
        { name: '工业锅炉', tag: 6 },
        { name: '电机', tag: 7 },
    ],
    m_PageLoading: false,
});

const m_RequestDataObj = {
    1: { requestPath: 'static/EecProductData/Pump.json' },
    2: { requestPath: 'static/EecProductData/AirCompressor.json' },
    3: { requestPath: 'static/EecProductData/Fan.json' },
    4: { requestPath: 'static/EecProductData/WaterChiller.json' },
    5: { requestPath: 'static/EecProductData/PowerTransformer.json' },
    6: { requestPath: 'static/EecProductData/IndustrialBoiler.json' },
    7: { requestPath: 'static/EecProductData/ElectricMachinery.json' },
};

onMounted(() => {
    initData();
})
    initData();
});
const initData = () => {
    let tableData = [
        {
            "id": 633881725577,
            "ProductType": "电力变压器 2024版",
            "ProductModel": "SFP22-1170000/500-NX1",
            "registrationNumber": "20250212-CEL0202024-485225",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "80"
        },
        {
            "id": 633881725570,
            "ProductType": "家用电冰箱 2015版",
            "ProductModel": "BCD-539WSP9BH",
            "registrationNumber": "20250212-CEL0012016-691472",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "81"
        },
        {
            "id": 633881725575,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-B",
            "registrationNumber": "20250212-CEL0302016-508659",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725574,
            "ProductType": "交流电风扇 2021版",
            "ProductModel": "FB-45ZA1 55W 410mm 220V～ 50Hz",
            "registrationNumber": "20250212-CEL0172016-600455",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "28"
        },
        {
            "id": 633881725569,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-XP",
            "registrationNumber": "20250212-CEL0302016-007799",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725562,
            "ProductType": "冷水（热泵）机组 2024版",
            "ProductModel": "TCA201XHE",
            "registrationNumber": "20250212-CEL0082024-798829",
            "EecGrade": "1",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "72"
        },
        {
            "id": 633881725568,
            "ProductType": "电动洗衣机 2013版",
            "ProductModel": "RB30H-228RT",
            "registrationNumber": "20250212-CEL0032016-679576",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "19"
        },
        {
            "id": 633881725565,
            "ProductType": "电动洗衣机 2013版",
            "ProductModel": "RB30-228T",
            "registrationNumber": "20250212-CEL0032016-918442",
            "EecGrade": "3",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "19"
        },
        {
            "id": 633881725564,
            "ProductType": "家用燃气灶具 2014版",
            "ProductModel": "JZY-TXD49-X",
            "registrationNumber": "20250212-CEL0302016-884820",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "1",
            "ProductTypeCode": "25"
        },
        {
            "id": 633881725351,
            "ProductType": "室内照明用LED产品-非定向自镇流LED灯",
            "ProductModel": "ZGL-HYT05-E27-40-01",
            "registrationNumber": "20250212-CEL0342020-503178",
            "EecGrade": "2",
            "NoticeDate": "2025-02-12",
            "registrationType": "0",
            "ProductTypeCode": "78"
        }
    ]
    state.m_tableData = tableData
}
const handleSizeChange = () => {
    state.m_PageLoading = true;
    axios({
        method: 'get',
        url: m_RequestDataObj[state.m_formData.ProductType].requestPath,
    })
        .then((res) => {
            state.m_PageLoading = false;
            let result = res.data;
            let arr = [];
            result.forEach((item: any, index: number) => {
                let node = {
                    TableIndex: index + 1,
                    Id: item.Id,
                    Type: item.Type,
                    ModelType: item.ModelType,
                    Model: item.Model,
                    CompanyName: item.CompanyName,
                    RecordNumber: item.RecordNumber,
                    EnergyEfficiencyClass: item.EnergyEfficiencyClass,
                    RecordTime: item.RecordTime,
                    Price: item.Price,
                    PhysicalPicturePath: '/static/EecProductData/' + item.PhysicalPicturePath,
                    CertificatePath: `/static/EecProductData/${item.CertificatePath}`,
                    Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
                };
                arr.push(node);
            });
            state.allEecProduct = arr;
            filterProduct();
        })
        .catch((err) => {
            state.m_PageLoading = false;
        });
};
const filterProduct = () => {
    state.filterProductData = state.allEecProduct.filter((item) => {
        return item.Type === state.m_formData.ProductType;
    });

}
const handleCurrentChange = () => {

}
    if (state.m_formData.RecordNumber !== '') {
        state.filterProductData = state.filterProductData.filter((item) => {
            return item.RecordNumber.indexOf(state.m_formData.RecordNumber) > -1;
        });
    }
    if (state.m_formData.ProductModel !== '') {
        state.filterProductData = state.filterProductData.filter((item) => {
            return item.Model.indexOf(state.m_formData.ProductModel) > -1;
        });
    }
    state.m_dispTableData = getSelectPageData(state.filterProductData);
};
const handleCurrentChange = (val: number) => {
    state.m_paginationConfig.currentPage = val;
    let allTableData = state.filterProductData;
    let pagingData = getSelectPageData(allTableData);
    state.m_dispTableData = pagingData;
};
const handleSizeChange = (val: number) => {
    state.m_paginationConfig.currentPage = val;
    let allTableData = state.filterProductData;
    let pagingData = getSelectPageData(allTableData);
    state.m_dispTableData = pagingData;
};
const changeProductType = () => {
    initData();
};
const clickDetail = (row: any) => {
    dialogVisible.value = true;
    state.m_detailDialogInfo = row;
};
const resertForm = () => {
    state.m_formData.ProductModel = '';
    state.m_formData.ProductType = 1;
    state.m_formData.RecordNumber = '';
    filterProduct();
};
//获取分页数据
const getSelectPageData = (list: any) => {
    let filterList = list.slice(
        (state.m_paginationConfig.currentPage - 1) * state.m_paginationConfig.pageSize,
        state.m_paginationConfig.currentPage * state.m_paginationConfig.pageSize
    );
    //当前页
    return filterList;
};
</script>

<style lang="scss" scoped>
.flag-search-div {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .flag-search-content {
        width: 100%;
        // height: calc(100% - 86px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .flag-search-content {
        width: 100%;
        // height: calc(100% - 86px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.detail-text {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: 400;
    color: #4a4a4a;
}
.top {
    width: 100%;
    height: 150px;
    background: url(https://www.energylabel.com.cn/static/img/topbackgroundpicture.5b933b83.jpg) no-repeat;
    background-size: 100% 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    background: url(https://www.energylabel.com.cn/static/img/topbackgroundpicture.5b933b83.jpg) no-repeat;
    background-size: 100% 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
        color: #fff;
        font-size: 36px;
    }
    span {
        color: #fff;
        font-size: 36px;
    }
}

.w-180-px {
    width: 180px;
    width: 180px;
}

.table-detail-span {
    color: #1592fc;
    cursor: pointer;
    color: #1592fc;
    cursor: pointer;
}

.huoquliebiao {}
.huoquliebiao {
}

:deep(.el-card) {
    width: 100%;
    width: 100%;
}

:deep(.el-card__body) {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

:deep(.el-table) {
    font-size: 12px;
    font-size: 12px;
}

:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
    border-bottom: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
}

:deep(.el-table--border .el-table__cell) {
    border-right: 1px solid #dfe6ec;
    border-right: 1px solid #dfe6ec;
}

:deep(.table-header-cell-style) {
    color: #000;
    font-weight: bold;
    font-size: 13px;
    background-color: #f3f1f1 !important;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    background-color: #f3f1f1 !important;
}
</style>

:deep(.el-form-item__label) {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: 700;
    color: #474747;
}
</style>

 src/views/IndustrialSoftware.vue

@@ -24,11 +24,10 @@
                    <div class="flex items-center">
                        <span class="text-gray-500">厂商：</span>
                        <div class="flex flex-1">
                            <span v-for="item in factory" :key="item.tag" class="ant-tag !px-4"
                                :class="factorySelect === item.tag ? 'ant-tag-checked' : ''"
                                :type="factorySelect === item.tag ? 'primary' : 'default'"
                                @click="factorySelect = item.tag" size="small">
                                {{ item.name }}
                            <span v-for="item in factory" :key="item.CompanyId" class="ant-tag !px-4"
                                :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''"
                                @click="factorySelect = item.CompanyId" size="small">
                                {{ item.CompanyAbbName }}
                            </span>
                        </div>
                    </div>
@@ -123,7 +122,7 @@

// 选中状态
const typeSelect = ref(1);
const factorySelect = ref('全部');
const factorySelect = ref('-99');
const EecSelect = ref(0);

const EecLevelEnum = {
@@ -162,7 +161,7 @@
const initComanyData = () => {
    axios({
        method: 'get',
        url: m_RequestDataObj[typeSelect.value].requestPath,
        url: 'static/EecProductData/CompanyData.json',
    }).then((res) => {
        let result = res.data;
        factory.value = result.map((item: any) => {
@@ -218,7 +217,7 @@
            return item.EnergyEfficiencyClass === EecSelect.value
        })
    }
    if (factorySelect.value !== '全部') {
    if (factorySelect.value !== '-99') {
        filterProductData.value = filterProductData.value.filter((item) => {
            return item.CompanyName === factorySelect.value
        })