修改数据与页面逻辑

tanghaolin

10 天以前 04a2d3e3c701a03981c4b66162ff9515f9d7dd12

 src/views/Home.vue

@@ -1,48 +1,42 @@
<template>
   <div class="h-full relative">
   <div class="w-full h-full relative">
      <!-- 轮播图部分 -->
      <div class="banner-carousel relative right-[29.5%] w-screen">
         <el-carousel height="500px" :interval="5000" arrow="always">
      <div class="banner-carousel relative w-screen h-[602px]">
         <el-carousel height="602px" :interval="3000" indicator-position="" pause-on-hover>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/test/15.jpg" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=2d82602e-8797-46d7-9b5c-59d9f88bc6d9.png;软件一体化测试平台_副本.png" class="carousel-image" /> -->
                  <img src="@/assets/carousel/home/1.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/final/2.jpg" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
                  <img src="@/assets/carousel/home/2.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/final/5.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=072c9dda-3ffb-410d-be93-a88ec6c7e765.jpg;40周年1.jpg" alt=""> -->
                  <img src="@/assets/carousel/home/3.png" class="carousel-image" />
               </div>
            </el-carousel-item>
            <!-- <el-carousel-item>
               <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
            </el-carousel-item> -->
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/home/4.png" class="carousel-image" />
               </div>
            </el-carousel-item>
         </el-carousel>
      </div>
      <div class="relative z-20 2 -mt-24">
      <div class="relative z-20 2 w-full flex justify-center items-center">
         <!-- 功能按钮区域 -->
         <div class="bg-white py-8">
         <div class="bg-white py-8" v-if="false">
            <div class="mx-auto px-32">
               <div class="grid grid-cols-4 divide-x-w-default">
                  <router-link
                     to="/subsidy-application"
                     class="block"
                     style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3"
                  >
                  <a @click="toSubsidy" class="block"
                     style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"
                              />
                              <path fill="currentColor"
                                 d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z" />
                           </svg>
                        </div>
                        <div>
@@ -50,15 +44,13 @@
                           <div class="text-sm text-info-light-3">Subsidy Application</div>
                        </div>
                     </div>
                  </router-link>
                  </a>
                  <router-link to="/certified-products" class="block" style="border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"
                              />
                              <path fill="currentColor"
                                 d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" />
                           </svg>
                        </div>
                        <div>
@@ -71,10 +63,8 @@
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
                              />
                              <path fill="currentColor"
                                 d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                           </svg>
                        </div>
                        <div>
@@ -83,15 +73,9 @@
                        </div>
                     </div>
                  </router-link>
                  <router-link to="/" class="block" style="border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center" @click="linkClick(' https://www.xpump.net/')">
                  <a class="block" style="border-right: 1px solid #e3e3e3" @click="linkClick">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <!-- <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path
                                 fill="currentColor"
                                 d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z"
                              />
                           </svg> -->
                           <img :src="YWLogo" class="h-full" />
                        </div>
                        <div>
