<template>
|
<div class="h-full">
|
<!-- 轮播图部分 -->
|
<div class="banner-carousel bg-primary relative right-[29.5%] w-screen">
|
<el-carousel height="500px" :interval="5000" arrow="always">
|
<el-carousel-item>
|
<div class="carousel-item">
|
<img src="@/assets/carousel/1.png" class="carousel-image" />
|
</div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div class="carousel-item">
|
<img src="@/assets/carousel/4.png" class="carousel-image" />
|
|
</div>
|
</el-carousel-item>
|
<el-carousel-item>
|
<div class="carousel-item">
|
<img src="@/assets/carousel/3.png" class="carousel-image" />
|
</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="relative z-20">
|
<!-- 功能按钮区域 -->
|
<div class="bg-[#f3f3f3] 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">
|
<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" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</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">
|
<div class="w-16 h-16">
|
<img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</div>
|
</div>
|
</div>
|
</router-link>
|
<router-link to="/industrial-software" 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" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">找APP</div>
|
<div class="text-sm text-info-light-3">Find APP</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">
|
<div class="w-16 h-16">
|
<img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</div>
|
</div>
|
</div>
|
</router-link>
|
|
<!-- <router-link to="/publish-demand" class="block">
|
<div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
|
<div class="flex flex-col items-center">
|
<div class="w-16 h-16 mb-4">
|
<img src="@/assets/icons/publish-demand.svg" alt="发需求" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发需求</div>
|
<div class="text-gray-400 text-sm">Publish Demand</div>
|
</div>
|
</div>
|
</div>
|
</router-link>
|
|
<router-link to="/find-app" class="block">
|
<div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
|
<div class="flex flex-col items-center">
|
<div class="w-16 h-16 mb-4">
|
<img src="@/assets/icons/find-app.svg" alt="找APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">找APP</div>
|
<div class="text-gray-400 text-sm">Find APP</div>
|
</div>
|
</div>
|
</div>
|
</router-link>
|
|
<router-link to="/find-demand" class="block">
|
<div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
|
<div class="flex flex-col items-center">
|
<div class="w-16 h-16 mb-4">
|
<img src="@/assets/icons/find-demand.svg" alt="找需求" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">找需求</div>
|
<div class="text-gray-400 text-sm">Find Demand</div>
|
</div>
|
</div>
|
</div>
|
</router-link> -->
|
</div>
|
</div>
|
</div>
|
<div class="bg-white px-4 py-4">
|
<!-- 新闻公告区域 -->
|
<div class="mx-auto 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>
|
</div>
|
<el-button text>更多</el-button>
|
</div>
|
<div class="flex">
|
<img
|
class="w-[30%] flex-0"
|
src="https://www.app-i.cn/api/file?file_name=f9afde4d-6993-43e6-9ea5-fa2359161b4d.png;2(1).png"
|
alt="通知公告"
|
/>
|
<div class="bg-page p-4 flex-auto">
|
<div class="font-bold text-medium over-ellipsis mb-2">
|
武汉市人民政府关于印发武汉市关于进一步促进软件和信息技术服务业高质量
|
</div>
|
<div class="text-small text-regular">
|
各区人民政府，市人民政府各部门：
|
经研究，现将《武汉市关于进一步促进软件和信息技术服务业高质量发展的若干政策措施》印发给你们，请认真组织实施。
|
</div>
|
<div
|
v-for="(item, index) in newsList"
|
:key="index"
|
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" @click="handleNewsClick(item.link)">
|
<!-- <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">
|
{{ item.title }}
|
</div>
|
</div>
|
<!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 活动合作区域 -->
|
<div class="mx-auto">
|
<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-medium"> <span class="text-primary">活动</span>合作</span>
|
</div>
|
<el-button text>更多</el-button>
|
</div>
|
<div class="flex">
|
<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 mr-2 w-[200px] px-4 py-2">
|
<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="mx-auto mt-2">
|
<!-- <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">工业软件 | 工业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="mx-auto mt-8">
|
<div class="text-large flex items-center w-fit mx-auto">行基通专</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, Operation } from '@element-plus/icons-vue';
|
import * as echarts from 'echarts';
|
import { onMounted, ref } from 'vue';
|
|
const newsList = ref([
|
{
|
title: '上海市经济信息化委关于征集用能设备更新供应链平台的通知',
|
date: '2025-02-07',
|
link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
|
},
|
{
|
title: '浙江大规模以旧换新方案公布',
|
date: '2025-02-08',
|
link: 'https://news.qq.com/rain/a/20250208A05YH100',
|
},
|
{
|
title: '2024年设备更新与消费品以旧换新成效显著',
|
date: '2025-02-10',
|
link: 'https://www.sohu.com/a/857615850_122006510',
|
},
|
{
|
title: '上海市工业通信业用能设备更新专项扶持实施细则',
|
date: '2025-01-06',
|
link: 'https://service.shanghai.gov.cn/XingZhengWenDangKuJyh/XZGFDetails.aspx?docid=250120100555h7fouO6RCg6qGzauglW',
|
},
|
// {
|
// 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 cooperationData = ref([
|
{ region: '福建省', count: 7 },
|
{ region: '重庆市', count: 6 },
|
{ region: '上海市', count: 184 },
|
{ region: '湖北省', count: 4 },
|
{ region: '广东省', count: 249 },
|
]);
|
|
const handleNewsClick = (link: string) => {
|
window.open(link, '_blank');
|
};
|
|
// 图表数据
|
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: 'center',
|
top: 'center',
|
textStyle: {
|
fontSize: 20, // 增大字体大小
|
lineHeight: 24,
|
align: 'center',
|
fontWeight: 'bold', // 加粗显示
|
},
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c} ({d}%)',
|
},
|
legend: {
|
orient: 'vertical',
|
right: '10%',
|
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: 'center',
|
top: 'center',
|
textStyle: {
|
fontSize: 20,
|
lineHeight: 24,
|
align: 'center',
|
fontWeight: 'bold',
|
},
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{b}: {c} ({d}%)',
|
},
|
legend: {
|
orient: 'vertical',
|
right: '10%',
|
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>
|
.carousel-item {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.carousel-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover; /* 保持图片比例并填充容器 */
|
object-position: center center; /* 居中显示图片 */
|
}
|
|
.function-card {
|
transition: all 0.3s ease;
|
}
|
|
.function-card:hover {
|
transform: translateY(-4px);
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
}
|
|
:deep(.el-carousel__arrow) {
|
background-color: rgba(0, 0, 0, 0.5);
|
border: none;
|
width: 44px;
|
height: 44px;
|
font-size: 20px;
|
|
&:hover {
|
background-color: rgba(0, 0, 0, 0.7);
|
}
|
|
i {
|
color: #fff;
|
}
|
}
|
</style>
|
