From a3418c30e014ac14caa77879bffdcfa6d0df1cff Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期四, 13 二月 2025 23:04:45 +0800
Subject: [PATCH] 下载bug
---
src/views/IndustrialSoftware.vue | 595 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 345 insertions(+), 250 deletions(-)
diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue
index c42fbae..e083846 100644
--- a/src/views/IndustrialSoftware.vue
+++ b/src/views/IndustrialSoftware.vue
@@ -1,286 +1,271 @@
<template>
- <div class="container mx-auto px-4 py-8 bg-grey">
- <div class="industrial-soft-style w-100 h-100" style="background-color: #fff;">
+ <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">
+ <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 gap-4">
- <el-button v-for="item in industryTypes" :key="item"
- :type="selectedIndustry === item ? 'primary' : 'default'" class="!px-4"
- @click="selectedIndustry = item">
- {{ item }}
- </el-button>
+ <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>
- <!-- 宸ヤ笟杞欢|宸ヤ笟APP浜у搧鍒嗙被 -->
- <div class="border-b p-4 border-bottom-dashed-1 box-border">
- <div class="flex items-center ">
- <span class="text-gray-500">宸ヤ笟杞欢|宸ヤ笟APP浜у搧鍒嗙被锛�</span>
- <div class="flex flex-1 gap-4">
- <el-button v-for="item in productTypes" :key="item"
- :type="selectedProduct === item ? 'primary' : 'default'" class="!px-4"
- @click="selectedProduct = item">
- {{ item }}
- </el-button>
+ <!-- 鍘傚晢 -->
+ <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="factorySelect = item.CompanyId" size="small">
+ {{ item.CompanyAbbName }}
+ </span>
</div>
</div>
</div>
- <!-- 绛涢�夋潯浠� -->
- <div class="p-4">
- <div class="flex gap-2">
- <div class="flex items-center">
- <label>鍖哄煙锛�</label>
- <el-select v-model="region" placeholder="鍖哄煙" class="w-full" style="width: 220px;">
- <el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
- <el-option label="鍖椾含" value="鍖椾含" />
- <el-option label="涓婃捣" value="涓婃捣" />
- <el-option label="骞垮窞" value="骞垮窞" />
- </el-select>
- </div>
- <div class="flex items-center">
- <label>鍒堕�犱笟闆嗙兢锛�</label>
- <el-select v-model="industry" placeholder="鍒堕�犱笟缁嗗垎" class="w-full" style="width: 220px;">
- <el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
- <el-option label="瑁呭鍒堕��" value="瑁呭鍒堕��" />
- <el-option label="姹借溅鍒堕��" value="姹借溅鍒堕��" />
- <el-option label="鐢靛瓙鍒堕��" value="鐢靛瓙鍒堕��" />
- </el-select>
- </div>
- <div class="flex items-center">
- <label>涓氬姟鐜妭锛�</label>
- <el-select v-model="business" placeholder="涓氬姟鐜妭" class="w-full" style="width: 220px;">
- <el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
- <el-option label="鐮斿彂璁捐" value="鐮斿彂璁捐" />
- <el-option label="鐢熶骇鍒堕��" value="鐢熶骇鍒堕��" />
- <el-option label="杩愯惀绠＄悊" value="杩愯惀绠＄悊" />
- </el-select>
- </div>
- </div>
- </div>
- <!-- 鎺掑簭閫夐」 -->
- <div class="flex gap-4 p-4" style="background-color: #ecedee;">
- <el-button v-for="sort in sortOptions" :key="sort.tag"
- :type="selectedSort === sort.tag ? 'primary' : 'default'" class="!px-6"
- @click="changeSelectType(sort.tag)">
- {{ sort.name }}
- </el-button>
+ <!-- 鑳芥晥绛夌骇 -->
+ <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-5 gap-4" style="padding: 0 10px;">
- <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 mb-4">
- <el-tag size="small" type="info">{{ app.type }}</el-tag>
- <el-tag size="small" type="success">{{ app.industry }}</el-tag>
- </div>
- <div class="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </div>
- <!-- <div class="flex justify-between items-center">
+ <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="link-btn">绔嬪嵆璐叆</div>
- </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="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" /> -->
+ <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 { ref, onMounted } from 'vue';
+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 industryTypes = ['鍏ㄩ儴', '鍩虹鍏辨�х被', '琛屼笟閫氱敤绫�', '浼佷笟涓撶敤绫�', '鍏朵粬绫�'];
-const productTypes = ['鍏ㄩ儴', '鐮斿彂璁捐绫�', '鐢熶骇鍒堕�犵被', '杩愮淮鏈嶅姟绫�', '缁忚惀绠＄悊绫�', '鏀拺淇濋殰绫�'];
-const sortOptions = [
- { name: "鐢垫満", tag: "motorPower" },
- { name: "娉�", tag: 'pump' },
- { name: '瀹圭Н寮忕┖鍘嬫満', tag: 'volumetricPressureMachine' },
- { name: "閫氶鏈�", tag: 'exhaustMachine' },
- { name: "鍐锋按鏈虹粍", tag: 'coldPowerGenerationUnit' },
- { name: "鐢靛姏鍙樺帇鍣�", tag: 'electricTransformer' },
- { name: "宸ヤ笟閿呯倝", tag: 'industrialBoiler' },
+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 selectedIndustry = ref('鍏ㄩ儴');
-const selectedProduct = ref('鍏ㄩ儴');
-const selectedSort = ref('motorPower');
-const region = ref('鍏ㄩ儴');
-const industry = ref('鍏ㄩ儴');
-const business = ref('鍏ㄩ儴');
-const currentPage = ref(1);
+const typeSelect = ref(1);
+const factorySelect = ref('-99');
+const EecSelect = ref(0);
-// 绀轰緥鏁版嵁
-const softwareList = ref([
- {
- id:1,
- 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×tamp=1735778771000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AE2977837",
- industry: '鐢熶骇鍒堕�犵被',
- price: '楼1770.65',
- rating: 5,
- date: '2024-01-06',
- tag: 'motorPower'
- },
- {
- 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×tamp=1735778771000',
- type: '浼佷笟涓撶敤绫�',
- applicationCode: "AE2977841",
- industry: '缁忚惀绠＄悊绫�',
- price: '楼1770.65',
- rating: 4.5,
- date: '2024-12-25',
- tag: 'motorPower'
- },
- {
- 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×tamp=1735778771000',
- type: '鍩虹鍏辨�х被',
- applicationCode: "AE2977843",
- industry: '鐮斿彂璁捐绫�',
- price: '楼1770.65',
- rating: 4.8,
- date: '2024-12-20',
- tag: 'motorPower'
- },
- {
- id:4,
- name: 'HUALI/灞变笢鍗庡姏鐢垫満 鐢垫満 YE5-132S-4-5.5KW 鍗у紡 涓�绾ц兘鏁� 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394797",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼1770.65',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'motorPower'
- },
- {
- id:5,
- name: 'HUALI/灞变笢鍗庡姏鐢垫満 鐢垫満 YE5-132S-4-5.5KW 鍗у紡 涓�绾ц兘鏁� 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼1770.65',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'motorPower'
- },
+const EecLevelEnum = {
+ 1: { name: '涓�绾ц兘鏁�', icon: EecLevel1 },
+ 2: { name: '浜岀骇鑳芥晥', icon: EecLevel2 },
+};
- {
- id:6,
- name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL70-20-5.5/2 杩涘嚭鍙N100 棰濆畾娴侀噺70m鲁/h 棰濆畾鎵▼20m 5.5kW HT200鍙惰疆 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼7399.00',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'pump'
- },
- {
- id:7,
- name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL100-32-15/2 杩涘嚭鍙N100 棰濆畾娴侀噺100m鲁/h 棰濆畾鎵▼32m 15kW HT200鍙惰疆 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼10390.00',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'pump'
- },
- {
- id:8,
- name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL100-50-22/2 杩涘嚭鍙N100 棰濆畾娴侀噺100m鲁/h 棰濆畾鎵▼50m 22kW HT200鍙惰疆 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼13490.00',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'pump'
- },
- {
- id:9,
- name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL115-34-15/2 杩涘嚭鍙N100 棰濆畾娴侀噺115m鲁/h 棰濆畾鎵▼34m 15kW HT200鍙惰疆 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼10390.00',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'pump'
- },
- {
- id:10,
- name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL50-12.5-3/4 杩涘嚭鍙N100 棰濆畾娴侀噺50m鲁/h 棰濆畾鎵▼12.5m 3kW HT200鍙惰疆 1鍙�',
- description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
- logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
- type: '琛屼笟閫氱敤绫�',
- applicationCode: "AC0394822",
- industry: '杩愮淮鏈嶅姟绫�',
- price: '楼5319.0',
- rating: 4.2,
- date: '2024-12-20',
- tag: 'pump'
- },
-]);
-const dispProductType = ref([])
+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(() => {
- filterProduct();
+ initComanyData();
+ initData();
+ // filterProduct();
})
-const filterProduct = () => {
- dispProductType.value = softwareList.value.filter((item) => {
- return item.tag===selectedSort.value
+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 changeSelectType = (tag: string) => {
- selectedSort.value = tag;
- filterProduct()
+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 item.CompanyName === factorySelect.value
+ })
+ }
+ 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 changeSelectType = (tag: number) => {
+ typeSelect.value = tag;
+ initData();
+};
+
+const handleBuyClick = (productId: string) => {
+ // 鎵惧埌褰撳墠鐐瑰嚮鐨勪骇鍝�
+ const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
+ if (currentProduct) {
+ // 淇濆瓨浜у搧淇℃伅鍒發ocalStorage
+ localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
+ }
+ router.push(`/product/${currentProduct.Id}`);
+};
+const handleEecLevel = (tag: number) => {
+ EecSelect.value = tag;
+ filterProduct();
+}
</script>
<style scoped>
@@ -298,19 +283,20 @@
.goods-warp-item {
position: relative;
- padding: 34px 12px 17px;
+ padding: 10px 12px 17px;
margin: 20px 3px 0;
- background-color: #fff;
+ background-color: #f6f7f9;
overflow: hidden;
box-sizing: border-box;
/* transition: border-color .1s ease; */
border-radius: 5px;
- transition: all .3s;
+ transition: all 0.3s;
+ margin-top: 10px;
}
.goods-warp-item:hover {
- border-color: rgba(0, 0, 0, .09);
- box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
+ border-color: rgba(0, 0, 0, 0.09);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.bg-grey {
@@ -334,7 +320,7 @@
}
.industrial-soft-style::after {
- content: "";
+ content: '';
position: absolute;
top: 0;
left: 0;
@@ -349,6 +335,8 @@
max-height: 180px;
vertical-align: top;
border: 0;
+ padding-bottom: 20px;
+ box-sizing: border-box;
}
.goods-name {
@@ -373,7 +361,7 @@
color: #999;
line-height: 16px;
overflow: hidden;
- text-align: left
+ text-align: left;
}
.link-btn {
@@ -398,19 +386,126 @@
}
.goods-price {
- width: 100%;
+ /* 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-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;
+}
+
:deep(.el-button--default) {
--el-button-bg-color: transparent;
--el-button-border-color: transparent;
--
Gitblit v1.9.3