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 = () => {
严重拥堵
-
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',