@@ -99,353 +83,218 @@
                           <div class="text-sm text-info-light-3">Pump Search</div>
                        </div>
                     </div>
                  </router-link>

                  <!-- <router-link to="/publish-demand" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/publish-demand.svg" alt="发需求" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">发需求</div>
                              <div class="text-gray-400 text-sm">Publish Demand</div>
                           </div>
                        </div>
                     </div>
                  </router-link>

                  <router-link to="/find-app" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/find-app.svg" alt="找APP" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">找APP</div>
                              <div class="text-gray-400 text-sm">Find APP</div>
                           </div>
                        </div>
                     </div>
                  </router-link>

                  <router-link to="/find-demand" class="block">
                     <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
                        <div class="flex flex-col items-center">
                           <div class="w-16 h-16 mb-4">
                              <img src="@/assets/icons/find-demand.svg" alt="找需求" class="w-full h-full" />
                           </div>
                           <div>
                              <div class="text-lg font-medium">找需求</div>
                              <div class="text-gray-400 text-sm">Find Demand</div>
                           </div>
                        </div>
                     </div>
                  </router-link> -->
                  </a>
               </div>
            </div>
         </div>
         <div class="bg-white px-4 py-4 flex flex-col gap-8">
         <!-- 主内容区域 -->
         <div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
            <!-- 产品区域 -->
            <div class="bg-[#F0F3EF] w-full relative">
               <div class="catalog-list bg-[#fff] grid grid-cols-5 gap-4 justify-center items-center">
                  <div :class="state.curSelectCatalog === item.tag ? 'catalog-tag-active' : ''"
                     class="catalog-item" v-for="item in state.catalog" :key="item.tag"
                     @click="changeCatalog(item.tag)">
                     {{ item.name }}
                  </div>
               </div>
               <!-- 我需要设置swiper的默认显示的slide -->
               <swiper :direction="'vertical'" @swiper="onSwiper" @slideChange="onSlideChange"
                  :slidesPerView="state.catalogSwiperIndex" :centeredSlides="true" :autoplay="{
                     delay: 1000000,
                     disableOnInteraction: false,
                     pauseOnMouseEnter: true,
                  }" :effect="'fade'" :modules="SwiperModule" class="catalog-swiper w-full h-[765px]">
                  <swiper-slide class="w-full h-full" v-for="(item, index) in state.catalogItemList" :key="index">
                     <div class="catalog-continer overflow-hidden">
                        <div class="catalog-continer-item p-4 relative" v-for="child in item" :key="child.Id"
                           @click="handleSeriesClick(child)">
                           <div class="w-full h-[250px]">
                              <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath"
                                 alt="" />
                           </div>
                           <div class="mt-4 text-center font-medium" style="font-size: 18px">
                              {{ child.Model }}
                           </div>

                           <div class="text-center font-medium text-[14px] bg-[#fff] text-[#003a8f] absolute top-[10px] right-[-13px]"
                              style="font-weight: bold">
                              <!-- {{ getCompanyNameByType(child.Type) }} -->
                              <div class="etiquet-price">
                                 <p>{{ child.CompanyName }}</p>
                                 <div></div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </swiper-slide>
               </swiper>
               <div class="text-center text-[18px] text-[#5c5c5c] more-series-btn" @click="handleCatalogClick">
                  更多>>
               </div>
            </div>
            <!-- 新闻公告区域 -->
            <div class="w-full mb-4">
               <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
               <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><Document /></el-icon>
                     <span class="text-medium font-bold"> <span class="text-primary">新闻</span>政策</span>
                  </div>
                  <el-button text>更多</el-button>
               </div>
               <div class="flex">
                  <img
                     class="w-[30%] flex-0 cursor-pointer"
                     src="@/assets/home/notice1.png"
                     @click="routeClick('/news-detail/8')"
                     alt="新闻政策"
                  />
                  <div class="bg-page p-4 flex-auto">
                     <div
                        class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer"
                        @click="routeClick('/news-detail/8')"
                     >
                        上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
               </div> -->
               <div class="flex gap-6">
                  <!-- 左侧新闻模板 -->
                  <div class="w-[373px] flex flex-col gap-4">
                     <div class="w-full relative left-news-temp-div">
                        <img class="w-full flex-0 cursor-pointer" src="@/assets/home/notice1.png"
                           @click="routeClick('/news-detail/8')" alt="新闻政策" />
                     </div>
                     <div class="text-small text-regular">
                        有关单位：
                        为贯彻落实《上海市节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                     <span class="news-title">
                        《上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》
                     </span>
                  </div>
                  <div class="flex-auto right-news-temp-div">
                     <div class="w-full h-[45px] flex justify-between items-center">
                        <div class="w-[20%] font-bold text-[20px]">新闻政策</div>
                        <div class="w-[80%] text-right pr-[30px] text-[18px] text-[#5c5c5c]">更多>></div>
                     </div>
                     <div class="mt-4">
                        <div
                           v-for="(item, index) in newsList"
                           :key="index"
                           class="flex text-regular justify-between items-center py-2 news-item"
                        >
                           <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
                              <!-- <div class="w-1.5 h-1.5 rounded-full bg-gray-400 mr-2"></div> -->
                              <div
                                 class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
                              >
                                 {{ item.title }}
                              </div>
                     <div class="w-full flex justify-between gap-8" style="height: calc(100% - 45px)">
                        <div class="w-[422px] flex-shrink-0">
                           <img src="@/assets/home/news_1.jpg" alt="新闻政策" class="w-full h-[187px]" />
                           <div class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
                              @click="routeClick('/news-detail/8')">
                              上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
                           </div>
                           <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
                           <div class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
                              style="text-indent: 2rem">
                              有关单位：
                              为贯彻落实《上海市节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                           </div>
                        </div>
                        <div class="mt-4">
                           <div v-for="(item, index) in newsList" :key="index"
                              class="flex text-regular justify-between items-center news-item">
                              <div class="flex items-center hover:text-primary w-full"
                                 @click="handleNewsClick(item)">
                                 <div class="w-[6px] h-[6px] mr-2 news-list-dot"></div>
                                 <div
                                    class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
                                    {{ item.title }}
                                 </div>
                              </div>
                              <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <!-- 活动合作区域 -->
            <div class="w-full">
               <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><Operation /></el-icon>
                     <span class="text-medium font-bold"> <span class="text-primary">能效</span>产品</span>
            <!-- 能效产品分类 -->
            <div class="eec-product-classify-div mb-[170px]">
               <div class="w-full mt-4">
                  <div class="flex justify-between items-center">
                     <div class="flex items-center space-x-2 ml-2 font-bold">
                        <span class="text-medium font-bold"> 能效产品分类</span>
                     </div>
                  </div>
                  <el-button text @click="routeClick('/certified-products')">更多</el-button>
               </div>
               <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div">
                  <div class="flex-auto h-full">
                     <!-- <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" /> -->
                     <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                  </div>
                  <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                     <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                        <div class="flex flex-col justify-between items-center mb-4 gap-2">
                           <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                           <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                              {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">个</span>
                           </div>
                        </div>
                        <div class="grid grid-cols-1 gap-4 h-[140px]">
                           <!-- <div class="flex gap-4 items-center" v-for="(item, index) in cooperationData" :key="index">
                              <span class="text-[#26c4f6]">{{ item.region }}</span>
                              <div>
                                 <span class="text-white font-bold">{{ item.count }}</span>
                                 <span class="text-sm text-white-500 ml-1 text-white">个</span>
                  <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div" v-if="false">
                     <div class="flex-auto h-full">
                        <!-- <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" /> -->
                        <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                     </div>
                     <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                        <div class="h-full bg-[#393939] px-4 py-4 flex-1"
                           style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                           <div class="flex flex-col justify-between items-center mb-4 gap-2">
                              <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                              <div
                                 class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                                 {{ m_allEecProductNumber }}<span
                                    class="text-base text-info-light-3 ml-1">个</span>
                              </div>
                           </div> -->
                           <swiper
                              :direction="'vertical'"
                              :slidesPerView="5"
                              :spaceBetween="10"
                              :autoplay="{
                           </div>
                           <div class="grid grid-cols-1 gap-4 h-[140px]">
                              <swiper :direction="'vertical'" :slidesPerView="5" :spaceBetween="10" :autoplay="{
                                 delay: 1500,
                                 disableOnInteraction: false,
                              }"
                              :modules="SwiperModule"
                              class="mySwiper"
                           >
                              <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
                                 <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                    <span class="text-[#26c4f6]">{{ item.region }}</span>
                                    <div>
                                       <span class="text-white font-bold">{{ item.count }}</span>
                                       <span class="text-sm ml-1" style="color: #aaa">个</span>
                              }" :modules="SwiperModule" class="mySwiper">
                                 <swiper-slide v-for="(item, index) in cooperationData" :key="index"
                                    style="width: 100%; height: 20px">
                                    <div
                                       style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                       <span class="text-[#26c4f6]">{{ item.region }}</span>
                                       <div>
                                          <span class="text-white font-bold">{{ item.count }}</span>
                                          <span class="text-sm ml-1" style="color: #aaa">个</span>
                                       </div>
                                    </div>
                                 </div>
                              </swiper-slide>
                           </swiper>
                                 </swiper-slide>
                              </swiper>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <!-- 工业软件分类统计 -->
            <div class="w-full bg-[#f6f7f9]">
               <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><DataLine /></el-icon>
                     <span class="text-medium font-medium">工业软件｜工业APP<span class="text-primary">产品分类</span></span>
               <!-- 工业软件分类统计 -->
               <div class="w-full bg-[#f6f7f9]">
                  <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                     <div class="flex items-center space-x-2 ml-2 font-bold">
                        <el-icon class="text-blue-500"><DataLine /></el-icon>
                        <span class="text-medium font-medium">工业软件｜工业APP<span class="text-primary">产品分类</span></span>
                     </div>
                  </div> -->
                  <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">能效产品分类</div>
                  <div class="flex">
                     <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
                     <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
                  </div>
               </div> -->
               <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">能效产品分类</div>
               <div class="flex">
                  <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
                  <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
               </div>
            </div>
         </div>
         <!-- 返回顶部 -->
         <div id="scroll-to-top"
            class="group absolute bottom-[100px] z-[30] right-[100px] transition-all duration-300 cursor-pointer"
            :class="{
               'opacity-0 translate-y-4 fade-leave-active': scrollPercent < 35,
               'opacity-100 translate-y-0 fade-enter-active': scrollPercent >= 35,
            }" v-show="scrollPercent >= 35" @click="scrollToTop">
            <div
               class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200">
               <img src="@/assets/home/Totop.jpg" alt="返回顶部" class="" />
            </div>
         </div>
      </div>

      <!-- 浮动右侧栏 -->
      <div class="fixed right-[17px] top-2/3 transform -translate-y-1/2 z-50">
         <div class="flex flex-col">
            <!-- 购物车 -->
            <div class="group relative" v-if="false">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                     />
                  </svg>
               </div>
               <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                  <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">购物车</div>
               </div>
            </div>

            <!-- 我的 -->
            <div class="group relative" v-if="false">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                     />
                  </svg>
               </div>
               <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                  <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">我的</div>
               </div>
            </div>

            <!-- 客服 -->
            <div class="group relative">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                  @click="showCustomerService = true"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
                     />
                  </svg>
                  <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">客服</div>
               </div>
               <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                  <img :src="CallMe" width="150" height="150" />
               </div> -->
            </div>

            <!-- 反馈 -->
            <div class="group relative" @click="toFeedBack">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                     />
                  </svg>
                  <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">反馈</div>
               </div>
            </div>
            <div class="group relative">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
               >
                  <svg
                     t="1740060002788"
                     class="icon h-6 w-6 text-gray-600"
                     viewBox="0 0 1024 1024"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="13742"
                     width="128"
                     height="128"
                  >
                     <path
                        d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
                        fill="#000000"
                        p-id="13743"
                     ></path>
                  </svg>
                  <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">微信</div>
               </div>
               <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                  <img :src="CallMe" width="150" height="150" />
               </div>
            </div>

            <!-- 返回顶部 -->
            <div class="group relative" @click="scrollToTop">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                  </svg>
                  <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div>
               </div>
            </div>
         </div>
      </div>
      <!-- 客服对话框 -->
      <el-dialog
         v-model="showCustomerService"
         :show-close="true"
         :modal="true"
         :close-on-click-modal="false"
         :close-on-press-escape="false"
         class="customer-service-dialog"
      >
         <customer-service />
      </el-dialog>
      <customer-service
         class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
         v-show="showCustomerService" @close="showCustomerService = false" />
   </div>
