chore: 调整农场详情地图页面细节

src/components/Map/Widgets/ToolBox/src/ToolBox.vue

@@ -83,7 +83,9 @@
         }
 
         if (button.type === 'button') {
-            button.handle?.({ type: 'click', name: button.name })
+            button.handle?.({ type: 'click', name: button.name, button })
+        } else if (button.type === 'toggle') {
+            button.handle?.({ type: 'toggle', name: button.name, button })
         } else if (button.type === 'select') {
             // 打开 Select 组件
             model.selectPopup.title = button.name

src/components/Map/Widgets/ToolBox/src/types.ts

@@ -2,16 +2,19 @@ import type { BasicWidgetInstance, BasicWidgetProps } from '../../utils'
 
 export interface ToolBoxButtonHandleEvent {
     // 事件类型
-    type: 'click' | 'change'
+    type: 'click' | 'change' | 'toggle'
     // 事件名称
     name: string
     // 事件值
     value?: string | string[] | { text: string; value: string } | { text: string; value: string }[]
+
+    // 按钮本身
+    button?: ToolBoxButton
 }
 
 export interface ToolBoxButton {
     // 按钮类型
-    type: 'select' | 'button' | 'filter'
+    type: 'select' | 'button' | 'filter' | 'toggle'
     // 按钮名称
     name: string
     // 按钮图标

src/pages.json

@@ -351,7 +351,7 @@
                     "titleNView": {
                         "buttons": [
                             {
-                                "text": "\ue674 地图模式",
+                                "text": "\uE674 地图模式",
                                 "fontSrc": "/static/fonts/tihuan.ttf",
                                 "color": "#fff",
                                 "fontSize": "26rpx",
@@ -567,7 +567,7 @@
         {
             "path": "pages/nongchang/detail/index",
             "style": {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "农场",
                 "enablePullDownRefresh": false,
                 "navigationBarBackgroundColor": "#5DB66F",
                 "navigationBarTextStyle": "white",

src/pages/nongchang/detail/index.vue

@@ -10,7 +10,9 @@
         addDefaultSymbolLayer,
         useMapbox,
     } from '@/components/Map/Mapbox/hook'
+    import type { ToolBoxButtonHandleEvent } from '@/components/Map/Widgets/ToolBox'
     import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
+    import * as NongchangAPI from '@/api/model/nongchang'
 
     // 页面参数
     const page = reactive<Page>({
@@ -31,30 +33,58 @@
         plots: [],
         // 设备信息
         devices: [],
-    })
-
-    onLoad((options) => {
-        console.log('页面参数', options)
-
-        model.id = options.id
-        model.name = decodeURIComponent(options.name)
 
-        uni.setNavigationBarTitle({
-            title: decodeURIComponent(options.name),
-        })
+        // 天气信息
+        weather: {
+            live: {
+                tem: '12°',
+                phenomena: '',
+                wind: '',
+                humidity: '',
+            },
+            forecast: [
+                {
+                    phenomena: '',
+                    date: '',
+                    maxTem: '',
+                    minTem: '',
+                },
+            ],
+        },
     })
 
     // 地图组件
-    const center: [number, number] = [111.024108, 29.554847]
     const [registerMap, map] = useMapbox({
-        style: { center, zoom: 15 },
-        onLoaded: (data) => {
+        style: { zoom: 15 },
+        onLoaded: async (data) => {
             console.log('✨✨✨ Map Loaded', data)
 
-            // 模拟数据
+            // 查询农场数据
+            const res = await NongchangAPI.farmsList()
+            console.log('农场列表', res.records)
+
+            // 获取第一个农场信息
+            const item = res.records?.[0]
+            model.id = item.id
+            model.name = item.farmName
+            model.description = item.description
+            if (item.longitude && item.latitude) {
+                model.lonlat = `${item.longitude},${item.latitude}`
+            } else {
+                // 模拟位置数据
                 model.lonlat = '111.024108, 29.554847'
-            model.address = '湖南省 张家界市 慈利县 三淹桥村 村委会'
-            model.description = '详情信息说明'
+                Message.toast('未设置农场坐标位置，已使用模拟位置数据')
+            }
+
+            // 设置页面标题
+            uni.setNavigationBarTitle({
+                title: item.farmName,
+            })
+            // 设置地图中心点
+            map.flyTo({
+                center: model.lonlat.split(',').map(Number) as [number, number],
+                duration: 0,
+            })
 
             // 渲染地块数据
             model.plots = [
@@ -148,8 +178,8 @@
                     popup: `{{name}}`,
                 }),
             ]
-            addDefaultGeoJSONSource(map, `${page.id}-text`, model.devices)
-            addDefaultSymbolLayer(map, `${page.id}-text`, {
+            addDefaultGeoJSONSource(map, `${page.id}-symbol`, model.devices)
+            addDefaultSymbolLayer(map, `${page.id}-symbol`, {
                 layout: {
                     'text-field': '',
                     'icon-image': ['get', 'icon'],
@@ -183,9 +213,19 @@
                         name: '设备',
                         color: '#75c849',
                         icon: '/static/images/codefun/device.active.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.alert('【设备】功能正在努力开发中...', '')
+                        type: 'toggle',
+                        handle: (e: ToolBoxButtonHandleEvent) => {
+                            // 切换显示设备数据地图渲染
+                            const active = e.button.icon === '/static/images/codefun/device.active.png'
+                            if (active) {
+                                e.button.color = '#666666'
+                                e.button.icon = '/static/images/codefun/device.png'
+                                map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'none')
+                            } else {
+                                e.button.color = '#75c849'
+                                e.button.icon = '/static/images/codefun/device.active.png'
+                                map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'visible')
+                            }
                         },
                     },
                 ],
@@ -196,11 +236,10 @@
                 buttons: [
                     {
                         name: '降雨',
-                        color: '#75c849',
                         icon: '/static/images/codefun/rain.png',
                         type: 'button',
                         handle: () => {
-                            Message.alert('【降雨】功能正在努力开发中...', '')
+                            Message.toast('暂无降雨数据')
                         },
                     },
                     {
@@ -208,7 +247,7 @@
                         icon: '/static/images/codefun/temp.png',
                         type: 'button',
                         handle: () => {
-                            Message.alert('【温度】功能正在努力开发中...', '')
+                            Message.toast('暂无温度数据')
                         },
                     },
                     {
@@ -216,7 +255,7 @@
                         icon: '/static/images/codefun/severe.png',
                         type: 'button',
                         handle: () => {
-                            Message.alert('【强对流】功能正在努力开发中...', '')
+                            Message.toast('暂无强对流数据')
                         },
                     },
                     {
@@ -224,7 +263,7 @@
                         icon: '/static/images/codefun/wind.png',
                         type: 'button',
                         handle: () => {
-                            Message.alert('【大风】功能正在努力开发中...', '')
+                            Message.toast('暂无大风数据')
                         },
                     },
                     {
@@ -232,7 +271,7 @@
                         icon: '/static/images/codefun/other.png',
                         type: 'button',
                         handle: () => {
-                            Message.alert('【其他】功能正在努力开发中...', '')
+                            Message.alert('敬请期待~', '温馨提醒')
                         },
                     },
                 ],
@@ -265,6 +304,13 @@
             <view class="play-wrap hidden">
                 <PlayWidget />
             </view>
+
+            <!-- 天气信息 -->
+            <view class="weather-info">
+                <view>
+                    <view />
+                </view>
+            </view>
         </view>
     </view>
 </template>