<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; display: flex"
|
:model="state.m_formData"
|
ref="ruleFormRef"
|
:inline="true"
|
label-width="80px"
|
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="910"
|
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)" v-if="true"
|
><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="M18.731707 12.487805m499.512195 0l0 0q499.512195 0 499.512196 499.512195l0 0q0 499.512195-499.512196 499.512195l0 0q-499.512195 0-499.512195-499.512195l0 0q0-499.512195 499.512195-499.512195Z"
|
fill="#478BFF"
|
fill-opacity=".1"
|
p-id="11765"
|
></path>
|
<path
|
d="M718.04878 761.756098h-349.658536a74.926829 74.926829 0 0 1-74.926829-74.92683v-399.609756a24.97561 24.97561 0 0 1 24.975609-24.97561h349.658537a24.97561 24.97561 0 0 1 24.97561 24.97561v299.707317h99.902439v99.902439a74.926829 74.926829 0 0 1-74.92683 74.92683z m-24.975609-124.878049v49.951219a24.97561 24.97561 0 1 0 49.951219 0v-49.951219h-49.951219z m-299.707317-249.756098v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h199.804878v-49.95122h-199.804878z m0 99.902439v49.95122h124.878048v-49.95122h-124.878048z"
|
fill="#478BFF"
|
p-id="11766"
|
></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>
|
<div v-loading="dialogLoading">
|
<!-- 泵产品显示 -->
|
<el-form v-if="isPumpProduct" :model="state.m_detailDialogInfo" label-width="120px" size="small">
|
<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>
|
<!-- 其他产品显示 -->
|
<el-form v-if="!isPumpProduct" :model="state.m_OtherDetailInfo" label-width="120px" size="small">
|
<el-form-item label="产品类型" prop="ModelType">
|
<span>{{ state.m_OtherDetailInfo.ModelType }}</span>
|
</el-form-item>
|
<el-form-item label="产品型号" prop="Model">
|
<span>{{ state.m_OtherDetailInfo.Model }}</span>
|
</el-form-item>
|
<el-form-item label="生产厂商" prop="CompanyName">
|
<span>{{ state.m_OtherDetailInfo.CompanyName }}</span>
|
</el-form-item>
|
<el-form-item label="能效等级" prop="EnergyEfficiencyClass">
|
<span>{{ state.m_OtherDetailInfo.EnergyEfficiencyClass }}</span>
|
</el-form-item>
|
<el-form-item label="备案号" prop="RecordNumber">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.RecordNumber }}</span>
|
</el-form-item>
|
<el-form-item label="公告时间" prop="AnnouncementTime">
|
<span>{{ state.m_OtherDetailInfo.AnnouncementTime }}</span>
|
</el-form-item>
|
<el-form-item label="依据国家标准" prop="Standard">
|
<span>{{ state.m_OtherDetailInfo.Standard }}</span>
|
</el-form-item>
|
<el-form-item label="备案信息" prop="RecordNumber">
|
<div style="padding-left: 30px; background-color: rgb(243 250 255)">
|
<el-form label-width="200px">
|
<el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List" :key="index" :label="item.name" prop="Standard">
|
<span>{{ item.value }}</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<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="" :show-close="false" align-center fullscreen>
|
<div class="h-full flex justify-center">
|
<div style="position: relative">
|
<img :src="state.m_detailDialogInfo.CertificatePath" />
|
<span @click="dialogVisibleCertifcate = false" class="close-icon-style"> × </span>
|
</div>
|
</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';
|
const route = useRoute();
|
const router = useRouter();
|
const dialogVisible = ref(false);
|
const dialogVisibleCertifcate = ref(false);
|
const isPumpProduct = ref(true);
|
const dialogLoading = ref(false);
|
let state = reactive({
|
m_formData: {
|
ProductModel: '',
|
ProductType: 2,
|
RecordNumber: '',
|
},
|
allEecProduct: [],
|
filterProductData: [],
|
m_dispTableData: [],
|
|
m_paginationConfig: {
|
currentPage: 1,
|
pageSize: 20,
|
},
|
m_detailDialogInfo: {
|
PhysicalPicturePath: '',
|
CertificatePath: '',
|
ModelType: '',
|
Model: '',
|
CompanyName: '',
|
EnergyEfficiencyClass: '',
|
RecordTime: '',
|
RecordNumber: '',
|
},
|
m_OtherDetailInfo: {
|
ModelType: '',
|
Model: '',
|
CompanyName: '',
|
RecordNumber: '',
|
EnergyEfficiencyClass: '',
|
AnnouncementTime: '',
|
Standard: '',
|
List: '',
|
RecordTime: '',
|
},
|
typeSelect: 2,
|
// 分类选项
|
type: [
|
{ name: '泵', tag: 1 },
|
{ name: '容积式空压机', tag: 2 },
|
{ name: '通风机', tag: 3 },
|
{ name: '冷水机组', tag: 4 },
|
{ 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;
|
result.sort((a: any, b: any) => {
|
const aPrefix = a.Model.slice(0, 3);
|
const bPrefix = b.Model.slice(0, 3);
|
const aContainsDP = aPrefix.includes('DP') || aPrefix.includes('DRL');
|
const bContainsDP = bPrefix.includes('DP') || bPrefix.includes('DRL');
|
|
if (aContainsDP && !bContainsDP) {
|
return -1;
|
} else if (!aContainsDP && bContainsDP) {
|
return 1;
|
} else {
|
return 0;
|
}
|
});
|
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 = async (row: any) => {
|
if (row.Id.includes('Pupm')) {
|
isPumpProduct.value = true;
|
} else {
|
isPumpProduct.value = false;
|
getProductDetail(row.Model);
|
}
|
state.m_detailDialogInfo = row;
|
dialogVisible.value = true;
|
|
// 找到当前点击的产品
|
// const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
|
// if (currentProduct) {
|
// // 保存产品信息到localStorage
|
// localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
|
// }
|
// router.push(`/product/${currentProduct.Id}`);
|
};
|
const clickDetailCertifcate = (row: any) => {
|
// state.m_detailDialogInfo = row;
|
// dialogVisibleCertifcate.value = true;
|
// 找到当前点击的产品
|
const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
|
if (currentProduct) {
|
// 保存产品信息到localStorage
|
localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
|
}
|
router.push(`/product/${currentProduct.Id}`);
|
};
|
|
const getProductDetail = async (productModel) => {
|
dialogLoading.value = true;
|
const productRegistrationList = () => {
|
return new Promise((reslvoe, reject) => {
|
axios({
|
url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productRegistrationList',
|
method: 'post',
|
data: {
|
mark: 854,
|
productType: '',
|
productModel: productModel,
|
registrationNumber: '',
|
producerName: '',
|
current: 1,
|
pageSize: 10,
|
isOld: 0,
|
},
|
})
|
.then((res) => {
|
let result = res.data.data;
|
if (!result.list.length) {
|
reslvoe([]);
|
}
|
reslvoe(result.list);
|
})
|
.catch((err) => {});
|
});
|
};
|
|
const listData = await productRegistrationList();
|
const firstProduct = listData[0];
|
|
const detailResponse = () => {
|
return new Promise((reslvoe, reject) => {
|
axios({
|
url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productDetailById',
|
method: 'post',
|
data: {
|
productId: firstProduct.id,
|
productTypeCode: firstProduct.productTypeCode,
|
mark: 854,
|
isSign: 'true',
|
isOld: 0,
|
},
|
})
|
.then((res) => {
|
let result = res.data.data;
|
if (!result.list.length) {
|
reslvoe([]);
|
}
|
reslvoe(result);
|
})
|
.catch((err) => {});
|
});
|
};
|
|
const detailData = await detailResponse();
|
dialogLoading.value = false;
|
state.m_OtherDetailInfo = {
|
ModelType: detailData.productType,
|
Model: detailData.productModel,
|
CompanyName: detailData.producerName,
|
RecordNumber: detailData.registrationNumber,
|
EnergyEfficiencyClass: detailData.nxLever,
|
AnnouncementTime: detailData.announcementTime,
|
Standard: detailData.standard,
|
List: detailData.list,
|
RecordTime: '',
|
};
|
};
|
|
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: 10rem;
|
}
|
|
.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;
|
}
|
|
.close-icon-style {
|
position: absolute;
|
right: -15px;
|
top: -15px;
|
font-size: 30px;
|
background-color: #196dd938;
|
width: 30px;
|
height: 30px;
|
border-radius: 50%;
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
color: #196dd9;
|
&:hover {
|
color: #fff;
|
background-color: #196dd9;
|
}
|
}
|
:deep(.el-form--inline .el-form-item) {
|
margin-right: 0.75rem;
|
}
|
: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>
|
