You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
18 KiB
287 lines
18 KiB
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 [roadData, setRoadData] = useState({})
|
|
const [traffic, setTraffic] = useState({})
|
|
let weeks = { 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', 7: '周日' }
|
|
|
|
useEffect(() => {
|
|
dispatch(actions.firecontrol.getDetails()).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,
|
|
});
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
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])
|
|
|
|
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={{
|
|
height: "100%", listStyle: 'none',
|
|
|
|
}}>
|
|
<div className='box_header_bg' >
|
|
<span className='card-title'>周边路况实时数据</span>
|
|
</div>
|
|
<div className='children-container' style={{ padding: '20px', height: 'calc(100% - 40px)', widthF: 'calc(100% - 40px)' }}>
|
|
{longitudeLatitude?.longitude ?
|
|
<>
|
|
{
|
|
(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>
|
|
</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={{
|
|
background: 'url(/assets/images/homepage/bigscreen/background_n.png)',
|
|
backgroundSize: '100% 20px', backgroundPosition: '0 14px', backgroundRepeat: 'no-repeat',
|
|
display: 'flex', alignItems: 'center', justifyContent: "space-between", padding: '0 6px',
|
|
}}>
|
|
<div style={{
|
|
fontFamily: 'YouSheBiaoTiHei', fontSize: 20
|
|
}}
|
|
>
|
|
南昌市</div>
|
|
<div style={{
|
|
fontFamily: 'YouSheBiaoTiHei', fontSize: 14
|
|
}}
|
|
>NANCHANG CITY</div>
|
|
</div>
|
|
<div style={{
|
|
height: "calc(100% - 38px)", marginTop: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-around',
|
|
|
|
}}>
|
|
<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;" : ""
|
|
}}>{
|
|
(traffic?.index >= 1 && traffic?.index < 1.5) ?
|
|
"畅通" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
|
|
"缓行" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
|
|
"拥堵" : (traffic?.index >= 2) ? "严重拥堵" : ""
|
|
}</div>
|
|
<div style={{ fontSize: 14, color: "#C0E2FF;" }}>路况整体评价</div>
|
|
</div>
|
|
<div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
|
|
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>实时拥堵指数</div>
|
|
<div style={{ display: "flex", alignItems: 'center' }}>
|
|
<div style={{ fontSize: 28, transform: 'skewX(-8deg)', fontFamily: "D-DINExp-Italic", fontWeight: 'Italic', color: '#ECF7FF', marginRight: 4 }}>{traffic?.index || '--'}</div>
|
|
<div style={{ color: '#C3E6FF' }}>
|
|
较上周同期{traffic?.last_index > traffic?.index ? "下降" : '上升'}
|
|
{((traffic?.last_index > traffic?.index ? (traffic?.last_index - traffic?.index) / traffic?.last_index : (traffic?.index - traffic?.last_index) / traffic?.last_index) * 100).toFixed(2)}%
|
|
</div>
|
|
{traffic?.last_index > traffic?.index ?
|
|
<ArrowDownOutlined style={{ color: '#06FF07', fontSize: 18 }} />
|
|
: <ArrowUpOutlined style={{ color: '#06FF07', fontSize: 18 }} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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" }}>
|
|
<img src='/assets/images/homepage/bigscreen/seniority.png' style={{ width: "80%" }} />
|
|
</div>
|
|
<div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
|
|
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>实时拥堵排行</div>
|
|
<div style={{ display: "flex", alignItems: 'center' }}>
|
|
<div style={{ fontSize: 28, fontFamily: "D-DINExp-Italic", transform: 'skewX(-8deg)', fontWeight: 'Italic', color: '#ECF7FF', marginRight: 4 }}>{traffic?.rank || '--'}</div>
|
|
<div style={{ marginRight: 16, fontSize: 20, transform: 'skewX(-8deg)' }}>/{traffic?.count || '--'}</div>
|
|
<div style={{ color: '#C3E6FF' }}>全国重点城市拥堵排行</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
height: "23%", display: "flex",
|
|
background: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)'
|
|
}}>
|
|
<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: 28, fontFamily: "D-DINExp-Italic", }}>{traffic?.road_network_speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 20 }}>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: 28, fontFamily: "D-DINExp-Italic", }}>{traffic?.yongdu_length_4 || '--'}</div><span style={{ color: '#00FF87', marginLeft: 20 }}>km</span> </div>
|
|
</div>
|
|
</div>
|
|
|
|
<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" }}>
|
|
<img src='/assets/images/homepage/bigscreen/dateDook.png' style={{ width: "80%" }} />
|
|
</div>
|
|
<div style={{ width: "62%", display: 'flex', flexDirection: "column", justifyContent: "space-evenly", }}>
|
|
<div style={{ height: 22, background: "rgb(0 88 204 / 50%)", textIndent: 20 }}>近30日最高拥堵指数</div>
|
|
<div style={{ display: "flex", alignItems: 'center' }}>
|
|
<div style={{ fontSize: 28, fontFamily: "D-DINExp-Italic", fontWeight: 'Italic', color: '#ECF7FF', marginRight: 38 }}>{traffic?.month_max_yongdu_index?.toFixed(3) || '--'}</div>
|
|
<div style={{ color: '#C3E6FF' }}>{traffic?.month_max_congest_time} {weeks[traffic?.month_max_week_day]}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div >
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, global } = state
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
}
|
|
}
|
|
export default connect(mapStateToProps)(DataTop5);
|
|
|
|
|
|
|