iie 部署

gerson

2025-02-13 2a4b83c058b9f669e33e96168d7ad25016dafadd

 src/views/Home.vue

@@ -1,89 +1,85 @@
<template>
   <div class="h-full">
      <!-- 轮播图部分 -->
      <div class="banner-carousel bg-primary relative right-[29.5%] w-screen">
         <el-carousel height="400px" :interval="5000" arrow="always">
      <div class="banner-carousel  relative right-[29.5%] w-screen">
         <el-carousel height="500px" :interval="5000" arrow="always">
            <el-carousel-item>
               <div class="banner-slide bg-blue-900 text-white">
                  <div class="container mx-auto px-4 h-full flex items-center">
                     <div class="flex justify-between items-center w-full">
                        <div class="flex-1">
                           <div class="text-4xl font-bold mb-4">全国信标委软件与系统工程</div>
                           <div class="text-5xl font-bold mb-8">分委会(TC28/SC7)成立40周年</div>
                           <div class="flex space-x-8 text-xl">
                              <div class="text-center">
                                 <div class="text-4xl font-bold text-blue-400">136<sup>+</sup></div>
                                 <div>发布国家标准</div>
                              </div>
                              <div class="text-center">
                                 <div class="text-4xl font-bold text-blue-400">19<sup>+</sup></div>
                                 <div>发布行业标准</div>
                              </div>
                              <div class="text-center">
                                 <div class="text-4xl font-bold text-blue-400">211<sup>+</sup></div>
                                 <div>对口国际标准化组织</div>
                              </div>
                              <div class="text-center">
                                 <div class="text-4xl font-bold text-blue-400">60<sup>+</sup></div>
                                 <div>参与的国际标准</div>
                              </div>
                           </div>
                        </div>
                        <div class="w-1/3">
                           <div class="text-6xl font-bold text-blue-400">40</div>
                        </div>
                     </div>
                  </div>
               <div class="carousel-item">
                  <img src="@/assets/carousel/test/10.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/test/11.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
               </div>
            </el-carousel-item>
            <el-carousel-item>
               <div class="carousel-item">
                  <img src="@/assets/carousel/test/14.png" class="carousel-image" />
                  <!-- <img src="https://www.app-i.cn/api/file?file_name=072c9dda-3ffb-410d-be93-a88ec6c7e765.jpg;40周年1.jpg" alt=""> -->
               </div>
            </el-carousel-item>
            <!-- <el-carousel-item>
               <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
            </el-carousel-item> -->
         </el-carousel>
      </div>
      <div class="-mt-20 relative z-20">
      <div class="relative z-20 2 -mt-24">
         <!-- 功能按钮区域 -->
         <div class="bg-[#f3f3f3] py-8 -mt-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="/publish-app" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
                  <router-link to="/subsidy-application" 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">
                           <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path fill="currentColor" d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"/>
                           </svg>
                        </div>
                        <div>
                           <div class="text-lg font-medium">发APP</div>
                           <div class="text-sm text-info-light-3">Publish APP</div>
                           <div class="text-lg font-medium">补贴申请</div>
                           <div class="text-sm text-info-light-3">Subsidy Application</div>
                        </div>
                     </div>
                  </router-link>
                  <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3">
                  <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">
                           <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/>
                           </svg>
                        </div>
                        <div>
                           <div class="text-lg font-medium">发APP</div>
                           <div class="text-sm text-info-light-3">Publish APP</div>
                           <div class="text-lg font-medium">认证产品</div>
                           <div class="text-sm text-info-light-3">Certified Products</div>
                        </div>
                     </div>
                  </router-link>
                  <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3">
                  <router-link to="/eec-label-search" class="block" style="border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center">
                        <div class="w-16 h-16">
                           <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
                           </svg>
                        </div>
                        <div>
                           <div class="text-lg font-medium">发APP</div>
                           <div class="text-sm text-info-light-3">Publish APP</div>
                           <div class="text-lg font-medium">证书查询</div>
                           <div class="text-sm text-info-light-3">Certificate Search</div>
                        </div>
                     </div>
                  </router-link>
                  <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center">
                  <router-link to="/" class="block" style="border-right: 1px solid #e3e3e3">
                     <div class="flex items-center gap-1 justify-center" @click="linkClick('http://xpump.net/#/Index')">
                        <div class="w-16 h-16">
                           <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
                           <svg viewBox="0 0 24 24" class="w-full h-full">
                              <path fill="currentColor" d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z"/>
                           </svg>
                        </div>
                        <div>
                           <div class="text-lg font-medium">发APP</div>
                           <div class="text-sm text-info-light-3">Publish APP</div>
                           <div class="text-lg font-medium">查泵网</div>
                           <div class="text-sm text-info-light-3">Pump Search</div>
                        </div>
                     </div>
                  </router-link>
