diff --git a/src/oc-community-frontend/src/components/CommunityPage.vue b/src/oc-community-frontend/src/components/CommunityPage.vue index 0e4888f..de5b7e3 100644 --- a/src/oc-community-frontend/src/components/CommunityPage.vue +++ b/src/oc-community-frontend/src/components/CommunityPage.vue @@ -8,9 +8,44 @@
- 社区背景 +
+ +
+ +
+
+
+ +
+ + + +
+ +
{{ weatherInfo.temperature }}°C
+
{{ weatherInfo.condition }}
+
{{ weatherInfo.province }}{{ weatherInfo.city !== weatherInfo.province ? weatherInfo.city : '' }}
+
+ 湿度: {{ weatherInfo.humidity }}% + 风速: {{ weatherInfo.windSpeed }}级 +
+
+
+
- +
{ + return { + imageUrl: '/photo/map1.png', + coordinates: + locationCoords + } +} + +//更新天气函数 +const updateWeather = async () => { + if (inputLocation.value.trim()) { + weatherLoading.value = true + currentLocation.value = inputLocation.value.trim() + try { + const weatherData = await getWeatherData(currentLocation.value) + weatherInfo.value = weatherData + } catch (error) { + console.error('更新天气失败:', error) + } finally { + weatherLoading.value = false + } + } +} + +const getWeatherData = async (location) => { + try { + const API_KEY = '7d1e2dfdd86a45c64e4178c0ad321fcd' + + // 第一步：通过地理编码API获取城市编码 + const geoResponse = await fetch(`https://restapi.amap.com/v3/geocode/geo?address=${encodeURIComponent(location)}&key=${API_KEY}`) + const geoData = await geoResponse.json() + + if (geoData.status !== '1' || !geoData.geocodes || geoData.geocodes.length === 0) { + throw new Error(`找不到地点: ${location}`) + } + + // 获取第一个匹配的城市编码 + const adcode = geoData.geocodes[0].adcode + + // 第二步：使用城市编码获取天气 + const weatherResponse = await fetch(`https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=${API_KEY}&extensions=base`) + const weatherData = await weatherResponse.json() + + if (weatherData.status === '1' && weatherData.lives && weatherData.lives.length > 0) { + const live = weatherData.lives[0] + + return { + temperature: live.temperature, + condition: live.weather, + humidity: live.humidity, + windSpeed: live.windpower, + windDir: live.winddirection, + reportTime: live.reporttime, + province: live.province, + city: live.city + } + } else { + throw new Error('获取天气数据失败') + } + } catch (error) { + console.error('获取真实天气失败:', error) + return getMockWeatherData(location) + } +} + +// 添加模拟数据作为后备函数 +const getMockWeatherData = (location) => { + // 生成随机的天气数据 + const conditions = ['晴', '多云', '阴', '小雨', '中雨', '大雨', '阵雨', '雷阵雨', '雪', '雾', '霾'] + const randomCondition = conditions[Math.floor(Math.random() * conditions.length)] + + // 根据季节生成合理温度 + const now = new Date() + const month = now.getMonth() + 1 + let baseTemp = 20 + + if (month >= 3 && month <= 5) baseTemp = 18 // 春季 + else if (month >= 6 && month <= 8) baseTemp = 28 // 夏季 + else if (month >= 9 && month <= 11) baseTemp = 15 // 秋季 + else baseTemp = 5 // 冬季 + + const temperature = baseTemp + Math.floor(Math.random() * 15) - 5 + + return { + temperature: temperature, + condition: randomCondition, + humidity: 30 + Math.floor(Math.random() * 50), + windSpeed: (1 + Math.random() * 6).toFixed(1), + province: '未知省份', + city: location + } +} + // 默认头像 const defaultAvatar = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjZGRlMGU2Ii8+CjxjaXJjbGUgY3g9IjUwIiBjeT0iMzUiIHI9IjIwIiBmaWxsPSIjYThiOWNlIi8+CjxwYXRoIGQ9Ik0wIDg1QzAgNzAuNjQgMTEuNjQgNTkgMjYgNTlINzRDODguMzYgNTkgMTAwIDcwLjY0IDEwMCA4NVYxMDBIMFY4NVoiIGZpbGw9IiNhOGI5Y2UiLz4KPC9zdmc+' @@ -127,6 +259,22 @@ const locationCoords = { '宠物店': { x: 35, y: 75 } } +const currentMap = ref('') +const weatherInfo = ref(null) +const weatherLoading = ref(false) + +// 根据 weatherInfo.condition 映射到 CSS 类名 +const weatherClass = computed(() => { + if (!weatherInfo.value || !weatherInfo.value.condition) return '' + const c = String(weatherInfo.value.condition).toLowerCase() + if (/晴|clear|sunny/.test(c)) return 'wb-sunny' + if (/云|clouds|cloud/.test(c)) return 'wb-cloudy' + if (/雨|drizzle|rain|雷|thunder/.test(c)) return 'wb-rain' + if (/雪|snow/.test(c)) return 'wb-snow' + if (/雾|霾|fog|haze|mist|smoke|dust/.test(c)) return 'wb-haze' + return 'wb-default' +}) + // 计算OC当前位置（基于其 schedule） const ocPositions = ref([]) // 每个地点的实时状态（位置、在场人数、对应 oc 列表） @@ -302,6 +450,7 @@ onMounted(() => { computePositions() posTimer = setInterval(computePositions, 60 * 1000) document.addEventListener('click', closePopoverOnClickOutside) + initMapAndWeather() }) onUnmounted(() => { if (posTimer) clearInterval(posTimer) @@ -376,6 +525,27 @@ const closePopoverOnClickOutside = (event) => { closeLocationPopover() } } + +const initMapAndWeather = async () => { + try { + // 获取地图（始终使用本地图片） + const mapData = await getRealMap(currentLocation.value) + currentMap +.value = mapData. +imageUrl + + // 获取天气信息 + const weatherData = await getWeatherData(currentLocation.value) + weatherInfo +.value = + weatherData + } catch (error) { + console +.error('初始化天气失败:', error) + currentMap +.value = '/photo/map1.png' + } +} \ No newline at end of file