</template>

<script setup lang="ts">
import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { onMounted, ref, nextTick } from 'vue';
import { onMounted, ref, nextTick, reactive } from 'vue';
import { useRouter } from 'vue-router';
import YWLogo from '@/assets/logo/yw_logo.png';
import CallMe from '@/assets/qrcode/callme.jpg';
import axios from 'axios';
import CustomerService from '@/components/CustomerService.vue';

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
import { Autoplay, EffectFade, Virtual } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

const SwiperModule = [Autoplay];
const SwiperModule = [Autoplay, EffectFade, Virtual];
const router = useRouter();

const catalogSwiperRef = ref<HTMLElement | null>(null);

const scrollPercent = ref(0);

const showCustomerService = ref(false);

const newsList = ref([
   {
@@ -511,14 +360,31 @@
   //    date: '2024-03-07',
   // },
]);

const linkClick = (url) => {
   window.open(url, '_blank');
const m_RequestDataObj = {
   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() },
   7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() },
};
const state = reactive({
   catalog: [
      { name: '泵', tag: 1 },
      { name: '容积式空压机', tag: 2 },
      { name: '通风机', tag: 3 },
      { name: '冷水机组', tag: 4 },
      { name: '电机', tag: 7 },
   ],
   curSelectCatalog: 1,
   catalogSwiperIndex: 0,
   catalogItemList: [],
   m_CompanyList: [],
   m_PageLoading: false,
});

