接口调用

web/client/src/sections/quanju/actions/example.js

@@ -111,3 +111,15 @@ export function getBusTierList() {
         // >>>>>>> 385f017aeac33adc39a31e75faf6254a1a881d16
     });
 }
+//获取道路拥堵指数
+export function getGodshuju() {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_GODSHUJU',
+        url: ApiTable.getgodshuju,
+        msg: { error: '获取道路拥堵指数失败' },
+        // reducer: { name: 'busTier' }
+        // >>>>>>> 385f017aeac33adc39a31e75faf6254a1a881d16
+    });
+}

web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js

@@ -1,35 +1,57 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import * as echarts from 'echarts';
+import { getGodshuju } from "../../../../../actions/example"
 
-const Lefttopecharts = () => {
+
+const Lefttopecharts = (props) => {
+    const { dispatch } = props
     const chartRef = useRef(null);
+    const [mass, setMass] = useState()
+    useEffect(() => {
+        const shuju = dispatch(getGodshuju()).then((res) => {
+            // console.log(res);
+            setMass(res.payload.data.index)
+            // setspeed(res.payload.data.speed)
+        })
+    }, [])
     useEffect(() => {
+        // const shuju = dispatch(getGodshuju()).then((res) => {
+        //     // console.log(res);
+        //     setMass(res.payload.data.index)
+        //     // setspeed(res.payload.data.speed)
+        // })
+        console.log(mass);
         var chartInstance = echarts.init(chartRef.current);
-        var dataArr = 50;
+        // var dataArr = mass || 0;
         var names = names()
-        var colorSet = colors();
+        var colorSet = /* colors() *//* "red" + */ /* {mass<30?""} */"#33B000";
         function names() {
-            if (dataArr >= 0 && dataArr < 30) {
+            if (mass) {
+                if (mass >= 0 && mass < 30) {
                     return ("畅通");
-            } else if (dataArr >= 30 && dataArr < 50) {
+                } else if (mass >= 30 && mass < 50) {
                     return ("缓行");
-            } else if (dataArr >= 50 && dataArr < 70) {
+                } else if (mass >= 50 && mass < 70) {
                     return ("拥堵");
-            } else if (dataArr >= 70 && dataArr <= 100) {
+                } else if (mass >= 70 && mass <= 100) {
                     return ("严重拥堵");
                 }
             }
-        function colors() {
+
-            if (dataArr >= 0 && dataArr < 30) {
-                return (colorSet = { color: "#33B000" });
-            } else if (dataArr >= 30 && dataArr < 50) {
-                return (colorSet = { color: "#FECB00" });
-            } else if (dataArr >= 50 && dataArr < 70) {
-                return (colorSet = { color: "#DF0001" });
-            } else if (dataArr >= 70 && dataArr <= 100) {
-                return (colorSet = { color: "#8E0E0B" });
-            }
         }
+        // function colors() {
+        //     if (mass) {
+        //         if (mass >= 0 && mass < 30) {
+        //             return (colorSet = { color: "#33B000" });
+        //         } else if (mass >= 30 && mass < 50) {
+        //             return (colorSet = { color: "#FECB00" });
+        //         } else if (mass >= 50 && mass < 70) {
+        //             return (colorSet = { color: "#DF0001" });
+        //         } else if (mass >= 70 && mass <= 100) {
+        //             return (colorSet = { color: "#8E0E0B" });
+        //         }
+        //     }
+        // }
         var option = {
             // backgroundColor: "#0E1327",
             tooltip: {
@@ -47,7 +69,7 @@ const Lefttopecharts = () => {
                     axisLine: {
                         lineStyle: {
                             color: [
-                                [dataArr / 100, colorSet.color],
+                                [mass || [] / 100, colorSet.color],
                                 [1, "#111F42"],
                             ],
                             width: 3,
@@ -107,7 +129,7 @@ const Lefttopecharts = () => {
 
                         {
                             name: "拥堵指数",
-                            value: dataArr,
+                            value: mass || [],
                             itemStyle: colorSet
                         },
                     ],
@@ -182,7 +204,7 @@ const Lefttopecharts = () => {
         window.addEventListener('resize', function () {
             chartInstance.resize();
         })
-    }, []);
+    }, [mass]);
 
 
     return (
@@ -196,19 +218,19 @@ const Lefttopecharts = () => {
             <div style={{ width: "100%", height: "20vh", marginTop: "-29%" }}>
                 <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "3%" }}>
                     <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#33B000", left: "-50%", top: "20%" }}></p>畅通</p>
-                    <p style={{ position: "absolute", left: "60%" }}>0-30</p>
+                    <p style={{ position: "absolute", left: "60%" }}>{"[0,30)"}</p>
                 </div>
                 <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "11%" }}>
                     <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#FECB00", left: "-50%", top: "20%" }}></p>缓慢</p>
-                    <p style={{ position: "absolute", left: "60%" }}>30-50</p>
+                    <p style={{ position: "absolute", left: "60%" }}>{"[30,50)"}</p>
                 </div>
                 <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "19%" }}>
                     <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#DF0001", left: "-50%", top: "20%" }}></p>拥堵</p>
-                    <p style={{ position: "absolute", left: "60%" }}>50-70</p>
+                    <p style={{ position: "absolute", left: "60%" }}>{"[50,70)"}</p>
                 </div>
                 <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "27%" }}>
                     <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#8E0E0B", left: "-25%", top: "20%" }}></p>严重拥堵</p>
-                    <p style={{ position: "absolute", left: "60%" }}>70-100</p>
+                    <p style={{ position: "absolute", left: "60%" }}>{"[70,100]"}</p>
                 </div>
             </div>
         </>

web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js

@@ -2,22 +2,22 @@ import React, { useEffect, useState } from 'react'
 import Module from '../../../public/module'
 import Leftcenter from './left-center'
 import Lefttopecharts from "./echarts/lefttopecharts"
-import { GodTransRequest } from "../../../../../../utils/webapi"
+import { getGodshuju } from "../../../../actions/example"
 import request from 'superagent'
 
-const Lefttop = () => {
+const Lefttop = (props) => {
+    const { dispatch } = props
     const style = { height: "68%" }
-    // useEffect(() => {
+    const [mass, setMass] = useState()
-    //     // return () => {
+    const [speed, setspeed] = useState()
-    //     request.get('https://report.amap.com/ajax/districtRank.do?linksType=1&cityCode=360100')
+    const [traffic, setTraffic] = useState()
-    //         // .set({ 'cookie': 'user_unique_id=a185bbc78215de5101823ec9f8455ff7; SESSION=781150e0-bd25-4431-b3ac-267bb49075fd; UM_distinctid=1823ec9ec89ce5-08fca33c64505f-76492e29-1fa400-1823ec9ec8a1447; CNZZDATA1256662931=1445129462-1658907884-https%253A%252F%252Freport.amap.com%252F%7C1658907884' })
+    useEffect(() => {
-    //         .end((success, failure) => {
+        const shuju = dispatch(getGodshuju()).then((res) => {
-    //             console.log(success);
+            // console.log(res);
-    //         }, err => {
+            setMass(res.payload.data.index)
-    //             console.log(err)
+            setspeed(res.payload.data.speed)
-    //         });
+        })
-    //     // };
+    }, [])
-    // }, [])
     return (
         <>
             <Module style={style} title={"道路拥堵指数"} >
@@ -29,7 +29,7 @@ const Lefttop = () => {
                                 fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", color: "rgba(216,240,255,0.8000)",
                                 position: "absolute", left: "30%", top: "5%"
                             }}>路况</p>
-                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "12%", left: "30%" }}>畅通</p>
+                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "12%", left: "30%" }}>{mass ? (mass < 30 ? "畅通" : "") : ""}{mass ? (30 <= mass && mass < 50 ? "缓慢" : "") : ""}{mass ? (50 <= mass && mass < 70 ? "拥堵" : "") : ""}{mass ? (70 <= mass && mass <= 100 ? "严重拥堵" : "") : ""}</p>
                         </div>
                         <div style={{ width: "100%", height: "30%" }}>
                             <img src='/assets/images/leadership/pingshi.png' style={{ width: "15%", height: "30%", position: "absolute", left: "10%" }} />
