修改首页申请补贴跳转链接

tanghaolin

2025-03-05 dda478bc5d2d7696ca337e9bd0dd5090a094e36f

 src/views/Home.vue

@@ -1,5 +1,5 @@
<template>
   <div class="h-full">
   <div class="h-full relative">
      <!-- 轮播图部分 -->
      <div class="banner-carousel relative right-[29.5%] w-screen">
         <el-carousel height="500px" :interval="5000" arrow="always">
@@ -31,8 +31,8 @@
         <div class="bg-white py-8">
            <div class="mx-auto px-32">
               <div class="grid grid-cols-4 divide-x-w-default">
                  <router-link
                     to="/subsidy-application"
                  <a
                     @click="toSubsidy"
                     class="block"
                     style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3"
                  >
@@ -50,7 +50,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">
@@ -153,12 +153,20 @@
                     <el-icon class="text-blue-500"><Document /></el-icon>
                     <span class="text-medium font-bold"> <span class="text-primary">新闻</span>政策</span>
                  </div>
                  <el-button text >更多</el-button>
                  <el-button text>更多</el-button>
               </div>
               <div class="flex">
                  <img class="w-[30%] flex-0 cursor-pointer" src="@/assets/home/notice1.png" @click="routeClick('/news-detail/8')" alt="新闻政策" />
                  <div class="bg-page p-4 flex-auto  ">
                     <div class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer" @click="routeClick('/news-detail/8')">
                  <img
                     class="w-[30%] flex-0 cursor-pointer"
                     src="@/assets/home/notice1.png"
                     @click="routeClick('/news-detail/8')"
                     alt="新闻政策"
                  />
                  <div class="bg-page p-4 flex-auto">
                     <div
                        class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer"
                        @click="routeClick('/news-detail/8')"
                     >
                        上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
                     </div>
                     <div class="text-small text-regular">
@@ -191,28 +199,52 @@
               <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><Operation /></el-icon>
                     <span class="text-medium font-bold"> <span class="text-primary">认证</span>产品</span>
                     <span class="text-medium font-bold"> <span class="text-primary">能效</span>产品</span>
                  </div>
                  <el-button text @click="routeClick('/certified-products')">更多</el-button>
               </div>
               <div class="flex bg-[#f9f9f9]">
                  <div class="flex-auto">
                     <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" />
               <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div">
                  <div class="flex-auto h-full">
                     <!-- <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" /> -->
                     <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                  </div>
                  <div class="bg-[#393939] h-fit my-auto w-[200px] px-4 py-2 mx-10">
                     <div class="flex flex-col justify-between items-center mb-4 gap-2">
                        <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                        <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                           4083<span class="text-base text-info-light-3 ml-1">个</span>
                        </div>
                     </div>
                     <div class="grid grid-cols-1 gap-4">
                        <div v-for="(item, index) in cooperationData" :key="index" class="flex justify-between items-center">
                           <span class="text-[#26c4f6]">{{ item.region }}</span>
                           <div>
                              <span class="text-white font-bold">{{ item.count }}</span>
                              <span class="text-sm text-gray-500 ml-1 text-regular">个</span>
                  <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                     <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                        <div class="flex flex-col justify-between items-center mb-4 gap-2">
                           <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                           <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                              {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">个</span>
                           </div>
                        </div>
                        <div class="grid grid-cols-1 gap-4 h-[140px]">
                           <!-- <div class="flex gap-4 items-center" v-for="(item, index) in cooperationData" :key="index">
                              <span class="text-[#26c4f6]">{{ item.region }}</span>
                              <div>
                                 <span class="text-white font-bold">{{ item.count }}</span>
                                 <span class="text-sm text-white-500 ml-1 text-white">个</span>
                              </div>
                           </div> -->
                           <swiper
                              :direction="'vertical'"
                              :slidesPerView="5"
                              :spaceBetween="10"
                              :autoplay="{
                                 delay: 1500,
                                 disableOnInteraction: false,
                              }"
                              :modules="SwiperModule"
                              class="mySwiper"
                           >
                              <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
                                 <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                    <span class="text-[#26c4f6]">{{ item.region }}</span>
                                    <div>
                                       <span class="text-white font-bold">{{ item.count }}</span>
                                       <span class="text-sm ml-1" style="color: #aaa">个</span>
                                    </div>
                                 </div>
                              </swiper-slide>
                           </swiper>
                        </div>
                     </div>
                  </div>