const routeClick = (url) => {
   router.push(url);
};
const pieChartRef = ref<HTMLElement | null>(null);
const barChartRef = ref<HTMLElement | null>(null);

const cooperationData = ref([
   {
      region: '北京',
@@ -662,15 +528,6 @@
   },
]);

const handleNewsClick = (item: any) => {
   // if (item.link) {
   //    window.open(item.link, '_blank');
   // } else {
   //    router.push(`/news-detail/${item.id}`);
   // }
   router.push(`/news-detail/${item.id}`);
};

// 图表数据
const chartData = [
   { name: '泵', value: 7185, percentage: '18.89%' },
@@ -682,148 +539,6 @@
   { name: '电机', value: 18865, percentage: '47.59%' },
];

// 计算总量
const totalCount = computed(() => {
   return chartData.reduce((sum, item) => sum + item.value, 0);
});

const pieChartRef = ref<HTMLElement | null>(null);
const barChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
   nextTick(() => {
      initMapChart();
   });
   if (pieChartRef.value && barChartRef.value) {
      // 初始化饼图
      const pieChart = echarts.init(pieChartRef.value);
      pieChart.setOption({
         title: {
            text: `总量\n${totalCount.value}`,
            left: '30%',
            top: '50%',
            textStyle: {
               fontSize: 14,
               lineHeight: 24,
               align: 'center',
               fontWeight: 'normal',
               rich: {
                  value: {
                     fontSize: 24,
                     fontWeight: 'bold',
                     padding: [10, 0],
                  },
               },
            },
            textAlign: 'center',
            textVerticalAlign: 'middle',
         },
         tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
         },
         legend: {
            orient: 'vertical',
            right: '-1%',
            top: 'middle',
            formatter: (name: string) => {
               const item = chartData.find((d) => d.name === name);
               return `${name}: ${item?.value} (${item?.percentage})`;
            },
         },
         series: [
            {
               type: 'pie',
               radius: ['40%', '70%'],
               center: ['30%', '50%'],
               avoidLabelOverlap: false,
               itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2,
               },
               label: {
                  show: false,
               },
               emphasis: {
                  label: {
                     show: false,
                  },
               },
               data: chartData.map((item) => ({
                  value: item.value,
                  name: item.name,
               })),
               color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
            },
         ],
      });

      // 初始化柱状图
      const barChart = echarts.init(barChartRef.value);
      barChart.setOption({
         title: {
            text: '能效产品分类数量统计',
            left: 'center',
            top: 10,
         },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow',
            },
         },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
         },
         xAxis: {
            type: 'category',
            data: chartData.map((item) => item.name),
            axisLabel: {
               interval: 0,
               rotate: 30,
            },
         },
         yAxis: {
            type: 'value',
            name: '数量',
         },
         series: [
            {
               data: chartData.map((item) => item.value),
               type: 'bar',
               barWidth: '40%',
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#83bff6' },
                     { offset: 0.5, color: '#188df0' },
                     { offset: 1, color: '#188df0' },
                  ]),
               },
               emphasis: {
                  itemStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' },
                     ]),
                  },
               },
            },
         ],
      });

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
         pieChart.resize();
         barChart.resize();
      });
   }
});

