<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
|
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 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: 1,
|
RecordNumber: '',
|
},
|
allEecProduct: [],
|
filterProductData: [],
|
m_dispTableData: [],
|
|
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();
|
});
|
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.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;
|
|
.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;
|
}
|
|
.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;
|
}
|
|
:deep(.el-form-item__label) {
|
font-family: Microsoft YaHei;
|
font-size: 14px;
|
font-weight: 700;
|
color: #474747;
|
}
|
</style>
|
