<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
|
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
|
:height="470"
|
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" width="120" show-overflow-tooltip> </el-table-column>
|
<el-table-column prop="RecordNumber" label="备案号" align="center" width="140" 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" width="100"> </el-table-column>
|
<el-table-column prop="CompanyName" label="厂商" align="center" show-overflow-tooltip> </el-table-column>
|
<el-table-column label="操作" align="center" width="120px">
|
<template #default="scope">
|
<span class="table-detail-span" @click="clickDetail(scope.row)" style="margin-right: 10px">
|
<svg
|
t="1739499317499"
|
class="detail-icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="27830"
|
width="128"
|
height="128"
|
>
|
<path
|
d="M96.6656 1013.76a88.064 88.064 0 0 1-88.064-88.064V607.1296a38.4 38.4 0 0 1 47.7184-37.2736L502.6816 744.448a40.96 40.96 0 0 0 18.6368 0L967.68 569.856a38.2976 38.2976 0 0 1 46.08 27.8528 36.5568 36.5568 0 0 1 1.2288 9.4208v320.512A86.1184 86.1184 0 0 1 929.28 1013.76z"
|
fill="#C2E3FF"
|
opacity=".64"
|
p-id="27831"
|
></path>
|
<path
|
d="M815.104 14.2336H197.632A88.3712 88.3712 0 0 0 109.3632 102.4v347.3408a72.9088 72.9088 0 0 0 46.6944 68.096L480.1536 643.072a73.728 73.728 0 0 0 52.5312 0l324.096-125.2352a72.9088 72.9088 0 0 0 46.6944-68.096V102.4a88.3712 88.3712 0 0 0-88.3712-88.1664z m-469.4016 387.072a24.3712 24.3712 0 0 1-24.3712 24.3712h-38.8096a25.088 25.088 0 0 1-25.088-25.088v-38.7072A24.4736 24.4736 0 0 1 281.9072 337.92h39.424a24.4736 24.4736 0 0 1 24.3712 24.4736z m0-175.104a24.4736 24.4736 0 0 1-24.3712 24.4736h-39.424a24.4736 24.4736 0 0 1-24.4736-24.4736v-39.424a24.4736 24.4736 0 0 1 24.4736-24.3712h39.424a24.4736 24.4736 0 0 1 24.3712 24.3712z m421.4784 175.104a24.2688 24.2688 0 0 1-24.3712 24.3712H434.8928a20.48 20.48 0 0 1-20.48-20.48v-43.3152A24.4736 24.4736 0 0 1 438.6816 337.92h304.128a24.3712 24.3712 0 0 1 24.3712 24.4736z m0-175.104a24.3712 24.3712 0 0 1-24.3712 24.4736h-304.128a24.4736 24.4736 0 0 1-24.3712-24.4736v-39.424a24.4736 24.4736 0 0 1 24.3712-24.3712h304.128a24.3712 24.3712 0 0 1 24.3712 24.3712z"
|
fill="#43ADFF"
|
p-id="27832"
|
></path>
|
</svg>
|
详细</span
|
>
|
<span class="table-detail-span" @click="clickDetailCertifcate(scope.row)"
|
><svg
|
t="1739500034021"
|
class="detail-icon"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="34306"
|
width="128"
|
height="128"
|
>
|
<path
|
d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z"
|
fill="#1989FA"
|
opacity=".3"
|
p-id="34307"
|
></path>
|
<path
|
d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
fill="#1989FA"
|
p-id="34308"
|
></path>
|
<path
|
d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
fill="#1989FA"
|
p-id="34309"
|
></path>
|
<path
|
d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
|
fill="#1989FA"
|
p-id="34310"
|
></path>
|
<path
|
d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z"
|
fill="#1989FA"
|
p-id="34311"
|
></path>
|
<path
|
d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z"
|
fill="#1989FA"
|
p-id="34312"
|
></path>
|
</svg>
|
证书</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" align-center>
|
<el-form :model="state.m_detailDialogInfo" label-width="120px" size="small">
|
<el-form-item label="" label-width="0px">
|
<div class="w-full flex justify-center">
|
<img :src="state.m_detailDialogInfo.PhysicalPicturePath" style="height: 200px" />
|
</div>
|
</el-form-item>
|
<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>
|
|
<el-dialog v-model="dialogVisibleCertifcate" title="" align-center fullscreen>
|
<div class=" h-full flex justify-center">
|
<img :src="state.m_detailDialogInfo.CertificatePath" />
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<!-- <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button> -->
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<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);
|
const dialogVisibleCertifcate = ref(false);
|
let state = reactive({
|
m_formData: {
|
ProductModel: '',
|
ProductType: 1,
|
RecordNumber: '',
|
},
|
allEecProduct: [],
|
filterProductData: [],
|
m_dispTableData: [],
|
|
m_paginationConfig: {
|
currentPage: 1,
|
pageSize: 10,
|
},
|
m_detailDialogInfo: {
|
PhysicalPicturePath: '',
|
CertificatePath: '',
|
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();
|
});
|
const initData = () => {
|
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;
|
});
|
|
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.pageSize = 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 clickDetailCertifcate = (row: any) => {
|
state.m_detailDialogInfo = row;
|
dialogVisibleCertifcate.value = true;
|
};
|
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;
|
|
.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;
|
|
span {
|
color: #fff;
|
font-size: 36px;
|
}
|
}
|
|
.w-180-px {
|
width: 180px;
|
}
|
|
.table-detail-span {
|
color: #1592fc;
|
cursor: pointer;
|
font-size: 12px;
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
gap: 3px;
|
}
|
|
.huoquliebiao {
|
}
|
|
.detail-icon {
|
width: 14px;
|
height: 14px;
|
}
|
: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;
|
}
|
|
:deep(.el-form-item__label) {
|
font-family: Microsoft YaHei;
|
font-size: 14px;
|
font-weight: 700;
|
color: #474747;
|
}
|
</style>
|
