src/App.vue

@@ -3,8 +3,8 @@
    <div class="h-full bg-gray-50 flex flex-col">
        <template v-if="!isLoginPage">
            <AppHeader class="flex-0" />
            <div id="app-page" class="flex-auto !overflow-y-auto bg-[#f4f4f4]" ref="containerRef">
                <div class="w-[63%] mx-auto">
            <div id="app-page" class="flex-auto !overflow-y-auto bg-[#ffffff]" ref="containerRef">
                <div class="w-[100%] mx-auto">
                    <router-view></router-view>
                </div>
                <AppFooter></AppFooter>

 src/assets/logo/header_logo.png

 src/components/AppFooter.vue

@@ -1,75 +1,114 @@
<template>
    <footer class="bg-[#393939] text-[#ccc] py-8 text-small">
        <div class="w-[63%] mx-auto">
            <div class="flex justify-center">
                <div class="grid grid-cols-5 gap-8">
                    <!-- 导航链接 -->
                    <div>
                        <router-link to="/" class="text-white hover:text-white hover:underline">首页</router-link>
                    </div>
                    <div>
                        <router-link to="/certified-products" class="text-white hover:text-white hover:underline">能效产品</router-link>
                    </div>
                    <div>
                        <router-link to="/eec-label-search" class="text-white hover:text-white hover:underline">证书查询</router-link>
                    </div>
                    <div class="flex flex-col gap-3">
                        <router-link to="/news-detail/99" class="text-white hover:text-white">补贴政策</router-link>
                        <!-- <div class="flex flex-col gap-1">
                            <router-link to="/standard" class="text-[#ccc] hover:text-[#ccc] hover:underline">标准库</router-link>
                            <router-link to="/library" class="text-[#ccc] hover:text-[#ccc] hover:underline">在线图书馆</router-link>
                            <router-link to="/cases" class="text-[#ccc] hover:text-[#ccc] hover:underline">优秀案例</router-link>
                            <router-link to="/training" class="text-[#ccc] hover:text-[#ccc] hover:underline">咨询培训</router-link>
                            <router-link to="/community" class="text-[#ccc] hover:text-[#ccc] hover:underline">先进制造业集群</router-link>
                        </div> -->
                    </div>
                    <div class="flex flex-col gap-3">
                        <span @click="linkClick(' http://www.xpump.net/web/#/CN/Index')" class="text-white hover:text-white cursor-pointer"
                            >查泵网</span
                        >
                        <!-- <div class="flex flex-col gap-1">
                            <router-link to="/software-copyright" class="text-[#ccc] hover:text-[#ccc] hover:underline"
                                >软件著作权申请通道</router-link
                            >
                            <router-link to="/key-tech" class="text-[#ccc] hover:text-[#ccc] hover:underline">首重点技术攻关</router-link>
                            <router-link to="/test-service" class="text-[#ccc] hover:text-[#ccc] hover:underline">测试服务</router-link>
                            <router-link to="/cert-manage" class="text-[#ccc] hover:text-[#ccc] hover:underline">证书管理</router-link>
                        </div> -->
    <footer class="bg-[#003A8F] text-white py-8 text-small">
        <div class="w-[80%] mx-auto">
            <div class="flex justify-between">
                <!-- Logo and Contact Info -->
                <div class="flex flex-col gap-2">
                    <img :src="logo" alt="工效汇聚平台" class="h-[54px] mb-4" />
                    <div class="text-sm">
                        <div class="flex items-center gap-2">
                            <span class="inline-flex"><el-icon color="#fff" :size="16"><PhoneFilled /></el-icon></span>
                            <span class="text-[16px]" style="line-height: 32px;">联系方式: 021-34306562</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <span class="inline-flex"><el-icon color="#fff" :size="16"><Message /></el-icon></span>
                            <span class="text-[16px]" style="line-height: 32px;">电子邮箱: eventech@163.com</span>
                        </div>
                    </div>
                </div>
                <div class="ml-8 flex flex-col gap-4 pl-8 text-[#ccc]" style="border-left: 1px solid #5f5f60">
                    <div class="text-sm">
                        <div>联系方式: 021-34306562</div>
                        <div>电子邮箱: eventech@163.com</div>

                <!-- Navigation Links -->
                <div class="flex">
                    <div class="flex flex-col gap-2">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">
                                <router-link to="/home" class="text-white hover:text-[#73AF2B] footer-link">首页</router-link>
                            </div>
							
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/certified-products" class="text-white hover:text-[#73AF2B] footer-link">能效产品</router-link>
                                <router-link to="/eec-label-search" class="text-white hover:text-[#73AF2B] footer-link">证书查询</router-link>
                                <router-link to="/news-detail/99" class="text-white hover:text-[#73AF2B] footer-link">补贴政策</router-link>
                                <span @click="linkClick('http://www.xpump.net/web/#/CN/Index')" class="text-white hover:text-[#73AF2B] cursor-pointer footer-link">查泵网</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-10">
                        <div class="w-[90px]">
                            <img src="@/assets/footer/上海经济和信息化委员会.jpg" alt="上海经济和信息化委员会" class="w-24 h-24 mb-2" />
                            <div class="text-xs">上海经济和信息化委员会</div>

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">帮助中心</div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/brand-center" class="text-white hover:text-[#73AF2B] footer-link">品牌中心</router-link>
                                <router-link to="/payment" class="text-white hover:text-[#73AF2B] footer-link">付款方式</router-link>
                                <router-link to="/payment-info" class="text-white hover:text-[#73AF2B] footer-link">付款开票信息</router-link>
                            </div>
                        </div>
                        <div class="w-[90px]">
                            <img src="@/assets/footer/上海质检院.jpg" alt="上海质检院" class="w-24 h-24 mb-2" />
                            <div class="text-xs">上海质检院</div>
                    </div>

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">服务政策</div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/delivery" class="text-white hover:text-[#73AF2B] footer-link">配送服务</router-link>
                                <router-link to="/after-sales" class="text-white hover:text-[#73AF2B] footer-link">售后服务</router-link>
                                <router-link to="/privacy" class="text-white hover:text-[#73AF2B] footer-link">隐私政策</router-link>
                            </div>
                        </div>
                        <div class="w-[90px]">
                            <img src="@/assets/footer/PumpMgrQr.jpg" alt="泵管家" class="w-24 h-24 mb-2" />
                            <div class="text-xs">泵管家</div>
                    </div>

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">公司介绍</div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/contact" class="text-white hover:text-[#73AF2B] footer-link">联系我们</router-link>
                                <router-link to="/about" class="text-white hover:text-[#73AF2B] footer-link">关于我们</router-link>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- QR Codes -->
                <div class="flex gap-6">
                    <div class="text-center">
                        <img src="@/assets/footer/上海经济和信息化委员会.jpg" alt="上海经济和信息化委员会" class="w-24 h-24 mb-2" />
                        <div class="text-xs footer-link">上海经济和信息化委员会</div>
                    </div>
                    <div class="text-center">
                        <img src="@/assets/footer/上海质检院.jpg" alt="上海质检院" class="w-24 h-24 mb-2" />
                        <div class="text-xs footer-link">上海质检院</div>
                    </div>
                    <div class="text-center">
                        <img src="@/assets/footer/PumpMgrQr.jpg" alt="泵管家" class="w-24 h-24 mb-2" />
                        <div class="text-xs footer-link">泵管家</div>
                    </div>
                </div>
            </div>

            <!-- 版权信息 -->
            <div class="pt-5 mt-2 text-center text-gray-400 text-sm">
                Copyright © 2025-2026  All Rights Reserved. 版权所有
                <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-400 ml-2"> 沪ICP备14049296号-2 </a>
            <!-- Copyright -->
            <div class="pt-5 mt-4 text-center text-sm border-t border-[#ffffff33]">
                <span class="footer-link">Copyright © 2025-2026 All Rights Reserved. 版权所有</span>
                <a href="https://beian.miit.gov.cn/" target="_blank" class="text-white hover:text-[#73AF2B] ml-2 footer-link" style="color: #73AF2B !important;">沪ICP备14049296号-2</a>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import logo from "@/assets/logo/header_logo.png"
const linkClick = (url: string) => {
    window.open(url, '_blank');
};
</script>

<style scoped>
.footer-link {
    font-family: SimSun;
    font-weight: 400;
    font-size: 16px;
    /* color: #FFFFFF; */
    line-height: 32px;
}
.border-l{
    border-left: 1px solid #73AF28;
}
</style>

 src/views/Home.vue

@@ -1,8 +1,8 @@
<template>
    <div class="h-full relative">
    <div class="w-full h-full relative">
        <!-- 轮播图部分 -->
        <div class="banner-carousel relative right-[29.5%] w-screen h-[602px]">
            <el-carousel height="500px" :interval="3000" indicator-position="none" arrow="never">
        <div class="banner-carousel relative w-screen h-[602px]">
            <el-carousel height="602px" :interval="3000" indicator-position="none" arrow="never">
                <el-carousel-item>
                    <div class="carousel-item">
                        <img src="@/assets/carousel/test/15.png" class="carousel-image" />
@@ -26,7 +26,7 @@
                </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" v-if="false">
                <div class="mx-auto px-32">
@@ -79,7 +79,7 @@
                                </div>
                            </div>
                        </router-link>
                        <a class="block" style="border-right: 1px solid #e3e3e3"  @click="linkClick">
                        <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">
@@ -141,7 +141,51 @@
                    </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" style="width: calc(100% - 434px)">
                <!-- 产品区域 -->
                <div class="bg-[#F0F3EF] w-full">
                    <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'"
                        :init="true"
                        :initialSlide="0"
                        :slides-per-view="state.catalogSwiperIndex"
                        @swiper="onSwiper"
                        @slideChange="onSlideChange"
                        :autoplay="{
                            delay: 10000,
                            disableOnInteraction: true,
                        }"
                        :effect="'fade'"
                        :modules="SwiperModule"
                        class="catalog-swiper w-full h-[1175px]"
                    >
                        <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" v-for="child in item" :key="child.Id">
                                    <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>
                            </div>
                        </swiper-slide>
                    </swiper>
                </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)">
