Merge branch 'main' of https://gitlab.yiring.com/digital-agri/agri-app into dev

src/api/model/weather.ts

@@ -9,10 +9,10 @@ export function now(location: string) {
     })
 }
 
-// 获取天气预报(7天)
-export function forecast(location: string) {
+// 获取天气预报
+export function forecast(location: string, day = 7) {
     return weatherHttp.get({
-        url: `/v7/weather/7d?key=${API_KEY}&location=${location}`,
+        url: `/v7/weather/${day}d?key=${API_KEY}&location=${location}`,
     })
 }
 

src/components/Echarts/index.ts

+export * from './src/hook'
+
+export { default as Echarts } from './src/index.vue'

src/components/Echarts/src/echarts.module.js

+import { merge } from 'lodash-es'
+import * as EchartsHelper from './inject'
+import { loadEchartsLibs } from '@/components/Echarts/src/tools'
+
+// 全局注入工具函数
+window.EchartsHelper = EchartsHelper
+
+export default {
+    data() {
+        return {
+            option: {},
+        }
+    },
+    methods: {
+        loadLibs: loadEchartsLibs,
+        init() {
+            // 如果已经初始化过了，就直接更新配置项
+            if (this.chart && this.chart.setOption) {
+                this.chart.setOption(this.option)
+                return
+            }
+
+            // 初始化组件
+            const chart = window.echarts.init(document.getElementById(this.option.id))
+            // 设置图表配置项
+            chart.setOption(this.option)
+            this.chart = chart
+        },
+        changeOption(option) {
+            if (!option?.id) {
+                return
+            }
+
+            this.option = merge(this.option, option)
+            if (typeof window.echarts === 'object' && typeof window.echarts.init === 'function') {
+                this.init()
+            } else {
+                this.loadLibs().then(() => {
+                    this.init()
+                })
+            }
+        },
+    },
+}

src/components/Echarts/src/hook.ts

+import type { EChartsOption } from 'echarts'
+import { tryOnMounted } from '@vueuse/core'
+import { isProdMode } from '@/utils/env'
+
+// 组件名称
+export const name = 'Echarts'
+
+export interface EchartsInstance {
+    setOption: (option: Partial<EChartsOption>) => Promise<void>
+}
+
+/**
+ * 注册 Echarts 实例
+ * @param option Echarts 配置项
+ */
+export function useEcharts<T extends EchartsInstance, P extends EChartsOption>(
+    option?: P,
+): [(instance: T) => void, EchartsInstance] {
+    const instanceRef = ref<T>()
+
+    function register(instance: T) {
+        if (isProdMode()) {
+            if (instance === unref(instanceRef)) {
+                return
+            }
+
+            onUnmounted(() => {
+                instanceRef.value = null
+            })
+        }
+
+        instanceRef.value = instance
+        option && instance?.setOption(option)
+    }
+
+    function getInstance() {
+        const instance = unref(instanceRef)
+        if (!instance) {
+            console.warn('Echarts instance is undefined!')
+        }
+        return instance as T
+    }
+
+    return [
+        register,
+        {
+            setOption: (option: Partial<P>): Promise<void> => {
+                return new Promise((resolve) => {
+                    tryOnMounted(() => {
+                        getInstance()?.setOption(option)
+                        resolve()
+                    })
+                })
+            },
+        },
+    ]
+}

src/components/Echarts/src/index.vue

+<!-- renderjs 逻辑层 -->
+<script>
+    import { nanoid } from 'nanoid'
+
+    export default {
+        emits: ['register'],
+        data() {
+            return {
+                id: nanoid(),
+                option: {},
+            }
+        },
+        mounted() {
+            this.$emit('register', this)
+        },
+        methods: {
+            setOption(option) {
+                this.option = {
+                    id: this.id,
+                    ...option,
+                }
+            },
+        },
+    }
+</script>
+
+<!-- renderjs 视图层模块 -->
+<script module="echarts" lang="renderjs" src="./echarts.module.js"></script>
+
+<template>
+    <!-- #ifdef APP-PLUS || H5 -->
+    <view class="wrap echarts" :id="id" :option="option" :change:option="echarts.changeOption" />
+    <!-- #endif -->
+    <!-- #ifndef APP-PLUS || H5 -->
+    <view class="wrap empty">非 APP、H5 环境不支持</view>
+    <!-- #endif -->
+</template>
+
+<style lang="less" scoped>
+    //
+</style>

src/components/Echarts/src/inject.ts

+export function symbolWeatherReplace(data: Recordable) {
+    return data
+}

src/components/Echarts/src/tools.ts

+import { appendScript } from '/@/utils/dom'
+
+/**
+ * 加载 Echarts 依赖库
+ */
+export function loadEchartsLibs() {
+    const id = 'echarts'
+    const version = '5.4.3'
+    const resource = `static/js/${id}/${version}/${id}`
+    return Promise.all([appendScript(id, `${resource}.min.js`)])
+}

src/pages/nongchang/components/WeatherForecast.vue

+<script setup lang="ts">
+    import dayjs from 'dayjs'
+    import * as WeatherAPI from '@/api/model/weather'
+    import { Echarts, useEcharts } from '@/components/Echarts'
+    import { getDayLabelValue, getWeatherIcon } from '@/utils/weather'
+
+    // 逐 7 天预报图表
+    const [register7Forecast, Forecast7Chart] = useEcharts()
+    const model = reactive({
+        days: 15,
+        updateTime: '-',
+    })
+
+    onLoad(async () => {
+        const location = uni.getStorageSync('location')
+        const forecasts = await WeatherAPI.forecast(`${location.lon},${location.lat}`, model.days).then((res) => {
+            model.updateTime = dayjs(res.data.updateTime).format('YYYY-MM-DD HH:mm')
+            return res.data.daily
+        })
+        console.log('forecasts', forecasts)
+
+        // 逐 7 天预报数据
+        const _7DayForecastData = forecasts.map((item) => {
+            return {
+                minTem: item.tempMin,
+                maxTem: item.tempMax,
+                textDay: item.textDay,
+                textNight: item.textNight,
+                dayWeather: item.iconDay,
+                nightWeather: item.iconNight,
+            }
+        })
+        const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
+
+        // 设置逐 7 天预报图表参数
+        Forecast7Chart.setOption({
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
+                },
+            },
+            grid: {
+                top: '38%',
+                bottom: '3%',
+                left: '0%',
+                right: '0%',
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    data: [],
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                    },
+                },
+                {
+                    type: 'category',
+                    data: [],
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                    },
+                },
+            ],
+            yAxis: {
+                type: 'value',
+                splitLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: false,
+                },
+            },
+            series: [
+                {
+                    label: {
+                        show: true,
+                        position: 'top',
+                        formatter: '{c}°c',
+                    },
+                    type: 'line',
+                    data: _7DayForecastData.map((item) => item.maxTem),
+                    smooth: true,
+                    color: '#F79D80',
+                },
+                {
+                    label: {
+                        show: true,
+                        position: 'bottom',
+                        formatter: '{c}°c',
+                    },
+                    type: 'line',
+                    data: _7DayForecastData.map((item) => item.minTem),
+                    smooth: true,
+                    color: '#1890FF',
+                },
+                {
+                    type: 'scatter',
+                    data: _7DayForecastData.map((item, index) => {
+                        const { label, value } = getDayLabelValue(index)
+
+                        return {
+                            value: [index, Number(_7DayForecastMaxTemValue) + 7, item.textDay],
+                            symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
+                            symbolSize: [24, 24],
+                            symbolOffset: [0, -35],
+                            label: {
+                                show: true,
+                                position: 'top',
+                                formatter: `${label}\n\n${value}\n\n{@[2]}`,
+                                fontWeight: 'bold',
+                            },
+                        }
+                    }),
+                },
+                {
+                    type: 'scatter',
+                    data: _7DayForecastData.map((item, index) => {
+                        return {
+                            value: [index, -7, item.textNight],
+                            symbol: `image://${getWeatherIcon(String(item.nightWeather))}`,
+                            symbolSize: [24, 24],
+                            symbolOffset: [0, -20],
+                            label: {
+                                show: true,
+                                position: 'bottom',
+                                formatter: '{@[2]}',
+                                fontWeight: 'bold',
+                            },
+                        }
+                    }),
+                },
+            ],
+        })
+    })
+</script>
+
+<template>
+    <view class="wrap pb-3">
+        <!-- 逐 7 天预报图表 -->
+        <view class="rain-forecast mt-2rpx bg-#fff rd-1.5 shadow flex flex-col px-2">
+            <view class="flex items-center justify-between pt-3 px-2">
+                <view class="text-32 font-600">{{ model.days }} 天预报</view>
+                <view class="text-24">发布时间：{{ model.updateTime }}</view>
+            </view>
+            <scroll-view class="flex-1" scroll-x="true">
+                <Echarts @register="register7Forecast" class="w-1400 h-600" />
+            </scroll-view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+    //
+</style>

