free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

接口调用

release_0.0.4
wangyue 2 years ago
parent
2b15382355
commit
755a333f7a
5 changed files with 84 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      web/client/src/sections/quanju/actions/example.js
  2. 82
      web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js
  3. 34
      web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js
  4. 2
      web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
  5. 3
      web/client/src/utils/webapi.js

12
web/client/src/sections/quanju/actions/example.js
View File

@ -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
});
}

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

@ -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 = () => {
<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>
</>

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

@ -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 (
<>
<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%" */ }}>

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

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

3
web/client/src/utils/webapi.js
View File

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

Write Preview
Loading…
Cancel
Save