<template>
|
<div class="w-full h-full relative">
|
<!-- 轮播图部分 -->
|
<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">
|
<div class="w-full h-full" id="indexVideo"></div>
|
</div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div class="carousel-item">
|
<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/home/2.png" class="carousel-image" />
|
</div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div class="carousel-item">
|
<img src="@/assets/carousel/home/3.png" class="carousel-image" />
|
</div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div class="carousel-item" @click="clickDeclare">
|
<img src="@/assets/carousel/home/4.png" class="carousel-image" />
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="relative z-20 2 w-full flex justify-center items-center">
|
<!-- 功能按钮区域 -->
|
<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">
|
<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" />
|
</svg>
|
</div>
|
<div>
|
<div class="text-lg font-medium">补贴申请</div>
|
<div class="text-sm text-info-light-3">Subsidy Application</div>
|
</div>
|
</div>
|
</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" />
|
</svg>
|
</div>
|
<div>
|
<div class="text-lg font-medium">能效产品</div>
|
<div class="text-sm text-info-light-3">Certified Products</div>
|
</div>
|
</div>
|
</router-link>
|
<router-link to="/eec-label-search" 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="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>
|
<div class="text-lg font-medium">证书查询</div>
|
<div class="text-sm text-info-light-3">Certificate Search</div>
|
</div>
|
</div>
|
</router-link>
|
<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">
|
<img :src="YWLogo" class="h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">查泵网</div>
|
<div class="text-sm text-info-light-3">Pump Search</div>
|
</div>
|
</div>
|
</a>
|
</div>
|
</div>
|
</div>
|
<!-- 主内容区域 -->
|
<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-[220px]">
|
<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.ModelType }}
|
</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 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 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>
|
<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="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-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="">
|
<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="max-w-[600px] text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis">
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 能效产品分类 -->
|
<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 mb-[15px]">
|
<span class="text-medium font-bold text-[20px]" style="font-size: 20px">能效产品分类</span>
|
</div>
|
</div>
|
<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>
|
<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>
|
</div>
|
</div>
|
</swiper-slide>
|
</swiper>
|
</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>
|
</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>
|
<!-- 返回顶部 -->
|
<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>
|
|
<!-- 客服对话框 -->
|
<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 * as echarts from 'echarts';
|
import { onMounted, ref, nextTick, reactive } from 'vue';
|
import { useRouter } from 'vue-router';
|
import YWLogo from '@/assets/logo/yw_logo.png';
|
import axios from 'axios';
|
import CustomerService from '@/components/CustomerService.vue';
|
import Player from 'xgplayer';
|
import 'xgplayer/dist/index.min.css';
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
import { Autoplay, EffectFade, Virtual } from 'swiper/modules';
|
import 'swiper/css';
|
import 'swiper/css/effect-fade';
|
import 'swiper/css/pagination';
|
|
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([
|
{
|
id: '7',
|
title: '上海市人民政府关于印发《上海市推动大规模设备更新和消费品以旧换新行动计划（2024-2027年）》的通知',
|
date: '2024-04-23',
|
link: 'test',
|
},
|
{
|
id: '1',
|
title: '上海市经济信息化委关于征集用能设备更新供应链平台的通知',
|
date: '2025-02-07',
|
link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
|
},
|
{
|
id: '2',
|
title: '浙江大规模以旧换新方案公布',
|
date: '2025-02-08',
|
link: 'https://news.qq.com/rain/a/20250208A05YH100',
|
},
|
{
|
id: '3',
|
title: '2024年设备更新与消费品以旧换新成效显著',
|
date: '2025-02-10',
|
link: 'https://www.sohu.com/a/857615850_122006510',
|
},
|
{
|
id: '4',
|
title: '印发推动工业领域设备更新工作实施方案的通知',
|
date: '2024-10-22',
|
link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm',
|
},
|
{
|
id: '5',
|
title: '关于《上海市工业通信业用能设备更新专项政策实施细则（征求意见稿）》公开征求意见的公告',
|
date: '2024-12-18',
|
link: 'https://sheitc.sh.gov.cn/gg/20241218/517c960cef5d40f0bb04b1099c64d9eb.html',
|
},
|
// {
|
// id: '6',
|
// title: '解读产业能效指南，推动设备对标及更新',
|
// date: '2024-08-05',
|
// link: 'https://sheitc.sh.gov.cn/djjcdt/20240805/e8b8b4db2fb445f88b22b72f45132d68.html',
|
// },
|
// {
|
// title: '印发推动工业领域设备更新工作实施方案的通知',
|
// date: '2024-10-22',
|
// },
|
// {
|
// title: '关于《上海市工业通信业用能设备更新专项政策实施细则（征求意见稿）》公开征求意见的公告',
|
// date: '2024-12-18',
|
// },
|
// {
|
// title: '解读产业能效指南，推动设备对标及更新',
|
// date: '2024-08-05',
|
// },
|
// {
|
// title: '七部门联合印发方案部署工业领域设备更新和技术改造 推动先进产能比重持续提升',
|
// date: '2024-04-29',
|
// },
|
// {
|
// title: '国务院关于印发《推动大规模设备更新和消费品以旧换新行动方案》的通知',
|
// date: '2024-03-07',
|
// },
|
]);
|
|
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 videoPlayer = ref<Player | null>(null);
|
const pieChartRef = ref<HTMLElement | null>(null);
|
const barChartRef = ref<HTMLElement | null>(null);
|
|
const cooperationData = ref([
|
{
|
region: '北京',
|
count: 408,
|
},
|
{
|
region: '天津',
|
count: 339,
|
},
|
{
|
region: '上海',
|
count: 489,
|
},
|
{
|
region: '重庆',
|
count: 23,
|
},
|
{
|
region: '河北',
|
count: 440,
|
},
|
{
|
region: '河南',
|
count: 432,
|
},
|
{
|
region: '云南',
|
count: 442,
|
},
|
{
|
region: '辽宁',
|
count: 8,
|
},
|
{
|
region: '黑龙江',
|
count: 363,
|
},
|
{
|
region: '湖南',
|
count: 134,
|
},
|
{
|
region: '安徽',
|
count: 474,
|
},
|
{
|
region: '山东',
|
count: 438,
|
},
|
{
|
region: '新疆',
|
count: 334,
|
},
|
{
|
region: '江苏',
|
count: 129,
|
},
|
{
|
region: '浙江',
|
count: 433,
|
},
|
{
|
region: '江西',
|
count: 197,
|
},
|
{
|
region: '湖北',
|
count: 315,
|
},
|
{
|
region: '广西',
|
count: 69,
|
},
|
{
|
region: '甘肃',
|
count: 630,
|
},
|
{
|
region: '山西',
|
count: 495,
|
},
|
{
|
region: '内蒙古',
|
count: 283,
|
},
|
{
|
region: '陕西',
|
count: 156,
|
},
|
{
|
region: '吉林',
|
count: 485,
|
},
|
{
|
region: '福建',
|
count: 411,
|
},
|
{
|
region: '贵州',
|
count: 496,
|
},
|
{
|
region: '广东',
|
count: 451,
|
},
|
{
|
region: '青海',
|
count: 387,
|
},
|
{
|
region: '西藏',
|
count: 356,
|
},
|
{
|
region: '四川',
|
count: 414,
|
},
|
{
|
region: '宁夏',
|
count: 470,
|
},
|
{
|
region: '海南',
|
count: 437,
|
},
|
{
|
region: '台湾',
|
count: 165,
|
},
|
{
|
region: '香港',
|
count: 94,
|
},
|
{
|
region: '澳门',
|
count: 437,
|
},
|
{
|
region: '南海诸岛',
|
count: 0,
|
},
|
]);
|
|
// 图表数据
|
const chartData = [
|
{ name: '泵', value: 7185, percentage: '18.89%' },
|
{ name: '空压机', value: 4875, percentage: '12.82%' },
|
{ name: '通风机', value: 895, percentage: '2.35%' },
|
{ name: '冷水机组', value: 2184, percentage: '5.74%' },
|
{ name: '电力变压器', value: 1896, percentage: '4.99%' },
|
{ name: '工业锅炉', value: 2897, percentage: '7.62%' },
|
{ name: '电机', value: 18865, percentage: '47.59%' },
|
];
|
|
// 行基通专数据
|
const chartData2 = [
|
{ name: '基础共性类', value: 1764, percentage: '43.20%' },
|
{ name: '行业通用类', value: 1670, percentage: '40.90%' },
|
{ name: '企业专用类', value: 596, percentage: '14.60%' },
|
{ name: '其他类', value: 53, percentage: '1.30%' },
|
];
|
|
const pieChart2Ref = ref<null>(null);
|
const barChart2Ref = ref<HTMLElement | null>(null);
|
|
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(() => {
|
initVideo();
|
initNewsList();
|
initPipeOneChart();
|
initPipeTwoChart();
|
initComanyData();
|
initCatalogList();
|
|
document.getElementById('app-page')?.addEventListener('scroll', handleScroll);
|
});
|
});
|
// 初始化新闻列表数据
|
const initNewsList = () => {
|
axios({
|
url: "static/Data/newsData/list.json",
|
method: "get"
|
}).then(res => {
|
const result = res.data
|
const { StandardDynamicsList } = result
|
|
newsList.value = StandardDynamicsList.map(item => {
|
return {
|
id: item.id,
|
title: item.title,
|
date: item.pubdate,
|
}
|
})
|
}).catch(err => {
|
|
})
|
}
|
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;
|
};
|
const linkClick = () => {
|
router.push('/select-selpara');
|
};
|
|
const routeClick = (url: string) => {
|
router.push(url);
|
};
|
const handleNewsClick = (item: any) => {
|
router.push(`/news-detail/${item.id}`);
|
};
|
const initVideo = () => {
|
let player = new Player({
|
id: 'indexVideo',
|
url: 'https://xpump.oss-cn-shanghai.aliyuncs.com/iee/xc.mp4',
|
height: '100%',
|
width: '100%',
|
autoplay: true,
|
autoplayMuted:true,
|
poster: 'https://xpump.oss-cn-shanghai.aliyuncs.com/iee/iee_poster.png',
|
});
|
videoPlayer.value = player;
|
|
}
|
// 初始化厂商列表数据
|
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) => {
|
allEecProductNumber += item.count;
|
return {
|
name: item.region,
|
value: item.count,
|
};
|
});
|
m_allEecProductNumber.value = allEecProductNumber;
|
axios({
|
url: 'static/Data/ChinaGeoJsonData.json',
|
method: 'get',
|
})
|
.then((res) => {
|
const GeoData = res.data;
|
if (EecProductMapChartRef.value) {
|
echarts.registerMap('china', GeoData);
|
const EecProductMapChart = echarts.init(EecProductMapChartRef.value);
|
EecProductMapChart.setOption({
|
tooltip: {
|
show: true,
|
formatter: function (params) {
|
if (params.data) return params.name + '：' + params.data['value'];
|
},
|
},
|
visualMap: {
|
min: 0,
|
max: 100000,
|
right: 26,
|
bottom: 40,
|
showLabel: true,
|
text: ['', ''],
|
pieces: [
|
{
|
gt: 5001,
|
label: '> 5000',
|
color: '#FF4500',
|
},
|
{
|
gte: 1001,
|
lte: 5000,
|
label: '1001 - 5000',
|
color: '#FF8300',
|
},
|
{
|
gte: 601,
|
lte: 1000,
|
label: '601 - 1000',
|
color: '#FFC100',
|
},
|
{
|
gte: 401,
|
lt: 600,
|
label: '401 - 600',
|
color: '#FFFF00',
|
},
|
{
|
gte: 201,
|
lt: 400,
|
label: '201 - 400',
|
color: '#D7EF53',
|
},
|
{
|
gte: 1,
|
lt: 200,
|
label: '1 - 200',
|
color: '#AFDEA7',
|
},
|
{
|
lt: 0,
|
label: '0',
|
color: '#87CEFA',
|
},
|
],
|
show: true,
|
},
|
geo: {
|
map: 'china',
|
roam: true,
|
scaleLimit: {
|
min: 1,
|
max: 2,
|
},
|
zoom: 1.13,
|
top: 50,
|
label: {
|
show: true,
|
fontSize: '14',
|
color: 'rgba(0,0,0,0.7)',
|
formatter: (params) => {
|
return params.name + '省';
|
},
|
},
|
itemStyle: {
|
borderColor: 'rgba(0, 0, 0, 0.2)',
|
},
|
emphasis: {
|
areaColor: '#f2d5ad',
|
shadowOffsetX: 0,
|
shadowOffsetY: 0,
|
borderWidth: 0,
|
itemStyle: {
|
color: '#f4f4f4', // 鼠标悬停时的颜色
|
},
|
},
|
},
|
series: [
|
{
|
name: '能效产品',
|
type: 'map',
|
map: 'china',
|
geoIndex: 0,
|
data: mapData,
|
emphasis: {
|
itemStyle: {
|
color: 'rgba(0,0,0,0.7)', // 鼠标悬停时的颜色
|
},
|
},
|
},
|
// {
|
// name: '能效产品',
|
// type: 'map',
|
// mapType: 'china',
|
// selectedMode: 'false',
|
// label: {
|
// normal: {
|
// show: true,
|
// },
|
// emphasis: {
|
// show: false,
|
// },
|
// },
|
// data: mapData,
|
// },
|
],
|
});
|
// 监听窗口大小变化
|
window.addEventListener('resize', () => {
|
EecProductMapChart.resize();
|
});
|
}
|
})
|
.catch((err) => {
|
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 clickDeclare = () => {
|
router.push({
|
path: '/company-declare',
|
})
|
}
|
// 监听产品类型选择
|
const changeCatalog = (type: number) => {
|
state.curSelectCatalog = type;
|
state.catalogSwiperIndex = 0;
|
const cb = () => {
|
catalogSwiperRef.value?.slideTo(state.catalogSwiperIndex, 0);
|
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(() => {
|
document.getElementById('app-page').scrollTo({
|
top: 0,
|
behavior: 'smooth',
|
});
|
});
|
};
|
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>
|
.carousel-item {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.carousel-image {
|
width: 100%;
|
height: 100%;
|
object-fit: fill;
|
/* 修改为fill以完全填充容器 */
|
}
|
|
.function-card {
|
transition: all 0.3s ease;
|
}
|
|
.function-card:hover {
|
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);
|
height: 100%;
|
display: flex;
|
overflow: hidden;
|
height: 255px;
|
}
|
|
#eec-product-map {
|
width: 100%;
|
height: 100%;
|
}
|
|
.mySwiper {
|
width: 100%;
|
height: 100%;
|
}
|
|
.card-hover-style {
|
/* display: flex;
|
justify-content: center;
|
align-items: center; */
|
/* transform: translateY(50%); */
|
background-color: #fff;
|
color: #000;
|
margin-right: unset;
|
}
|
|
:deep(.el-carousel__arrow) {
|
background-color: rgba(0, 0, 0, 0.5);
|
border: none;
|
width: 44px;
|
height: 44px;
|
font-size: 20px;
|
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.7);
|
}
|
|
i {
|
color: #fff;
|
}
|
}
|
|
.news-item {
|
cursor: pointer;
|
padding: 8px 0px;
|
font-size: 18px;
|
color: #5c5c5c;
|
font-family: 微软雅黑;
|
font-weight: 500;
|
}
|
|
:deep(.customer-service-dialog .el-dialog__body) {
|
padding: 0;
|
}
|
|
: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);
|
}
|
}
|
|
.text-ellipsis {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
