feat:new association

travel-web/src/modules/pc-home/pages/page-association/page-association.html

@@ -183,7 +183,7 @@
         
         <div class="courses">
           <div *ngFor="let course of courses" class="course-card">
-            <div class="course-img"></div>
+            <img [src]="course.imageUrl" alt="{{course.title}}">
             <div class="course-content">
               <h5 class="course-title">{{course.title}}</h5>
               <p>{{course.description}}</p>

travel-web/src/modules/pc-home/pages/page-association/page-association.scss

@@ -496,13 +496,19 @@ body {
   overflow: hidden;
 }
 
+.course-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* 保持图片比例并填充容器 */
+}
+
 .course-img::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 10%;
   background: linear-gradient(transparent 60%, rgba(0,0,0,0.6));
 }
 

travel-web/src/modules/pc-home/pages/page-association/page-association.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as echarts from 'echarts';
 
@@ -9,7 +9,7 @@ import * as echarts from 'echarts';
   templateUrl: './page-association.html',
   styleUrls: ['./page-association.scss']
 })
-export class PageAssociation implements AfterViewInit {
+export class PageAssociation implements AfterViewInit, OnDestroy {
   @ViewChild('orgChart') orgChartElement!: ElementRef;
   @ViewChild('academicCalendar') academicCalendarElement!: ElementRef;
 
@@ -19,28 +19,35 @@ export class PageAssociation implements AfterViewInit {
       title: '江西古建筑数字化保护', 
       description: '学习古建筑三维扫描、数字建模与修复技术',
       duration: '32课时',
-      students: '1,245人'
+      students: '1,245人',
+      imageUrl: 'public/images/jianzu.jpg'
     },
     { 
       title: '非遗技艺数字化传承', 
       description: '探索传统技艺的数字化记录与创新应用',
       duration: '24课时',
-      students: '986人'
+      students: '986人',
+      imageUrl: 'public/images/wenhua.jpg'
     },
     { 
       title: '红色文化XR应用开发', 
       description: '利用XR技术重现江西革命历史场景',
       duration: '40课时',
-      students: '1,532人'
+      students: '1,532人',
+      imageUrl: 'public/images/hongse.jpg'
     },
     { 
       title: '智慧旅游系统设计', 
       description: '学习旅游动线策划与智能导览系统开发',
       duration: '28课时',
-      students: '875人'
+      students: '875人',
+      imageUrl: 'public/images/lvyou.jpg'
     }
   ];
 
+  // 用于存储销毁钩子
+  private destroyHooks: (() => void)[] = [];
+
   ngAfterViewInit(): void {
     this.initOrgChart();
     this.initAcademicCalendar();
@@ -126,63 +133,112 @@ export class PageAssociation implements AfterViewInit {
       ]
     });
     
