Browse Source

周边路况情况展示

master
wenlele 1 year ago
parent
commit
b929e95108
  1. 11
      api/app/lib/controllers/superScreen/fire.js
  2. 12
      api/config.js
  3. BIN
      super-screen/client/assets/images/homepage/bigscreen/road.png
  4. 182
      super-screen/client/src/sections/fire-control/components/Right-top2.js

11
api/app/lib/controllers/superScreen/fire.js

@ -169,10 +169,11 @@ function videoList (opts) {
function getDetails (opts) {
return async function (ctx) {
try {
const res = await request.get('https://jiaotong.baidu.com/trafficindex/city/details/?cityCode=163')
const { app, yingshiTokenRes } = ctx
const res = await app.fs.baiDuJiaotong.get('trafficindex/city/details/?cityCode=163')
ctx.status = 200
ctx.body = res.body || {}
ctx.body = res || {}
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
@ -235,16 +236,16 @@ function getSurroundingConditions (opts) {
const { app, yingshiTokenRes } = ctx
const { center } = ctx.query;
const res = await app.fs.baiDu.get('/traffic/v1/around', { ak: opts.baiduAK, radius: 1000, center: center })
const res = await app.fs.baiDu.get(`traffic/v1/around?ak=${opts.baiduAK}&center=${center}&radius=1000`)
ctx.status = 200
ctx.body = res.body || {}
ctx.body = res && JSON.parse(res) || {}
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
ctx.status = 400;
ctx.body = {
message: '获取南昌市道路数据失败'
message: '获取周边路况数据失败'
}
}
}

12
api/config.js

@ -46,6 +46,7 @@ const YINGSHI_SECRET = process.env.YINGSHI_SECRET || flags.yingshiSecret;
// 萤石服务的地址
const YINGSHI_URL = process.env.YINGSHI_URL || flags.yingshiUrl || 'https://open.ys7.com/api';
const BAIDU_JIAOTONG_API = process.env.BAIDU_JIAOTONG_API || flags.baiDuJiaotong || 'https://jiaotong.baidu.com';
const BAIDU_API = process.env.BAIDU_API || flags.baiDu || 'https://api.map.baidu.com';
const BAIDU_AK = process.env.BAIDU_AK || flags.baiDuAk || 'AeSOcqC282tdSUVOfYxe68nEcNF1CTj7';
@ -76,7 +77,7 @@ const product = {
dev,
yingshiKey: YINGSHI_KEY,
yingshiSecret: YINGSHI_SECRET,
baiduAK: BAIDU_AK,
baiduAK: BAIDU_AK,
exclude: [
// "*"
], // 不做认证的路由,也可以使用 exclude: ["*"] 跳过所有路由
@ -111,7 +112,14 @@ const product = {
{
name: 'baiDu',
root: BAIDU_API,
params: {}
params: {},
dataWord: 'text'
},
{
name: 'baiDuJiaotong',
root: BAIDU_JIAOTONG_API,
params: {},
dataWord: ''
},],
}
}, {

BIN
super-screen/client/assets/images/homepage/bigscreen/road.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

182
super-screen/client/src/sections/fire-control/components/Right-top2.js

@ -2,13 +2,15 @@ import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import { Box, YSIframePlayer } from '$components';
import { Select } from 'antd';
import PerfectScrollbar from "perfect-scrollbar";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import './style.less';
let roadScrollbar
let describeScrollbar
const DataTop5 = ({ dispatch, actions, longitudeLatitude }) => {
const [videoList, setVideoList] = useState([])
const [options, setOptions] = useState([])
const [roadData, setRoadData] = useState({})
const [traffic, setTraffic] = useState({})
let weeks = { 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', 7: '周日' }
@ -18,17 +20,65 @@ const DataTop5 = ({ dispatch, actions, longitudeLatitude }) => {
setTraffic(res.payload.data?.data?.detail || {});
}
})
const dom1 = document.getElementById("road");
if (dom1) {
roadScrollbar = new PerfectScrollbar("#road", {
suppressScrollX: true,
});
}
const dom2 = document.getElementById("describe");
if (dom2) {
describeScrollbar = new PerfectScrollbar("#describe", {
suppressScrollX: true,
});
}
}, [])
useEffect(() => {
dispatch(actions.firecontrol.getSurroundingConditions({ center: `${longitudeLatitude?.longitude},${longitudeLatitude?.latitude}` })).then(res => {
if (res.success) {
// setTraffic(res.payload.data?.data?.detail || {});
}
})
const dom1 = document.getElementById("road");
if (dom1) {
roadScrollbar = new PerfectScrollbar("#road", {
suppressScrollX: true,
});
}
const dom2 = document.getElementById("describe");
if (dom2) {
describeScrollbar = new PerfectScrollbar("#describe", {
suppressScrollX: true,
});
}
}, [roadData])
useEffect(() => {
const dom1 = document.getElementById("road");
if (dom1 && roadScrollbar) {
roadScrollbar.update();
}
const dom2 = document.getElementById("describe");
if (dom2 && describeScrollbar) {
describeScrollbar.update();
}
})
useEffect(() => {
if (longitudeLatitude?.latitude && longitudeLatitude?.longitude) {
dispatch(actions.firecontrol.getSurroundingConditions({
// center: `30.576279,104.071216`
center: `${longitudeLatitude?.latitude},${longitudeLatitude?.longitude}`
})).then(res => {
if (res.success) {
setRoadData(res.payload.data || {})
}
})
}
}, [longitudeLatitude])
console.log(longitudeLatitude);
let evaluation = { 0: '未知路况', 1: '畅通', 2: '缓行', 3: '拥堵', 4: '严重拥堵' }
let evaluationColor = { 0: 'rgb(151 175 164)', 1: '#00FF87', 2: '#FFCC00', 3: '#DE0102', 4: '#8E0E0B' }
let trend = { SAME: '持平', BETTER: '缓解', WORSE: '加重' }
return <div style={{ height: '100%', width: '100%', margin: "0px 0px 28px" }}>
<div style={{
@ -38,56 +88,84 @@ const DataTop5 = ({ dispatch, actions, longitudeLatitude }) => {
<div className='box_header_bg' >
<span className='card-title'>周边路况实时数据</span>
</div>
<div className='children-container' style={{ padding: '20px' }}>
<div className='children-container' style={{ padding: '20px', height: 'calc(100% - 40px)', widthF: 'calc(100% - 40px)' }}>
{longitudeLatitude?.longitude ?
<>
{/* <div style={{
height: "23%", display: "flex",
background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
}}>
<div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
<div style={{
fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
color: (traffic?.index >= 1 && traffic?.index < 1.5) ?
"#00FF87" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
"#FFCC00;" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
"#DE0102;" : (traffic?.index >= 2) ? "#8E0E0B;" : ""
}}>畅通</div>
<div style={{ fontSize: 14, color: "#C0E2FF;" }}>路况整体评价</div>
</div>
<div style={{ width: "62%", display: 'flex', }}>
<div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>平均通行速度</div>
<div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{traffic?.road_network_speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 6 }}>km/h</span></div>
</div>
<div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>拥堵距离</div>
<div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{traffic?.yongdu_length_4 || '--'}</div><span style={{ color: '#00FF87', marginLeft: 6 }}>km</span> </div>
</div>
</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, width: 190 }}>较10分钟前拥堵趋势</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', width: "calc(100% - 200px)" }}>
<div style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-around'
}}>
<div style={{ fontSize: 28, transform: 'skewX(-8deg)', color: '#00FF87', fontFamily: "YouSheBiaoTiHei", }}>
持平
{
(roadData?.description || roadData?.road_traffic?.length > 0 || roadData?.evaluation?.status_desc) ? <>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, display: "flex", alignItems: "center" }}>
<img src='/assets/images/homepage/bigscreen/road.png' style={{ width: 20 }} />
路况描述</div>
<div style={{ display: 'flex', alignItems: "center" }}>
<div style={{ fontSize: 14, color: "#C0E2FF", marginRight: 10 }}>路况整体评价</div>
<div style={{
fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
color: evaluationColor[roadData?.evaluation?.status]
}}>{evaluation[roadData?.evaluation?.status] || '--'}</div>
</div>
<img src="/assets/images/homepage/bigscreen/red.png" style={{ width: 30, height: 30 }} />
</div>
<div>与1设法厕任务v</div>
</div>
</div>
<div style={{}}>
<div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, }}>路况描述</div>
<div>dewbfdhuihseacf dsjhcf ewdcjaiopsdc op sadc jwe dcfp weopdcf ujew fdc </div>
</div> */}
<div id="describe" style={{ height: "25%", width: "90%", color: " C3E6FF", margin: '0 aut0', position: 'relative', textIndent: 20, }}>
{roadData?.description || '暂无描述'}
</div>
<div id='road' style={{ width: "100%", height: "calc(75% - 60px)", position: 'relative', marginTop: 20 }}>
{roadData.road_traffic?.find(f => f.congestion_sections?.length > 0) ?
roadData?.road_traffic?.map(v => (v.congestion_sections?.length > 0) ?
<>
<div style={{ fontFamily: 'SourceHanSansCN-Bold', fontWeight: 700, fontSize: 18, display: "flex", alignItems: "center" }}>
<img src='/assets/images/homepage/bigscreen/road.png' style={{ width: 20 }} />
{v.road_name}</div>
{
v.congestion_sections?.map(s => <>
<div style={{ color: " C3E6FF", margin: "4px 0" }}>{s.section_desc || "暂无路段拥堵语义化描述"}</div>
<div style={{
height: 140, display: "flex", marginBottom: 10,
background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
}}>
<div style={{ width: "34%", display: 'flex', flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
<div style={{
fontFamily: "YouSheBiaoTiHei", fontSize: 28, letterSpacing: 2,
color: (traffic?.index >= 1 && traffic?.index < 1.5) ?
"#00FF87" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
"#FFCC00;" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
"#DE0102;" : (traffic?.index >= 2) ? "#8E0E0B;" : ""
}}>{trend[s.congestion_trend] || "--"}</div>
<div style={{ fontSize: 14, color: "#C0E2FF", textAlign: 'center' }}>
{
s.congestion_trend == "SAME" ? '与10分钟前变化不大'
: s.congestion_trend == 'BETTER' ? '较10分钟前拥堵有所缓解'
: s.congestion_trend == 'WORSE' ? '较10分钟前拥堵加重' : '--'
}
</div>
</div>
<div style={{ width: "62%", display: 'flex', }}>
<div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>平均通行速度</div>
<div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{s.speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 6 }}>km/h</span></div>
</div>
<div style={{ width: "50%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", alignItems: "center" }}>
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", width: '90%', textAlign: 'center' }}>拥堵距离</div>
<div ><div style={{ display: 'inline-block', transform: 'skewX(-8deg)', fontSize: 20, fontFamily: "D-DINExp-Italic", }}>{s.congestion_distance || '--'}</div><span style={{ color: '#00FF87', marginLeft: 6 }}>m</span> </div>
</div>
</div>
</div>
</>)
}
</>
: <></>)
:
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
暂无具体道路信息
</div>
}
</div>
</>
:
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
暂无数据
</div>}
</>
: <>
<div style={{

Loading…
Cancel
Save