From 8c3d15eae99d51193e20ff222dedf96cdba57b33 Mon Sep 17 00:00:00 2001 From: tanghaolin <1723298894@qq.com> Date: 星期二, 15 四月 2025 09:21:43 +0800 Subject: [PATCH] 删除多余照片 --- src/views/IndustrialSoftware.vue | 651 +++++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 431 insertions(+), 220 deletions(-) diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue index bdc9b79..3e3d3da 100644 --- a/src/views/IndustrialSoftware.vue +++ b/src/views/IndustrialSoftware.vue @@ -1,8 +1,31 @@ <template> - <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px; padding-top: 15px"> + <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 gap-4"> + <span class="text-gray-500" >鏌ヨ锛�</span> + <el-input + v-model="searchQuery" + placeholder="璇疯緭鍏ュ叕鍙稿悕绉�/鍨嬪彿/浜у搧鍚嶇О" + class="!w-[300px]" + clearable + @input="handleSearch" + > + <template #prefix> + <el-icon><Search /></el-icon> + </template> + </el-input> + </div> + </div> + <!-- 绫诲瀷 --> <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px"> <div class="flex items-center"> @@ -30,14 +53,12 @@ <div class="flex flex-1"> <span v-for="item in factory" - :key="item.tag" + :key="item.CompanyId" class="ant-tag !px-4" - :class="factorySelect === item.tag ? 'ant-tag-checked' : ''" - :type="factorySelect === item.tag ? 'primary' : 'default'" - @click="factorySelect = item.tag" - size="small" + :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''" + @click="clickFactory(item)" > - {{ item.name }} + {{ item.CompanyAbbName }} </span> </div> </div> @@ -50,7 +71,7 @@ v-for="sort in EecClass" :key="sort.tag" size="small" - @click="EecSelect = sort.tag" + @click="handleEecLevel(sort.tag)" :type="EecSelect === sort.tag ? 'primary' : 'default'" :class="EecSelect == sort.tag ? 'eec-filter-currentOrder' : ''" class="!px-6" @@ -61,81 +82,202 @@ </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 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> - <div class="goods-price"> - <span class="goods-price-selling">{{ app.price }}</span> - </div> - <!-- <div class="flex justify-between items-center"> + <div class="goods-name" style="font-size: 14px; font-weight: bold" :title="app.Model">浜у搧鍚嶇О:{{ app.ModelType }}</div> + <!-- 浜у搧 --> + <div class="goods-name" :title="app.Model">鍘傚鍚嶇О锛歿{ app.CompanyName }}</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">闈㈣</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" @click="handleCertificateClick(app)">{{ + 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" @click="handleBuyClick(app.id)">绔嬪嵆璐叆</div> - </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" v-if="false"> + <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="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" + :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 { onMounted, ref, computed } from 'vue'; +import { useRouter, useRoute } from 'vue-router'; +import { useLogin } from '@/stores/useLogin'; +import axios from 'axios'; +import { ElMessage } from 'element-plus'; +import { Search } from '@element-plus/icons-vue'; const router = useRouter(); +const route = useRoute(); +const loginStore = useLogin(); + +// 鑾峰彇鐢ㄦ埛淇℃伅 +const userInfo = computed(() => { + const UserInfo = loginStore.getUserInfo(); + return UserInfo ? UserInfo : null; +}); // 鍒嗙被閫夐」 const type = [ - { name: '鐢垫満', tag: 0 }, { name: '娉�', tag: 1 }, { name: '瀹圭Н寮忕┖鍘嬫満', tag: 2 }, { name: '閫氶鏈�', tag: 3 }, { name: '鍐锋按鏈虹粍', tag: 4 }, - { name: '鐢靛姏鍙樺帇鍣�', tag: 5 }, - { name: '宸ヤ笟閿呯倝', tag: 6 }, + { name: '鐢垫満', tag: 7 }, ]; -const factory = [ - { name: '鍏ㄩ儴', tag: '鍏ㄩ儴' }, - { name: '鍑硥', tag: '鍑硥' }, -]; +const factory = ref([]); const EecClass = [ { name: '鍏ㄩ儴', tag: 0 }, { name: '涓�绾ц兘鏁�', tag: 1 }, { name: '浜岀骇鑳芥晥', tag: 2 }, - { name: '涓夌骇鑳芥晥', tag: 3 }, ]; +const m_PageLoading = ref(false); +const dialogVisibleCertifcate = ref(false); + // 閫変腑鐘舵�� -const typeSelect = ref(0); -const factorySelect = ref('鍏ㄩ儴'); +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 }, @@ -143,192 +285,219 @@ }; const m_RequestDataObj = { - 0: { requestPath: 'static/EecProductData/' }, - 1: { requestPath: '' }, - 2: { requestPath: '' }, - 3: { requestPath: '' }, - 4: { requestPath: '' }, - 5: { requestPath: '' }, - 6: { requestPath: '' }, + 1: { requestPath: 'static/EecProductData/Pump.json?v=' + new Date().getTime() }, + 2: { requestPath: 'static/EecProductData/AirCompressor.json?v=' + new Date().getTime() }, + 3: { requestPath: 'static/EecProductData/Fan.json?v=' + new Date().getTime() }, + 4: { requestPath: 'static/EecProductData/WaterChiller.json?v=' + new Date().getTime() }, + 5: { requestPath: 'static/EecProductData/PowerTransformer.json?v=' + new Date().getTime() }, + 6: { requestPath: 'static/EecProductData/IndustrialBoiler.json?v=' + new Date().getTime() }, + 7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() }, }; -// 绀轰緥鏁版嵁 -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×tamp=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×tamp=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×tamp=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: '鏅鸿兘鎶�鏈湇鍔$鐞嗙郴缁烿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: 0, - }, - { - 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: 0, - }, +// 婧愭暟鎹� +const allEecProduct = ref([]); +// 杩囨护鍚庣殑鏁版嵁 +const filterProductData = ref([]); +//鏄剧ず鐨勬暟鎹� +const dispEecProduct = ref([]); - { - id: 6, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1, - }, - { - id: 7, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1, - }, - { - id: 8, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1, - }, - { - id: 9, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1, - }, - { - id: 10, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1, - }, -]); -const dispProductType = ref([]); - -onMounted(() => { - initData(); - filterProduct(); +const m_paginationConfig = ref({ + currentPage: 1, + pageSize: 12, }); +// 鎼滅储鐩稿叧 +const searchQuery = ref(''); + +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 = () => { - filterProduct(); + 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 = () => { - dispProductType.value = softwareList.value.filter((item) => { - return item.tag === typeSelect.value; + // 鍏堟寜绫诲瀷绛涢�� + filterProductData.value = allEecProduct.value.filter((item) => { + return item.Type === typeSelect.value; }); + + // 鎼滅储绛涢�� + if (searchQuery.value) { + const query = searchQuery.value.toLowerCase(); + filterProductData.value = filterProductData.value.filter((item) => { + return ( + item.CompanyName.toLowerCase().includes(query) || + item.Model.toLowerCase().includes(query) || + item.ModelType.toLowerCase().includes(query) + ); + }); + } + + // 鑳芥晥绛夌骇绛涢�� + 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; - filterProduct(); + initData(); }; const handleBuyClick = (productId: string) => { // 鎵惧埌褰撳墠鐐瑰嚮鐨勪骇鍝� - const currentProduct = dispProductType.value.find((item) => item.id === productId); + const currentProduct = dispEecProduct.value.find((item) => item.Id === productId); if (currentProduct) { // 淇濆瓨浜у搧淇℃伅鍒發ocalStorage localStorage.setItem('currentProduct', JSON.stringify(currentProduct)); } - router.push(`/product/${productId}`); + if (userInfo.value&& userInfo.value.Token) { + router.push(`/product/${currentProduct.Id}`); + } else { + loginStore.logOut(); + router.replace({ + path: '/login', + query: { redirectPath: route.fullPath }, + }); + } +}; +const handleCertificateClick = (row: any) => { + dialogVisibleCertifcate.value = true; + m_curCertificatePath.value = row.CertificatePath; +}; +const handleEecLevel = (tag: number) => { + EecSelect.value = tag; + filterProduct(); +}; + +const handleSearch = () => { + filterProduct(); }; </script> -<style scoped> +<style lang="scss" scoped> .w-100 { width: 100%; } @@ -343,9 +512,9 @@ .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; */ @@ -391,16 +560,18 @@ } .goods-img { - max-width: 180px; - max-height: 180px; + width: 180px; + height: 180px; vertical-align: top; border: 0; + padding-bottom: 20px; + box-sizing: border-box; } .goods-name { position: relative; width: 100%; - height: 42px; + height: auto; line-height: 150%; margin-top: 5px; color: #333; @@ -423,36 +594,53 @@ } .link-btn { - display: inline-block; + display: inline-flex; width: 100%; height: 32px; font-size: 14px; line-height: 30px; background: #fff; - color: #e65650; + color: #1592fc; border: 1px solid #e2e2e2; border-radius: 20px; text-align: center; margin-top: 3px; box-sizing: border-box; + padding: 0 25px; + justify-content: center; + align-items: center; + gap: 15px; } .link-btn:hover { - background: #e65650; + background: #1592fc; color: #fff; cursor: pointer; + + .icon-path { + fill: #fff; + } } .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; } @@ -554,7 +742,30 @@ 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