-    window.addEventListener('resize', () => orgChart.resize());
+    // 监听窗口大小变化，重绘图表
+    const resizeHandler = () => orgChart.resize();
+    window.addEventListener('resize', resizeHandler);
+    
+    // 添加销毁钩子
+    this.addDestroyHook(() => {
+      window.removeEventListener('resize', resizeHandler);
+      orgChart.dispose();
+    });
   }
 
   initAcademicCalendar(): void {
     const academicCalendar = echarts.init(this.academicCalendarElement.nativeElement);
+    
+    // 学术活动数据
+    const calendarData = [
+      { date: '2023-06-05', value: 35, event: '数字文化论坛', location: '南昌' },
+      { date: '2023-06-08', value: 65, event: '非遗保护研讨会', location: '景德镇' },
+      { date: '2023-06-12', value: 45, event: '青年学者交流会', location: '九江' },
+      { date: '2023-06-15', value: 85, event: '红色文化数字展', location: '井冈山' },
+      { date: '2023-06-18', value: 25, event: '会员技术培训', location: '赣州' },
+      { date: '2023-06-22', value: 75, event: '数字艺术创作大赛', location: '南昌' },
+      { date: '2023-06-25', value: 55, event: '智慧旅游研讨会', location: '上饶' },
+      { date: '2023-06-28', value: 95, event: '年度学术大会', location: '南昌' }
+    ];
+
     academicCalendar.setOption({
       tooltip: {
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        borderColor: '#8B4513',
+        borderWidth: 1,
+        textStyle: {
+          color: '#333',
+          fontFamily: 'Microsoft YaHei'
+        },
         formatter: function(params: any) {
-          return `${params.name}<br/>热度: ${params.value[2]}<br/>地点: ${params.data.location}`;
+          const dataItem = calendarData[params.dataIndex];
+          return `<div style="font-weight: bold; color: #8B4513;">${dataItem.event}</div>
+                  <div>日期: ${dataItem.date}</div>
+                  <div>热度: ${dataItem.value}</div>
+                  <div>地点: ${dataItem.location}</div>`;
         }
       },
       visualMap: {
-        show: false,
+        show: true,
+        type: 'continuous',
         min: 0,
         max: 100,
+        orient: 'horizontal',
+        left: 'center',
+        bottom: 10,
+        text: ['高', '低'],
+        textStyle: {
+          color: '#8B4513'
+        },
         inRange: {
-          color: ['#DEB887', '#A0522D', '#8B0000']
+          color: ['#f0e6d2', '#DEB887', '#A0522D', '#8B4513']
         }
       },
       calendar: {
         top: 30,
         left: 30,
         right: 30,
-        cellSize: ['auto', 20],
+        bottom: 60, // 为视觉映射留出空间
+        cellSize: ['auto', 25],
         range: '2023-06',
         itemStyle: {
           borderWidth: 1,
           borderColor: '#e8e0d0'
         },
         dayLabel: {
-          color: '#8B4513'
+          color: '#8B4513',
+          fontSize: 12
         },
         monthLabel: {
           color: '#8B4513',
-          fontWeight: 'bold'
+          fontWeight: 'bold',
+          fontSize: 14
         },
         yearLabel: { show: false }
       },
       series: {
         type: 'heatmap',
         coordinateSystem: 'calendar',
-        data: [
-          ['2023-06-05', 35, '数字文化论坛', '南昌'],
-          ['2023-06-08', 65, '非遗保护研讨会', '景德镇'],
-          ['2023-06-12', 45, '青年学者交流会', '九江'],
-          ['2023-06-15', 85, '红色文化数字展', '井冈山'],
-          ['2023-06-18', 25, '会员技术培训', '赣州'],
-          ['2023-06-22', 75, '数字艺术创作大赛', '南昌'],
-          ['2023-06-25', 55, '智慧旅游研讨会', '上饶'],
-          ['2023-06-28', 95, '年度学术大会', '南昌']
-        ].map((item) => ({
-          value: [item[0], item[1], item[1], item[2], item[3]]
-        }))
+        data: calendarData.map(item => [item.date, item.value]),
+        label: {
+          show: false
+        },
+        itemStyle: {
+          emphasis: {
+            shadowBlur: 10,
+            shadowColor: 'rgba(0, 0, 0, 0.3)'
+          }
+        }
       }
     });
     
-    window.addEventListener('resize', () => academicCalendar.resize());
+    // 监听窗口大小变化，重绘图表
+    const resizeHandler = () => academicCalendar.resize();
+    window.addEventListener('resize', resizeHandler);
+    
+    // 添加销毁钩子
+    this.addDestroyHook(() => {
+      window.removeEventListener('resize', resizeHandler);
+      academicCalendar.dispose();
+    });
   }
 
   highlightSearch(searchTerm: string): void {
@@ -214,4 +270,14 @@ export class PageAssociation implements AfterViewInit {
     
     document.addEventListener('mouseup', handler);
   }
+
+  // 添加销毁钩子函数
+  private addDestroyHook(hook: () => void) {
+    this.destroyHooks.push(hook);
+  }
+
+  // 组件销毁时执行所有钩子
+  ngOnDestroy() {
+    this.destroyHooks.forEach(hook => hook());
+  }
 }