// 行基通专数据
const chartData2 = [
   { name: '基础共性类', value: 1764, percentage: '43.20%' },
@@ -832,133 +547,117 @@
   { name: '其他类', value: 53, percentage: '1.30%' },
];

const pieChart2Ref = ref<HTMLElement | null>(null);
const pieChart2Ref = ref<null>(null);
const barChart2Ref = ref<HTMLElement | null>(null);

onMounted(() => {
   // 初始化第二个饼图
   if (pieChart2Ref.value && barChart2Ref.value) {
      const pieChart2 = echarts.init(pieChart2Ref.value);
      pieChart2.setOption({
         title: {
            text: '总量\n4083',
            left: '30%',
            top: '50%',
            textStyle: {
               fontSize: 14,
               lineHeight: 24,
               align: 'center',
               fontWeight: 'normal',
               rich: {
                  value: {
                     fontSize: 24,
                     fontWeight: 'bold',
                     padding: [10, 0],
                  },
               },
            },
            textAlign: 'center',
            textVerticalAlign: 'middle',
         },
         tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
         },
         legend: {
            orient: 'vertical',
            right: '-1%',
            top: 'middle',
            formatter: (name: string) => {
               const item = chartData2.find((d) => d.name === name);
               return `${name}: ${item?.value} (${item?.percentage})`;
            },
         },
         series: [
            {
               type: 'pie',
               radius: ['40%', '70%'],
               center: ['30%', '50%'],
               avoidLabelOverlap: false,
               itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2,
               },
               label: {
                  show: false,
               },
               emphasis: {
                  label: {
                     show: false,
                  },
               },
               data: chartData2.map((item) => ({
                  value: item.value,
                  name: item.name,
               })),
               color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
            },
         ],
      });

      // 初始化第二个柱状图
      const barChart2 = echarts.init(barChart2Ref.value);
      barChart2.setOption({
         title: {
            text: '基础共性类产品数量统计',
            left: 'center',
            top: 10,
         },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow',
            },
         },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
         },
         xAxis: {
            type: 'category',
            data: ['江苏省', '北京市', '浙江省', '上海市', '山东省', '广东省'],
            axisLabel: {
               interval: 0,
               rotate: 30,
            },
         },
         yAxis: {
            type: 'value',
            name: '数量',
            max: 600,
         },
         series: [
            {
               data: [500, 450, 220, 150, 150, 120],
               type: 'bar',
               barWidth: '40%',
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#26c4f6' },
                     { offset: 0.5, color: '#26c4f6' },
                     { offset: 1, color: '#26c4f6' },
                  ]),
               },
            },
         ],
      });

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
         pieChart2.resize();
         barChart2.resize();
      });
   }
});
const EecProductMapChartRef = ref<HTMLElement | null>(null);
const m_allEecProductNumber = ref(0);

// 计算总量
const totalCount = computed(() => {
   return chartData.reduce((sum, item) => sum + item.value, 0);
});

onMounted(() => {
   nextTick(() => {
      // initMapChart();
      initPipeOneChart();
      initPipeTwoChart();
      initComanyData();
      initCatalogList();

      document.getElementById('app-page')?.addEventListener('scroll', handleScroll);
   });
});
const handleScroll = () => {
   const scrollTop = document.getElementById('app-page')?.scrollTop;
   const scrollHeight = document.getElementById('app-page')?.scrollHeight - document.getElementById('app-page')?.clientHeight;
   scrollPercent.value = (scrollTop / scrollHeight) * 100;

   let scrollToTop = document.getElementById('scroll-to-top');
   let footer = document.getElementById('app-footer');
};
const linkClick = () => {
   router.push('/select-selpara');
};

