diff --git a/sub-operation-service/src/views/smartFarm/components/mapComp.vue b/sub-operation-service/src/views/smartFarm/components/mapComp.vue index dd2cceb..839744b 100644 --- a/sub-operation-service/src/views/smartFarm/components/mapComp.vue +++ b/sub-operation-service/src/views/smartFarm/components/mapComp.vue @@ -11,17 +11,26 @@ import { getAssetsFile } from '@/utils'; // 您提供的耿马县GeoJSON数据 const gengmaGeoJSON = json; +const today = new Date(); +const formattedDate = today + .toLocaleDateString('zh-CN', { + year: 'numeric', + month: 'numeric', + day: 'numeric', + }) + .replace(/\//g, '/'); // 确保分隔符是 / + // 模拟乡镇数据(根据图片中的地名) const towns = ref([ - { name: '孟定镇', coord: [99.01, 23.64], weather: '晴', temp: '28℃', icon: 'sunny' }, - { name: '勐简乡', coord: [99.24, 23.79], weather: '多云', temp: '26℃', icon: 'cloudy' }, - { name: '四排山乡', coord: [99.5, 23.38], weather: '小雨', temp: '24℃', icon: 'rainy' }, - { name: '大兴乡', coord: [99.8, 23.76], weather: '多云', temp: '25℃', icon: 'cloudy' }, - { name: '耿马镇', coord: [99.42, 23.66], weather: '多云', temp: '26℃', icon: 'cloudy' }, - { name: '贺派乡', coord: [99.21, 23.4], weather: '晴', temp: '27℃', icon: 'sunny' }, - { name: '芒洪乡', coord: [99.73, 23.59], weather: '阴', temp: '23℃', icon: 'overcast' }, - { name: '勐永镇', coord: [99.53, 23.99], weather: '小雨', temp: '22℃', icon: 'rainy' }, - { name: '勐撒镇', coord: [99.47, 23.85], weather: '晴', temp: '28℃', icon: 'sunny' }, + { id: 0, name: '孟定镇', coord: [99.01, 23.64], weather: '晴', temp: '28℃', icon: 'sunny' }, + { id: 1, name: '勐简乡', coord: [99.24, 23.79], weather: '多云', temp: '26℃', icon: 'cloudy' }, + { id: 2, name: '四排山乡', coord: [99.5, 23.38], weather: '小雨', temp: '24℃', icon: 'rainy' }, + { id: 3, name: '大兴乡', coord: [99.8, 23.76], weather: '多云', temp: '25℃', icon: 'cloudy' }, + { id: 4, name: '耿马镇', coord: [99.42, 23.66], weather: '多云', temp: '26℃', icon: 'cloudy' }, + { id: 5, name: '贺派乡', coord: [99.21, 23.4], weather: '晴', temp: '27℃', icon: 'sunny' }, + { id: 6, name: '芒洪乡', coord: [99.73, 23.59], weather: '阴', temp: '23℃', icon: 'overcast' }, + { id: 7, name: '勐永镇', coord: [99.53, 23.99], weather: '小雨', temp: '22℃', icon: 'rainy' }, + { id: 8, name: '勐撒镇', coord: [99.47, 23.85], weather: '晴', temp: '28℃', icon: 'sunny' }, ]); const mapContainer = ref(null); @@ -40,6 +49,11 @@ function getWeatherIconPath(iconType) { let path = iconMap[iconType] ? iconMap[iconType] : 'images/smartFarm/sunny.png'; return getAssetsFile(path); } +const emit = defineEmits(['changeMap']); +// 显示天气详情弹窗 +const showWeatherDetail = (data) => { + emit('changeMap', { message: data }); +}; onMounted(() => { // 添加防御性检查 @@ -53,19 +67,13 @@ onMounted(() => { chart.on('click', (params) => { if (params.componentType === 'series') { // 点击乡镇标记点 - console.log('点击乡镇:', params.name); - showWeatherDetail(params.data); + showWeatherDetail(params.name); } else if (params.componentType === 'geo') { // 点击地图区域 - console.log('点击地图区域:', params.name); + showWeatherDetail(params.name); } }); - // 显示天气详情弹窗 - const showWeatherDetail = (data) => { - console.log(data); - }; - // 注册地图 echarts.registerMap('耿马县', gengmaGeoJSON); @@ -106,6 +114,7 @@ onMounted(() => { coordinateSystem: 'geo', symbolSize: 30, data: towns.value.map((town) => ({ + id: town.id, name: town.name, value: [...town.coord, town.temp], weather: town.weather, @@ -165,9 +174,9 @@ onMounted(() => { graphic: { type: 'text', left: 20, - bottom: 5, + bottom: 0, style: { - text: '数据更新于: 2025.01.01 08:00:00', + text: '数据更新于: ' + formattedDate, fill: '#666', fontSize: 12, }, diff --git a/sub-operation-service/src/views/smartFarm/components/mapSimple.vue b/sub-operation-service/src/views/smartFarm/components/mapSimple.vue index b0dee1b..cdc30fd 100644 --- a/sub-operation-service/src/views/smartFarm/components/mapSimple.vue +++ b/sub-operation-service/src/views/smartFarm/components/mapSimple.vue @@ -26,10 +26,12 @@ const towns = ref([ const mapContainer = ref(null); -// 获取天气图标路径 -// function getWeatherIconPath(iconType) { -// return `/images/${iconType}.png`; // 使用绝对路径 -// } +const emit = defineEmits(['changeMap2']); +// 显示天气详情弹窗 +const showDustDetail = (data) => { + emit('changeMap2', { message: data }); +}; + function getWeatherIconPath(iconType) { const iconMap = { sunny: 'images/smartFarm/sunny.png', @@ -47,20 +49,12 @@ onMounted(() => { // 添加点击事件监听 chart.on('click', (params) => { if (params.componentType === 'series') { - // 点击乡镇标记点 - console.log('点击乡镇:', params.name); - showWeatherDetail(params.data); + showDustDetail(params.name); } else if (params.componentType === 'geo') { - // 点击地图区域 - console.log('点击地图区域:', params.name); + showDustDetail(params.name); } }); - // 显示天气详情弹窗 - const showWeatherDetail = (data) => { - console.log(data); - }; - // 注册地图 echarts.registerMap('耿马县', gengmaGeoJSON); diff --git a/sub-operation-service/src/views/smartFarm/index.vue b/sub-operation-service/src/views/smartFarm/index.vue index 64aebab..3f4462a 100644 --- a/sub-operation-service/src/views/smartFarm/index.vue +++ b/sub-operation-service/src/views/smartFarm/index.vue @@ -6,12 +6,13 @@ - +  
- 耿马县·孟定镇 + 耿马县·{{ currentPosition + }}
@@ -99,21 +100,21 @@ 光照
-
2000Lux
+
{{ dustData.light }}
排风
-
15m³/h
+
{{ dustData.wind }}
蒸腾
-
2000Lux
+
{{ dustData.evapotranspiration }}
@@ -122,24 +123,24 @@ 湿度
-
26%
-
34%
+
{{ dustData.wet.min }}
+
{{ dustData.wet.max }}
温度
-
32℃
-
28℃
+
{{ dustData.temp.min }}
+
{{ dustData.temp.max }}
空气
-
300ppm
-
34%
+
{{ dustData.air.dirt }}
+
{{ dustData.air.wet }}
@@ -155,7 +156,7 @@
- +
@@ -164,11 +165,11 @@ 输入 - 11 + {{ dustData.pressure.input }} 末端 - 2 + {{ dustData.pressure.end }} @@ -177,11 +178,11 @@ 灌溉 - 18℃ + {{ dustData.flow.output }} 回液 - 18℃ + {{ dustData.flow.input }} @@ -192,11 +193,11 @@ PH - 8 + {{ dustData.fertilization.ph }} 输入 - 18℃ + {{ dustData.fertilization.output }} @@ -293,13 +294,13 @@