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

Merge branch 'master' of https://gitea.anxinyun.cn/free-sun/GovernmentDataResourceCenter

master
peng.peng 1 year ago
parent
d0cb3f56e2 7b461646c4
commit
7a65068b54
5 changed files with 178 additions and 72 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. 45
      super-screen/client/src/components/ysPlayerIframe.js
  5. 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

45
super-screen/client/src/components/ysPlayerIframe.js
View File

@ -4,30 +4,49 @@
*/
'use strict';
import React from 'react';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { PlayCircleTwoTone } from '@ant-design/icons'
const YSIframePlayer = props => {
const { containerId, height, width, url, autoplay, audio, videoState, ysToken } = props;
const [play, setPlay] = useState(false)
const at = ysToken
if (!url || !at) return null;
const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
// const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
// const src = `https://open.ys7.com/ezopen/h5/iframe?audio=1&url=${url}&autoplay=${autoplay || 1}&accessToken=${at}`
const src = `https://open.ys7.com/ezopen/h5/iframe?audio=${audio ? '1' : '0'}&url=${url}&autoplay=${play ? '1' : "0"}&accessToken=${at}`
return (
<div
style={{ position: 'relative', height: '100%', width: '100%' }}>
<iframe
frameBorder="0"
id={containerId || 'myPlayer'}
src={src}
// https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
width={width || 400}
height={height || 300}
allowFullScreen
wmode="transparent"
>
</iframe>
{
play == false ?
<div style={{
height: width || 300, width: width || 400, position: 'absolute', top: 0, background: '#000',
display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff'
}}>
<PlayCircleTwoTone style={{ fontSize: 48 }} onClick={() => {
setPlay(true)
}} />
</div>
:
<iframe
frameBorder="0"
id={containerId || 'myPlayer'}
src={src}
// https://open.ys7.com/doc/zh/book/index/live_proto.html 单个播放器的长宽比例限制最小为{width: 400px;height: 300px;}
width={width || 400}
height={height || 300}
allowFullScreen
wmode="transparent"
>
</iframe>
}
{
videoState && videoState.status == 0 ?
<div style={{

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