src/pages/nongchang/nongchang.vue

 <script setup lang="ts">
     import { reactive } from 'vue'
     import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
+    import WeatherForecast from './components/WeatherForecast.vue'
     import Navigate from '@/utils/page/navigate'
 
-    import * as HomeAPI from '@/api/model/home'
     import * as NongChangAPI from '@/api/model/nongchang'
     import { useUserStore } from '@/store/modules/user'
     import { getList as getVideoList } from '@/api/model/knowledgeVideo'
@@ -480,8 +480,9 @@
         <view class="codefun-flex-col group">
             <view class="codefun-flex-col section">
                 <view class="codefun-flex-col">
+                    <WeatherForecast />
                     <!-- <text class="codefun-self-center font text">{{ pageData.header.title }}</text> -->
-                    <view class="codefun-flex-col codefun-self-stretch">
+                    <view class="codefun-flex-col codefun-self-stretch !hidden">
                         <!-- <view class="codefun-flex-row codefun-items-center section_2">
                             <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
                             <text class="codefun-ml-8 font_2 text_2">{{ pageData.header.searchPlaceholder }}</text>
@@ -501,7 +502,7 @@
                 </view>
             </view>
             <view class="codefun-flex-col codefun-relative group_6">
-                <view class="codefun-flex-row section_4 flex-row" @click="toDetail(pageData.farmInfo)">
+                <view class="codefun-flex-row section_4 flex-row !hidden" @click="toDetail(pageData.farmInfo)">
                     <view class="w-200rpx h-200rpx">
                         <image class="codefun-self-center image_7 w-full h-full" :src="pageData.farmInfo.image" />
                     </view>