@@ -235,23 +267,192 @@
            </div>
         </div>
      </div>

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

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

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

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

            <!-- 返回顶部 -->
            <div class="group relative" @click="scrollToTop">
               <div
                  class="bg-white w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
               >
                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6 text-gray-600"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                  >
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                  </svg>
                  <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div>
               </div>
            </div>
         </div>
      </div>
      <!-- 客服对话框 -->
      <el-dialog
         v-model="showCustomerService"
         :show-close="true"
         :modal="true"
         :close-on-click-modal="false"
         :close-on-press-escape="false"
         class="customer-service-dialog"
      >
         <customer-service />
      </el-dialog>
   </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 } from 'vue';
import { useRouter } from 'vue-router';
import YWLogo from "@/assets/logo/yw_logo.png"
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 'swiper/css';

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

const newsList = ref([
   {
      id:'7',
      title:'上海市人民政府关于印发《上海市推动大规模设备更新和消费品以旧换新行动计划（2024-2027年）》的通知',
      date:'2024-04-23',
      link:'test'
      id: '7',
      title: '上海市人民政府关于印发《上海市推动大规模设备更新和消费品以旧换新行动计划（2024-2027年）》的通知',
      date: '2024-04-23',
      link: 'test',
   },
   {
      id: '1',
@@ -319,14 +520,147 @@
   router.push(url);
};
const cooperationData = ref([
   { region: '上海省', count: 389 },
   { region: '江苏省', count: 281 },
   { region: '浙江省', count: 198 },
   { region: '湖南省', count: 125 },
   { region: '湖北省', count: 89 },
   {
      region: '北京',
      count: 408,
   },
   {
      region: '天津',
      count: 339,
   },
   {
      region: '上海',
      count: 489,
   },
   {
      region: '重庆',
      count: 23,
   },
   {
      region: '河北',
      count: 440,
   },
   {
      region: '河南',
      count: 432,
   },
   {
      region: '云南',
      count: 442,
   },
   {
      region: '辽宁',
      count: 8,
   },
   {
      region: '黑龙江',
      count: 363,
   },
   {
      region: '湖南',
      count: 134,
   },
   {
      region: '安徽',
      count: 474,
   },
   {
      region: '山东',
      count: 438,
   },
   {
      region: '新疆',
      count: 334,
   },
   {
      region: '江苏',
      count: 129,
   },
   {
      region: '浙江',
      count: 433,
   },
   {
      region: '江西',
      count: 197,
   },
   {
      region: '湖北',
      count: 315,
   },
   {
      region: '广西',
      count: 69,
   },
   {
      region: '甘肃',
      count: 630,
   },
   {
      region: '山西',
      count: 495,
   },
   {
      region: '内蒙古',
      count: 283,
   },
   {
      region: '陕西',
      count: 156,
   },
   {
      region: '吉林',
      count: 485,
   },
   {
      region: '福建',
      count: 411,
   },
   {
      region: '贵州',
      count: 496,
   },
   {
      region: '广东',
      count: 451,
   },
   {
      region: '青海',
      count: 387,
   },
   {
      region: '西藏',
      count: 356,
   },
   {
      region: '四川',
      count: 414,
   },
   {
      region: '宁夏',
      count: 470,
   },
   {
      region: '海南',
      count: 437,
   },
   {
      region: '台湾',
      count: 165,
   },
   {
      region: '香港',
      count: 94,
   },
   {
      region: '澳门',
      count: 437,
   },
   {
      region: '南海诸岛',
      count: 0,
   },
]);



const handleNewsClick = (item: any) => {
   // if (item.link) {
@@ -357,6 +691,9 @@
const barChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
   nextTick(() => {
      initMapChart();
   });
   if (pieChartRef.value && barChartRef.value) {
      // 初始化饼图
      const pieChart = echarts.init(pieChartRef.value);
@@ -620,6 +957,173 @@
      });
   }
});
const EecProductMapChartRef = ref<HTMLElement | null>(null);
const m_allEecProductNumber = ref(0);
const initMapChart = () => {
   let allEecProductNumber = 0;
   let mapData = cooperationData.value.map((item) => {
      allEecProductNumber += item.count;
      return {
         name: item.region,
         value: item.count,
      };
   });
   m_allEecProductNumber.value = allEecProductNumber;
   axios({
      url: 'static/Data/ChinaGeoJsonData.json',
      method: 'get',
   })
      .then((res) => {
         const GeoData = res.data;
         if (EecProductMapChartRef.value) {
            echarts.registerMap('china', GeoData);
            const EecProductMapChart = echarts.init(EecProductMapChartRef.value);
            EecProductMapChart.setOption({
               tooltip: {
                  show: true,
                  formatter: function (params) {
                     if (params.data) return params.name + '：' + params.data['value'];
                  },
               },
               visualMap: {
                  min: 0,
                  max: 100000,
                  right: 26,
                  bottom: 40,
                  showLabel: true,
                  text: ['', ''],
                  pieces: [
                     {
                        gt: 5001,
                        label: '> 5000',
                        color: '#FF4500',
                     },
                     {
                        gte: 1001,
                        lte: 5000,
                        label: '1001 - 5000',
                        color: '#FF8300',
                     },
                     {
                        gte: 601,
                        lte: 1000,
                        label: '601 - 1000',
                        color: '#FFC100',
                     },
                     {
                        gte: 401,
                        lt: 600,
                        label: '401 - 600',
                        color: '#FFFF00',
                     },
                     {
                        gte: 201,
                        lt: 400,
                        label: '201 - 400',
                        color: '#D7EF53',
                     },
                     {
                        gte: 1,
                        lt: 200,
                        label: '1 - 200',
                        color: '#AFDEA7',
                     },
                     {
                        lt: 0,
                        label: '0',
                        color: '#87CEFA',
                     },
                  ],
                  show: true,
               },
               geo: {
                  map: 'china',
                  roam: true,
                  scaleLimit: {
                     min: 1,
                     max: 2,
                  },
                  zoom: 1.13,
                  top: 50,
                  label: {
                     show: true,
                     fontSize: '14',
                     color: 'rgba(0,0,0,0.7)',
                     formatter: (params) => {
                        return params.name + '省';
                     },
                  },
                  itemStyle: {
                     borderColor: 'rgba(0, 0, 0, 0.2)',
                  },
                  emphasis: {
                     areaColor: '#f2d5ad',
                     shadowOffsetX: 0,
                     shadowOffsetY: 0,
                     borderWidth: 0,
                     itemStyle: {
                        color: '#f4f4f4', // 鼠标悬停时的颜色
                     },
                  },
               },
               series: [
                  {
                     name: '能效产品',
                     type: 'map',
                     map: 'china',
                     geoIndex: 0,
                     data: mapData,
                     emphasis: {
                        itemStyle: {
                           color: 'rgba(0,0,0,0.7)', // 鼠标悬停时的颜色
                        },
                     },
                  },
                  // {
                  //    name: '能效产品',
                  //    type: 'map',
                  //    mapType: 'china',
                  //    selectedMode: 'false',
                  //    label: {
                  //       normal: {
                  //          show: true,
                  //       },
                  //       emphasis: {
                  //          show: false,
                  //       },
                  //    },
                  //    data: mapData,
                  // },
               ],
            });
            // 监听窗口大小变化
            window.addEventListener('resize', () => {
               EecProductMapChart.resize();
            });
         }
      })
      .catch((err) => {
         console.log(err);
      });
};
const 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>
@@ -648,7 +1152,34 @@
   transform: translateY(-4px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.eec-product-div {
   background-image: url('@/assets/home/eec_product_bg.jpg');
}
.eec-product-num-div {
   min-width: 230px;
   border: 1px solid rgb(28, 151, 183);
   height: 100%;
   display: flex;
   overflow: hidden;
   height: 255px;
}
#eec-product-map {
   width: 100%;
   height: 100%;
}
.mySwiper {
   width: 100%;
   height: 100%;
}
.card-hover-style {
   /* display: flex;
   justify-content: center;
   align-items: center; */
   /* transform: translateY(50%); */
   background-color: #fff;
   color: #000;
   margin-right: unset;
}
:deep(.el-carousel__arrow) {
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
@@ -676,5 +1207,11 @@
   }
}

:deep(.customer-service-dialog .el-dialog__body) {
   padding: 0;
}

:deep(.customer-service-dialog .el-dialog__header) {
   display: block;
}
</style>