修改能效标识查询页面

tanghaolin

2025-02-13 a009c0021cd72a2c7379b7b04eacd694e0cb98f2

 src/views/IndustrialSoftware.vue

@@ -1,12 +1,13 @@
<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="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="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">
               <div class="flex items-center">
                  <span class="text-gray-500 ">类型：</span>
                  <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"
@@ -19,268 +20,253 @@
            </div>

            <!-- 厂商 -->
            <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;">
               <div class="flex items-center ">
            <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 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;">
            <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"
                  <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;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" :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 { id } from 'element-plus/es/locale';
import { ref, onMounted } from 'vue';
import EecLevel1 from '@/assets/icons/energy_level_1.svg'
import EecLevel2 from '@/assets/icons/energy_level_2.svg'
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 type = [
   { name: "全部", tag: -1 },
   { 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 },
   { name: "二级能效", tag: 2 }
];

// 选中状态
const typeSelect = ref(0);
const factorySelect = ref('全部');
const EecSelect = ref(0);
const m_PageLoading = ref(false)

// 选中状态
const typeSelect = ref(1);
const factorySelect = ref('-99');
const EecSelect = ref(0);

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 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([])
// 源数据
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 === typeSelect.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 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;
   filterProduct()
   initData();
};

const handleBuyClick = (productId: string) => {
   // 找到当前点击的产品
   const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
   if (currentProduct) {
      console.log("🚀 ~ currentProduct:", currentProduct)
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   router.push(`/product/${productId}`);
};
const handleEecLevel = (tag: number) => {
   EecSelect.value = tag;
   filterProduct();
}
</script>

<style scoped>
@@ -298,20 +284,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, .2)
   border-color: rgba(0, 0, 0, 0.09);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bg-grey {
@@ -335,7 +321,7 @@
}

.industrial-soft-style::after {
   content: "";
   content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -350,6 +336,8 @@
   max-height: 180px;
   vertical-align: top;
   border: 0;
   padding-bottom: 20px;
   box-sizing: border-box;
}

.goods-name {
@@ -374,7 +362,7 @@
   color: #999;
   line-height: 16px;
   overflow: hidden;
   text-align: left
   text-align: left;
}

.link-btn {
@@ -399,27 +387,36 @@
}

.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, .65);
   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";
   font-feature-settings: 'tnum';
   display: inline-block;
   height: auto;
   margin: 0 8px 0 0;
@@ -429,7 +426,7 @@
   white-space: nowrap;
   cursor: default;
   opacity: 1;
   transition: all .3s cubic-bezier(.78, .14, .15, .86);
   transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
   margin-right: 24px;
   font-size: 14px;
}
@@ -476,10 +473,8 @@
}

.eec-filter-currentOrder {

   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;

}

.eec-filter-currentOrder:hover {
@@ -511,8 +506,6 @@
   color: #fff;
   font-size: 12px;
}



:deep(.el-button--default) {
   --el-button-bg-color: transparent;