@@ -533,6 +534,15 @@
                         </view>
                     </view>
                 </view>
+                <view class="codefun-flex-col">
+                    <view class="codefun-flex-row codefun-justify-between codefun-items-center">
+                        <text class="font">我的农场</text>
+                        <!-- <text class="font_6 text_17">全部</text> -->
+                    </view>
+                    <view class="codefun-flex-col mt-17">
+                        <!--  -->
+                    </view>
+                </view>
                 <view class="codefun-flex-col group_10">
                     <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                         <text class="font">农业大模型</text>
@@ -923,7 +933,7 @@
 
         .group {
             .section {
-                padding: 0 28rpx 116rpx;
+                padding: 0 28rpx 98rpx;
                 background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
                 background-size: 100% 100%;
                 background-repeat: no-repeat;

src/static/images/weather/151.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M394.496 506.2144m-307.2 0a307.2 307.2 0 1 0 614.4 0 307.2 307.2 0 1 0-614.4 0Z" fill="#9FDFFF" /><path d="M747.52 710.6048m-271.36 0a271.36 271.36 0 1 0 542.72 0 271.36 271.36 0 1 0-542.72 0Z" fill="#78CCFF" /><path d="M250.88 736.2048m-245.76 0a245.76 245.76 0 1 0 491.52 0 245.76 245.76 0 1 0-491.52 0Z" fill="#78CCFF" /><path d="M248.32 736.2048h496.64v245.76h-496.64z" fill="#78CCFF" /></svg>
\ No newline at end of file

src/static/images/weather/152.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#1296db" d="M466.2784 386.048c-41.9328-115.2-35.0208-236.288 10.0864-340.5312A462.4896 462.4896 0 0 0 397.6704 66.56C158.5152 153.6 35.2256 418.048 122.2656 657.2032s351.488 362.4448 590.592 275.4048c123.9552-45.1072 216.7296-137.8816 265.3184-250.0608-215.8592 37.7856-434.3296-83.3536-511.8976-296.4992z"  /></svg>
\ No newline at end of file

src/utils/weather.ts

+import dayjs from 'dayjs'
+
+/**
+ * 天气现象编码映射
+ */
+export const WEATHER_CODE_MAPPING = {
+    '1': {
+        code: '1',
+        text: '晴',
+    },
+    '2': {
+        code: '2',
+        text: '多云',
+    },
+    '3': {
+        code: '3',
+        text: '阴',
+    },
+    '4': {
+        code: '4',
+        text: '雷阵雨',
+    },
+    '5': {
+        code: '5',
+        text: '冰雹',
+    },
+    '6': {
+        code: '6',
+        text: '雨夹雪',
+    },
+    '7': {
+        code: '7',
+        text: '阵雨',
+    },
+    '8': {
+        code: '8',
+        text: '小雨',
+    },
+    '9': {
+        code: '9',
+        text: '中雨',
+    },
+    '10': {
+        code: '10',
+        text: '大雨',
+    },
+    '11': {
+        code: '11',
+        text: '暴雨',
+    },
+    '12': {
+        code: '12',
+        text: '阵雪',
+    },
+    '13': {
+        code: '13',
+        text: '小雪',
+    },
+    '14': {
+        code: '14',
+        text: '中雪',
+    },
+    '15': {
+        code: '15',
+        text: '大雪',
+    },
+    '16': {
+        code: '16',
+        text: '暴雪',
+    },
+    '17': {
+        code: '17',
+        text: '轻雾',
+    },
+    '18': {
+        code: '18',
+        text: '雾',
+    },
+    '19': {
+        code: '19',
+        text: '大雾',
+    },
+    '20': {
+        code: '20',
+        text: '浓雾',
+    },
+    '21': {
+        code: '21',
+        text: '冻雨',
+    },
+    '22': {
+        code: '22',
+        text: '沙尘暴',
+    },
+    '23': {
+        code: '23',
+        text: '浮尘',
+    },
+    '24': {
+        code: '24',
+        text: '扬沙',
+    },
+    '25': {
+        code: '25',
+        text: '霾',
+    },
+    '26': {
+        code: '26',
+        text: '中度霾',
+    },
+    '27': {
+        code: '27',
+        text: '重度霾',
+    },
+    '28': {
+        code: '28',
+        text: '严重霾',
+    },
+    '29': {
+        code: '29',
+        text: '雷电',
+    },
+    '30': {
+        code: '30',
+        text: '龙卷风',
+    },
+}
+
+export function getWeatherIcon(code: string) {
+    // const nightIcon = ['1', '2', '4', '7', '12']
+    // const isNightFlag = dayjs().hour() >= 18 && nightIcon.includes(code)
+    // return `static/images/weather/${isNightFlag ? 'night' : 'day'}${code}.png`
+    return `static/images/weather/${code}.svg`
+}
+
+export function getDayLabelValue(index: number) {
+    const today = dayjs()
+    const targetDate = today.add(index, 'day')
+    const dayOfWeek = targetDate.day()
+
+    let dayLabel = ''
+    if (index === 0) {
+        dayLabel = '今天'
+    } else if (index === 1) {
+        dayLabel = '明天'
+    } else {
+        dayLabel = dayjs().day(dayOfWeek).format('dddd')
+    }
+
+    return {
+        label: dayLabel,
+        value: targetDate.format('MM/DD'),
+    }
+}
+
+export function getWindSpeedLevel(speed) {
+    if (speed < 1) {
+        return '无风'
+    } else if (speed < 6) {
+        return '软风'
+    } else if (speed < 12) {
+        return '轻风'
+    } else if (speed < 20) {
+        return '微风'
+    } else if (speed < 29) {
+        return '和风'
+    } else if (speed < 39) {
+        return '清风'
+    } else if (speed < 50) {
+        return '强风'
+    } else if (speed < 62) {
+        return '疾风'
+    } else if (speed < 75) {
+        return '大风'
+    } else if (speed < 89) {
+        return '烈风'
+    } else if (speed < 103) {
+        return '狂风'
+    } else {
+        return '飓风'
+    }
+}
+
+export function getWindDirectionText(direction) {
+    const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']
+    const index = Math.round(direction / 45) % 8
+    return directions[index]
+}

types/components.d.ts

@@ -151,6 +151,7 @@ declare module 'vue' {
     Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Src: typeof import('./../src/components/Echarts/src/index.vue')['default']
     Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
     ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
     TimeBar: typeof import('./../src/components/Map/Widgets/TimeBar/src/TimeBar.vue')['default']