Browse Source

接口调用

release_0.0.4
wangyue 2 years ago
parent
commit
755a333f7a
  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

@ -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

@ -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

@ -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

@ -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

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

Loading…
Cancel
Save