天气接入及地图优化

1 year ago · 0d94fc1f72
7 changed files with 160 additions and 115 deletions
--- a/super-screen/client/src/sections/water-prevention/actions/waterconservancy.js
+++ b/super-screen/client/src/sections/water-prevention/actions/waterconservancy.js
@ -73,8 +73,8 @@ export function getWaterAlarms(query) {
    return dispatch => basicAction({
        type: 'post',
        query,
-        // data: { "keywords": "", "status": "new", "levels": [1, 2, 3], "orderBy": "endTime", "orderDirection": "desc", "limit": 10, "offset": 0, "structures": null, "types": [1] },
-        data: { "structures": null, "orderBy": "endTime", "endTime": "2022-06-30 23:59:59", "keywords": "", "levels": [1, 2, 3], "startTime": "2022-06-01 00:00:00", "orderDirection": "desc", "status": "history", "offset": 0, "types": [1], "limit": 10 },
+        data: { "keywords": "", "status": "new", "levels": [1, 2, 3], "orderBy": "endTime", "orderDirection": "desc", "limit": 10, "offset": 0, "structures": null, "types": [1] },
+        // data: { "structures": null, "orderBy": "endTime", "endTime": "2022-06-30 23:59:59", "keywords": "", "levels": [1, 2, 3], "startTime": "2022-06-01 00:00:00", "orderDirection": "desc", "status": "history", "offset": 0, "types": [1], "limit": 10 },
        dispatch: dispatch,
        actionType: 'GET_WATER_ALARMS',
        url: `${ApiTable.getWaterAlarms}`,
--- a/super-screen/client/src/sections/water-prevention/components/left-top.js
+++ b/super-screen/client/src/sections/water-prevention/components/left-top.js
@ -1,8 +1,38 @@
-import React from 'react'
+import React, { useEffect, useState, useMemo } from 'react';
+import { RouteRequest } from '@peace/utils';
+import { WEATHERArr, WEATHERMARGIN, ICONSMAP } from '../constants/weather';
 import { Box } from '$components';
 import { Select } from 'antd';
 const { Option } = Select;
+
 function BasicInfo() {
+    const [weather, setWeather] = useState([]);
+
+    const queryWeather = () => {
+        RouteRequest.get(`/query/weather/3d?location=101240101`).then((res) => {
+            if (res?.daily?.length === 3) {
+                setWeather(res.daily);
+            }
+        });
+    };
+
+    useEffect(() => {
+        queryWeather();
+        const timeUpdate = setInterval(() => {
+            queryWeather();
+        }, WEATHERMARGIN);
+        return () => {
+            clearInterval(timeUpdate);
+        };
+    }, []);
+
+    const iconSrc = useMemo(() => {
+        if (weather.length === 3) {
+            const icon = [ICONSMAP[weather[0].textDay], ICONSMAP[weather[1].textDay], ICONSMAP[weather[2].textDay]];
+            return icon;
+        }
+        return [];
+    }, [weather]);

    const renderSubtitle = () => (
        <Select
@ -26,18 +56,18 @@ function BasicInfo() {
                <div className='weather_left'>
                    <div className='_basictitlebg'>
                        <div className='_basic_title'>今天</div>
-                        <span className='_basic_sub_title'>2023-06-21</span>
+                        <span className='_basic_sub_title'>{weather[0]?.fxDate}</span>
                    </div>
                    <div className='row1_container'>
-                        <div className='weather_icon'></div>
-                        <span>晴转多云</span>
-                        <span style={{ color: '#24DCF7' }}>17-28℃</span>
+                        <img src={iconSrc[0] || ICONSMAP.未知} alt="icon" style={{ width: 43, height: 38, margin: '0 5px' }} />
+                        <span>{weather[0]?.textDay}</span>
+                        <span style={{ color: '#24DCF7' }}>{weather[0]?.tempMin}-{weather[0]?.tempMax}℃</span>
                    </div>

                </div>
                <div className='weather_right'>
                    <div>今日雨量</div>
-                    <div><span className='weather_data'>35</span>m</div>
+                    <div><span className='weather_data'>{weather[0]?.precip}</span>mm</div>
                </div>
            </div>
            <div className='real_weather'>
@ -46,18 +76,18 @@ function BasicInfo() {
                        <div className='row2_item'>
                            <div className='_number'>明天</div>
                            <div className='weather_icon'></div>
-                            <div>17-28℃</div>
+                            <div>{weather[1]?.tempMin}-{weather[1]?.tempMax}℃</div>
                        </div>
                        <div className='row2_item'>
                            <div className='_number'>后天</div>
                            <div className='weather_icon'></div>
-                            <div>17-28℃</div>
+                            <div>{weather[2]?.tempMin}-{weather[2]?.tempMax}℃</div>
                        </div>
                    </div>
                </div>
                <div className='weather_right'>
                    <div>明日雨量</div>
-                    <div><span className='weather_data'>35</span>m</div>
+                    <div><span className='weather_data'>{weather[1]?.precip}</span>mm</div>
                </div>
            </div>

--- a/super-screen/client/src/sections/water-prevention/components/weather.js
+++ b/super-screen/client/src/sections/water-prevention/components/weather.js
@ -1,96 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import moment from 'moment';
 import { RouteRequest } from '@peace/utils';
-
-const WEATHERMARGIN = 1 * 60 * 60 * 1000;
-const WEATHERArr = [
-    {
-        lbl: '未知',
-        key: 'weizhi',
-    },
-    {
-        lbl: '暴雪',
-        key: 'baoxue',
-    },
-    {
-        lbl: '多云',
-        key: 'duoyun',
-    },
-    {
-        lbl: '浮沉',
-        key: 'fucheng',
-    },
-    {
-        lbl: '雷阵雨',
-        key: 'leizhengyu',
-    },
-    {
-        lbl: '霾',
-        key: 'mai',
-    },
-    {
-        lbl: '强沙尘暴',
-        key: 'qiangshachengbao',
-    },
-    {
-        lbl: '晴',
-        key: 'qing',
-    },
-    {
-        lbl: '沙尘暴',
-        key: 'shachengbao',
-    },
-    {
-        lbl: '特大暴雨',
-        key: 'tedabaoyu',
-    },
-    {
-        lbl: '雾',
-        key: 'wu',
-    },
-    {
-        lbl: '小雪',
-        key: 'xiaoxue',
-    },
-    {
-        lbl: '小雨',
-        key: 'xiaoyu',
-    },
-    {
-        lbl: '扬沙',
-        key: 'yangsha',
-    },
-    {
-        lbl: '阴天',
-        key: 'yingtian',
-    },
-    {
-        lbl: '雨夹雪',
-        key: 'yujiaxue',
-    },
-    {
-        lbl: '阵雨',
-        key: 'zhenyu',
-    },
-    {
-        lbl: '中雪',
-        key: 'zhongxue',
-    },
-    {
-        lbl: '中雨',
-        key: 'zhongyu',
-    },
-    {
-        lbl: '大雨',
-        key: 'dayu',
-    },
-];
-const ICONSMAP = {};
-
-WEATHERArr.forEach(({ lbl, key }) => {
-    const icon = `/assets/images/weather/${key}.png`;
-    ICONSMAP[lbl] = icon;
-});
+import { WEATHERArr, WEATHERMARGIN, ICONSMAP } from '../constants/weather'

 function Weather() {
    const [time, setTime] = useState(new Date().toLocaleTimeString());
--- a/super-screen/client/src/sections/water-prevention/constants/weather.js
+++ b/super-screen/client/src/sections/water-prevention/constants/weather.js
@ -0,0 +1,89 @@
+export const WEATHERArr = [
+    {
+        lbl: '未知',
+        key: 'weizhi',
+    },
+    {
+        lbl: '暴雪',
+        key: 'baoxue',
+    },
+    {
+        lbl: '多云',
+        key: 'duoyun',
+    },
+    {
+        lbl: '浮沉',
+        key: 'fucheng',
+    },
+    {
+        lbl: '雷阵雨',
+        key: 'leizhengyu',
+    },
+    {
+        lbl: '霾',
+        key: 'mai',
+    },
+    {
+        lbl: '强沙尘暴',
+        key: 'qiangshachengbao',
+    },
+    {
+        lbl: '晴',
+        key: 'qing',
+    },
+    {
+        lbl: '沙尘暴',
+        key: 'shachengbao',
+    },
+    {
+        lbl: '特大暴雨',
+        key: 'tedabaoyu',
+    },
+    {
+        lbl: '雾',
+        key: 'wu',
+    },
+    {
+        lbl: '小雪',
+        key: 'xiaoxue',
+    },
+    {
+        lbl: '小雨',
+        key: 'xiaoyu',
+    },
+    {
+        lbl: '扬沙',
+        key: 'yangsha',
+    },
+    {
+        lbl: '阴天',
+        key: 'yingtian',
+    },
+    {
+        lbl: '雨夹雪',
+        key: 'yujiaxue',
+    },
+    {
+        lbl: '阵雨',
+        key: 'zhenyu',
+    },
+    {
+        lbl: '中雪',
+        key: 'zhongxue',
+    },
+    {
+        lbl: '中雨',
+        key: 'zhongyu',
+    },
+    {
+        lbl: '大雨',
+        key: 'dayu',
+    },
+];
+export const WEATHERMARGIN = 1 * 60 * 60 * 1000;
+export let ICONSMAP = {};
+
+WEATHERArr.forEach(({ lbl, key }) => {
+    const icon = `/assets/images/weather/${key}.png`;
+    ICONSMAP[lbl] = icon;
+});
--- a/super-screen/client/src/sections/water-prevention/containers/gis.js
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.js
@ -370,7 +370,7 @@ function Map(props) {
                            <div className='level2'></div>
                            <div className='level1'></div>
                        </div>
-                        <div className='flex-row flex-content-around'>
+                        {/* <div className='flex-row flex-content-around'>
                            <span>0m</span>
                            <span>5m</span>
                            <span>10m</span>
@ -378,7 +378,7 @@ function Map(props) {
                            <span>20m</span>
                            <span>25m</span>
                            <span>30m</span>
-                        </div>
+                        </div> */}
                    </div>
                </div>
            </div> :
@ -418,12 +418,6 @@ function Map(props) {

    const renderLayer = () => {
        if (!loca) return;
-        // const dataSource = [
-        //     { lng: 116.194039, lat: 28.712472, data: 14 },
-        //     { lng: 116.051963, lat: 28.546815, data: 25 },
-        //     { lng: 116.064207, lat: 28.694385, data: 35 },
-        //     { lng: 115.983192, lat: 28.345722, data: 20 }
-        // ]
        const dataSource = trendData;

        if (gridLayer && loca) loca.remove(gridLayer)
@ -485,16 +479,16 @@ function Map(props) {

            },
            topColor: function (index, feature) {
-                return feature.coordinates[0].properties.x.waterLevel > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
            },
            sideColor: function (index, feature) {
-                return feature.coordinates[0].properties.x.waterLevel > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
            },
            sideTopColor: function (index, feature) {
-                return feature.coordinates[0].properties.x.waterLevel > 30 ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,1)' : 'rgba(117,154,206,1)'
            },
            sideBottomColor: function (index, feature) {
-                return feature.coordinates[0].properties.x.waterLevel > 30 ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)'
+                return feature.coordinates[0].properties.x.waterLevel > Number(feature.coordinates[0].properties.x.alert) ? 'rgba(255,136,140,0.5)' : 'rgba(117,154,206,0.5)'
            },
        });
        gridLayer = gridLayer
--- a/super-screen/client/src/sections/water-prevention/containers/gis.less
+++ b/super-screen/client/src/sections/water-prevention/containers/gis.less
@ -417,7 +417,7 @@
    z-index: 999;
    font-size: 14px;
    width: 436px;
-    height: 102px;
+    height: 82px;
    background-image: linear-gradient(270deg, rgba(4, 55, 126, 0.32) 0%, rgba(0, 18, 65, 0.47) 50%, rgba(0, 18, 65, 0.42) 96%);
    color: rgba(147, 171, 192, 1);
    padding-top: 7px;
--- a/super-screen/routes/weather/index.js
+++ b/super-screen/routes/weather/index.js
@ -1,13 +1,15 @@
 const request = require('superagent');

 let _weatherUrl = '';
+const qweatherUrl = 'https://api.qweather.com/v7/weather/3d'
+const qweatherKey = 'd717e5cf342d4626b4839044f1473426'
 module.exports.entry = function (app, router, opts) {
    const { weatherUrl } = opts;
-    console.log(weatherUrl, '天气');
    _weatherUrl = weatherUrl;
    // _weatherUrl = "https://weatherssj.anxinyun.cn/weatherApp/weather/getImmeData"

    router.get('/query/weather', weather);
+    router.get('/query/weather/3d', weather3day);
 };

 async function weather(ctx) {
@ -40,6 +42,25 @@ async function weather(ctx) {
    }
 }

+async function weather3day(ctx) {
+    try {
+        const { location } = ctx.query;
+        const weatherRes = await request.get(`${qweatherUrl}?key=${qweatherKey}&location=${location}`);
+        const { body } = weatherRes;
+        if (body) {
+            ctx.status = 200;
+            ctx.body = { ...body };
+        } else {
+            ctx.status = 400;
+            ctx.body = { msg: '获取天气错误' };
+        }
+    } catch (error) {
+        console.log('[*err]', error);
+        ctx.status = 400;
+        ctx.body = error;
+    }
+}
+
 // ip地址识别库
 // 淘宝IP地址查询接口：http://ip.taobao.com/service/getIpInfo.php?ip=1.1.35.57
 // 腾讯IP地址查询接口：http://fw.qq.com/ipaddress