修改首页显示样式

tanghaolin

2025-04-16 9fba81a40d45541ca629c68dfbc877ffe5744605

 src/views/Home.vue

@@ -1,17 +1,17 @@
<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="none" arrow="never">
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/test/15.jpg" class="carousel-image" />
                  <img src="@/assets/carousel/test/15.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=2d82602e-8797-46d7-9b5c-59d9f88bc6d9.png;软件一体化测试平台_副本.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="@/assets/carousel/final/2.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
               </div>
            </el-carousel-item>
@@ -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) => {
   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');
};
@@ -1131,7 +1256,7 @@

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

@@ -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>