<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>
|
</template>
|
|
<script setup name="">
|
import { ref, reactive, onMounted } from 'vue';
|
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
|
import { useRoute, useRouter } from 'vue-router';
|
const route = useRoute();
|
const router = useRouter();
|
const dialogVisible = ref(false);
|
let state = reactive({
|
m_formData: {
|
ProductModel: '',
|
ProductType: '',
|
RecordNumber: ''
|
},
|
m_tableData: [],
|
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"
|
}
|
})
|
|
onMounted(() => {
|
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 = () => {
|
|
}
|
const handleCurrentChange = () => {
|
|
}
|
</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;
|
|
.flag-search-content {
|
width: 100%;
|
// height: calc(100% - 86px);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
|
.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;
|
|
span {
|
color: #fff;
|
font-size: 36px;
|
}
|
}
|
|
.w-180-px {
|
width: 180px;
|
}
|
|
.table-detail-span {
|
color: #1592fc;
|
cursor: pointer;
|
}
|
|
.huoquliebiao {}
|
|
:deep(.el-card) {
|
width: 100%;
|
}
|
|
:deep(.el-card__body) {
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
|
:deep(.el-table) {
|
font-size: 12px;
|
}
|
|
:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
|
border-bottom: 1px solid #dfe6ec;
|
}
|
|
:deep(.el-table--border .el-table__cell) {
|
border-right: 1px solid #dfe6ec;
|
}
|
|
:deep(.table-header-cell-style) {
|
color: #000;
|
font-weight: bold;
|
font-size: 13px;
|
background-color: #f3f1f1 !important;
|
}
|
</style>
|
