<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.CompanyId"
|
class="ant-tag !px-4"
|
:class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''"
|
@click="clickFactory(item)"
|
>
|
{{ item.CompanyAbbName }}
|
</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 gap-2" style="justify-content: space-between; align-items: center">
|
<!-- <el-tag size="small" type="success">{{ app.CompanyName }}</el-tag> -->
|
<div class="goods-price">
|
<span class="goods-price-selling"> ¥{{ app.Price }}</span>
|
</div>
|
<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="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="flex justify-between gap-4">
|
<div class="link-btn text-nowrap" @click="handleBuyClick(app.id)">
|
<svg
|
t="1739504206748"
|
class="svg-size-style"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="35851"
|
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="35852"
|
class="icon-path"
|
></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="35853"
|
class="icon-path"
|
></path>
|
</svg>
|
详细
|
</div>
|
<div class="link-btn text-nowrap" @click="handleCertificateClick(app)">
|
<svg
|
t="1739503834540"
|
class="svg-size-style"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
p-id="34740"
|
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="34741"
|
class="icon-path"
|
></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="34742"
|
class="icon-path"
|
></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="34743"
|
class="icon-path"
|
></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="34744"
|
class="icon-path"
|
></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="34745"
|
class="icon-path"
|
></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="34746"
|
class="icon-path"
|
></path></svg
|
>证书
|
</div>
|
</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"
|
:page-size="12"
|
:background="true"
|
layout="total, prev, pager, next, jumper"
|
:total="filterProductData.length"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
|
<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="m_curCertificatePath" />
|
<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">
|
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';
|
import axios from 'axios';
|
const router = useRouter();
|
|
// 分类选项
|
const type = [
|
{ name: '泵', tag: 1 },
|
{ name: '容积式空压机', tag: 2 },
|
{ name: '通风机', tag: 3 },
|
{ name: '冷水机组', tag: 4 },
|
{ name: '电力变压器', tag: 5 },
|
{ name: '工业锅炉', tag: 6 },
|
{ name: '电机', tag: 7 },
|
];
|
const factory = ref([]);
|
const EecClass = [
|
{ name: '全部', tag: 0 },
|
{ name: '一级能效', tag: 1 },
|
{ name: '二级能效', tag: 2 },
|
];
|
|
const m_PageLoading = ref(false);
|
const dialogVisibleCertifcate = ref(false);
|
|
// 选中状态
|
const typeSelect = ref(1);
|
const factorySelect = ref('-99');
|
const factoryIncludeType = ref(null);
|
const EecSelect = ref(0);
|
|
const m_curCertificatePath = ref('');
|
|
const EecLevelEnum = {
|
1: { name: '一级能效', icon: EecLevel1 },
|
2: { name: '二级能效', icon: EecLevel2 },
|
};
|
|
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' },
|
};
|
|
// 源数据
|
const allEecProduct = ref([]);
|
// 过滤后的数据
|
const filterProductData = ref([]);
|
//显示的数据
|
const dispEecProduct = ref([]);
|
|
const m_paginationConfig = ref({
|
currentPage: 1,
|
pageSize: 12,
|
});
|
|
onMounted(() => {
|
initComanyData();
|
initData();
|
// filterProduct();
|
});
|
const initComanyData = () => {
|
axios({
|
method: 'get',
|
url: 'static/EecProductData/CompanyData.json',
|
})
|
.then((res) => {
|
let result = res.data;
|
factory.value = result.map((item: any) => {
|
return {
|
CompanyId: item.CompanyId,
|
CompanyAllName: item.CompanyAllName,
|
CompanyAbbName: item.CompanyAbbName,
|
Type: item.Type,
|
};
|
});
|
factory.value.unshift({ CompanyId: '-99', CompanyAllName: '全部', CompanyAbbName: '全部', Type: null });
|
})
|
.catch((err) => {});
|
};
|
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,
|
Price: item.Price,
|
PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
|
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 !== '-99') {
|
filterProductData.value = filterProductData.value.filter((item) => {
|
return factoryIncludeType.value.includes(item.Type);
|
});
|
}
|
dispEecProduct.value = getSelectPageData(filterProductData.value);
|
};
|
const handleCurrentChange = (val: number) => {
|
m_paginationConfig.value.currentPage = val;
|
let allTableData = filterProductData.value;
|
let pagingData = getSelectPageData(allTableData);
|
dispEecProduct.value = pagingData;
|
};
|
const handleSizeChange = (val: number) => {
|
m_paginationConfig.value.currentPage = val;
|
let allTableData = filterProductData.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 clickFactory = (item: any) => {
|
factorySelect.value = item.CompanyId;
|
factoryIncludeType.value = item.Type;
|
filterProduct();
|
};
|
//监听类型选择筛选
|
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/${currentProduct.Id}`);
|
};
|
const handleCertificateClick = (row: any) => {
|
dialogVisibleCertifcate.value = true;
|
m_curCertificatePath.value = row.CertificatePath;
|
};
|
const handleEecLevel = (tag: number) => {
|
EecSelect.value = tag;
|
filterProduct();
|
};
|
</script>
|
|
<style lang="scss" 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 {
|
width: 180px;
|
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-flex;
|
width: 100%;
|
height: 32px;
|
font-size: 14px;
|
line-height: 30px;
|
background: #fff;
|
color: #1592fc;
|
border: 1px solid #e2e2e2;
|
border-radius: 20px;
|
text-align: center;
|
margin-top: 3px;
|
box-sizing: border-box;
|
padding: 0 25px;
|
align-items: center;
|
gap: 15px;
|
}
|
|
.link-btn:hover {
|
background: #1592fc;
|
color: #fff;
|
cursor: pointer;
|
|
.icon-path {
|
fill: #fff;
|
}
|
}
|
|
.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: 16px;
|
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;
|
}
|
.svg-size-style {
|
width: 16px;
|
height: 16px;
|
}
|
|
.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-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>
|
