修改查看证书

tanghaolin

2025-02-14 8775f9f881574e8cd22e9b44a14c30711097d1fe

 src/views/IndustrialSoftware.vue

@@ -1,17 +1,26 @@
<template>
   <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px;padding-top:15px ;">
      <div class=" 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="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="EecSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag"
                     <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="EecSelect === item.tag ? 'primary' : 'default'" size="small">
                        :type="typeSelect === item.tag ? 'primary' : 'default'"
                        size="small"
                     >
                        {{ item.name }}
                     </span>
                  </div>
@@ -19,257 +28,377 @@
            </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="clickFactory(item)"
                     >
                        {{ item.CompanyAbbName }}
                     </span>
                  </div>
               </div>
            </div>

            <!-- 能效等级 -->
            <div class="flex gap-4 p-4" style="background-color: #ecedee;padding: 10px;">
               <el-button v-for="sort in EecClass" :key="sort.tag" size="small"
                  :type="EecSelect === sort.tag ? 'primary' : 'default'" class="!px-6">
                  {{ 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="flex justify-between gap-4">
                        <div class="link-btn" @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" @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>

         <!-- 分页 -->
         <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 { 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 { 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: 1 },
   { name: '容积式空压机', tag: 2 },
   { name: "通风机", tag: 3 },
   { name: "冷水机组", tag: 4 },
   { name: "电力变压器", tag: 5 },
   { name: "工业锅炉", tag: 6 },
   { 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: 0 },
   { name: '一级能效', tag: 1 },
   { name: '二级能效', tag: 2 },
];

const m_PageLoading = ref(false);
const dialogVisibleCertifcate = ref(false);

// 选中状态
const selectedIndustry = ref('全部');
const factorySelect = ref('全部');
const typeSelect = ref(1);
const factorySelect = ref('-99');
const factoryIncludeType = ref(null);
const EecSelect = ref(0);

const m_curCertificatePath = ref('');

// 示例数据
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
   },
const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
};

   {
      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 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();
})
const filterProduct = () => {
   dispProductType.value = softwareList.value.filter((item) => {
      return item.tag === EecSelect.value
   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 factoryIncludeType.value.includes(item.Type);
      });
   }
   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) {
      // 保存产品信息到localStorage
      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()
   filterProduct();
};
</script>

<style scoped>
<style lang="scss" scoped>
.w-100 {
   width: 100%;
}
@@ -284,19 +413,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 {
@@ -320,7 +450,7 @@
}

.industrial-soft-style::after {
   content: "";
   content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -331,10 +461,12 @@
}

.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 {
@@ -359,52 +491,68 @@
   color: #999;
   line-height: 16px;
   overflow: hidden;
   text-align: left
   text-align: left;
}

.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;
   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;
}

.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;
@@ -414,7 +562,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;
}
@@ -432,6 +580,92 @@
   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;