|
|
@@ -1,24 +1,87 @@
|
|
|
-import { Component, AfterViewInit } from '@angular/core';
|
|
|
+// page-home.component.ts
|
|
|
+import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
|
|
|
import Swiper from 'swiper';
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-page-home',
|
|
|
+ standalone: true,
|
|
|
+ imports: [],
|
|
|
templateUrl: './page-home.html',
|
|
|
styleUrls: ['./page-home.scss']
|
|
|
})
|
|
|
-export class PageHome implements AfterViewInit {
|
|
|
+export class PageHome implements AfterViewInit, OnDestroy {
|
|
|
+ @ViewChild('swiperContainer') swiperContainer!: ElementRef;
|
|
|
+ @ViewChild('galleryChart') galleryChart!: ElementRef;
|
|
|
+ @ViewChild('xrChart') xrChart!: ElementRef;
|
|
|
+ @ViewChild('dashboardChart') dashboardChart!: ElementRef;
|
|
|
+
|
|
|
+ private swiper: any;
|
|
|
+ private galleryChartInstance: any;
|
|
|
+ private xrChartInstance: any;
|
|
|
+ private dashboardChartInstance: any;
|
|
|
+
|
|
|
+ // 示例数据 - 实际应用中可以从服务获取
|
|
|
+ news = [
|
|
|
+ { date: '06-25', title: '"数字赋能非遗传承"研讨会在南昌成功举办' },
|
|
|
+ { date: '06-22', title: '江西文旅厅推出"云游江西"智慧旅游平台' },
|
|
|
+ { date: '06-18', title: '景德镇陶瓷数字化博物馆正式对外开放' },
|
|
|
+ { date: '06-15', title: '赣南采茶戏数字化保护工程启动' },
|
|
|
+ { date: '06-12', title: '庐山智慧景区建设取得阶段性成果' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ files = [
|
|
|
+ { date: '06-24', title: '《江西省数字文化产业发展规划》正式发布' },
|
|
|
+ { date: '06-20', title: '关于征集2023年度文化数字化项目的通知' },
|
|
|
+ { date: '06-17', title: '非遗数字化保护技术标准（试行版）' },
|
|
|
+ { date: '06-10', title: '文化数据资产登记与交易管理办法' },
|
|
|
+ { date: '06-05', title: '智慧旅游景区建设指南（2023版）' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ research = [
|
|
|
+ { date: '06-23', title: '基于知识图谱的江西红色文化资源挖掘研究' },
|
|
|
+ { date: '06-19', title: 'VR技术在古村落数字化保护中的应用探索' },
|
|
|
+ { date: '06-16', title: '区块链在非遗传承人认证体系中的实践' },
|
|
|
+ { date: '06-11', title: 'AIGC在地方文化IP创作中的创新应用' },
|
|
|
+ { date: '06-08', title: '数字孪生技术在历史文化建筑保护中的实践' }
|
|
|
+ ];
|
|
|
+
|
|
|
+ ipList = [
|
|
|
+ '景德镇陶瓷青年计划',
|
|
|
+ '婺源油菜花艺术节',
|
|
|
+ '庐山云雾茶文化IP',
|
|
|
+ '赣南脐橙助农计划',
|
|
|
+ '鄱阳湖生态旅游IP',
|
|
|
+ '井冈山红色研学IP'
|
|
|
+ ];
|
|
|
|
|
|
ngAfterViewInit(): void {
|
|
|
this.initSwiper();
|
|
|
this.initCharts();
|
|
|
+ window.addEventListener('resize', this.handleResize);
|
|
|
+ }
|
|
|
+
|
|
|
+ ngOnDestroy(): void {
|
|
|
+ if (this.swiper) {
|
|
|
+ this.swiper.destroy();
|
|
|
+ }
|
|
|
+ if (this.galleryChartInstance) {
|
|
|
+ this.galleryChartInstance.dispose();
|
|
|
+ }
|
|
|
+ if (this.xrChartInstance) {
|
|
|
+ this.xrChartInstance.dispose();
|
|
|
+ }
|
|
|
+ if (this.dashboardChartInstance) {
|
|
|
+ this.dashboardChartInstance.dispose();
|
|
|
+ }
|
|
|
+ window.removeEventListener('resize', this.handleResize);
|
|
|
}
|
|
|
|
|
|
private initSwiper(): void {
|
|
|
- const swiper = new Swiper('.swiper-container', {
|
|
|
+ this.swiper = new Swiper(this.swiperContainer.nativeElement, {
|
|
|
loop: true,
|
|
|
autoplay: {
|
|
|
- delay: 2000,
|
|
|
+ delay: 5000,
|
|
|
disableOnInteraction: false,
|
|
|
},
|
|
|
pagination: {
|
|
|
@@ -30,42 +93,29 @@ export class PageHome implements AfterViewInit {
|
|
|
prevEl: '.swiper-button-prev',
|
|
|
},
|
|
|
on: {
|
|
|
- init: function() {
|
|
|
- // let el:any = this.el
|
|
|
- // el.addEventListener('mouseenter', function() {
|
|
|
- // swiper.autoplay.stop();
|
|
|
- // });
|
|
|
- // el.addEventListener('mouseleave', function() {
|
|
|
- // swiper.autoplay.start();
|
|
|
- // });
|
|
|
+ init: () => {
|
|
|
+ this.swiperContainer.nativeElement.addEventListener('mouseenter', () => {
|
|
|
+ this.swiper.autoplay.stop();
|
|
|
+ });
|
|
|
+ this.swiperContainer.nativeElement.addEventListener('mouseleave', () => {
|
|
|
+ this.swiper.autoplay.start();
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
private initCharts(): void {
|
|
|
- // 数字文创展廊图表
|
|
|
- const galleryChart = echarts.init(document.getElementById('galleryChart'));
|
|
|
- galleryChart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['作品数量', '用户访问量']
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
+ this.galleryChartInstance = echarts.init(this.galleryChart.nativeElement);
|
|
|
+ this.galleryChartInstance.setOption({
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ legend: { data: ['作品数量', '用户访问量'] },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: ['陶瓷', '书画', '剪纸', '刺绣', '竹编', '漆器']
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
+ yAxis: { type: 'value' },
|
|
|
series: [
|
|
|
{
|
|
|
name: '作品数量',
|
|
|
@@ -73,8 +123,8 @@ export class PageHome implements AfterViewInit {
|
|
|
data: [45, 32, 28, 36, 22, 18],
|
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: '#2a5daa'},
|
|
|
- {offset: 1, color: '#4a86e8'}
|
|
|
+ { offset: 0, color: '#2a5daa' },
|
|
|
+ { offset: 1, color: '#4a86e8' }
|
|
|
])
|
|
|
}
|
|
|
},
|
|
|
@@ -84,88 +134,46 @@ export class PageHome implements AfterViewInit {
|
|
|
data: [120, 85, 92, 108, 75, 60],
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 8,
|
|
|
- lineStyle: {
|
|
|
- color: '#e8c34d',
|
|
|
- width: 3
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- color: '#e8c34d',
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- }
|
|
|
+ lineStyle: { color: '#e8c34d', width: 3 },
|
|
|
+ itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 }
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
|
|
|
- // XR云展厅图表
|
|
|
- const xrChart = echarts.init(document.getElementById('xrChart'));
|
|
|
- xrChart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'horizontal',
|
|
|
- bottom: 'bottom'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '访问来源',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 10,
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: '18',
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [
|
|
|
- { value: 1048, name: '景德镇陶瓷馆' },
|
|
|
- { value: 735, name: '庐山云海' },
|
|
|
- { value: 580, name: '婺源古村落' },
|
|
|
- { value: 484, name: '井冈山革命博物馆' },
|
|
|
- { value: 300, name: '滕王阁' }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
+ this.xrChartInstance = echarts.init(this.xrChart.nativeElement);
|
|
|
+ this.xrChartInstance.setOption({
|
|
|
+ tooltip: { trigger: 'item' },
|
|
|
+ legend: { orient: 'horizontal', bottom: 'bottom' },
|
|
|
+ series: [{
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
|
|
+ label: { show: false, position: 'center' },
|
|
|
+ emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
|
|
|
+ labelLine: { show: false },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: '景德镇陶瓷馆' },
|
|
|
+ { value: 735, name: '庐山云海' },
|
|
|
+ { value: 580, name: '婺源古村落' },
|
|
|
+ { value: 484, name: '井冈山革命博物馆' },
|
|
|
+ { value: 300, name: '滕王阁' }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
});
|
|
|
|
|
|
- // 数据看板图表
|
|
|
- const dashboardChart = echarts.init(document.getElementById('dashboardChart'));
|
|
|
- dashboardChart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- data: ['会员数量', '项目数量', '资源总量']
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
+ this.dashboardChartInstance = echarts.init(this.dashboardChart.nativeElement);
|
|
|
+ this.dashboardChartInstance.setOption({
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ legend: { data: ['会员数量', '项目数量', '资源总量'] },
|
|
|
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
+ yAxis: { type: 'value' },
|
|
|
series: [
|
|
|
{
|
|
|
name: '会员数量',
|
|
|
@@ -173,21 +181,14 @@ export class PageHome implements AfterViewInit {
|
|
|
stack: 'Total',
|
|
|
data: [120, 132, 201, 234, 290, 330],
|
|
|
smooth: true,
|
|
|
- lineStyle: {
|
|
|
- width: 3,
|
|
|
- color: '#2a5daa'
|
|
|
- },
|
|
|
+ lineStyle: { width: 3, color: '#2a5daa' },
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 8,
|
|
|
- itemStyle: {
|
|
|
- color: '#2a5daa',
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
+ itemStyle: { color: '#2a5daa', borderColor: '#fff', borderWidth: 2 },
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: 'rgba(42, 93, 170, 0.5)'},
|
|
|
- {offset: 1, color: 'rgba(42, 93, 170, 0.1)'}
|
|
|
+ { offset: 0, color: 'rgba(42, 93, 170, 0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(42, 93, 170, 0.1)' }
|
|
|
])
|
|
|
}
|
|
|
},
|
|
|
@@ -197,21 +198,14 @@ export class PageHome implements AfterViewInit {
|
|
|
stack: 'Total',
|
|
|
data: [45, 52, 70, 83, 95, 115],
|
|
|
smooth: true,
|
|
|
- lineStyle: {
|
|
|
- width: 3,
|
|
|
- color: '#e8c34d'
|
|
|
- },
|
|
|
+ lineStyle: { width: 3, color: '#e8c34d' },
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 8,
|
|
|
- itemStyle: {
|
|
|
- color: '#e8c34d',
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
+ itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 },
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: 'rgba(232, 195, 77, 0.5)'},
|
|
|
- {offset: 1, color: 'rgba(232, 195, 77, 0.1)'}
|
|
|
+ { offset: 0, color: 'rgba(232, 195, 77, 0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(232, 195, 77, 0.1)' }
|
|
|
])
|
|
|
}
|
|
|
},
|
|
|
@@ -221,32 +215,24 @@ export class PageHome implements AfterViewInit {
|
|
|
stack: 'Total',
|
|
|
data: [320, 382, 491, 574, 663, 795],
|
|
|
smooth: true,
|
|
|
- lineStyle: {
|
|
|
- width: 3,
|
|
|
- color: '#4a6b3d'
|
|
|
- },
|
|
|
+ lineStyle: { width: 3, color: '#4a6b3d' },
|
|
|
symbol: 'circle',
|
|
|
symbolSize: 8,
|
|
|
- itemStyle: {
|
|
|
- color: '#4a6b3d',
|
|
|
- borderColor: '#fff',
|
|
|
- borderWidth: 2
|
|
|
- },
|
|
|
+ itemStyle: { color: '#4a6b3d', borderColor: '#fff', borderWidth: 2 },
|
|
|
areaStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- {offset: 0, color: 'rgba(74, 107, 61, 0.5)'},
|
|
|
- {offset: 1, color: 'rgba(74, 107, 61, 0.1)'}
|
|
|
+ { offset: 0, color: 'rgba(74, 107, 61, 0.5)' },
|
|
|
+ { offset: 1, color: 'rgba(74, 107, 61, 0.1)' }
|
|
|
])
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
+ }
|
|
|
|
|
|
- // 响应窗口大小变化
|
|
|
- window.addEventListener('resize', function() {
|
|
|
- galleryChart.resize();
|
|
|
- xrChart.resize();
|
|
|
- dashboardChart.resize();
|
|
|
- });
|
|
|
+ private handleResize = () => {
|
|
|
+ if (this.galleryChartInstance) this.galleryChartInstance.resize();
|
|
|
+ if (this.xrChartInstance) this.xrChartInstance.resize();
|
|
|
+ if (this.dashboardChartInstance) this.dashboardChartInstance.resize();
|
|
|
}
|
|
|
}
|
0235624