水利加载性能优化

super-screen/client/src/sections/water-prevention/containers/homePage.js

@@ -46,92 +46,100 @@ function homePage(props) {
     const currentContainer = SCREEN_COMPONENTS[tab];
 
     useEffect(() => {
-        getData();
+        getWaterData();
     }, [])
 
-    const getData = () => {
-        // 水务
-        dispatch(waterLogin({ username: "123456", password: "123456", pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c' })).then(loginRes => {
-            if (loginRes.success) {
-                const { token } = loginRes.payload.data;
-                sessionStorage.setItem('waterUser', JSON.stringify(loginRes.payload.data));
-                // 水位趋势
-                dispatch(getWaterLevelTrend({ orgId: 84, keyword: '', token })).then(trendRes => {
-                    let fifterData = []
-                    if (trendRes.success) {
-                        trendRes.payload.data.map((item, index) => {
-                            let alert = item.alert ? item.alert.replace('(', '').replace(')', '').split(',')[0] : '--'
-                            let historyMax = item.historyMax ? item.historyMax.replace('(', '').replace(')', '').split(',')[0] : '--'
-                            let waterLevel = item.data.length != 0 ? item.data[item.data.length - 1].waterLevel : ''
-                            let lastWaterLevel = item.data.length != 0 ? item.data[item.data.length - 2].waterLevel : ''
-                            let currentTime = item.data.length != 0 ? moment(item.data[item.data.length - 1].time).format('YYYY-MM-DD HH:mm:ss') : ''
-                            let currentState = item.data.length != 0 ? (item.alert && alert <= waterLevel ? '超警戒' : '正常') : ''
-                            let futureState = ''
-                            if (item.alert && item.futureData && item.futureData.length != 0) {
-                                item.futureData.map((futureItem) => {
-                                    if (futureItem.value >= alert) {
-                                        futureState = `超警戒，预计${item.forecast_time}时水位抵达${(item.value).toFixed(2)}m`
-                                    }
-                                })
-                                futureState = futureState != '' ? futureState : '正常'
+    // 获取水务数据
+    const getWaterData = async () => {
+        const waterToken = sessionStorage.getItem('waterToken')
+        let token = waterToken;
+        if (!token) {
+            try {
+                const loginRes = await dispatch(waterLogin({ username: "123456", password: "123456", pcode: 'fce4afe2-5b6a-408a-ab18-a2afa7fa027c' }))
+                if (loginRes.success) {
+                    sessionStorage.setItem('waterToken', loginRes.payload.data.token);
+                    token = loginRes.payload.data.token;
+                } else {
+                    return;
+                }
+            } catch (error) {
+                return;
+            }
+        }
+        // 水位趋势
+        dispatch(getWaterLevelTrend({ orgId: 84, keyword: '', token })).then(trendRes => {
+            let fifterData = []
+            if (trendRes.success) {
+                trendRes.payload.data.map((item, index) => {
+                    let alert = item.alert ? item.alert.replace('(', '').replace(')', '').split(',')[0] : '--'
+                    let historyMax = item.historyMax ? item.historyMax.replace('(', '').replace(')', '').split(',')[0] : '--'
+                    let waterLevel = item.data.length != 0 ? item.data[item.data.length - 1].waterLevel : ''
+                    let lastWaterLevel = item.data.length != 0 ? item.data[item.data.length - 2].waterLevel : ''
+                    let currentTime = item.data.length != 0 ? moment(item.data[item.data.length - 1].time).format('YYYY-MM-DD HH:mm:ss') : ''
+                    let currentState = item.data.length != 0 ? (item.alert && alert <= waterLevel ? '超警戒' : '正常') : ''
+                    let futureState = ''
+                    if (item.alert && item.futureData && item.futureData.length != 0) {
+                        item.futureData.map((futureItem) => {
+                            if (futureItem.value >= alert) {
+                                futureState = `超警戒，预计${item.forecast_time}时水位抵达${(item.value).toFixed(2)}m`
                             }
-                            fifterData.push({
-                                index: index + 1,
-                                name: item.name,
-                                currentState,
-                                waterLevel,
-                                lastWaterLevel,
-                                currentTime,
-                                alert,
-                                historyMax,
-                                futureState,
-                                lat: item.latitude,
-                                lng: item.longitude,
-                                id: item.id
-                            })
                         })
+                        futureState = futureState != '' ? futureState : '正常'
                     }
-                    setTrendData(fifterData)
+                    fifterData.push({
+                        index: index + 1,
+                        name: item.name,
+                        currentState,
+                        waterLevel,
+                        lastWaterLevel,
+                        currentTime,
+                        alert,
+                        historyMax,
+                        futureState,
+                        lat: item.latitude,
+                        lng: item.longitude,
+                        id: item.id
+                    })
                 })
-                // 结构物
-                dispatch(getWaterStructures({ token })).then(structRes => {
-                    if (structRes.success) {
-                        setStructures(structRes.payload.data);
-                        // 视频
-                        let promiseArr = [
-                            dispatch(getWaterVideoList(structRes.payload.data?.map(s => s.id).join(), { token })),
-                            dispatch(getYsAccessToken({ token }))
-                        ];
-                        Promise.all(promiseArr).then(resArr => {
-                            if (resArr[0].success && resArr[1].success) {
-                                const at = resArr[1].payload.data.accessToken;
-                                const list = resArr[0].payload.data?.map(v => ({ url: v.yingshi.hlsAddress, name: v.name, structId: v.structId }));
-                                setAccessToken(at)
-                                setVideoList(list);
-                            }
-                        })
-                        // 告警
-                        dispatch(getWaterAlarms({ token })).then(alarmRes => {
-                            if (alarmRes.success) {
-                                let levelAlarms = [];
-                                alarmRes.payload.data.alarms.forEach(a => {
-                                    let alarm = { ...a }
-                                    for (const struct of structRes.payload.data) {
-                                        if (struct.id === a.structureId && struct.type.name === '河流') {
-                                            alarm.lng = struct.longitude;
-                                            alarm.lat = struct.latitude;
-                                            levelAlarms.push(alarm);
-                                        }
-                                    };
-                                })
-                                setWaterLevelAlarms(levelAlarms);
-                            }
+            }
+            setTrendData(fifterData)
+        })
+        // 结构物
+        dispatch(getWaterStructures({ token })).then(structRes => {
+            if (structRes.success) {
+                setStructures(structRes.payload.data);
+                // 视频
+                let promiseArr = [
+                    dispatch(getWaterVideoList(structRes.payload.data?.map(s => s.id).join(), { token })),
+                    dispatch(getYsAccessToken({ token }))
+                ];
+                Promise.all(promiseArr).then(resArr => {
+                    if (resArr[0].success && resArr[1].success) {
+                        const at = resArr[1].payload.data.accessToken;
+                        const list = resArr[0].payload.data?.map(v => ({ url: v.yingshi.hlsAddress, name: v.name, structId: v.structId }));
+                        setAccessToken(at)
+                        setVideoList(list);
+                    }
+                })
+                // 告警
+                dispatch(getWaterAlarms({ token })).then(alarmRes => {
+                    if (alarmRes.success) {
+                        let levelAlarms = [];
+                        alarmRes.payload.data.alarms.forEach(a => {
+                            let alarm = { ...a }
+                            for (const struct of structRes.payload.data) {
+                                if (struct.id === a.structureId && struct.type.name === '河流') {
+                                    alarm.lng = struct.longitude;
+                                    alarm.lat = struct.latitude;
+                                    levelAlarms.push(alarm);
+                                }
+                            };
                         })
+                        setWaterLevelAlarms(levelAlarms);
                     }
                 })
             }
         })
-       
     }
 
     const getPumpStatusData = async (structId) => {