From d651cb1c7da78669a8f66939225a290cf8fde1c8 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期五, 21 二月 2025 10:24:46 +0800
Subject: [PATCH] 修改商品价格预计潜水泵测试报告图片

---
 src/views/IndustrialSoftware.vue |  814 +++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 669 insertions(+), 145 deletions(-)

diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue
index 4824621..adb95cf 100644
--- a/src/views/IndustrialSoftware.vue
+++ b/src/views/IndustrialSoftware.vue
@@ -1,176 +1,700 @@
 <template>
-	<div class="container mx-auto px-4 py-8">
-		<!-- 椤堕儴鍒嗙被鑿滃崟 -->
-		<div class="bg-white rounded-lg shadow mb-6">
-			<!-- 琛屼笟閫氱敤 -->
-			<div class="border-b p-4">
-				<div class="flex items-center mb-2">
-					<span class="text-gray-500 w-24">琛屼笟閫氱敤锛�</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"
+	<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"
 						>
-							{{ item }}
-						</el-button>
-					</div>
+							{{ 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>
 
-			<!-- 宸ヤ笟杞欢|宸ヤ笟APP浜у搧鍒嗙被 -->
-			<div class="border-b p-4">
-				<div class="flex items-center mb-2">
-					<span class="text-gray-500 w-24">宸ヤ笟杞欢|宸ヤ笟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>
-				</div>
-			</div>
-
-			<!-- 绛涢�夋潯浠� -->
-			<div class="p-4">
-				<div class="grid grid-cols-3 gap-6">
-					<el-select v-model="region" placeholder="鍖哄煙" class="w-full">
-						<el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
-						<el-option label="鍖椾含" value="鍖椾含" />
-						<el-option label="涓婃捣" value="涓婃捣" />
-						<el-option label="骞垮窞" value="骞垮窞" />
-					</el-select>
-
-					<el-select v-model="industry" placeholder="鍒堕�犱笟缁嗗垎" class="w-full">
-						<el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
-						<el-option label="瑁呭鍒堕��" value="瑁呭鍒堕��" />
-						<el-option label="姹借溅鍒堕��" value="姹借溅鍒堕��" />
-						<el-option label="鐢靛瓙鍒堕��" value="鐢靛瓙鍒堕��" />
-					</el-select>
-
-					<el-select v-model="business" placeholder="涓氬姟鐜妭" class="w-full">
-						<el-option label="鍏ㄩ儴" value="鍏ㄩ儴" />
-						<el-option label="鐮斿彂璁捐" value="鐮斿彂璁捐" />
-						<el-option label="鐢熶骇鍒堕��" value="鐢熶骇鍒堕��" />
-						<el-option label="杩愯惀绠$悊" value="杩愯惀绠$悊" />
-					</el-select>
-				</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>
 
-		<!-- 鎺掑簭閫夐」 -->
-		<div class="flex gap-4 mb-6">
-			<el-button
-				v-for="sort in sortOptions"
-				:key="sort"
-				:type="selectedSort === sort ? 'primary' : 'default'"
-				class="!px-6"
-				@click="selectedSort = sort"
-			>
-				{{ sort }}
-			</el-button>
-		</div>
-
-		<!-- 杞欢鍒楄〃 -->
-		<div class="grid grid-cols-4 gap-6">
-			<el-card v-for="(app, index) in softwareList" :key="index" class="software-card">
-				<div class="flex flex-col h-full">
-					<img :src="app.logo" :alt="app.name" class="w-24 h-24 object-contain mb-4 mx-auto" />
-					<h3 class="text-lg font-medium mb-2">{{ app.name }}</h3>
-					<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="flex justify-between items-center">
-						<el-rate v-model="app.rating" disabled />
-						<span class="text-gray-400 text-sm">{{ app.date }}</span>
-					</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>
-			</el-card>
-		</div>
-
-		<!-- 鍒嗛〉 -->
-		<div class="flex justify-center mt-8">
-			<el-pagination v-model:current-page="currentPage" :page-size="12" :total="100" layout="prev, pager, next" />
-		</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 { ref } 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 = ['鏈�鏂�', '鎺ㄨ崘鎸囨暟', '涓嬭浇閲�', '鏄熺骇', '璇勫垎'];
+const type = [
+	{ name: '娉�', tag: 1 },
+	{ name: '瀹圭Н寮忕┖鍘嬫満', tag: 2 },
+	{ name: '閫氶鏈�', tag: 3 },
+	{ name: '鍐锋按鏈虹粍', tag: 4 },
+	{ 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 selectedIndustry = ref('鍏ㄩ儴');
-const selectedProduct = ref('鍏ㄩ儴');
-const selectedSort = ref('鏈�鏂�');
-const region = ref('鍏ㄩ儴');
-const industry = ref('鍏ㄩ儴');
-const business = ref('鍏ㄩ儴');
-const currentPage = ref(1);
+const typeSelect = ref(1);
+const factorySelect = ref('-99');
+const factoryIncludeType = ref(null);
+const EecSelect = ref(0);
 
-// 绀轰緥鏁版嵁
-const softwareList = ref([
-	{
-		name: '椋庣伀鏁板瓧-鎶ュ簾杞︾鐞�-杩囩绠$悊绯荤粺',
-		description: '寰俊灏忕▼搴忓鎴风鑷富寮�鍙戠殑涓嬪崟绯荤粺锛岀敤鎴蜂粎闇�閫氳繃寰俊鍐呯殑鎶ュ簾杞﹂绾︿笅鍗曪紝鐢ㄦ埛鍙�氳繃寰俊鍐呯殑鎶ュ簾杞﹂绾︿笅鍗曘��',
-		logo: 'https://via.placeholder.com/150',
-		type: '琛屼笟閫氱敤绫�',
-		industry: '鐢熶骇鍒堕�犵被',
-		rating: 5,
-		date: '2024-01-06',
-	},
-	{
-		name: '鏉冨涓撳埄骞磋垂绠$悊绯荤粺',
-		description: '鏉冨涓撳埄骞磋垂绠$悊杞欢鏄敱杩愯惀鏉冨淇℃伅绉戞妧鏈夐檺鍏徃鑷富寮�鍙戠殑涓�娆句笓鍒╁勾璐圭鐞嗚蒋浠躲��',
-		logo: 'https://via.placeholder.com/150',
-		type: '浼佷笟涓撶敤绫�',
-		industry: '缁忚惀绠$悊绫�',
-		rating: 4.5,
-		date: '2024-12-25',
-	},
-	{
-		name: '閫氫俊淇″彿澶勭悊绯荤粺',
-		description: '閫氫俊淇″彿澶勭悊涓庡垎鏋愮郴缁熻蒋浠舵槸涓�濂楃敤浜庡閫氫俊淇″彿杩涜鍒嗘瀽鍜屽鐞嗙殑绯荤粺銆�',
-		logo: 'https://via.placeholder.com/150',
-		type: '鍩虹鍏辨�х被',
-		industry: '鐮斿彂璁捐绫�',
-		rating: 4.8,
-		date: '2024-12-20',
-	},
-	{
-		name: '鏅鸿兘鎶�鏈湇鍔$鐞嗙郴缁�',
-		description: '鏅鸿兘鎶�鏈湇鍔$鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
-		logo: 'https://via.placeholder.com/150',
-		type: '琛屼笟閫氱敤绫�',
-		industry: '杩愮淮鏈嶅姟绫�',
-		rating: 4.2,
-		date: '2024-12-20',
-	},
-]);
+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, index: number) => {
+				if (typeSelect.value === 2) {
+					item.Price = item.Price * 10;
+				}
+				if (typeSelect.value === 4) {
+					item.Price = item.Price * 5;
+				}
+				let incrementFactor = 0.1 * (index + 1); // 鏍规嵁绱㈠紩璁$畻閫掑绯绘暟
+				let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 璁$畻鏂扮殑Price鍊�
+
+				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: newPrice,
+					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);
+		});
+	}
+	if (typeSelect.value === 1) {
+		filterProductData.value.sort((a: any, b: any) => {
+			const aContainsDSWQ = a.Model.includes('DSWQ');
+			const bContainsDSWQ = b.Model.includes('DSWQ');
+			const aContainsDRLOrDP = a.Model.substring(0, 3).includes('DRL') || a.Model.substring(0, 2).includes('DP');
+			const bContainsDRLOrDP = b.Model.substring(0, 3).includes('DRL') || b.Model.substring(0, 2).includes('DP');
+
+			if (aContainsDSWQ && !bContainsDSWQ) {
+				return -1;
+			} else if (!aContainsDSWQ && bContainsDSWQ) {
+				return 1;
+			} else if (aContainsDRLOrDP && !bContainsDRLOrDP) {
+				return -1;
+			} else if (!aContainsDRLOrDP && bContainsDRLOrDP) {
+				return 1;
+			} else {
+				return 0;
+			}
+		});
+	}
+	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) {
+		// 淇濆瓨浜у搧淇℃伅鍒發ocalStorage
+		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 scoped>
+<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;

--
Gitblit v1.9.3