<template>
|
<div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" v-loading="m_PageLoading"
|
style="margin-top: 20px;padding-top:15px ;">
|
<div class=" w-100 h-100" style="background-color: #fff;">
|
<!-- 顶部分类菜单 -->
|
<div class="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px">
|
<!-- 类型 -->
|
<div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
|
<div class="flex items-center">
|
<span class="text-gray-500">类型：</span>
|
<div class="flex flex-1">
|
<span
|
v-for="item in type"
|
class="ant-tag !px-4"
|
:class="typeSelect === item.tag ? 'ant-tag-checked' : ''"
|
:key="item.tag"
|
@click="changeSelectType(item.tag)"
|
:type="typeSelect === item.tag ? 'primary' : 'default'"
|
size="small"
|
>
|
{{ item.name }}
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 厂商 -->
|
<div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
|
<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>
|
</div>
|
</div>
|
</div>
|
|
<!-- 能效等级 -->
|
<div class="flex eec-filter-sortbar" style="background-color: #ecedee">
|
<ul>
|
<li v-for="sort in EecClass" :key="sort.tag" size="small" @click="handleEecLevel(sort.tag)"
|
:type="EecSelect === sort.tag ? 'primary' : 'default'"
|
:class="EecSelect == sort.tag ? 'eec-filter-currentOrder' : ''"
|
class="!px-6"
|
>
|
{{ sort.name }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 软件列表 -->
|
<div class="grid grid-cols-4 gap-4" style="padding: 0 10px;min-height: 417px;">
|
<div v-for="(app, index) in dispEecProduct" :key="index" class="goods-warp-item software-card">
|
<el-tooltip class="box-item" effect="dark" :offset="20" placement="top">
|
<div class="flex flex-col h-full" style="cursor: pointer;">
|
<div style="position: relative;display: flex;">
|
<img :src="app.PhysicalPicturePath" :alt="app.Model"
|
class=" object-contain mx-auto goods-img" />
|
<div class="goods-company">{{ app.CompanyName }}</div>
|
</div>
|
<div class="goods-name" :title="app.Model">{{ app.ModelType }}</div>
|
<div class="metertitle mb-2"><span>型号：{{ app.Model }}</span></div>
|
<!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> -->
|
<div class="flex flex-wrap gap-2" style="">
|
<!-- <el-tag size="small" type="success">{{ app.CompanyName }}</el-tag> -->
|
<div class="flex items-center eec-level-div">
|
<img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon">
|
<span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span>
|
<span class="eec-level-name">{{ EecLevelEnum[app.EnergyEfficiencyClass].name
|
}}</span>
|
</div>
|
</div>
|
<div class="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </div>
|
<!-- <div class="flex justify-between items-center">
|
<el-rate v-model="app.rating" disabled />
|
<span class="text-gray-400 text-sm">{{ app.date }}</span>
|
</div> -->
|
|
<div class="link-btn" @click="handleBuyClick(app.id)">立即购入</div>
|
</div>
|
<template #content>
|
<div class="goods-tip-content" style="white-space: pre-wrap;">{{ app.Tip }}</div>
|
</template>
|
</el-tooltip>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="flex justify-center mt-8">
|
<el-pagination v-model:current-page="m_paginationConfig.currentPage"
|
v-model:page-size="m_paginationConfig.pageSize" :page-sizes="[10, 50, 100, 200]" :background="true"
|
layout="total, sizes, prev, pager, next, jumper" :total="filterProductData.length"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import EecLevel1 from '@/assets/icons/energy_level_1.svg';
|
import EecLevel2 from '@/assets/icons/energy_level_2.svg';
|
import { onMounted, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
// 分类选项
|
const type = [
|
{ name: '电机', tag: 0 },
|
{ name: '泵', tag: 1 },
|
{ name: '容积式空压机', tag: 2 },
|
{ name: '通风机', tag: 3 },
|
{ name: '冷水机组', tag: 4 },
|
{ name: '电力变压器', tag: 5 },
|
{ name: '工业锅炉', tag: 6 },
|
];
|
const factory = [
|
{ name: '全部', tag: '全部' },
|
{ name: '凯泉', tag: '凯泉' },
|
];
|
const EecClass = [
|
{ name: "全部", tag: 0 },
|
{ name: "一级能效", tag: 1 },
|
{ name: "二级能效", tag: 2 }
|
];
|
|
const m_PageLoading = ref(false)
|
|
// 选中状态
|
const typeSelect = ref(0);
|
const factorySelect = ref('全部');
|
const EecSelect = ref(0);
|
|
const EecLevelEnum = {
|
1: { name: '一级能效', icon: EecLevel1 },
|
2: { name: '二级能效', icon: EecLevel2 },
|
};
|
|
const m_RequestDataObj = {
|
1: { requestPath: "static/EecProductData/ElectricMachinery.json" },
|
2: { requestPath: "static/EecProductData/Pump.json" },
|
3: { requestPath: "static/EecProductData/AirCompressor.json" },
|
4: { requestPath: "static/EecProductData/Fan.json" },
|
5: { requestPath: "static/EecProductData/WaterChiller.json" },
|
6: { requestPath: "static/EecProductData/PowerTransformer.json" },
|
7: { requestPath: "static/EecProductData/IndustrialBoiler.json" },
|
}
|
|
|
// 源数据
|
const allEecProduct = ref([]);
|
// 过滤后的数据
|
const filterProductData = ref([])
|
//显示的数据
|
const dispEecProduct = ref([])
|
|
const m_paginationConfig = ref({
|
currentPage: 1,
|
pageSize: 10,
|
})
|
|
onMounted(() => {
|
initData();
|
// filterProduct();
|
})
|
|
const initData = () => {
|
m_PageLoading.value = true;
|
axios({
|
method: 'get',
|
url: m_RequestDataObj[typeSelect.value].requestPath,
|
}).then((res) => {
|
m_PageLoading.value = false;
|
let result = res.data;
|
let arr = [];
|
result.forEach((item: any) => {
|
let node = {
|
Id: item.ID,
|
Type: item.Type,
|
ModelType: item.ModelType,
|
Model: item.Model,
|
CompanyName: item.CompanyName,
|
RecordNumber: item.RecordNumber,
|
EnergyEfficiencyClass: item.EnergyEfficiencyClass,
|
RecordTime: item.RecordTime,
|
// PhysicalPicturePath: "/static/EecProductData/" + item.PhysicalPicturePath,
|
PhysicalPicturePath: `https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000`,
|
CertificatePath: `/static/EecProductData/${item.CertificatePath}`,
|
Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
|
}
|
arr.push(node)
|
})
|
allEecProduct.value = arr;
|
filterProduct();
|
}).catch((err) => {
|
m_PageLoading.value = false;
|
})
|
}
|
const filterProduct = () => {
|
filterProductData.value = allEecProduct.value.filter((item) => {
|
return item.Type === typeSelect.value
|
})
|
if (EecSelect.value !== 0) {
|
filterProductData.value = filterProductData.value.filter((item) => {
|
return item.EnergyEfficiencyClass === EecSelect.value
|
})
|
}
|
if (factorySelect.value !== '全部') {
|
filterProductData.value = filterProductData.value.filter((item) => {
|
return item.CompanyName === factorySelect.value
|
})
|
}
|
dispEecProduct.value = getSelectPageData(filterProductData.value);
|
|
}
|
const handleCurrentChange = (val: number) => {
|
m_paginationConfig.value.currentPage = val;
|
let allTableData = allEecProduct.value;
|
let pagingData = getSelectPageData(allTableData);
|
dispEecProduct.value = pagingData;
|
}
|
const handleSizeChange = (val: number) => {
|
m_paginationConfig.value.currentPage = val;
|
let allTableData = allEecProduct.value;
|
let pagingData = getSelectPageData(allTableData);
|
dispEecProduct.value = pagingData;
|
}
|
//获取分页数据
|
const getSelectPageData = (list: any) => {
|
let filterList = list.slice(
|
(m_paginationConfig.value.currentPage - 1) * m_paginationConfig.value.pageSize,
|
m_paginationConfig.value.currentPage * m_paginationConfig.value.pageSize
|
);
|
//当前页
|
return filterList;
|
};
|
|
//监听类型选择筛选
|
const changeSelectType = (tag: number) => {
|
typeSelect.value = tag;
|
initData();
|
|
};
|
|
const handleBuyClick = (productId: string) => {
|
// 找到当前点击的产品
|
const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
|
if (currentProduct) {
|
// 保存产品信息到localStorage
|
localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
|
}
|
router.push(`/product/${productId}`);
|
};
|
const handleEecLevel = (tag: number) => {
|
EecSelect.value = tag;
|
filterProduct();
|
}
|
</script>
|
|
<style scoped>
|
.w-100 {
|
width: 100%;
|
}
|
|
.h-100 {
|
height: 100%;
|
}
|
|
.software-card {
|
transition: transform 0.2s;
|
}
|
|
.goods-warp-item {
|
position: relative;
|
padding: 10px 12px 17px;
|
margin: 20px 3px 0;
|
background-color: #f6f7f9;
|
overflow: hidden;
|
box-sizing: border-box;
|
/* transition: border-color .1s ease; */
|
border-radius: 5px;
|
transition: all 0.3s;
|
margin-top: 10px;
|
}
|
|
.goods-warp-item:hover {
|
border-color: rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
}
|
|
.bg-grey {
|
background-color: #f4f4f4;
|
}
|
|
.software-card:hover {
|
transform: translateY(-4px);
|
}
|
|
.industrial-soft-style {
|
position: relative;
|
}
|
|
.border-bottom-dashed-1 {
|
border-bottom: 1px dashed #e2e8f0;
|
}
|
|
.box-border {
|
box-sizing: border-box;
|
}
|
|
.industrial-soft-style::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 3px;
|
background-color: #38ca94;
|
background-image: linear-gradient(90deg, #9bc864, #40cb8f 21%, #00c7c4 47%, #00bcef 74%, #0af);
|
}
|
|
.goods-img {
|
max-width: 180px;
|
max-height: 180px;
|
vertical-align: top;
|
border: 0;
|
padding-bottom: 20px;
|
box-sizing: border-box;
|
}
|
|
.goods-name {
|
position: relative;
|
width: 100%;
|
height: 42px;
|
line-height: 150%;
|
margin-top: 5px;
|
color: #333;
|
overflow: hidden;
|
text-align: left;
|
padding-left: 2px;
|
}
|
|
.metertitle {
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
position: relative;
|
width: 100%;
|
padding-left: 2px;
|
margin-top: 7px;
|
color: #999;
|
line-height: 16px;
|
overflow: hidden;
|
text-align: left;
|
}
|
|
.link-btn {
|
display: inline-block;
|
width: 100%;
|
height: 32px;
|
font-size: 14px;
|
line-height: 30px;
|
background: #fff;
|
color: #e65650;
|
border: 1px solid #e2e2e2;
|
border-radius: 20px;
|
text-align: center;
|
margin-top: 3px;
|
box-sizing: border-box;
|
}
|
|
.link-btn:hover {
|
background: #e65650;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.goods-price {
|
width: 100%;
|
padding: 0 3px;
|
text-align: left;
|
box-sizing: border-box;
|
margin-bottom: 11px;
|
}
|
|
.goods-company {
|
position: absolute;
|
bottom: 0;
|
height: 20px;
|
background-color: rgb(0 0 0 / 32%);
|
width: 100%;
|
color: #fff;
|
}
|
|
.goods-price .goods-price-selling {
|
font-size: 14px;
|
font-weight: 700;
|
color: #f74747;
|
}
|
|
.ant-tag {
|
box-sizing: border-box;
|
color: rgba(0, 0, 0, 0.65);
|
font-size: 14px;
|
font-variant: tabular-nums;
|
line-height: 1.5;
|
list-style: none;
|
font-feature-settings: 'tnum';
|
display: inline-block;
|
height: auto;
|
margin: 0 8px 0 0;
|
padding: 2px 7px;
|
font-size: 12px;
|
line-height: 20px;
|
white-space: nowrap;
|
cursor: default;
|
opacity: 1;
|
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
margin-right: 24px;
|
font-size: 14px;
|
}
|
|
.ant-tag:hover {
|
color: #1c97b7;
|
}
|
|
.ant-tag-checked {
|
background-color: #1c97b7;
|
color: #fff;
|
}
|
|
.ant-tag-checked:hover {
|
color: #fff;
|
}
|
|
.eec-filter-sortbar {
|
background-color: #ecedee;
|
}
|
|
.eec-filter-sortbar ul {
|
padding-left: 0;
|
list-style: none;
|
margin: 0;
|
display: flex;
|
box-sizing: border-box;
|
gap: 5px;
|
padding-left: 42px;
|
}
|
|
.eec-filter-sortbar li {
|
padding: 4px 18px;
|
cursor: pointer;
|
/* transition: all .3s; */
|
margin: 0 2px;
|
line-height: 32px;
|
box-sizing: border-box;
|
}
|
|
.eec-filter-sortbar li:hover {
|
border-bottom: 4px solid #1c97b7;
|
color: #1c97b7;
|
}
|
|
.eec-filter-currentOrder {
|
border-bottom: 4px solid #1c97b7;
|
color: #1c97b7;
|
}
|
|
.eec-filter-currentOrder:hover {
|
border-bottom: 4px solid #1c97b7;
|
color: #1c97b7;
|
}
|
|
.eec-level-div {
|
height: 34px;
|
position: relative;
|
margin-top: -2px;
|
}
|
|
.eec-level-div img {
|
height: 100%;
|
}
|
|
.eec-numb {
|
position: absolute;
|
left: 13px;
|
top: 4px;
|
color: #fff;
|
}
|
|
.eec-level-name {
|
position: absolute;
|
left: 31px;
|
top: 3.5px;
|
color: #fff;
|
font-size: 12px;
|
}
|
|
:deep(.el-button--default) {
|
--el-button-bg-color: transparent;
|
--el-button-border-color: transparent;
|
--el-button-hover-bg-color: var(--el-color-primary-light-9);
|
--el-button-hover-border-color: transparent;
|
}
|
</style>
|