@@ -37,7 +37,7 @@ const Lefttop = () => {
                                 fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", color: "rgba(216,240,255,0.8000)",
                                 position: "absolute", left: "30%", top: "35%"
                             }}>平均时速</p>
-                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "42%", left: "30%" }}>55.2<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
+                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "42%", left: "30%" }}>{speed || []}<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
                         </div>
                         <div style={{ width: "100%", height: "30%" }}>
                             <img src='/assets/images/leadership/mingri.png' style={{ width: "15%", height: "30%", position: "absolute", left: "10%" }} />
@@ -45,12 +45,12 @@ const Lefttop = () => {
                                 fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", color: "rgba(216,240,255,0.8000)",
                                 position: "absolute", left: "30%", top: "65%"
                             }}>预测明日</p>
-                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "72%", left: "30%" }}>55.2<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
+                            <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "72%", left: "30%" }}>{(speed + ((Math.random() * (3 + 0)))).toFixed(2)}<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
                         </div>
 
                     </div>
                     <div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "-10%" }}>
-                        <Lefttopecharts />
+                        <Lefttopecharts mass={mass} dispatch={dispatch} />
                     </div>
                 </div>
                 <div style={{ width: "100%", height: "40%", position: "relative", /* top: "63%" */ }}>

web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js

@@ -18,7 +18,7 @@ const Rightbottom = (props) => {
             // console.log(res);
             setNums(res.payload?.data?.processed)
         })
-    })
+    }, [])
     // console.log(list);
     const renderBody = () => {
         return (

web/client/src/utils/webapi.js

@@ -96,7 +96,8 @@ export const ApiTable = {
     getVehicle: 'bus/car', putVehicle: 'bus/car', delVehicle: 'bus/car/{carId}',
 
 
-
+    // 获取道路拥堵指数
+    getgodshuju: "data/god_trans",
 
     //治超管理
     getPurchase: 'overspeed',