From 9fba81a40d45541ca629c68dfbc877ffe5744605 Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 16 四月 2025 16:31:12 +0800
Subject: [PATCH] 修改首页显示样式
---
src/views/Home.vue | 975 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 665 insertions(+), 310 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 71af422..2f4456f 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,17 +1,17 @@
<template>
- <div class="h-full">
+ <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,16 +26,12 @@
</el-carousel-item> -->
</el-carousel>
</div>
- <div class="relative z-20 2 -mt-24">
+ <div class="relative z-20 2 w-full flex justify-center items-center">
<!-- 鍔熻兘鎸夐挳鍖哄煙 -->
- <div class="bg-white py-8">
+ <div class="bg-white py-8" v-if="false">
<div class="mx-auto px-32">
<div class="grid grid-cols-4 divide-x-w-default">
- <router-link
- to="/subsidy-application"
- class="block"
- style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3"
- >
+ <a @click="toSubsidy" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<svg viewBox="0 0 24 24" class="w-full h-full">
@@ -50,7 +46,7 @@
<div class="text-sm text-info-light-3">Subsidy Application</div>
</div>
</div>
- </router-link>
+ </a>
<router-link to="/certified-products" class="block" style="border-right: 1px solid #e3e3e3">
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
@@ -83,8 +79,8 @@
</div>
</div>
</router-link>
- <router-link to="/" class="block" style="border-right: 1px solid #e3e3e3">
- <div class="flex items-center gap-1 justify-center" @click="linkClick(' https://www.xpump.net/')">
+ <a class="block" style="border-right: 1px solid #e3e3e3" @click="linkClick">
+ <div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<!-- <svg viewBox="0 0 24 24" class="w-full h-full">
<path
@@ -99,7 +95,7 @@
<div class="text-sm text-info-light-3">Pump Search</div>
</div>
</div>
- </router-link>
+ </a>
<!-- <router-link to="/publish-demand" class="block">
<div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
@@ -145,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>
+ <!-- 鎴戦渶瑕佽缃畇wiper鐨勯粯璁ゆ樉绀虹殑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)">
@@ -203,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>
@@ -217,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"
@@ -236,11 +269,11 @@
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;">
+ <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>
+ <span class="text-sm ml-1" style="color: #aaa">涓�</span>
</div>
</div>
</swiper-slide>
@@ -267,22 +300,179 @@
</div>
</div>
</div>
+
+ <!-- 娴姩鍙充晶鏍� -->
+ <div class="fixed right-[60px] bottom-[128px] z-50">
+ <div class="flex flex-col">
+ <!-- 璐墿杞� -->
+ <div class="group relative" v-if="false">
+ <div
+ class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 text-gray-600"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+ />
+ </svg>
+ </div>
+ <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
+ <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">璐墿杞�</div>
+ </div>
+ </div>
+
+ <!-- 鎴戠殑 -->
+ <div class="group relative" v-if="false">
+ <div
+ class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 text-gray-600"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+ />
+ </svg>
+ </div>
+ <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
+ <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">鎴戠殑</div>
+ </div>
+ </div>
+
+ <!-- 瀹㈡湇 -->
+ <div class="group relative">
+ <div
+ class="py-1.5 text-primary bg-white opacity-95 rounded-lg shadow size-19 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
+ @click="showCustomerService = true"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 text-gray-600"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
+ />
+ </svg>
+ <div class="bg-gray-800 text-sm py-1 px-3 rounded text-primary" style="text-align: center">AI瀹㈡湇</div>
+ </div>
+ <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
+ <img :src="CallMe" width="150" height="150" />
+ </div> -->
+ </div>
+
+ <!-- 鍙嶉 -->
+ <!-- <div class="group relative" @click="toFeedBack">
+ <div
+ class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 text-gray-600"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+ />
+ </svg>
+ <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">鍙嶉</div>
+ </div>
+ </div>
+ <div class="group relative">
+ <div
+ class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
+ >
+ <svg
+ t="1740060002788"
+ class="icon h-6 w-6 text-gray-600"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="13742"
+ width="128"
+ height="128"
+ >
+ <path
+ d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
+ fill="#000000"
+ p-id="13743"
+ ></path>
+ </svg>
+ <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">寰俊</div>
+ </div>
+ <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
+ <img :src="CallMe" width="150" height="150" />
+ </div>
+ </div> -->
+
+ <!-- 杩斿洖椤堕儴 -->
+ <!-- <div class="group relative" @click="scrollToTop">
+ <div
+ class="bg-white w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6 text-gray-600"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
+ </svg>
+ <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">椤堕儴</div>
+ </div>
+ </div> -->
+ </div>
+ </div>
+ <!-- 瀹㈡湇瀵硅瘽妗� -->
+ <customer-service
+ class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
+ v-show="showCustomerService"
+ @close="showCustomerService = false"
+ />
</div>
</template>
<script setup lang="ts">
import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
-import { onMounted, ref } from 'vue';
+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 { 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([
@@ -349,14 +539,30 @@
// date: '2024-03-07',
// },
]);
-
-const linkClick = (url) => {
- window.open(url, '_blank');
+const m_RequestDataObj = {
+ 1: { requestPath: 'static/EecProductData/Pump.json?v=' + new Date().getTime() },
+ 2: { requestPath: 'static/EecProductData/AirCompressor.json?v=' + new Date().getTime() },
+ 3: { requestPath: 'static/EecProductData/Fan.json?v=' + new Date().getTime() },
+ 4: { requestPath: 'static/EecProductData/WaterChiller.json?v=' + new Date().getTime() },
+ 7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() },
};
+const state = reactive({
+ catalog: [
+ { name: '娉�', tag: 1 },
+ { name: '瀹圭Н寮忕┖鍘嬫満', tag: 2 },
+ { name: '閫氶鏈�', tag: 3 },
+ { name: '鍐锋按鏈虹粍', tag: 4 },
+ { name: '鐢垫満', tag: 7 },
+ ],
+ curSelectCatalog: 1,
+ catalogSwiperIndex: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: '鍖椾含',
@@ -500,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%' },
@@ -519,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 = [
@@ -673,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) => {
@@ -944,6 +959,287 @@
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');
+};
+const toSubsidy = () => {
+ // 璺宠浆鍒拌缃戦〉
+ window.open('https://www.sheitc.sh.gov.cn/', '_blank');
+};
+const scrollToTop = () => {
+ nextTick(() => {
+ // console.log('鎴戣鎵撳嵃浜�');
+ document.getElementById('app-page').scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ });
+};
+
+const showCustomerService = ref(false);
</script>
<style scoped>
@@ -960,7 +1256,7 @@
.carousel-image {
width: 100%;
- /* height: 100%; */
+ height: 100%;
object-fit: fill; /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
}
@@ -991,6 +1287,15 @@
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;
@@ -1017,4 +1322,54 @@
border-bottom: none;
}
}
+
+: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: 24px;
+ line-height: 26px;
+ &:hover {
+ color: #71b02b;
+ }
+ }
+}
+.catalog-continer {
+ /* 鎬婚珮搴� - 涓婁笅padding - 琛岄棿璺� */
+ height: 100%; /* 70px鏄笂涓媝adding鎬诲拰锛�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>
--
Gitblit v1.9.3