@@ -132,13 +128,13 @@
               </div>
            </div>
         </div>
         <div class="bg-white px-4 py-4">
         <div class="bg-white px-4 py-4 flex flex-col gap-8">
            <!-- 新闻公告区域 -->
            <div class="mx-auto">
            <div class="w-full mb-4">
               <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><Document /></el-icon>
                     <span class="text-medium font-medium"> <span class="text-primary">通知</span>公告</span>
                     <span class="text-medium font-bold"> <span class="text-primary">通知</span>公告</span>
                  </div>
                  <el-button text>更多</el-button>
               </div>
@@ -149,7 +145,9 @@
                     alt="通知公告"
                  />
                  <div class="bg-page p-4 flex-auto">
                     <div class="font-bold text-medium over-ellipsis mb-2">武汉市人民政府关于印发武汉市关于进一步促进软件和信息技术服务业高质量</div>
                     <div class="font-bold text-medium over-ellipsis mb-2">
                        武汉市人民政府关于印发武汉市关于进一步促进软件和信息技术服务业高质量
                     </div>
                     <div class="text-small text-regular">
                        各区人民政府，市人民政府各部门：
                        经研究，现将《武汉市关于进一步促进软件和信息技术服务业高质量发展的若干政策措施》印发给你们，请认真组织实施。
@@ -160,11 +158,9 @@
                        class="flex text-regular justify-between items-center py-2"
                        style="border-bottom: 1px solid #e3e3e3"
                     >
                        <div class="flex items-center hover:text-primary w-full">
                        <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
                           <!-- <div class="w-1.5 h-1.5 rounded-full bg-gray-400 mr-2"></div> -->
                           <div
                              class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap "
                           >
                           <div class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
                              {{ item.title }}
                           </div>
                        </div>