@@ -199,7 +243,7 @@
                        </div>
                        <el-button text @click="routeClick('/certified-products')">更多</el-button>
                    </div>
                    <div class="flex h-[360px] bg-[#f9f9f9] eec-product-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>
@@ -213,13 +257,6 @@
                                    </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>
                                    </div> -->
                                    <swiper
                                        :direction="'vertical'"
                                        :slidesPerView="5"
@@ -424,18 +461,18 @@
<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 } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade'

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

const newsList = ref([
@@ -502,14 +539,30 @@
    //     date: '2024-03-07',
    // },
]);

const linkClick = () => {
    router.push('/select-selpara')
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:1,
    catalogItemList: [],
    m_PageLoading: false,
});

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

const cooperationData = ref([
    {
        region: '北京',
@@ -653,15 +706,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%' },
@@ -672,148 +716,6 @@
    { name: '工业锅炉', value: 2897, percentage: '7.62%' },
    { 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 = [
@@ -826,130 +728,90 @@
const pieChart2Ref = ref<HTMLElement | 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();

        initCatalogList();
    });
});

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 initCatalogList = () => {
    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;

            let arr = [];
            // arr为二位数组，每个子数组包含15条数据

            result = result.map((item: any, index: number) => {
                if (catalogTag === 2) {
                    item.Price = item.Price * 10;
                }
                if (catalogTag === 4) {
                    item.Price = item.Price * 5;
                }
                let incrementFactor = 0.1 * (index + 1); // 根据索引计算递增系数
                let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 计算新的Price值

                return {
                    Id: item.Id,
                    Type: item.Type,
                    ModelType: item.ModelType,
                    Model: item.Model,
                    CompanyName: item.CompanyName,
                    RecordNumber: item.RecordNumber,
                    EnergyEfficiencyClass: item.EnergyEfficiencyClass,
                    RecordTime: item.RecordTime,
                    Price: newPrice,
                    PhysicalPicturePath: 'static/EecProductData/' + item.PhysicalPicturePath,
                    CertificatePath: `static/EecProductData/${item.CertificatePath}`,
                    Tip: `备案时间：${item.RecordTime} \n 备案号：${item.RecordNumber}`,
                };
            });

            for (let i = 0; i < result.length; i += 15) {
                arr.push(result.slice(i, i + 15));
            }
            state.catalogItemList = arr;
        })
        .catch((err) => {
            state.m_PageLoading = false;
        });
};

const initMapChart = () => {
    let allEecProductNumber = 0;
    let mapData = cooperationData.value.map((item) => {
@@ -1097,6 +959,269 @@
            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 = 1
    initCatalogList();
};
const onSwiper = (swiper:any)=>{
}
const onSlideChange = ()=>{

}
const toFeedBack = () => {
    router.push('/feedback');
};
@@ -1205,4 +1330,46 @@
: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: 24px;
        line-height: 26px;
        &: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;
}
.catalog-tag-active {
    color: #71b02b !important;
}
:deep(.catalog-swiper .swiper-slide){
	
    height: 100% !important;
}
</style>