const routeClick = (url: string) => {
   router.push(url);
};
const handleNewsClick = (item: any) => {
   // if (item.link) {
   //    window.open(item.link, '_blank');
   // } else {
   //    router.push(`/news-detail/${item.id}`);
   // }
   router.push(`/news-detail/${item.id}`);
};
// 初始化厂商列表数据
const initComanyData = () => {
   axios({
      method: 'get',
      url: 'static/EecProductData/CompanyData.json',
   })
      .then((res) => {
         let result = res.data;
         state.m_CompanyList = result.map((item: any) => {
            return {
               CompanyId: item.CompanyId,
               CompanyAllName: item.CompanyAllName,
               CompanyAbbName: item.CompanyAbbName,
               Type: item.Type,
            };
         });
      })
      .catch((err) => { });
};
// 初始化类型列表数据
const initCatalogList = (cb: any = null) => {
   state.m_PageLoading = true;
   const catalogTag = state.curSelectCatalog;
   axios({
      method: 'get',
      url: m_RequestDataObj[catalogTag].requestPath,
   })
      .then((res) => {

         state.m_PageLoading = false;
         let result = res.data;
         const { SeriesList } = result
         let arr = [];
         // arr为二位数组，每个子数组包含15条数据
         const pageSeriesList = SeriesList.map((item: any, index: number) => {
            return {
               Id: item.Id,
               SeriesID: item.SeriesID,
               Type: item.Type,
               ModelType: item.ModelType,
               Model: item.Model,
               CatalogID: item.CatalogID,
               CompanyName: item.CompanyName,
               RecordNumber: item.RecordNumber,
               EnergyEfficiencyClass: item.EnergyEfficiencyClass,
               RecordTime: item.RecordTime,
               PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
               CertificatePath: `static/EecProductData/${item.CertificatePath}`,
               Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
            };
         });

         for (let i = 0; i < pageSeriesList.length; i += 15) {
            arr.push(pageSeriesList.slice(i, i + 15));
         }
         state.catalogItemList = arr;

         if (cb) {
            cb();
         }
      })
      .catch((err) => {
         state.m_PageLoading = false;
      });
};

const initMapChart = () => {
   let allEecProductNumber = 0;
   let mapData = cooperationData.value.map((item) => {
@@ -1106,20 +805,323 @@
         console.log(err);
      });
};
const initPipeOneChart = () => {
   if (pieChartRef.value && barChartRef.value) {
      // 初始化饼图
      const pieChart = echarts.init(pieChartRef.value);
      pieChart.setOption({
         title: {
            text: `总量\n${totalCount.value}`,
            left: '30%',
            top: '50%',
            textStyle: {
               fontSize: 14,
               lineHeight: 24,
               align: 'center',
               fontWeight: 'normal',
               rich: {
                  value: {
                     fontSize: 24,
                     fontWeight: 'bold',
                     padding: [10, 0],
                  },
               },
            },
            textAlign: 'center',
            textVerticalAlign: 'middle',
         },
         tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
         },
         legend: {
            orient: 'vertical',
            right: '-1%',
            top: 'middle',
            formatter: (name: string) => {
               const item = chartData.find((d) => d.name === name);
               return `${name}: ${item?.value} (${item?.percentage})`;
            },
         },
         series: [
            {
               type: 'pie',
               radius: ['40%', '70%'],
               center: ['30%', '50%'],
               avoidLabelOverlap: false,
               itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2,
               },
               label: {
                  show: false,
               },
               emphasis: {
                  label: {
                     show: false,
                  },
               },
               data: chartData.map((item) => ({
                  value: item.value,
                  name: item.name,
               })),
               color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
            },
         ],
      });

      // 初始化柱状图
      const barChart = echarts.init(barChartRef.value);
      barChart.setOption({
         title: {
            text: '能效产品分类数量统计',
            left: 'center',
            top: 10,
         },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow',
            },
         },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
         },
         xAxis: {
            type: 'category',
            data: chartData.map((item) => item.name),
            axisLabel: {
               interval: 0,
               rotate: 30,
            },
         },
         yAxis: {
            type: 'value',
            name: '数量',
         },
         series: [
            {
               data: chartData.map((item) => item.value),
               type: 'bar',
               barWidth: '40%',
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#83bff6' },
                     { offset: 0.5, color: '#188df0' },
                     { offset: 1, color: '#188df0' },
                  ]),
               },
               emphasis: {
                  itemStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' },
                     ]),
                  },
               },
            },
         ],
      });

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
         pieChart.resize();
         barChart.resize();
      });
   }
};
const initPipeTwoChart = () => {
   if (pieChart2Ref.value && barChart2Ref.value) {
      const pieChart2 = echarts.init(pieChart2Ref.value);
      pieChart2.setOption({
         title: {
            text: '总量\n4083',
            left: '30%',
            top: '50%',
            textStyle: {
               fontSize: 14,
               lineHeight: 24,
               align: 'center',
               fontWeight: 'normal',
               rich: {
                  value: {
                     fontSize: 24,
                     fontWeight: 'bold',
                     padding: [10, 0],
                  },
               },
            },
            textAlign: 'center',
            textVerticalAlign: 'middle',
         },
         tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
         },
         legend: {
            orient: 'vertical',
            right: '-1%',
            top: 'middle',
            formatter: (name: string) => {
               const item = chartData2.find((d) => d.name === name);
               return `${name}: ${item?.value} (${item?.percentage})`;
            },
         },
         series: [
            {
               type: 'pie',
               radius: ['40%', '70%'],
               center: ['30%', '50%'],
               avoidLabelOverlap: false,
               itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2,
               },
               label: {
                  show: false,
               },
               emphasis: {
                  label: {
                     show: false,
                  },
               },
               data: chartData2.map((item) => ({
                  value: item.value,
                  name: item.name,
               })),
               color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
            },
         ],
      });

      // 初始化第二个柱状图
      const barChart2 = echarts.init(barChart2Ref.value);
      barChart2.setOption({
         title: {
            text: '基础共性类产品数量统计',
            left: 'center',
            top: 10,
         },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               type: 'shadow',
            },
         },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
         },
         xAxis: {
            type: 'category',
            data: ['江苏省', '北京市', '浙江省', '上海市', '山东省', '广东省'],
            axisLabel: {
               interval: 0,
               rotate: 30,
            },
         },
         yAxis: {
            type: 'value',
            name: '数量',
            max: 600,
         },
         series: [
            {
               data: [500, 450, 220, 150, 150, 120],
               type: 'bar',
               barWidth: '40%',
               itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     { offset: 0, color: '#26c4f6' },
                     { offset: 0.5, color: '#26c4f6' },
                     { offset: 1, color: '#26c4f6' },
                  ]),
               },
            },
         ],
      });

      // 监听窗口大小变化
      window.addEventListener('resize', () => {
         pieChart2.resize();
         barChart2.resize();
      });
   }
};