@@ -173,38 +169,437 @@
                  </div>
               </div>
            </div>

            <!-- 活动合作区域 -->
            <div class="w-full">
               <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>
                  </div>
                  <el-button text>更多</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>
                  <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]">全国工业软件｜工业APP总量</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>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <!-- 工业软件分类统计 -->
            <div class="w-full bg-[#f6f7f9]">
               <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                  <div class="flex items-center space-x-2 ml-2 font-bold">
                     <el-icon class="text-blue-500"><DataLine /></el-icon>
                     <span class="text-medium font-medium">工业软件｜工业APP<span class="text-primary">产品分类</span></span>
                  </div>
               </div> -->
               <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">工业软件 | 工业APP产品分类</div>
               <div class="flex">
                  <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
                  <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
               </div>
            </div>

            <!-- 行基通专分类统计 -->
            <div class="w-full bg-[#f6f7f9]">
               <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">行基通专</div>
               <div class="flex">
                  <div class="w-[45%] h-[400px]" ref="pieChart2Ref"></div>
                  <div class="w-[55%] h-[400px]" ref="barChart2Ref"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { Document } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { Document, Operation } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const newsList = ref([
   {
      title: '关于印发《宁波市促进软件产业高质量发展专项政策意见》的通知',
      date: '2024-02-11',
      id: '1',
      title: '上海市经济信息化委关于征集用能设备更新供应链平台的通知',
      date: '2025-02-07',
      link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
   },
   {
      title: '广东省工业和信息化厅关于开展2024年有关人才专项项目榜单推荐工作的通知',
      date: '2024-02-11',
      id: '2',
      title: '浙江大规模以旧换新方案公布',
      date: '2025-02-08',
      link: 'https://news.qq.com/rain/a/20250208A05YH100',
   },
   {
      title: '关于印发《宁波市软件产业突破提升发展行动方案》的通知',
      date: '2024-02-11',
      id: '3',
      title: '2024年设备更新与消费品以旧换新成效显著',
      date: '2025-02-10',
      link: 'https://www.sohu.com/a/857615850_122006510',
   },
   {
      title: '武汉市经信局关于对《武汉市关于进一步促进软件和信息技术服务业高质量发展的若干政策（征求意见稿）》公开征求意见的通知',
      date: '2024-02-11',
      id: '4',
      title: '印发推动工业领域设备更新工作实施方案的通知',
      date: '2024-10-22',
      link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm',
   },
   // {
   //    title: '印发推动工业领域设备更新工作实施方案的通知',
   //    date: '2024-10-22',
   // },
   // {
   //    title: '关于《上海市工业通信业用能设备更新专项政策实施细则（征求意见稿）》公开征求意见的公告',
   //    date: '2024-12-18',
   // },
   // {
   //    title: '解读产业能效指南，推动设备对标及更新',
   //    date: '2024-08-05',
   // },
   // {
   //    title: '七部门联合印发方案部署工业领域设备更新和技术改造 推动先进产能比重持续提升',
   //    date: '2024-04-29',
   // },
   // {
   //    title: '国务院关于印发《推动大规模设备更新和消费品以旧换新行动方案》的通知',
   //    date: '2024-03-07',
   // },
]);

const linkClick = (url) => {
   window.open(url, '_blank');
};
const cooperationData = ref([
   { region: '福建省', count: 7 },
   { region: '重庆市', count: 6 },
   { region: '上海市', count: 184 },
   { region: '湖北省', count: 4 },
   { region: '广东省', count: 249 },
]);

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: 644, percentage: '15.77%' },
   { name: '生产制造类', value: 1058, percentage: '25.91%' },
   { name: '运维服务类', value: 934, percentage: '22.88%' },
   { name: '经营管理类', value: 1035, percentage: '25.35%' },
   { name: '支撑保障类', value: 412, percentage: '10.09%' },
];

const pieChartRef = ref<HTMLElement | null>(null);
const barChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
   if (pieChartRef.value && barChartRef.value) {
      // 初始化饼图
      const pieChart = echarts.init(pieChartRef.value);
      pieChart.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 = 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: ['江苏省', '北京市', '上海市', '浙江省', '广东省', '山东省'],
            axisLabel: {
               interval: 0,
               rotate: 30,
            },
         },
         yAxis: {
            type: 'value',
            name: '数量',
         },
         series: [
            {
               data: [260, 240, 35, 25, 20, 8],
               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 = [
   { name: '基础共性类', value: 1764, percentage: '43.20%' },
   { name: '行业通用类', value: 1670, percentage: '40.90%' },
   { name: '企业专用类', value: 596, percentage: '14.60%' },
   { name: '其他类', value: 53, percentage: '1.30%' },
];

const pieChart2Ref = ref<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();
      });
   }
});
</script>

<style scoped>
.banner-slide {
.carousel-item {
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

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

.function-card {
@@ -217,11 +612,18 @@
}

:deep(.el-carousel__arrow) {
   background-color: rgba(255, 255, 255, 0.3);
   background-color: rgba(0, 0, 0, 0.5);
   border: none;
   width: 44px;
   height: 44px;
   font-size: 20px;

   &:hover {
      background-color: rgba(255, 255, 255, 0.5);
      background-color: rgba(0, 0, 0, 0.7);
   }

   i {
      color: #fff;
   }
}
</style>