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 | 627 +++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 481 insertions(+), 146 deletions(-) diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue index 4824621..e083846 100644 --- a/src/views/IndustrialSoftware.vue +++ b/src/views/IndustrialSoftware.vue @@ -1,176 +1,511 @@ <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" - > - {{ item }} - </el-button> + <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="factorySelect = item.CompanyId" size="small"> + {{ 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="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> - <!-- 宸ヤ笟杞欢|宸ヤ笟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 class="flex justify-center mt-8"> + <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 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> - </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> - </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> <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: 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('鏈�鏂�'); -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([ - { - 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 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 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> +.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 { + max-width: 180px; + max-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-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-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; +} + :deep(.el-button--default) { --el-button-bg-color: transparent; --el-button-border-color: transparent; -- Gitblit v1.9.3