// 监听产品类型选择
const changeCatalog = (type: number) => {
   state.curSelectCatalog = type;
   state.catalogSwiperIndex = 0;
   const cb = () => {
      catalogSwiperRef.value?.slideTo(state.catalogSwiperIndex, 0);
      // catalogSwiperRef.value?.autoplay = {
      //    delay: 3000,
      //    disableOnInteraction: false,
      //    pauseOnMouseEnter:true,
      // };
      catalogSwiperRef.value?.update();
   };
   initCatalogList(cb);
};
const handleSeriesClick = (item: any) => {
   router.push({
      path: '/product-series',
      query: {
         sid: item.SeriesID,
         ft: 'home',
         cid: item.CatalogID,
         type: state.curSelectCatalog,
      },
   });
};
// 产品类型点击
const handleCatalogClick = () => {
   const type = state.curSelectCatalog;
   router.push({
      path: '/certified-products',
      query: {
         type: type,
      },
   });
};

const onSwiper = (swiper: any) => {
   catalogSwiperRef.value = swiper;
};
const onSlideChange = () => { };
const toFeedBack = () => {
   router.push('/feedback');
};
const toSubsidy = () => {
   // 跳转到该网页
   window.open('https://www.sheitc.sh.gov.cn/', '_blank');
};
const scrollToTop = () => {
   nextTick(() => {
      // console.log('我被打印了');
      document.getElementById('app-page').scrollTo({
         top: 0,
         behavior: 'smooth',
      });
   });
};

