周边路况情况展示

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: '获取周边路况数据失败'
          }
       }
    }

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';
 
@@ -111,7 +112,14 @@ const product = {
             {
                name: 'baiDu',
                root: BAIDU_API,
-               params: {}
+               params: {},
+               dataWord: 'text'
+            },
+            {
+               name: 'baiDuJiaotong',
+               root: BAIDU_JIAOTONG_API,
+               params: {},
+               dataWord: ''
             },],
          }
       }, {

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 => {
+      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) {
-            // setTraffic(res.payload.data?.data?.detail || {});
+               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,11 +88,38 @@ 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",
+                     (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" }}>
@@ -52,42 +129,43 @@ const DataTop5 = ({ dispatch, actions, longitudeLatitude }) => {
                                                       "#00FF87" : (traffic?.index >= 1.5 && traffic?.index < 1.8) ?
                                                          "#FFCC00;" : (traffic?.index >= 1.8 && traffic?.index < 2) ?
                                                             "#DE0102;" : (traffic?.index >= 2) ? "#8E0E0B;" : ""
-                        }}>畅通</div>
+                                                }}>{trend[s.congestion_trend] || "--"}</div>
-                        <div style={{ fontSize: 14, color: "#C0E2FF;" }}>路况整体评价</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", }}>{traffic?.road_network_speed || '--'}</div> <span style={{ color: '#00FF87', marginLeft: 6 }}>km/h</span></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", }}>{traffic?.yongdu_length_4 || '--'}</div><span style={{ color: '#00FF87', marginLeft: 6 }}>km</span> </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={{ 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", }}>
-                              持平
                                           </div>
-                           <img src="/assets/images/homepage/bigscreen/red.png" style={{ width: 30, height: 30 }} />
+                                       </>)
-                        </div>
+                                    }
-                        <div>与1设法厕任务v</div>
 
+                                 </>
+                                 : <></>)
+                              :
+                              <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
+                                 暂无具体道路信息
                               </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>
+                     </>
+                        :
+                        <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 28, lineHeight: "100px", textAlign: 'center', color: '#afa2a2cf' }}>
+                           暂无数据
+                        </div>}
                </>
                : <>
                   <div style={{