IEE/Web.V1.git - Gitblit

<template>
    <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" 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="EecSelect = 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-5 gap-4" style="padding: 0 10px; min-height: 417px">
                <div v-for="(app, index) in dispProductType" :key="index" class="goods-warp-item software-card">
                    <div class="flex flex-col h-full" style="cursor: pointer">
                        <img :src="app.logo" :alt="app.name" class="object-contain mx-auto goods-img" />
                        <!-- <h3 class="text-lg font-medium mb-2">{{ app.name }}</h3> -->
                        <div class="goods-name" :title="app.name">{{ app.name }}</div>
                        <div class="metertitle mb-2">
                            <span>订货编码：{{ app.applicationCode }}</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.industry }}</el-tag>
                            <div class="flex items-center eec-level-div">
                                <img :src="EecLevelEnum[1].icon" />
                                <span class="eec-numb">1</span>
                                <span class="eec-level-name">{{ EecLevelEnum[1].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>
                </div>
            </div>
 
            <!-- 分页 -->
            <div class="flex justify-center mt-8">
                <!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[10, 50, 300, 400]" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="400" @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 },
    { name: '三级能效', tag: 3 },
];
 
// 选中状态
const typeSelect = ref(0);
const factorySelect = ref('全部');
const EecSelect = ref(0);
 
const EecLevelEnum = {
    1: { name: '一级能效', icon: EecLevel1 },
    2: { name: '二级能效', icon: EecLevel2 },
};
 
const m_RequestDataObj = {
    0: { requestPath: 'static/EecProductData/' },
    1: { requestPath: '' },
    2: { requestPath: '' },
    3: { requestPath: '' },
    4: { requestPath: '' },
    5: { requestPath: '' },
    6: { requestPath: '' },
};
 
// 示例数据
const softwareList = ref([
    {
        id: 1,
        Id: 1,
        Type: 0,
        ModelType: '',
        Model: '',
        CompanyName: '凯泉',
        RecordNumber: '',
        EnergyEfficiencyClass: '',
        RecordTime: '',
        PhysicalPicturePath: '',
        CertificatePath: '',
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '微信小程序客户端自主开发的下单系统，用户仅需通过微信内的报废车预约下单，用户可通过微信内的报废车预约下单。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
        type: '行业通用类',
        applicationCode: 'AE2977837',
        industry: '生产制造类',
        price: '¥1770.65',
        rating: 5,
        date: '2024-01-06',
        tag: 0,
    },
    {
        id: 2,
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '权客专利年费管理软件是由运营权客信息科技有限公司自主开发的一款专利年费管理软件。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
        type: '企业专用类',
        applicationCode: 'AE2977841',
        industry: '经营管理类',
        price: '¥1770.65',
        rating: 4.5,
        date: '2024-12-25',
        tag: 0,
    },
    {
        id: 3,
        name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
        description: '通信信号处理与分析系统软件是一套用于对通信信号进行分析和处理的系统。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000',
        type: '基础共性类',
        applicationCode: 'AE2977843',
        industry: '研发设计类',
        price: '¥1770.65',
        rating: 4.8,
        date: '2024-12-20',
        tag: 0,
    },
    {
        id: 4,
        name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735295148000',
        type: '行业通用类',
        applicationCode: 'AC0394797',
        industry: '运维服务类',
        price: '¥1770.65',
        rating: 4.2,
        date: '2024-12-20',
        tag: 0,
    },
    {
        id: 5,
        name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735295148000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥1770.65',
        rating: 4.2,
        date: '2024-12-20',
        tag: 0,
    },
 
    {
        id: 6,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL70-20-5.5/2 进出口DN100 额定流量70m³/h 额定扬程20m 5.5kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥7399.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 1,
    },
    {
        id: 7,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-32-15/2 进出口DN100 额定流量100m³/h 额定扬程32m 15kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥10390.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 1,
    },
    {
        id: 8,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-50-22/2 进出口DN100 额定流量100m³/h 额定扬程50m 22kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥13490.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 1,
    },
    {
        id: 9,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL115-34-15/2 进出口DN100 额定流量115m³/h 额定扬程34m 15kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥10390.00',
        rating: 4.2,
        date: '2024-12-20',
        tag: 1,
    },
    {
        id: 10,
        name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL50-12.5-3/4 进出口DN100 额定流量50m³/h 额定扬程12.5m 3kW HT200叶轮 1台',
        description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
        logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1731595920000',
        type: '行业通用类',
        applicationCode: 'AC0394822',
        industry: '运维服务类',
        price: '¥5319.0',
        rating: 4.2,
        date: '2024-12-20',
        tag: 1,
    },
]);
const dispProductType = ref([]);
 
onMounted(() => {
    initData();
    filterProduct();
});
 
const initData = () => {
    filterProduct();
};
const filterProduct = () => {
    dispProductType.value = softwareList.value.filter((item) => {
        return item.tag === typeSelect.value;
    });
};
//监听类型选择筛选
const changeSelectType = (tag: number) => {
    typeSelect.value = tag;
    filterProduct();
};
 
const handleBuyClick = (productId: string) => {
    // 找到当前点击的产品
    const currentProduct = dispProductType.value.find((item) => item.id === productId);
    if (currentProduct) {
        // 保存产品信息到localStorage
        localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
    }
    router.push(`/product/${productId}`);
};
</script>
 
<style scoped>
.w-100 {
    width: 100%;
}
 
.h-100 {
    height: 100%;
}
 
.software-card {
    transition: transform 0.2s;
}
 
.goods-warp-item {
    position: relative;
    padding: 34px 12px 17px;
    margin: 20px 3px 0;
    background-color: #fff;
    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;
}
 
.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-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>