const showCustomerService = ref(false);
const getCompanyNameByType = (type: number) => {
   return state.m_CompanyList.find((item: any) => item.Type.includes(type))?.CompanyAbbName;
};
const getCompanyItemByType = (type: number) => {
   return state.m_CompanyList.filter((item: any) => item.Type.includes(type));
};
onUnmounted(() => {
   document.getElementById('app-page')?.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
@@ -1136,8 +1138,9 @@

.carousel-image {
   width: 100%;
   /* height: 100%; */
   object-fit: fill; /* 修改为fill以完全填充容器 */
   height: 100%;
   object-fit: fill;
   /* 修改为fill以完全填充容器 */
}

.function-card {
@@ -1148,9 +1151,11 @@
   transform: translateY(-4px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.eec-product-div {
   background-image: url('@/assets/home/eec_product_bg.jpg');
}

.eec-product-num-div {
   min-width: 230px;
   border: 1px solid rgb(28, 151, 183);
@@ -1159,14 +1164,17 @@
   overflow: hidden;
   height: 255px;
}

#eec-product-map {
   width: 100%;
   height: 100%;
}

.mySwiper {
   width: 100%;
   height: 100%;
}

.card-hover-style {
   /* display: flex;
   justify-content: center;
@@ -1176,6 +1184,7 @@
   color: #000;
   margin-right: unset;
}

:deep(.el-carousel__arrow) {
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
@@ -1194,13 +1203,11 @@

.news-item {
   cursor: pointer;
   border-bottom: 1px solid #e3e3e3;
   &:first-child {
      border-top: 1px solid #e3e3e3;
   }
   &:last-child {
      border-bottom: none;
   }
   padding: 8px 0px;
   font-size: 18px;
   color: #5c5c5c;
   font-family: 微软雅黑;
   font-weight: 500;
}

:deep(.customer-service-dialog .el-dialog__body) {
@@ -1210,4 +1217,245 @@
:deep(.customer-service-dialog .el-dialog__header) {
   display: block;
}

.catalog-list {
   padding: 20px;
   box-sizing: border-box;

   .catalog-item {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: #003a8f;
      font-size: 20px;
      font-weight: 700;

      &:hover {
         color: #71b02b;
      }
   }
}

.catalog-continer {
   /* 总高度 - 上下padding - 行间距 */
   height: 100%;
   /* 70px是上下padding总和，60px是两行间距总和 */
   padding: 35px;
   /* 假设padding为20px，你可以根据需要调整 */
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 30px;
   overflow: hidden;
   box-sizing: border-box;
}

.catalog-continer-item {
   background-color: #fff;
   height: 100%;
   /* 改为100%以适应grid布局 */
   border-radius: 20px;
   box-sizing: border-box;
   cursor: pointer;

   &:hover {
      img {
         transform: scale(1.05);
         transition: all 1s ease;
      }

      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   }
}

.catalog-tag-active {
   color: #71b02b !important;
}

.news-title {
   font-size: 20px;
   color: #000000;
   font-weight: 700;
   font-family: 微软雅黑;
}

.left-news-temp-div {
   border: 1px solid #ccc;

   &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #003a8f;
   }
}

.right-news-temp-div {
   /* border-top: 4px solid #003a8f; */
   position: relative;

   &::before {
      content: '';
      position: absolute;
      top: 0px;
      left: 0;
      width: 20%;
      height: 4px;
      z-index: 1;
      background-color: #71b02b;
   }

   &::after {
      content: '';
      position: absolute;
      top: 0px;
      left: 20%;
      width: 80%;
      height: 4px;
      z-index: 1;
      background-color: #003a8f;
   }

   .new-desc-text {
      font-size: 16px;
      color: #656565;
      line-height: 29px;
      font-family: 微软雅黑;
      font-weight: 300;
   }
}

.news-list-dot {
   width: 6px;
   height: 6px;
   background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}

.eec-product-classify-div {
   position: relative;

   &::before {
      content: '';
      position: absolute;
      top: 0px;
      left: 0;
      width: 20%;
      height: 4px;
      z-index: 1;
      background-color: #71b02b;
   }

   &::after {
      content: '';
      position: absolute;
      top: 0px;
      left: 20%;
      width: 80%;
      height: 4px;
      z-index: 1;
      background-color: #003a8f;
   }
}

:deep(.catalog-swiper .swiper-slide) {
   height: 100% !important;
}

:deep(.catalog-swiper .swiper-pagination-bullet) {
   width: 20px;
   height: 20px;
   text-align: center;
   line-height: 20px;
   font-size: 12px;
   color: #000;
   opacity: 1;
   background: rgba(0, 0, 0, 0.2);
}

:deep(.catalog-swiper .swiper-pagination-bullet-active) {
   color: #fff;
   background: #007aff;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(16px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeOut {
   from {
      opacity: 1;
      transform: translateY(0);
   }

   to {
      opacity: 0;
      transform: translateY(16px);
   }
}

.fade-enter-active {
   animation: fadeIn 0.3s ease-out;
}

.fade-leave-active {
   animation: fadeOut 0.3s ease-out;
}

.etiquet-price {
   background: #003a8f;
   margin-left: -0.65rem;
   padding: .2rem 1.2rem;
   border-radius: 5px 0 0 5px;
}

.etiquet-price p {
   height: 20px;
   margin: 0;
   display: flex;
   font-size: 14px;
   font-weight: 600;
   line-height: 20px;
   color: #fff;
}

.etiquet-price div {
   position: absolute;
   bottom: -23px;
   right: 0px;
   width: 0;
   height: 0;
   border-top: 13px solid #003a8f;
   border-bottom: 10px solid transparent;
   border-right: 13px solid transparent;
   z-index: -6;
}

.more-series-btn {
   top: 66px;
   right: 30px;
   height: 35px;
   position: absolute;
   width: 100%;
   justify-content: flex-end;
   align-items: center;
   display: flex;
   cursor: pointer;
   z-index: 30;

   &:hover {
      color: var(--theme-color);
   }
}
</style>