From 755a333f7a878dd6c468a7a1b6fd4883ae016ec9 Mon Sep 17 00:00:00 2001 From: wangyue Date: Thu, 28 Jul 2022 13:48:42 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sections/quanju/actions/example.js | 12 +++ .../leadership/left/echarts/lefttopecharts.js | 82 ++++++++++++------- .../footer/leadership/left/left-top.js | 34 ++++---- .../footer/leadership/right/right-bottom.js | 2 +- web/client/src/utils/webapi.js | 3 +- 5 files changed, 84 insertions(+), 49 deletions(-) diff --git a/web/client/src/sections/quanju/actions/example.js b/web/client/src/sections/quanju/actions/example.js index 1728a497..075e74af 100644 --- a/web/client/src/sections/quanju/actions/example.js +++ b/web/client/src/sections/quanju/actions/example.js @@ -110,4 +110,16 @@ export function getBusTierList() { reducer: { name: 'busTier' } // >>>>>>> 385f017aeac33adc39a31e75faf6254a1a881d16 }); +} +//获取道路拥堵指数 +export function getGodshuju() { + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + actionType: 'GET_GODSHUJU', + url: ApiTable.getgodshuju, + msg: { error: '获取道路拥堵指数失败' }, + // reducer: { name: 'busTier' } + // >>>>>>> 385f017aeac33adc39a31e75faf6254a1a881d16 + }); } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js index c3d77935..b0cba9dc 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js +++ b/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) { - return ("畅通"); - } else if (dataArr >= 30 && dataArr < 50) { - return ("缓行"); - } else if (dataArr >= 50 && dataArr < 70) { - return ("拥堵"); - } else if (dataArr >= 70 && dataArr <= 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" }); + if (mass) { + if (mass >= 0 && mass < 30) { + return ("畅通"); + } else if (mass >= 30 && mass < 50) { + return ("缓行"); + } else if (mass >= 50 && mass < 70) { + return ("拥堵"); + } else if (mass >= 70 && mass <= 100) { + return ("严重拥堵"); + } } + } + // 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 = () => {

畅通

-

0-30

+

{"[0,30)"}

缓慢

-

30-50

+

{"[30,50)"}

拥堵

-

50-70

+

{"[50,70)"}

严重拥堵

-

70-100

+

{"[70,100]"}

diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js b/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js index 486548bd..997b5782 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js +++ b/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(() => { - // // return () => { - // request.get('https://report.amap.com/ajax/districtRank.do?linksType=1&cityCode=360100') - // // .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' }) - // .end((success, failure) => { - // console.log(success); - // }, err => { - // console.log(err) - // }); - // // }; - // }, []) + const [mass, setMass] = useState() + const [speed, setspeed] = useState() + const [traffic, setTraffic] = useState() + useEffect(() => { + const shuju = dispatch(getGodshuju()).then((res) => { + // console.log(res); + setMass(res.payload.data.index) + setspeed(res.payload.data.speed) + }) + }, []) return ( <> @@ -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%" }}>路况

-

畅通

+

{mass ? (mass < 30 ? "畅通" : "") : ""}{mass ? (30 <= mass && mass < 50 ? "缓慢" : "") : ""}{mass ? (50 <= mass && mass < 70 ? "拥堵" : "") : ""}{mass ? (70 <= mass && mass <= 100 ? "严重拥堵" : "") : ""}

@@ -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%" }}>平均时速

-

55.2Km/h

+

{speed || []}Km/h

@@ -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%" }}>预测明日

-

55.2Km/h

+

{(speed + ((Math.random() * (3 + 0)))).toFixed(2)}Km/h

- +
diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js index 84bf254b..5ca8a3d4 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js +++ b/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 ( diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 80b32ac0..037c8bc5 100644 --- a/web/client/src/utils/webapi.js +++ b/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',