free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

周边路况情况展示

master
wenlele 1 year ago
parent
da9fff14d1
commit
b929e95108
4 changed files with 146 additions and 59 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. 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
View File

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

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

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

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

Write Preview
Loading…
Cancel
Save