zhangqun
2 years ago
parent
1d72a77a34
commit
f9c12f7886
30 changed files with 14962 additions and 2 deletions
|
After Width: | Height: | Size: 983 KiB |
|
After Width: | Height: | Size: 983 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,75 @@ |
||||
.EarlyWarning { |
||||
.titles { |
||||
width: 50%; |
||||
color: #fff; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
background-image: linear-gradient(to right, #224682FF, #22468200); |
||||
padding: 0 5px; |
||||
} |
||||
|
||||
.warningInfo { |
||||
flex: auto; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
height: 300px; |
||||
} |
||||
|
||||
.liststyle { |
||||
width: 100%; |
||||
font-size: 0.72em; |
||||
} |
||||
|
||||
.accidentlist { |
||||
|
||||
padding: 5px 10px; |
||||
overflow: hidden; |
||||
height: 200px; |
||||
margin: 5px 0; |
||||
color: #B0C3E1FF; |
||||
// max-height: calc(~'100% - 310px'); |
||||
flex: 1; |
||||
|
||||
} |
||||
|
||||
.accidentlist1 { |
||||
margin-left: 2em !important; |
||||
padding: 5px 10px; |
||||
|
||||
height: 200px; |
||||
margin: 5px 0; |
||||
color: #B0C3E1FF; |
||||
// max-height: calc(~'100% - 310px'); |
||||
flex: 1; |
||||
|
||||
.accidentli { |
||||
cursor: pointer; |
||||
|
||||
border: 1px solid #0f86b1; |
||||
background: #192e5b; |
||||
margin: 5px; |
||||
padding: 1px; |
||||
height: 50px; |
||||
|
||||
.name { |
||||
|
||||
color: #fff; |
||||
text-align: left; |
||||
} |
||||
|
||||
.road { |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
.content { |
||||
|
||||
|
||||
overflow: hidden !important; |
||||
text-overflow: ellipsis !important; |
||||
display: -webkit-box !important; |
||||
-webkit-line-clamp: 2 !important; //想要的行数 |
||||
-webkit-box-orient: vertical !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,287 @@ |
||||
@import '../../../../themes/default.less'; |
||||
|
||||
#EarlyWarningList{ |
||||
background: @outline-bg; |
||||
} |
||||
|
||||
.normal { |
||||
height: 100%; |
||||
font-family: 'Microsoft Yahei', '微软雅黑', arial, sans-serif; |
||||
:global { |
||||
.ant-switch { |
||||
background-color: @primary-color; |
||||
} |
||||
.ant-drawer-close { |
||||
color: @primary-color!important; |
||||
} |
||||
.ant-tag { |
||||
height: 1.5em; |
||||
font-size: 1em; |
||||
line-height: 1.2em; |
||||
} |
||||
.ant-btn-sm { |
||||
height: 1.5em; |
||||
} |
||||
@media screen and (min-width: 3800px) { |
||||
.ant-btn-sm { |
||||
height: 2vh; |
||||
} |
||||
} |
||||
|
||||
.ant-drawer-body { |
||||
height: 100%; |
||||
width: 100%; |
||||
padding: 10px 2px 16px 16px; |
||||
font-size: 14px; |
||||
line-height: 1.5; |
||||
word-wrap: break-word; |
||||
} |
||||
} |
||||
.content { |
||||
width: 100%; |
||||
font-size: 16px; |
||||
@media screen and (min-width: 3800px) { |
||||
font-size: 1.2vh; |
||||
} |
||||
|
||||
.divider { |
||||
margin-bottom: 0; |
||||
padding-bottom: 0; |
||||
min-width: 97%; |
||||
width: 97%; |
||||
} |
||||
.baseConfig { |
||||
width: 97%; |
||||
overflow-x: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
.color_block { |
||||
width: 38px; |
||||
height: 1.5em; |
||||
margin: 4px; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
margin-right: 0.75em; |
||||
display: inline-block; |
||||
vertical-align: middle; |
||||
} |
||||
.title { |
||||
:global { |
||||
.ant-list-item { |
||||
align-items: center; |
||||
display: flex; |
||||
padding: 2px 0; |
||||
} |
||||
} |
||||
|
||||
font-size: 1em; |
||||
line-height: 1.375em; |
||||
margin-bottom: 0.75em; |
||||
margin-top: 6px; |
||||
} |
||||
.save { |
||||
font-size: 0.875em; |
||||
height: 1.5em; |
||||
margin: 1px; |
||||
box-sizing: content-box; |
||||
} |
||||
} |
||||
} |
||||
.SectionConfig { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
} |
||||
.roadsectioncontent { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0; |
||||
pointer-events: auto; |
||||
color: @text-white; |
||||
} |
||||
.roadsectionheadercontent { |
||||
width: 100%; |
||||
height: auto; |
||||
margin-bottom: 15px; |
||||
} |
||||
.roadsectionheader { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 15px 10px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.left { |
||||
display: flex; |
||||
flex-grow: 0.3; |
||||
.roadsectionidcontent, |
||||
.roadsectionnamecontent { |
||||
// flex:auto; |
||||
display: flex; |
||||
align-items: center; |
||||
height: auto; |
||||
} |
||||
} |
||||
.right { |
||||
display: flex; |
||||
.roadsectionquerycontent, |
||||
.roadsectionchangecontent { |
||||
flex: auto; |
||||
display: flex; |
||||
align-items: center; |
||||
height: auto; |
||||
} |
||||
} |
||||
} |
||||
.roadsectionidtitle, |
||||
.roadsectionnametitle { |
||||
margin: 0 10px; |
||||
} |
||||
.roadsectionid, |
||||
.roadsectionname { |
||||
width: 230px; |
||||
} |
||||
.roadsectionquery, |
||||
.roadsectionchange { |
||||
height: 30px; |
||||
margin-left: 15px; |
||||
} |
||||
.ant-btn { |
||||
padding: 0; |
||||
} |
||||
.roadsectiondetailcontent { |
||||
width: 100%; |
||||
flex: auto; |
||||
background: transparent; |
||||
.contentbody { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 15px 10px 0 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.tabletop { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.titlefont { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.tablediv { |
||||
padding: 5px 0; |
||||
a { |
||||
color: #52d3ff; |
||||
} |
||||
a:hover { |
||||
color: #01e7ff; |
||||
} |
||||
:global { |
||||
.ant-pagination-item-active { |
||||
border-color: #148def; |
||||
background: #2746b7; |
||||
} |
||||
.ant-table-fixed-header .ant-table-scroll .ant-table-header { |
||||
overflow: hidden; |
||||
opacity: 0.9999; |
||||
margin-bottom: 0 !important; |
||||
} |
||||
.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body { |
||||
background: #0d1c46; |
||||
overflow-y: auto !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.confirmdeletemodal{ |
||||
:global { |
||||
.ant-modal-body { |
||||
font-size: 16px; |
||||
line-height: 30px; |
||||
overflow-wrap: break-word; |
||||
padding: 10px 24px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.roadmodalcontent { |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
.roadnamecontent, |
||||
.roadsaturatecontent, |
||||
.roadlimitcontent { |
||||
display:flex; |
||||
width: 90%; |
||||
margin: 16px auto; |
||||
} |
||||
|
||||
.roadnametitle, |
||||
.roadsaturatetitle, |
||||
.roadlimittitle { |
||||
width: 25%; |
||||
display: block; |
||||
float: left; |
||||
text-align: center; |
||||
line-height: 32px; |
||||
margin-right: 10px; |
||||
overflow: hidden; |
||||
} |
||||
.roadnametitle p { |
||||
float: left; |
||||
height: 32px; |
||||
line-height: 32px; |
||||
margin-bottom: 0; |
||||
} |
||||
.roadnameunit { |
||||
width: 10px; |
||||
margin-right: 5px; |
||||
color: red; |
||||
font-size: 16px; |
||||
} |
||||
.roadnamechoose, |
||||
.roadsaturate, |
||||
.roadlimit { |
||||
width: 60%; |
||||
height: 32px; |
||||
} |
||||
|
||||
.close { |
||||
position: absolute; |
||||
top: 15px; |
||||
right: 15px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
|
||||
.deletetext{ |
||||
text-align: center; |
||||
margin-bottom:0; |
||||
} |
||||
|
||||
.head_title_content{ |
||||
height:30px; |
||||
font-family: '微软雅黑'; |
||||
overflow: hidden; |
||||
background: #175590; |
||||
} |
||||
.head_title{ |
||||
float:left; |
||||
line-height:30px; |
||||
height:30px; |
||||
font-size:20px; |
||||
margin-left:10px; |
||||
} |
||||
.head_detail_content{ |
||||
margin:12px; |
||||
background:#0c224b; |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
|
||||
import React from 'react'; |
||||
import { Row, Col, Button, Tabs, message } from 'antd'; |
||||
import { connect } from 'dva'; |
||||
import ReactEcharts from 'echarts-for-react'; |
||||
import styles from './index.less'; |
||||
|
||||
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||
const motorbg = require('@/assets/CommandPlatform/two/motorbg.png'); // 绿降
|
||||
class MotorVehicle extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
}; |
||||
} |
||||
|
||||
componentDidMount() { |
||||
|
||||
} |
||||
|
||||
|
||||
render() { |
||||
const { basefont } = this.props; |
||||
return ( |
||||
<div className={styles.MotorBox}> |
||||
<div className={styles.motorTotalBox}> |
||||
<div className={styles.motorTotal}> |
||||
<div className={styles.motorNum} style={{background:`url(${motorbg}) no-repeat`}}>506.26</div> |
||||
<div className={styles.notorTitle}>机动车保有量</div> |
||||
<div style={{display:'flex',alignItems:'center'}}> |
||||
<div className={styles.rateItem}> |
||||
<div>同比</div> |
||||
<div> |
||||
<div>5</div> |
||||
<image src={ down2 }/> |
||||
</div> |
||||
</div> |
||||
<div className={styles.rateItem}> |
||||
<div>环比</div> |
||||
<div> |
||||
<div>5</div> |
||||
<image src={ down2 }/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className={styles.motorCharts}> |
||||
<div className={styles.changeTool}> |
||||
<div>保有量</div> |
||||
<div className={styles.actived}>注册量</div> |
||||
<div>住销量</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
function mapStateToProps({ global, loading }) { |
||||
return { global }; |
||||
} |
||||
export default connect(mapStateToProps)(MotorVehicle); |
||||
@ -0,0 +1,26 @@ |
||||
@import '../../../themes/default.less'; |
||||
|
||||
.MotorBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #ffffff; |
||||
.motorTotalBox{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
.motorNum{ |
||||
color: #0881c6; |
||||
text-align: center; |
||||
width: 196px; |
||||
height: 134px; |
||||
} |
||||
.notorTitle{ |
||||
text-align: center; |
||||
line-height: 25px; |
||||
} |
||||
.rateItem{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,856 @@ |
||||
|
||||
import React from 'react'; |
||||
import { Row, Col, Button, Tabs, message } from 'antd'; |
||||
import { connect } from 'dva'; |
||||
import ReactEcharts from 'echarts-for-react'; |
||||
import { getBdMonitorecharts1, getBdMonitorecharts2, getBdMonitorecharts3, getBdMonitorecharts4, getBdMonitorecharts5 } from '../BDCharts/BdMonitorEchatrs'; |
||||
import HiNumberFlip from '../../common/HiNumberFlip'; |
||||
import styles from './BdMonitor.less'; |
||||
import BdMonitorItem from './BdMonitorItem'; |
||||
import TrafficChartPop from "./TrafficChartPop"; |
||||
import onCarChartPop from "./onCarChartPop"; |
||||
import InOutCityLinePop from "./InOutCityLinePop"; |
||||
import { NumberAnimate } from '@/components/common/NumberAnimate'; |
||||
import TweenOne from 'rc-tween-one'; |
||||
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin'; |
||||
import { scroll2 } from '../../../utils/util'; |
||||
import { getInOutCityFlowByPointId, getCarOnWayAnaly, getCarOnWayAnalyPie } from "../../../services/BdMonitorService"; |
||||
import { playVideo } from '@/utils/video'; |
||||
import { getVoiceWebSocketUrl } from '@/services/bdPoliceCaseService'; |
||||
import TsmWebSocket from '@/utils/TsmWebsocket'; |
||||
|
||||
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||
const inCityKuang = require('@/assets/BaoDingImg/inCityKuang.png'); |
||||
const inCityCar = require('@/assets/BaoDingImg/inCityCar.png'); |
||||
const inCityRote = require('@/assets/BaoDingImg/inCityRote.png'); |
||||
const outCityKuang = require('@/assets/BaoDingImg/outCityKuang.png'); |
||||
const outCityCar = require('@/assets/BaoDingImg/outCityCar.png'); |
||||
const outCityRote = require('@/assets/BaoDingImg/outCityRote.png'); |
||||
const zhishu = 6; |
||||
const { TabPane } = Tabs; |
||||
TweenOne.plugins.push(Children); |
||||
let inoutPoint = ''; |
||||
class BdMonitor extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
belongingDisplay: false, |
||||
crosslistdom: [], |
||||
inoutFlag: '1', |
||||
sectionid: '', // 选中路段id
|
||||
potionid: '', // 选中
|
||||
inoutArea: '', |
||||
websocketControlIndex: '', |
||||
voice: '' |
||||
}; |
||||
this.crossflag = 0; |
||||
this.doRefreshData = this.doRefreshData.bind(this); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
const { IsSettingScene, dispatch } = this.props; |
||||
if (!IsSettingScene) { |
||||
this.doRefreshData(); |
||||
this.refreshEcharts() |
||||
} |
||||
// 下方开始创建websocket链接
|
||||
// getVoiceWebSocketUrl().then((data) => {
|
||||
// if (data && data.webSocketUrl !== undefined && data.webSocketUrl !== null) {
|
||||
// this.ws = new TsmWebSocket(data.webSocketUrl, { beatime: 10000 });
|
||||
// this.ws.onmessage = (result) => {
|
||||
// const resultData = JSON.parse(result.data);
|
||||
// console.log('接收到webscoket信息', resultData);
|
||||
// if (resultData.data && resultData.data.VOICEINF && (resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLE == ('OPEN_PAGE' || 'CLOSE'))) {
|
||||
// switch (resultData.data.VOICEINF[0].GKOPERATION) {
|
||||
// case '3':
|
||||
// // 语音打开在途车辆分析
|
||||
// message.info('语音打开在途车辆分析')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '3',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.openOnCarPop();
|
||||
// });
|
||||
// break;
|
||||
// case '4':
|
||||
// // 语音关闭在途车辆分析
|
||||
// message.info('语音关闭在途车辆分析')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '4',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.closeWebsocketModal('onCarPop');
|
||||
// })
|
||||
// break;
|
||||
// case '7':
|
||||
// // 语音打开拥堵指数
|
||||
// message.info('语音打开拥堵指数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '7',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '8':
|
||||
// // 语音关闭拥堵指数
|
||||
// message.info('语音关闭拥堵指数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '8',
|
||||
// }, () => {
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// })
|
||||
// break;
|
||||
// case '15':
|
||||
// // 语音打开拥堵里程
|
||||
// message.info('语音打开拥堵里程')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '15',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '16':
|
||||
// // 语音关闭拥堵里程
|
||||
// message.info('语音关闭拥堵里程')
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '16',
|
||||
// })
|
||||
// break;
|
||||
// case '17':
|
||||
// // 语音打开今日在途车辆数
|
||||
// message.info('语音打开今日在途车辆数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '17',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.openOnCarPop();
|
||||
// });
|
||||
// break;
|
||||
// case '18':
|
||||
// // 语音关闭今日在途车辆数
|
||||
// message.info('语音关闭今日在途车辆数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '18',
|
||||
// })
|
||||
// this.closeWebsocketModal('onCarPop');
|
||||
// break;
|
||||
// case '19':
|
||||
// // 语音打开平均速度
|
||||
// message.info('语音打开平均速度')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '19',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '20':
|
||||
// // 语音关闭平均速度
|
||||
// message.info('语音关闭平均速度')
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '20',
|
||||
// })
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// if (resultData.data && resultData.data.VOICEINF && resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLENAME == '拥堵排名') {
|
||||
// const { congestList } = this.props.BdMonitorModel;
|
||||
// message.info(`语音打开拥堵排名第${resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD}`)
|
||||
// if (congestList[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1] != undefined) {
|
||||
// const item = congestList[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1]
|
||||
// this.child.openJamLinePop(item.exponents_lastweek, item.exponents_today, item.cordinate, item.sectionid)
|
||||
// } else {
|
||||
// message.error(`语音打开拥堵排名第${resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD}失败`)
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// }
|
||||
// else {
|
||||
// Modal.error({
|
||||
// title: '错误',
|
||||
// content: 'websocket连接失败!',
|
||||
// okText: '确定',
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// const { popWindows } = this.props.global
|
||||
// const { maxjamlength } = this.props.BdMonitorModel
|
||||
|
||||
// const isOpenTrafficPop = popWindows.findIndex(x => x.name === 'trafficPop') > -1
|
||||
|
||||
// if (isOpenTrafficPop) {
|
||||
// dispatch({
|
||||
// type: 'global/closePopWindow',
|
||||
// payload: {
|
||||
// name: 'trafficPop',
|
||||
// },
|
||||
// });
|
||||
// this.openTrafficPop(maxjamlength)
|
||||
// }
|
||||
} |
||||
|
||||
//关闭弹窗封装
|
||||
closeWebsocketModal = (name) => { |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/closePopWindow', |
||||
payload: { |
||||
name: name, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
|
||||
refreshEcharts = () => { |
||||
|
||||
if (this.echartsInterval) { |
||||
clearInterval(this.echartsInterval); |
||||
this.echartsInterval = null; |
||||
} |
||||
|
||||
this.echartsInterval = setInterval(() => { |
||||
const { jamlength, exponent, avgspeed, maxjamlength, maxavgspeed, bigcar, smallcar, localcar, foreigncar, inCityCarList, outCityCarList, } = this.props.BdMonitorModel; |
||||
const { pointid } = this.state; |
||||
|
||||
setTimeout(() => { |
||||
if (this.chart1) { |
||||
this.chart1.getEchartsInstance().clear() |
||||
this.chart1.getEchartsInstance().setOption(getBdMonitorecharts1(jamlength, exponent, avgspeed, maxjamlength, maxavgspeed), true); |
||||
} |
||||
|
||||
if (this.chart2) { |
||||
this.chart2.getEchartsInstance().clear() |
||||
this.chart2.getEchartsInstance().setOption(getBdMonitorecharts2(bigcar, smallcar), true); |
||||
} |
||||
|
||||
if (this.chart3) { |
||||
this.chart3.getEchartsInstance().clear() |
||||
this.chart3.getEchartsInstance().setOption(getBdMonitorecharts3(localcar, foreigncar), true); |
||||
} |
||||
|
||||
if (this.chart4) { |
||||
this.chart4.getEchartsInstance().clear() |
||||
this.chart4.getEchartsInstance().setOption(getBdMonitorecharts4(inCityCarList, pointid), true); |
||||
} |
||||
|
||||
if (this.chart5) { |
||||
this.chart5.getEchartsInstance().clear() |
||||
this.chart5.getEchartsInstance().setOption(getBdMonitorecharts5(outCityCarList, pointid), true); |
||||
} |
||||
}, 1000); |
||||
|
||||
}, window.AnimationTimer.echarts); |
||||
} |
||||
|
||||
|
||||
componentDidUpdate(preProps, preState) { |
||||
const { congestList } = this.props.BdMonitorModel; |
||||
const crosslistdom = this.createCongestList(); |
||||
this.crossflag = 1; |
||||
// 列表数据渲染完成后调用scroll2滚动
|
||||
if ( |
||||
this.crossflag == 1 && |
||||
crosslistdom && |
||||
crosslistdom.length > 0 && |
||||
JSON.stringify(crosslistdom) != JSON.stringify(preState.crosslistdom) |
||||
) { |
||||
scroll2(`scrollCross`, congestList.length, 6, crosslistdom); |
||||
this.crossflag = 0; |
||||
this.setState({ crosslistdom }); |
||||
} |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
if (this.refreshTimeout) { |
||||
clearTimeout(this.refreshTimeout); |
||||
this.refreshTimeout = null |
||||
} |
||||
if (this.crossInterval) { |
||||
clearInterval(this.crossInterval); |
||||
this.crossInterval = null; |
||||
} |
||||
|
||||
if (this.echartsInterval) { |
||||
clearInterval(this.echartsInterval); |
||||
this.echartsInterval = null; |
||||
} |
||||
if (this.ws) { |
||||
this.ws.websocket.close(); |
||||
this.ws = null; |
||||
} |
||||
} |
||||
|
||||
doRefreshData = () => { |
||||
|
||||
// console.log(new Date(), 'BdMonitorModel---doRefreshData------------------------')
|
||||
|
||||
|
||||
const { dispatch, areaFlag } = this.props; |
||||
const query = { |
||||
"areaFlag": areaFlag |
||||
}; |
||||
|
||||
const { monitor } = window.Timer |
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getTrafficNum', |
||||
payload: query |
||||
}); |
||||
dispatch({ |
||||
type: 'BdMonitorModel/getCarData', |
||||
payload: query |
||||
}); |
||||
|
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getCongestionXiazuan', |
||||
payload: query |
||||
}); |
||||
this.refreshCross(); |
||||
|
||||
if (this.refreshTimeout) { |
||||
clearTimeout(this.refreshTimeout); |
||||
this.refreshTimeout = null |
||||
} |
||||
this.getInoutBar() |
||||
|
||||
this.refreshTimeout = setTimeout(this.doRefreshData, monitor); |
||||
} |
||||
|
||||
getInoutBar = () => { |
||||
const { dispatch, areaFlag } = this.props; |
||||
const { inoutArea } = this.state |
||||
const query = { |
||||
"areaFlag": inoutArea ? inoutArea : areaFlag |
||||
}; |
||||
|
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getInOutCityNum', |
||||
payload: query |
||||
}); |
||||
} |
||||
|
||||
/* 刷新查询 */ |
||||
refreshCross = () => { |
||||
const { dispatch, areaFlag } = this.props; |
||||
const query = { |
||||
"areaFlag": areaFlag |
||||
}; |
||||
dispatch({ |
||||
type: 'BdMonitorModel/getSectionIndexList', |
||||
payload: query |
||||
}).then(data => { |
||||
if (data && data.result) { |
||||
const crosslistdom = this.createCongestList(); |
||||
this.crossflag = 1; |
||||
this.setState({ crosslistdom }); |
||||
} |
||||
}); |
||||
}; |
||||
createCongestList = () => { |
||||
const { sectionid } = this.state |
||||
const { congestList } = this.props.BdMonitorModel; |
||||
const list = congestList |
||||
const result = []; |
||||
if (list && list.length > 0) { |
||||
for (let i = 0; i < list.length; i++) { |
||||
result.push( |
||||
<BdMonitorItem |
||||
index={i} |
||||
congest={list[i]} |
||||
zhishu={zhishu} |
||||
clickRoad={this.clickRoad} |
||||
sectionID={sectionid} |
||||
basefont={this.props.basefont} |
||||
onRef={this.onRef} |
||||
/> |
||||
) |
||||
} |
||||
} |
||||
return result.concat(result) |
||||
}; |
||||
|
||||
|
||||
|
||||
onRef = (ref) => { |
||||
this.child = ref |
||||
} |
||||
|
||||
clickRoad = (sectionid) => { |
||||
this.setState({ |
||||
sectionid: sectionid === this.state.sectionid ? '' : sectionid |
||||
}) |
||||
} |
||||
|
||||
openTrafficPop = (maxjamlength) => { |
||||
const { deptlist, indexchangingtrend, indexchangingtrendspweek, milegachangingtrend, milegachangingtrendspweek, speedChangingTrend, speedChangingTrendSPWeek } = this.props.BdMonitorModel; |
||||
const left = document.body.clientWidth * 0.278; |
||||
const top = 108; |
||||
const { areaFlag } = this.props |
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
areaFlag, |
||||
deptlist, indexchangingtrend, indexchangingtrendspweek, milegachangingtrend, milegachangingtrendspweek, speedChangingTrend, speedChangingTrendSPWeek, |
||||
maxjamlength |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'trafficPop', |
||||
props: menuProps, |
||||
component: TrafficChartPop, |
||||
}, |
||||
}, |
||||
}); |
||||
}; |
||||
//在途车辆数下钻
|
||||
openOnCarPop = () => { |
||||
const { areaFlag } = this.props; |
||||
let dataObject = ""; |
||||
let resData = []; |
||||
getCarOnWayAnaly({ areaFlag }).then(data => { |
||||
if (data && data.result) { |
||||
dataObject = data.data; |
||||
} else { |
||||
message.error("获取在途车辆24小时折线图失败！"); |
||||
} |
||||
//在途车辆车牌归属地
|
||||
getCarOnWayAnalyPie({ areaFlag }).then((res) => { |
||||
if (res && res.result) { |
||||
resData = res.data.topN; |
||||
} else { |
||||
message.error("获取在途车辆车牌归属地失败！"); |
||||
} |
||||
// const left = (document.body.clientWidth - 855) / 2;
|
||||
// const top = '12vh';
|
||||
const left = document.body.clientWidth * 0.278; |
||||
const top = 108; |
||||
// console.log(dataObject);
|
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
areaFlag, |
||||
dataObject, |
||||
resData, |
||||
sjz: res.data?.sjz || '--', |
||||
xt: res.data?.xt || '--', |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'onCarPop', |
||||
props: menuProps, |
||||
component: onCarChartPop, |
||||
}, |
||||
}, |
||||
}); |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
|
||||
switchInout = (type) => { |
||||
const { inoutFlag } = this.state |
||||
if (inoutFlag !== type) { |
||||
this.setState({ |
||||
inoutFlag: type |
||||
}, () => { |
||||
this.closeInOutPop() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
switchInoutArea = (type) => { |
||||
const { inoutArea } = this.state |
||||
this.setState({ |
||||
inoutArea: inoutArea !== type ? type : '' |
||||
}, () => { |
||||
this.closeInOutPop() |
||||
this.getInoutBar() |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
showInOutCity = (params) => { |
||||
const { inoutFlag, pointid, inoutArea } = this.state |
||||
const { areaFlag } = this.props |
||||
const { inCityCarList, outCityCarList } = this.props.BdMonitorModel |
||||
let row = '' |
||||
if (inoutFlag === '0') { |
||||
row = inCityCarList[params.dataIndex] |
||||
} else { |
||||
row = outCityCarList[params.dataIndex] |
||||
} |
||||
|
||||
if (row.coordinate && row.coordinate.split(',').length > 1) { |
||||
if (pointid === row.pointid) { |
||||
this.closeInOutPop() |
||||
return |
||||
} |
||||
this.setState({ |
||||
pointid: row.pointid |
||||
}) |
||||
if (inoutPoint) { |
||||
window.MAP_OBJ.removeMonitor(inoutPoint) |
||||
} |
||||
getInOutCityFlowByPointId({ |
||||
"areaFlag": inoutArea ? inoutArea : areaFlag, |
||||
pointid: row.pointid, |
||||
// inoutflag: row.inoutflag
|
||||
inoutflag: inoutFlag |
||||
}).then(res => { |
||||
if (res && res.result) { |
||||
if (res.data.thirdsyscode) { |
||||
playVideo(res.data.thirdsyscode, res.data?.presetid || 0, row.pointname) |
||||
} |
||||
this.openInOutLinePop(row.pointname, res.data.oneDayData, res.data.lastWeekData) |
||||
} else { |
||||
message.error('获取进出城点位流量变化失败') |
||||
} |
||||
}) |
||||
//console.log("横坐标：：",row.coordinate.split(',')[0],"纵坐标",row.coordinate.split(',')[1]);
|
||||
//window.MAP_OBJ.zoomTo(15);
|
||||
|
||||
let obj = { |
||||
strcoords: row.coordinate, |
||||
title: row.pointname, |
||||
imgurl: inoutFlag === '0' ? require(`@/assets/BaoDingImg/map/incity.png`) : require(`@/assets/BaoDingImg/map/outcity.png`), |
||||
width: 24, |
||||
height: 35, |
||||
topOffset: -35 |
||||
} |
||||
window.MAP_OBJ.centerAtLatLng(row.coordinate.split(',')[0], row.coordinate.split(',')[1]); |
||||
inoutPoint = window.MAP_OBJ.showMonitor(obj); |
||||
window.MAP_OBJ.moveTo(`${row.coordinate.split(',')[0]},${row.coordinate.split(',')[1]}`, 15); |
||||
|
||||
} else { |
||||
message.info('点位坐标信息有误') |
||||
} |
||||
} |
||||
|
||||
//地图弹窗
|
||||
openInOutLinePop = (pointname, onedaydata, lastweekdata) => { |
||||
// const left = window.screen.width / 2 * 0.03;
|
||||
// const top = window.screen.height / 2 * 0.14;
|
||||
const left = window.screen.width / 2 + 140; |
||||
const top = 250; |
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
pointname, |
||||
lastweek: lastweekdata, |
||||
todayData: onedaydata, |
||||
closePop: this.closeInOutPop |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'InOutCityLinePop', |
||||
props: menuProps, |
||||
component: InOutCityLinePop, |
||||
}, |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
closeInOutPop = () => { |
||||
const { componentname } = this.props; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/closePopWindow', |
||||
payload: { |
||||
name: 'InOutCityLinePop', |
||||
}, |
||||
}); |
||||
this.setState({ |
||||
pointid: '' |
||||
}) |
||||
|
||||
if (inoutPoint) { |
||||
window.MAP_OBJ.removeMonitor(inoutPoint) |
||||
} |
||||
} |
||||
|
||||
|
||||
render() { |
||||
const { basefont, BdMonitorModel } = this.props; |
||||
const { crosslistdom, inoutFlag, pointid, inoutArea } = this.state; |
||||
const { |
||||
jamlength, |
||||
exponent, |
||||
avgspeed, |
||||
maxjamlength, |
||||
maxavgspeed, |
||||
carnum, |
||||
weekcompare, |
||||
daycompare, |
||||
bigcar, |
||||
smallcar, |
||||
localcar, |
||||
foreigncar, |
||||
datalist, |
||||
inCityCarNum, |
||||
outCityCarNum, |
||||
inCityCarList, |
||||
outCityCarList, } = BdMonitorModel; |
||||
return ( |
||||
<div |
||||
className="outline-out" |
||||
id="BdMonitorNoYD" |
||||
style={{ width: '100%', height: '100%', pointerEvents: 'auto' }} |
||||
> |
||||
<div className="outline-inner" style={{ height: '100%' }}> |
||||
<div |
||||
className="inner-padding" |
||||
style={{ height: '100%', display: 'flex', flexDirection: 'column' }} |
||||
> |
||||
<div className={styles.BdMonitorBox} style={{ fontSize: `${0.8 * basefont}px` }}> |
||||
<div className={styles.BdMonitorAll}> |
||||
<audio |
||||
ref={(ado) => { |
||||
this.ado = ado; |
||||
}} src={this.state.voice} |
||||
/> |
||||
<div className={styles.BdMonitor1} style={{height:'30%'}}> |
||||
<div style={{ fontSize: `${0.73 * basefont}px`, width: '4em' }} className={`secondTitle`}>综合态势</div> |
||||
<div className={styles.dashboard} onClick={() => this.openTrafficPop(maxjamlength)}> |
||||
<ReactEcharts |
||||
ref={e => { |
||||
this.chart1 = e; |
||||
}} |
||||
option={getBdMonitorecharts1(jamlength, exponent, avgspeed, maxjamlength, maxavgspeed)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%', cursor: 'pointer' }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div className={styles.BdMonitor2}> |
||||
<Row className={styles.AlarmSituation_row} style={{ width: '100%', height: '100%' }}> |
||||
<Col span={13}> |
||||
{/* onClick={() => this.openOnCarPop()} */} |
||||
<div className={styles.onCarpopdiv} onClick={() => this.openOnCarPop()}> |
||||
<span style={{ fontSize: `${0.69 * basefont}px` }} className={styles.row_title}>今日在途车辆数</span> |
||||
<TweenOne className={styles.scrollText} style={{ display: 'inline-block', fontSize: `${1.6 * basefont}px`, width: '50%' }} |
||||
animation={NumberAnimate( |
||||
carnum, |
||||
// 5754300,
|
||||
0, |
||||
false, |
||||
1000 |
||||
)} |
||||
> |
||||
0 |
||||
</TweenOne> |
||||
<span className={styles.BdMonitor2_company} style={{ fontSize: `${0.55 * basefont}px` }}>辆</span> |
||||
</div> |
||||
</Col> |
||||
<Col span={1}> |
||||
{/* <div className={styles.AlarmSituation1_line}> |
||||
</div> */} |
||||
</Col> |
||||
<Col span={5}> |
||||
{/* <div className={styles.AlarmSituation1_zhanbi} style={{ fontSize: `${0.55 * basefont}px` }}> |
||||
<span className={styles.zhanbi_num}>周环比</span><span className={styles.zhanbi_abs} style={{ fontSize: `${0.64 * basefont}px` }}>{weekcompare >= 0 ? weekcompare : Math.abs(weekcompare)}%</span><img style={{ width: `${0.64 * basefont}px`, height: `${0.64 * basefont}px` }} src={daycompare >= 0 ? up1 : down2} alt="" /> |
||||
|
||||
</div> */} |
||||
</Col> |
||||
<Col span={5}> |
||||
{/* <div style={{ fontSize: `${0.55 * basefont}px` }}> |
||||
<span className={styles.zhanbi_num}>日环比</span><span className={styles.zhanbi_abs} style={{ fontSize: `${0.64 * basefont}px` }}>{daycompare >= 0 ? daycompare : Math.abs(daycompare)}%</span><img style={{ width: `${0.64 * basefont}px`, height: `${0.64 * basefont}px` }} |
||||
src={daycompare >= 0 ? up1 : down2} alt="" /> |
||||
</div> */} |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className={styles.BdMonitor3}> |
||||
<Row style={{ width: '100%', height: '100%' }}> |
||||
<Col span={12} style={{ width: '50%', height: '100%' }}> |
||||
<ReactEcharts |
||||
ref={e => { |
||||
this.chart2 = e; |
||||
}} |
||||
option={getBdMonitorecharts2(bigcar, smallcar)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
</Col> |
||||
<Col span={12} style={{ width: '50%', height: '100%' }}> |
||||
<ReactEcharts |
||||
ref={e => { |
||||
this.chart3 = e; |
||||
}} |
||||
option={getBdMonitorecharts3(localcar, foreigncar)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className={styles.BdMonitor5}> |
||||
<Row style={{ width: '100%', height: '100%' }}> |
||||
<Col span={12} style={{ width: '50%', height: '100%' }}> |
||||
<div className={styles.inCityBox}> |
||||
<div className={styles.inCityKuang} style={{ |
||||
backgroundImage: `url(${inCityKuang})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat', |
||||
backgroundPosition: 'center' |
||||
}}> |
||||
<div className={styles.inCityCar} style={{ |
||||
backgroundImage: `url(${inCityCar})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat' |
||||
}}> |
||||
</div> |
||||
<div className={styles.inCityRote} style={{ |
||||
backgroundImage: `url(${inCityRote})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat' |
||||
}}> |
||||
</div> |
||||
<div className={styles.inCity_title} style={{ fontSize: `${0.7 * basefont}px` }}>进城数量</div> |
||||
<div className={styles.inCity_num}> |
||||
<TweenOne className={styles.inCityText} style={{ display: 'inline-block', fontSize: `${1.95 * basefont}px` }} |
||||
animation={NumberAnimate( |
||||
inCityCarNum, |
||||
0, |
||||
false, |
||||
1000 |
||||
)} |
||||
> |
||||
0 |
||||
</TweenOne> |
||||
<span className={styles.BdMonitor2_company} style={{ fontSize: `${0.6 * basefont}px` }}>辆</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Col> |
||||
<Col span={12} style={{ width: '50%', height: '100%' }}> |
||||
<div className={styles.inCityBox}> |
||||
<div className={styles.inCityKuang} style={{ |
||||
backgroundImage: `url(${outCityKuang})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat', |
||||
backgroundPosition: 'center' |
||||
}}> |
||||
<div className={styles.inCityCar} style={{ |
||||
backgroundImage: `url(${outCityCar})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat' |
||||
}}> |
||||
</div> |
||||
<div className={styles.inCityRote} style={{ |
||||
backgroundImage: `url(${outCityRote})`, |
||||
backgroundSize: '100% 100%', |
||||
backgroundRepeatX: 'no-repeat' |
||||
}}> |
||||
</div> |
||||
<div className={styles.inCity_title} style={{ fontSize: `${0.7 * basefont}px` }}>出城数量</div> |
||||
<div className={styles.inCity_num}> |
||||
<TweenOne className={styles.outCityText} style={{ display: 'inline-block', fontSize: `${1.95 * basefont}px` }} |
||||
animation={NumberAnimate( |
||||
outCityCarNum, |
||||
0, |
||||
false, |
||||
1000 |
||||
)} |
||||
> |
||||
0 |
||||
</TweenOne> |
||||
<span className={styles.BdMonitor2_company} style={{ fontSize: `${0.6 * basefont}px` }}>辆</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className={styles.BdMonitor6} style={{height:'30%',marginTop:'20px'}}> |
||||
<div className={styles.titles}> |
||||
<div className={`${styles.inOrOut_title} secondTitle`} style={{ fontSize: `${0.73 * basefont}px` }}>进出城排名</div> |
||||
<div style={{ display: 'flex' }}> |
||||
<div className={styles.InOutSwitch} style={{ fontSize: `${0.73 * basefont}px`, marginRight: '5px' }}> |
||||
<div className={inoutArea === '2' ? styles.checkedin : styles.nocheckin} onClick={() => this.switchInoutArea('2')}>环省</div> |
||||
<div className={inoutArea === '3' ? styles.checkedout : styles.nocheckout} onClick={() => this.switchInoutArea('3')}>环京</div> |
||||
</div> |
||||
<div className={styles.InOutSwitch} style={{ fontSize: `${0.73 * basefont}px` }}> |
||||
<div className={inoutFlag === '0' ? styles.checkedin : styles.nocheckin} onClick={() => this.switchInout('0')}>进城</div> |
||||
<div className={inoutFlag === '1' ? styles.checkedout : styles.nocheckout} onClick={() => this.switchInout('1')}>出城</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
{ |
||||
inoutFlag === '0' && |
||||
|
||||
<ReactEcharts |
||||
ref={e => { |
||||
this.chart4 = e; |
||||
}} |
||||
option={getBdMonitorecharts4(inCityCarList, pointid)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '95%', width: '100%' }} |
||||
onEvents={{ |
||||
'click': this.showInOutCity, |
||||
}} |
||||
/> |
||||
} |
||||
{ |
||||
inoutFlag === '1' && |
||||
|
||||
<ReactEcharts |
||||
ref={e => { |
||||
this.chart5 = e; |
||||
}} |
||||
option={getBdMonitorecharts5(outCityCarList, pointid)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '95%', width: '100%' }} |
||||
onEvents={{ |
||||
'click': this.showInOutCity, |
||||
}} |
||||
/> |
||||
|
||||
} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
function mapStateToProps({ BdMonitorModel, global, loading }) { |
||||
return { BdMonitorModel, global }; |
||||
} |
||||
export default connect(mapStateToProps)(BdMonitor); |
||||
@ -0,0 +1,677 @@ |
||||
|
||||
import React from 'react'; |
||||
import { Row, Col, Button, Tabs, message } from 'antd'; |
||||
import { connect } from 'dva'; |
||||
import ReactEcharts from 'echarts-for-react'; |
||||
import { getBdMonitorecharts1, getBdMonitorecharts2, getBdMonitorecharts3, getBdMonitorecharts4, getBdMonitorecharts5 } from '../BDCharts/BdMonitorEchatrs'; |
||||
import HiNumberFlip from '../../common/HiNumberFlip'; |
||||
import styles from './BdMonitor.less'; |
||||
import BdMonitorItem from './BdMonitorItem'; |
||||
import TrafficChartPop from "./TrafficChartPop"; |
||||
import onCarChartPop from "./onCarChartPop"; |
||||
import InOutCityLinePop from "./InOutCityLinePop"; |
||||
import { NumberAnimate } from '@/components/common/NumberAnimate'; |
||||
import TweenOne from 'rc-tween-one'; |
||||
import Children from 'rc-tween-one/lib/plugin/ChildrenPlugin'; |
||||
import { scroll2 } from '../../../utils/util'; |
||||
import { getInOutCityFlowByPointId, getCarOnWayAnaly, getCarOnWayAnalyPie } from "../../../services/BdMonitorService"; |
||||
import { playVideo } from '@/utils/video'; |
||||
import { getVoiceWebSocketUrl } from '@/services/bdPoliceCaseService'; |
||||
import TsmWebSocket from '@/utils/TsmWebsocket'; |
||||
|
||||
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||
const inCityKuang = require('@/assets/BaoDingImg/inCityKuang.png'); |
||||
const inCityCar = require('@/assets/BaoDingImg/inCityCar.png'); |
||||
const inCityRote = require('@/assets/BaoDingImg/inCityRote.png'); |
||||
const outCityKuang = require('@/assets/BaoDingImg/outCityKuang.png'); |
||||
const outCityCar = require('@/assets/BaoDingImg/outCityCar.png'); |
||||
const outCityRote = require('@/assets/BaoDingImg/outCityRote.png'); |
||||
const zhishu = 6; |
||||
const { TabPane } = Tabs; |
||||
TweenOne.plugins.push(Children); |
||||
let inoutPoint = ''; |
||||
class BdMonitor extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
belongingDisplay: false, |
||||
crosslistdom: [], |
||||
inoutFlag: '1', |
||||
sectionid: '', // 选中路段id
|
||||
potionid: '', // 选中
|
||||
inoutArea: '', |
||||
websocketControlIndex: '', |
||||
voice: '' |
||||
}; |
||||
this.crossflag = 0; |
||||
this.doRefreshData = this.doRefreshData.bind(this); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
const { IsSettingScene, dispatch } = this.props; |
||||
if (!IsSettingScene) { |
||||
this.doRefreshData(); |
||||
this.refreshEcharts() |
||||
} |
||||
// 下方开始创建websocket链接
|
||||
// getVoiceWebSocketUrl().then((data) => {
|
||||
// if (data && data.webSocketUrl !== undefined && data.webSocketUrl !== null) {
|
||||
// this.ws = new TsmWebSocket(data.webSocketUrl, { beatime: 10000 });
|
||||
// this.ws.onmessage = (result) => {
|
||||
// const resultData = JSON.parse(result.data);
|
||||
// console.log('接收到webscoket信息', resultData);
|
||||
// if (resultData.data && resultData.data.VOICEINF && (resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLE == ('OPEN_PAGE' || 'CLOSE'))) {
|
||||
// switch (resultData.data.VOICEINF[0].GKOPERATION) {
|
||||
// case '3':
|
||||
// // 语音打开在途车辆分析
|
||||
// message.info('语音打开在途车辆分析')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '3',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.openOnCarPop();
|
||||
// });
|
||||
// break;
|
||||
// case '4':
|
||||
// // 语音关闭在途车辆分析
|
||||
// message.info('语音关闭在途车辆分析')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '4',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.closeWebsocketModal('onCarPop');
|
||||
// })
|
||||
// break;
|
||||
// case '7':
|
||||
// // 语音打开拥堵指数
|
||||
// message.info('语音打开拥堵指数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '7',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '8':
|
||||
// // 语音关闭拥堵指数
|
||||
// message.info('语音关闭拥堵指数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '8',
|
||||
// }, () => {
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// })
|
||||
// break;
|
||||
// case '15':
|
||||
// // 语音打开拥堵里程
|
||||
// message.info('语音打开拥堵里程')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '15',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '16':
|
||||
// // 语音关闭拥堵里程
|
||||
// message.info('语音关闭拥堵里程')
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '16',
|
||||
// })
|
||||
// break;
|
||||
// case '17':
|
||||
// // 语音打开今日在途车辆数
|
||||
// message.info('语音打开今日在途车辆数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '17',
|
||||
// }, () => {
|
||||
// this.ado.play();
|
||||
// this.openOnCarPop();
|
||||
// });
|
||||
// break;
|
||||
// case '18':
|
||||
// // 语音关闭今日在途车辆数
|
||||
// message.info('语音关闭今日在途车辆数')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '18',
|
||||
// })
|
||||
// this.closeWebsocketModal('onCarPop');
|
||||
// break;
|
||||
// case '19':
|
||||
// // 语音打开平均速度
|
||||
// message.info('语音打开平均速度')
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '19',
|
||||
// }, () => {
|
||||
// const { maxjamlength } = this.props.BdMonitorModel;
|
||||
// this.ado.play();
|
||||
// this.openTrafficPop(maxjamlength);
|
||||
// });
|
||||
// break;
|
||||
// case '20':
|
||||
// // 语音关闭平均速度
|
||||
// message.info('语音关闭平均速度')
|
||||
// this.closeWebsocketModal('trafficPop');
|
||||
// this.setState({
|
||||
// voice: './video/1.wav',
|
||||
// websocketControlIndex: '20',
|
||||
// })
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// if (resultData.data && resultData.data.VOICEINF && resultData.data.VOICEINF[0].INSTRUCTIONEXAMPLENAME == '拥堵排名') {
|
||||
// const { congestList } = this.props.BdMonitorModel;
|
||||
// message.info(`语音打开拥堵排名第${resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD}`)
|
||||
// if (congestList[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1] != undefined) {
|
||||
// const item = congestList[resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD - 1]
|
||||
// this.child.openJamLinePop(item.exponents_lastweek, item.exponents_today, item.cordinate, item.sectionid)
|
||||
// } else {
|
||||
// message.error(`语音打开拥堵排名第${resultData.data.VOICEINF[0].SLOTNORMALIZEDWORD}失败`)
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
// }
|
||||
// else {
|
||||
// Modal.error({
|
||||
// title: '错误',
|
||||
// content: 'websocket连接失败!',
|
||||
// okText: '确定',
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// const { popWindows } = this.props.global
|
||||
// const { maxjamlength } = this.props.BdMonitorModel
|
||||
|
||||
// const isOpenTrafficPop = popWindows.findIndex(x => x.name === 'trafficPop') > -1
|
||||
|
||||
// if (isOpenTrafficPop) {
|
||||
// dispatch({
|
||||
// type: 'global/closePopWindow',
|
||||
// payload: {
|
||||
// name: 'trafficPop',
|
||||
// },
|
||||
// });
|
||||
// this.openTrafficPop(maxjamlength)
|
||||
// }
|
||||
} |
||||
|
||||
//关闭弹窗封装
|
||||
closeWebsocketModal = (name) => { |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/closePopWindow', |
||||
payload: { |
||||
name: name, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
|
||||
refreshEcharts = () => { |
||||
|
||||
if (this.echartsInterval) { |
||||
clearInterval(this.echartsInterval); |
||||
this.echartsInterval = null; |
||||
} |
||||
|
||||
this.echartsInterval = setInterval(() => { |
||||
const { jamlength, exponent, avgspeed, maxjamlength, maxavgspeed, bigcar, smallcar, localcar, foreigncar, inCityCarList, outCityCarList, } = this.props.BdMonitorModel; |
||||
const { pointid } = this.state; |
||||
|
||||
setTimeout(() => { |
||||
if (this.chart1) { |
||||
this.chart1.getEchartsInstance().clear() |
||||
this.chart1.getEchartsInstance().setOption(getBdMonitorecharts1(jamlength, exponent, avgspeed, maxjamlength, maxavgspeed), true); |
||||
} |
||||
|
||||
if (this.chart2) { |
||||
this.chart2.getEchartsInstance().clear() |
||||
this.chart2.getEchartsInstance().setOption(getBdMonitorecharts2(bigcar, smallcar), true); |
||||
} |
||||
|
||||
if (this.chart3) { |
||||
this.chart3.getEchartsInstance().clear() |
||||
this.chart3.getEchartsInstance().setOption(getBdMonitorecharts3(localcar, foreigncar), true); |
||||
} |
||||
|
||||
if (this.chart4) { |
||||
this.chart4.getEchartsInstance().clear() |
||||
this.chart4.getEchartsInstance().setOption(getBdMonitorecharts4(inCityCarList, pointid), true); |
||||
} |
||||
|
||||
if (this.chart5) { |
||||
this.chart5.getEchartsInstance().clear() |
||||
this.chart5.getEchartsInstance().setOption(getBdMonitorecharts5(outCityCarList, pointid), true); |
||||
} |
||||
}, 1000); |
||||
|
||||
}, window.AnimationTimer.echarts); |
||||
} |
||||
|
||||
|
||||
componentDidUpdate(preProps, preState) { |
||||
const { congestList } = this.props.BdMonitorModel; |
||||
const crosslistdom = this.createCongestList(); |
||||
this.crossflag = 1; |
||||
// 列表数据渲染完成后调用scroll2滚动
|
||||
if ( |
||||
this.crossflag == 1 && |
||||
crosslistdom && |
||||
crosslistdom.length > 0 && |
||||
JSON.stringify(crosslistdom) != JSON.stringify(preState.crosslistdom) |
||||
) { |
||||
scroll2(`scrollCross`, congestList.length, 6, crosslistdom); |
||||
this.crossflag = 0; |
||||
this.setState({ crosslistdom }); |
||||
} |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
if (this.refreshTimeout) { |
||||
clearTimeout(this.refreshTimeout); |
||||
this.refreshTimeout = null |
||||
} |
||||
if (this.crossInterval) { |
||||
clearInterval(this.crossInterval); |
||||
this.crossInterval = null; |
||||
} |
||||
|
||||
if (this.echartsInterval) { |
||||
clearInterval(this.echartsInterval); |
||||
this.echartsInterval = null; |
||||
} |
||||
if (this.ws) { |
||||
this.ws.websocket.close(); |
||||
this.ws = null; |
||||
} |
||||
} |
||||
|
||||
doRefreshData = () => { |
||||
|
||||
// console.log(new Date(), 'BdMonitorModel---doRefreshData------------------------')
|
||||
|
||||
|
||||
const { dispatch, areaFlag } = this.props; |
||||
const query = { |
||||
"areaFlag": areaFlag |
||||
}; |
||||
|
||||
const { monitor } = window.Timer |
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getTrafficNum', |
||||
payload: query |
||||
}); |
||||
dispatch({ |
||||
type: 'BdMonitorModel/getCarData', |
||||
payload: query |
||||
}); |
||||
|
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getCongestionXiazuan', |
||||
payload: query |
||||
}); |
||||
this.refreshCross(); |
||||
|
||||
if (this.refreshTimeout) { |
||||
clearTimeout(this.refreshTimeout); |
||||
this.refreshTimeout = null |
||||
} |
||||
this.getInoutBar() |
||||
|
||||
this.refreshTimeout = setTimeout(this.doRefreshData, monitor); |
||||
} |
||||
|
||||
getInoutBar = () => { |
||||
const { dispatch, areaFlag } = this.props; |
||||
const { inoutArea } = this.state |
||||
const query = { |
||||
"areaFlag": inoutArea ? inoutArea : areaFlag |
||||
}; |
||||
|
||||
|
||||
dispatch({ |
||||
type: 'BdMonitorModel/getInOutCityNum', |
||||
payload: query |
||||
}); |
||||
} |
||||
|
||||
/* 刷新查询 */ |
||||
refreshCross = () => { |
||||
const { dispatch, areaFlag } = this.props; |
||||
const query = { |
||||
"areaFlag": areaFlag |
||||
}; |
||||
dispatch({ |
||||
type: 'BdMonitorModel/getSectionIndexList', |
||||
payload: query |
||||
}).then(data => { |
||||
if (data && data.result) { |
||||
const crosslistdom = this.createCongestList(); |
||||
this.crossflag = 1; |
||||
this.setState({ crosslistdom }); |
||||
} |
||||
}); |
||||
}; |
||||
createCongestList = () => { |
||||
const { sectionid } = this.state |
||||
const { congestList } = this.props.BdMonitorModel; |
||||
const list = congestList |
||||
const result = []; |
||||
if (list && list.length > 0) { |
||||
for (let i = 0; i < list.length; i++) { |
||||
result.push( |
||||
<BdMonitorItem |
||||
index={i} |
||||
congest={list[i]} |
||||
zhishu={zhishu} |
||||
clickRoad={this.clickRoad} |
||||
sectionID={sectionid} |
||||
basefont={this.props.basefont} |
||||
onRef={this.onRef} |
||||
/> |
||||
) |
||||
} |
||||
} |
||||
return result.concat(result) |
||||
}; |
||||
|
||||
|
||||
|
||||
onRef = (ref) => { |
||||
this.child = ref |
||||
} |
||||
|
||||
clickRoad = (sectionid) => { |
||||
this.setState({ |
||||
sectionid: sectionid === this.state.sectionid ? '' : sectionid |
||||
}) |
||||
} |
||||
|
||||
openTrafficPop = (maxjamlength) => { |
||||
const { deptlist, indexchangingtrend, indexchangingtrendspweek, milegachangingtrend, milegachangingtrendspweek, speedChangingTrend, speedChangingTrendSPWeek } = this.props.BdMonitorModel; |
||||
const left = document.body.clientWidth * 0.278; |
||||
const top = 108; |
||||
const { areaFlag } = this.props |
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
areaFlag, |
||||
deptlist, indexchangingtrend, indexchangingtrendspweek, milegachangingtrend, milegachangingtrendspweek, speedChangingTrend, speedChangingTrendSPWeek, |
||||
maxjamlength |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'trafficPop', |
||||
props: menuProps, |
||||
component: TrafficChartPop, |
||||
}, |
||||
}, |
||||
}); |
||||
}; |
||||
//在途车辆数下钻
|
||||
openOnCarPop = () => { |
||||
const { areaFlag } = this.props; |
||||
let dataObject = ""; |
||||
let resData = []; |
||||
getCarOnWayAnaly({ areaFlag }).then(data => { |
||||
if (data && data.result) { |
||||
dataObject = data.data; |
||||
} else { |
||||
message.error("获取在途车辆24小时折线图失败！"); |
||||
} |
||||
//在途车辆车牌归属地
|
||||
getCarOnWayAnalyPie({ areaFlag }).then((res) => { |
||||
|
||||
if (res && res.result) { |
||||
resData = res.data.topN; |
||||
} else { |
||||
message.error("获取在途车辆车牌归属地失败！"); |
||||
} |
||||
// const left = (document.body.clientWidth - 855) / 2;
|
||||
// const top = '12vh';
|
||||
const left = document.body.clientWidth * 0.278; |
||||
const top = 108; |
||||
// console.log(dataObject);
|
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
areaFlag, |
||||
dataObject, |
||||
resData, |
||||
sjz: res.data?.sjz || '--', |
||||
xt: res.data?.xt || '--', |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'onCarPop', |
||||
props: menuProps, |
||||
component: onCarChartPop, |
||||
}, |
||||
}, |
||||
}); |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
|
||||
switchInout = (type) => { |
||||
const { inoutFlag } = this.state |
||||
if (inoutFlag !== type) { |
||||
this.setState({ |
||||
inoutFlag: type |
||||
}, () => { |
||||
this.closeInOutPop() |
||||
}) |
||||
} |
||||
} |
||||
|
||||
switchInoutArea = (type) => { |
||||
const { inoutArea } = this.state |
||||
this.setState({ |
||||
inoutArea: inoutArea !== type ? type : '' |
||||
}, () => { |
||||
this.closeInOutPop() |
||||
this.getInoutBar() |
||||
}) |
||||
} |
||||
|
||||
|
||||
|
||||
showInOutCity = (params) => { |
||||
const { inoutFlag, pointid, inoutArea } = this.state |
||||
const { areaFlag } = this.props |
||||
const { inCityCarList, outCityCarList } = this.props.BdMonitorModel |
||||
let row = '' |
||||
if (inoutFlag === '0') { |
||||
row = inCityCarList[params.dataIndex] |
||||
} else { |
||||
row = outCityCarList[params.dataIndex] |
||||
} |
||||
|
||||
if (row.coordinate && row.coordinate.split(',').length > 1) { |
||||
if (pointid === row.pointid) { |
||||
this.closeInOutPop() |
||||
return |
||||
} |
||||
this.setState({ |
||||
pointid: row.pointid |
||||
}) |
||||
if (inoutPoint) { |
||||
window.MAP_OBJ.removeMonitor(inoutPoint) |
||||
} |
||||
getInOutCityFlowByPointId({ |
||||
"areaFlag": inoutArea ? inoutArea : areaFlag, |
||||
pointid: row.pointid, |
||||
// inoutflag: row.inoutflag
|
||||
inoutflag: inoutFlag |
||||
}).then(res => { |
||||
if (res && res.result) { |
||||
if (res.data.thirdsyscode) { |
||||
playVideo(res.data.thirdsyscode, res.data?.presetid || 0, row.pointname) |
||||
} |
||||
this.openInOutLinePop(row.pointname, res.data.oneDayData, res.data.lastWeekData) |
||||
} else { |
||||
message.error('获取进出城点位流量变化失败') |
||||
} |
||||
}) |
||||
//console.log("横坐标：：",row.coordinate.split(',')[0],"纵坐标",row.coordinate.split(',')[1]);
|
||||
//window.MAP_OBJ.zoomTo(15);
|
||||
|
||||
let obj = { |
||||
strcoords: row.coordinate, |
||||
title: row.pointname, |
||||
imgurl: inoutFlag === '0' ? require(`@/assets/BaoDingImg/map/incity.png`) : require(`@/assets/BaoDingImg/map/outcity.png`), |
||||
width: 24, |
||||
height: 35, |
||||
topOffset: -35 |
||||
} |
||||
window.MAP_OBJ.centerAtLatLng(row.coordinate.split(',')[0], row.coordinate.split(',')[1]); |
||||
inoutPoint = window.MAP_OBJ.showMonitor(obj); |
||||
window.MAP_OBJ.moveTo(`${row.coordinate.split(',')[0]},${row.coordinate.split(',')[1]}`, 15); |
||||
|
||||
} else { |
||||
message.info('点位坐标信息有误') |
||||
} |
||||
} |
||||
|
||||
//地图弹窗
|
||||
openInOutLinePop = (pointname, onedaydata, lastweekdata) => { |
||||
// const left = window.screen.width / 2 * 0.03;
|
||||
// const top = window.screen.height / 2 * 0.14;
|
||||
const left = window.screen.width / 2 + 140; |
||||
const top = 250; |
||||
const menuProps = { |
||||
left, |
||||
top, |
||||
pointname, |
||||
lastweek: lastweekdata, |
||||
todayData: onedaydata, |
||||
closePop: this.closeInOutPop |
||||
}; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/openPopWindow', |
||||
payload: { |
||||
popWindow: { |
||||
name: 'InOutCityLinePop', |
||||
props: menuProps, |
||||
component: InOutCityLinePop, |
||||
}, |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
closeInOutPop = () => { |
||||
const { componentname } = this.props; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/closePopWindow', |
||||
payload: { |
||||
name: 'InOutCityLinePop', |
||||
}, |
||||
}); |
||||
this.setState({ |
||||
pointid: '' |
||||
}) |
||||
|
||||
if (inoutPoint) { |
||||
window.MAP_OBJ.removeMonitor(inoutPoint) |
||||
} |
||||
} |
||||
|
||||
|
||||
render() { |
||||
const { basefont, BdMonitorModel } = this.props; |
||||
const { crosslistdom, inoutFlag, pointid, inoutArea } = this.state; |
||||
const { |
||||
jamlength, |
||||
exponent, |
||||
avgspeed, |
||||
maxjamlength, |
||||
maxavgspeed, |
||||
carnum, |
||||
weekcompare, |
||||
daycompare, |
||||
bigcar, |
||||
smallcar, |
||||
localcar, |
||||
foreigncar, |
||||
datalist, |
||||
inCityCarNum, |
||||
outCityCarNum, |
||||
inCityCarList, |
||||
outCityCarList, } = BdMonitorModel; |
||||
return ( |
||||
<div |
||||
className="outline-out" |
||||
id="BdMonitorYD" |
||||
style={{ width: '100%', height: '100%', pointerEvents: 'auto' }} |
||||
> |
||||
<div className="outline-inner" style={{ height: '100%' }}> |
||||
<div |
||||
className="inner-padding" |
||||
style={{ height: '100%', display: 'flex', flexDirection: 'column' }} |
||||
> |
||||
<div className={styles.BdMonitorBox} style={{ fontSize: `${0.8 * basefont}px` }}> |
||||
<div className={styles.BdMonitorAll}> |
||||
<audio |
||||
ref={(ado) => { |
||||
this.ado = ado; |
||||
}} src={this.state.voice} |
||||
/> |
||||
<div className={styles.BdMonitorYD}> |
||||
<div style={{ fontSize: `${0.73 * basefont}px`, width: '4em' }} className={`secondTitle`}>拥堵排名</div> |
||||
<Row |
||||
className={`${styles.left_bottom_content} ${styles.left_bottom_across}`} |
||||
> |
||||
<div className={styles.left_bottom_acrossheader}> |
||||
<li key="crossheader_1" className={styles.left_bottom_acrossheader_num}> |
||||
排名 |
||||
</li> |
||||
<li key="crossheader_2" className={styles.left_bottom_acrossheader_roadnum}> |
||||
道路名称 |
||||
</li> |
||||
{/* <li className={styles.blank}> </li> */} |
||||
<li key="crossheader_3" className={styles.left_bottom_acrossheader_freetime}> |
||||
指数 |
||||
</li> |
||||
{/* <li key="crossheader_4" className={styles.left_bottom_acrossheader_misstime}> |
||||
变化 |
||||
</li> */} |
||||
</div> |
||||
<div id="scrollCross" className={styles.left_bottom_acrossheader_one}> |
||||
<ul className={styles.left_bottom_acrossranking}>{crosslistdom}</ul> |
||||
</div> |
||||
</Row> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
function mapStateToProps({ BdMonitorModel, global, loading }) { |
||||
return { BdMonitorModel, global }; |
||||
} |
||||
export default connect(mapStateToProps)(BdMonitor); |
||||
@ -0,0 +1,45 @@ |
||||
import React from 'react'; |
||||
import ReactEcharts from 'echarts-for-react'; |
||||
import styles from './JamLinePop.less'; |
||||
import DragHeader from '@/components/common/DragHeader/DragHeader'; |
||||
import { JamPopEcharts } from "../BDCharts/BdMonitorEchatrs"; |
||||
|
||||
|
||||
class JamLinePop extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
}; |
||||
} |
||||
|
||||
onTrafficChartPopClose = () => { |
||||
this.props.closePop() |
||||
}; |
||||
|
||||
render() { |
||||
const { left, top, lastweek, todayData } = this.props; |
||||
return ( |
||||
// <div className={styles.jam_tip_content} style={{ left:`${left * document.body.clientWidth / 100}px`, top:`${top * document.body.clientHeight / 100}px` }}>
|
||||
<div className={styles.jam_tip_content} style={{ left, top }}> |
||||
<DragHeader /> |
||||
<div className={styles.jam_tip_header}> |
||||
<p>拥堵指数</p> |
||||
<div onClick={this.onTrafficChartPopClose} className={styles.jamclose}>x</div> |
||||
</div> |
||||
<div id='jamLinePop' className={styles.jamcontent}> |
||||
<div className={styles.jam_line}> |
||||
<ReactEcharts |
||||
option={JamPopEcharts(lastweek, todayData)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
); |
||||
} |
||||
} |
||||
|
||||
export default JamLinePop; |
||||
@ -0,0 +1,67 @@ |
||||
@import '../../../themes/default.less'; |
||||
|
||||
.jam_tip_content { |
||||
width: 500px; |
||||
height: 240px; |
||||
background: @outline-bg; |
||||
border: 1px solid #1483d4; |
||||
position: absolute; |
||||
pointer-events: auto; |
||||
} |
||||
|
||||
.jam_tip_header { |
||||
height: 35px; |
||||
background: @component-inner-background; |
||||
width: 100%; |
||||
} |
||||
|
||||
.jam_tip_header p { |
||||
height: 35px; |
||||
line-height: 35px; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
float: left; |
||||
margin: 0; |
||||
margin-left: 10px; |
||||
margin-bottom: 20px; |
||||
width: 88%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.jam_tip_header div { |
||||
float: right; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: 5px 10px 5px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.jamclose { |
||||
font-size: 20px; |
||||
color: #7cbae9; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.jamtiptitle { |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 34px; |
||||
} |
||||
|
||||
.jamcontent { |
||||
width: 100%; |
||||
//height: calc(100% - 53px); |
||||
height: 180px; |
||||
padding: 10px; |
||||
|
||||
.jam_line { |
||||
width: 100%; |
||||
height: 100%; |
||||
margin: 1% 0; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
@import '../../../themes/default.less'; |
||||
|
||||
.traffic_tip_content { |
||||
width: 555px; |
||||
height: 650px; |
||||
background: @outline-bg; |
||||
border: 1px solid #1483d4; |
||||
position: absolute; |
||||
pointer-events: auto; |
||||
} |
||||
|
||||
.traffic_tip_header { |
||||
height: 35px; |
||||
background: @component-inner-background; |
||||
width: 100%; |
||||
} |
||||
|
||||
.traffic_tip_header p { |
||||
height: 35px; |
||||
line-height: 35px; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
float: left; |
||||
margin: 0; |
||||
margin-left: 10px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.traffic_tip_header div { |
||||
float: right; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: 5px 10px 5px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.trafficclose { |
||||
font-size: 20px; |
||||
color: #7cbae9; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.traffictiptitle { |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 34px; |
||||
} |
||||
|
||||
.trafficcontent { |
||||
width: 100%; |
||||
height: calc(100% - 53px); |
||||
padding: 10px; |
||||
padding-top: 0; |
||||
|
||||
.radars { |
||||
width: 100%; |
||||
height: 36%; |
||||
margin: 1% 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.radar { |
||||
width: 48%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.line { |
||||
width: 100%; |
||||
height: 30%; |
||||
margin: 1% 0; |
||||
} |
||||
} |
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,644 @@ |
||||
@import '../../../themes/default.less'; |
||||
|
||||
.BdMonitorBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #ffffff; |
||||
|
||||
.onCarpopdiv { |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.zhanbi_abs { |
||||
margin-right: 2px; |
||||
} |
||||
|
||||
.BdMonitorAll { |
||||
width: 100%; |
||||
height: 100%; |
||||
padding: 0 10px; |
||||
|
||||
.BdMonitor1 { |
||||
width: 100%; |
||||
height: 20%; |
||||
|
||||
.dashboard { |
||||
width: 100%; |
||||
height: 90%; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.BdMonitor2 { |
||||
width: 100%; |
||||
height: 3em; |
||||
|
||||
.AlarmSituation_row { |
||||
justify-content: center; |
||||
align-items: center; |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
|
||||
.row_title { |
||||
vertical-align: 22%; |
||||
} |
||||
} |
||||
|
||||
//line-height: 4em; |
||||
.scrollText { |
||||
text-align: center; |
||||
color: #00ffea; |
||||
font-family: dsDigital; |
||||
//vertical-align: bottom; |
||||
vertical-align: center; |
||||
text-shadow: 0 0 20px #071834; |
||||
// vertical-align: -4%; |
||||
} |
||||
|
||||
.AlarmSituation1_line { |
||||
width: 2px; |
||||
height: 3em; |
||||
//margin-top: 0.5em; |
||||
background: radial-gradient(rgba(57, 198, 191, 1) 0%, rgba(5, 18, 36, 0.3) 80%); |
||||
} |
||||
|
||||
.AlarmSituation1_zhanbi { |
||||
width: 100%; |
||||
//text-align: center; |
||||
} |
||||
|
||||
.zhanbi_num { |
||||
margin-right: 3%; |
||||
color: #b7dff9; |
||||
} |
||||
|
||||
.hurt_people { |
||||
color: #faa919; |
||||
margin-right: 2%; |
||||
} |
||||
|
||||
.dead_people { |
||||
color: #fc1817; |
||||
margin-right: 2%; |
||||
} |
||||
|
||||
.BdMonitor2_left, |
||||
.BdMonitor2_line, |
||||
.BdMonitor2_right { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.BdMonitor2_left { |
||||
width: 55%; |
||||
position: relative; |
||||
|
||||
.BdMonitor2_company { |
||||
position: absolute; |
||||
bottom: 1%; |
||||
color: #b7dff9; |
||||
} |
||||
} |
||||
|
||||
.BdMonitor2_right { |
||||
width: 40%; |
||||
|
||||
//margin-left: 4%; |
||||
.overdue_right { |
||||
.overdue_week { |
||||
margin-right: 2%; |
||||
color: #b6e0f9; |
||||
} |
||||
|
||||
.overdue_year { |
||||
margin-right: 2%; |
||||
} |
||||
|
||||
.changeflg { |
||||
margin-right: 5%; |
||||
} |
||||
|
||||
.overdue_day { |
||||
margin-left: 2%; |
||||
margin-right: 2%; |
||||
color: #b6e0f9; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.BdMonitor2_title { |
||||
margin-right: 4%; |
||||
} |
||||
|
||||
.numStyle1 { |
||||
width: 50%; |
||||
display: inline-block; |
||||
//padding:1px 1px 0 1px; |
||||
background: rgba(7, 24, 52, 0.5); |
||||
vertical-align: -9px; |
||||
text-align: center; |
||||
color: #04d9fb; |
||||
} |
||||
|
||||
.BdMonitor2_line { |
||||
width: 2px; |
||||
height: 2.6em; |
||||
margin: 0 2%; |
||||
background: radial-gradient(rgba(57, 198, 191, 1) 0%, rgba(5, 18, 36, 0.3) 80%); |
||||
vertical-align: -50%; |
||||
} |
||||
} |
||||
|
||||
.BdMonitor3 { |
||||
width: 100%; |
||||
height: 15%; |
||||
} |
||||
|
||||
.BdMonitor4 { |
||||
width: 100%; |
||||
height: 230px; |
||||
|
||||
//height: 20%; |
||||
.left_bottom_content { |
||||
padding: 8px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: auto; |
||||
width: 100%; |
||||
flex: auto; |
||||
} |
||||
|
||||
.left_bottom_across .left_bottom_acrossheader { |
||||
width: 100%; |
||||
height: 35px; |
||||
background-color: @component-second-title; |
||||
font-size: 0.72em; |
||||
} |
||||
|
||||
.left_bottom_acrossheader li { |
||||
float: left; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
text-align: center; |
||||
color: #cfeaf5; |
||||
list-style: none; |
||||
// font-size:20px; |
||||
} |
||||
|
||||
|
||||
.left_bottom_acrossheader_num { |
||||
width: 10%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_roadnum { |
||||
width: 40%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.blank { |
||||
width: 40%; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_freetime { |
||||
width: 50%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_misstime { |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_one { |
||||
width: 100%; |
||||
height: 160px; |
||||
overflow: hidden; |
||||
//background-color: #0c234c; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(1) .textalign div:nth-child(1) { |
||||
color: #d32910; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(2) .textalign div:nth-child(1) { |
||||
color: #e57600; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(3) .textalign div:nth-child(1) { |
||||
color: #c4901a; |
||||
} |
||||
|
||||
.left_bottom_acrossranking { |
||||
// height:410px; |
||||
// overflow: hidden; |
||||
-webkit-padding-start: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
.crossli_select { |
||||
list-style: none; |
||||
height: 32px; |
||||
width: 100%; |
||||
//background-color: #008bcb; |
||||
background-size: 100% 100%; |
||||
cursor: pointer; |
||||
margin: 3px 0; |
||||
} |
||||
|
||||
.rowSelected { |
||||
background: #1aa4fd; |
||||
} |
||||
|
||||
.lirow { |
||||
height: 100%; |
||||
font-size: 0.72em; |
||||
} |
||||
|
||||
.lirow:hover { |
||||
background: #1aa4fd; |
||||
} |
||||
|
||||
.numStyle { |
||||
width: 21px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
text-align: center; |
||||
} |
||||
|
||||
.textalignleft { |
||||
.roadname { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
|
||||
.barbox { |
||||
margin: 0 2%; |
||||
|
||||
.outbar { |
||||
.inbar { |
||||
//width: 100%; |
||||
height: 15px; |
||||
background-color: #1ca0c6; |
||||
/* 不支持线性的时候显示 */ |
||||
background-image: linear-gradient(to right, #0b2443, #1ca1c4); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ydlong { |
||||
text-align: center; |
||||
color: #00eaff; |
||||
} |
||||
|
||||
.changeUporDown { |
||||
text-align: center; |
||||
|
||||
.changedStyle { |
||||
margin-right: 4px; |
||||
} |
||||
} |
||||
} |
||||
.titles { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
|
||||
.InOutSwitch { |
||||
height: 25px; |
||||
line-height: 25px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
// border: 1px solid #17e0f4; |
||||
cursor: pointer; |
||||
pointer-events: auto; |
||||
|
||||
div { |
||||
text-align: center; |
||||
line-height: 25px; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.checkedin { |
||||
color: #ffffff; |
||||
border: 1px solid #0881c6; |
||||
background: #0881c6; |
||||
} |
||||
|
||||
.checkedout { |
||||
color: #ffffff; |
||||
border: 1px solid #0881c6; |
||||
background: #0881c6; |
||||
} |
||||
|
||||
.nocheckin { |
||||
color: #0881c6; |
||||
background: transparent; |
||||
border: 1px solid #0881c6; |
||||
} |
||||
|
||||
.nocheckout { |
||||
color: #0881c6; |
||||
background: transparent; |
||||
border: 1px solid #0881c6; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.BdMonitor5 { |
||||
width: 100%; |
||||
height: 10%; |
||||
|
||||
.inCityText { |
||||
text-align: center; |
||||
color: #04fbf8; |
||||
font-family: dsDigital; |
||||
//vertical-align: bottom; |
||||
vertical-align: center; |
||||
//text-shadow: 0 0 20px #4af9ff; |
||||
// vertical-align: -4%; |
||||
} |
||||
|
||||
.outCityText { |
||||
text-align: center; |
||||
color: #fa9604; |
||||
font-family: dsDigital; |
||||
//vertical-align: bottom; |
||||
vertical-align: center; |
||||
// text-shadow: 0 0 20px #4af9ff; |
||||
// vertical-align: -4%; |
||||
} |
||||
|
||||
.inCityBox { |
||||
width: 100%; |
||||
height: 100%; |
||||
//border: 1px #000000 solid; |
||||
|
||||
.inCityKuang { |
||||
width: 80%; |
||||
height: 4em; |
||||
//border: 1px #04d9fb solid; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
top: 44%; |
||||
/*偏移*/ |
||||
margin-top: -2em; |
||||
|
||||
//background-image: url("../../../assets/BaoDingImg/inCityKuang.png"); |
||||
.inCity_title { |
||||
position: absolute; |
||||
top: -4%; |
||||
left: 33%; |
||||
} |
||||
|
||||
.inCity_num { |
||||
width: 100%; |
||||
padding-top: 5%; |
||||
margin-top: 2%; |
||||
text-align: center; |
||||
|
||||
.shuziStyle { |
||||
color: #04d9fb; |
||||
} |
||||
} |
||||
|
||||
.inCityCar { |
||||
width: 1.2em; |
||||
height: 1em; |
||||
position: absolute; |
||||
left: -5.5%; |
||||
top: 40%; |
||||
} |
||||
|
||||
.inCityRote { |
||||
width: 2.7em; |
||||
height: 2.7em; |
||||
position: absolute; |
||||
left: -13%; |
||||
top: 20%; |
||||
animation: rotate 5s linear infinite; |
||||
} |
||||
|
||||
@keyframes rotate { |
||||
from { |
||||
transform: rotate(0deg) |
||||
} |
||||
|
||||
to { |
||||
transform: rotate(359deg) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.BdMonitor6 { |
||||
width: 100%; |
||||
height: 22%; |
||||
|
||||
.titles { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
|
||||
.InOutSwitch { |
||||
height: 25px; |
||||
line-height: 25px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
// border: 1px solid #17e0f4; |
||||
cursor: pointer; |
||||
pointer-events: auto; |
||||
|
||||
div { |
||||
text-align: center; |
||||
line-height: 25px; |
||||
padding: 0 10px; |
||||
} |
||||
|
||||
.checkedin { |
||||
color: #ffffff; |
||||
border: 1px solid #0881c6; |
||||
background: #0881c6; |
||||
} |
||||
|
||||
.checkedout { |
||||
color: #ffffff; |
||||
border: 1px solid #0881c6; |
||||
background: #0881c6; |
||||
} |
||||
|
||||
.nocheckin { |
||||
color: #0881c6; |
||||
background: transparent; |
||||
border: 1px solid #0881c6; |
||||
} |
||||
|
||||
.nocheckout { |
||||
color: #0881c6; |
||||
background: transparent; |
||||
border: 1px solid #0881c6; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.BdMonitorYD { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
//height: 20%; |
||||
.left_bottom_content { |
||||
padding: 8px 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
margin: auto; |
||||
width: 100%; |
||||
flex: auto; |
||||
height: 100%; |
||||
} |
||||
|
||||
.left_bottom_across .left_bottom_acrossheader { |
||||
width: 100%; |
||||
height: 35px; |
||||
background-color: @component-second-title; |
||||
font-size: 0.72em; |
||||
} |
||||
|
||||
.left_bottom_acrossheader li { |
||||
float: left; |
||||
height: 35px; |
||||
line-height: 35px; |
||||
text-align: center; |
||||
color: #cfeaf5; |
||||
list-style: none; |
||||
// font-size:20px; |
||||
} |
||||
|
||||
|
||||
.left_bottom_acrossheader_num { |
||||
width: 10%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_roadnum { |
||||
width: 40%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.blank { |
||||
width: 40%; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_freetime { |
||||
width: 50%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_misstime { |
||||
width: 15%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.left_bottom_acrossheader_one { |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
//background-color: #0c234c; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(1) .textalign div:nth-child(1) { |
||||
color: #d32910; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(2) .textalign div:nth-child(1) { |
||||
color: #e57600; |
||||
} |
||||
|
||||
.left_bottom_acrossranking li:nth-child(3) .textalign div:nth-child(1) { |
||||
color: #c4901a; |
||||
} |
||||
|
||||
.left_bottom_acrossranking { |
||||
// height:410px; |
||||
// overflow: hidden; |
||||
-webkit-padding-start: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
.crossli_select { |
||||
list-style: none; |
||||
height: 32px; |
||||
width: 100%; |
||||
//background-color: #008bcb; |
||||
background-size: 100% 100%; |
||||
cursor: pointer; |
||||
margin: 3px 0; |
||||
} |
||||
|
||||
.rowSelected { |
||||
background: #1aa4fd; |
||||
} |
||||
|
||||
.lirow { |
||||
height: 100%; |
||||
font-size: 0.72em; |
||||
} |
||||
|
||||
.lirow:hover { |
||||
background: #1aa4fd; |
||||
} |
||||
|
||||
.numStyle { |
||||
width: 21px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
text-align: center; |
||||
} |
||||
|
||||
.textalignleft { |
||||
.roadname { |
||||
width: 100%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
|
||||
.barbox { |
||||
margin: 0 2%; |
||||
|
||||
.outbar { |
||||
.inbar { |
||||
//width: 100%; |
||||
height: 15px; |
||||
background-color: #1ca0c6; |
||||
/* 不支持线性的时候显示 */ |
||||
background-image: linear-gradient(to right, #0b2443, #1ca1c4); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ydlong { |
||||
text-align: center; |
||||
color: #00eaff; |
||||
} |
||||
|
||||
.changeUporDown { |
||||
text-align: center; |
||||
|
||||
.changedStyle { |
||||
margin-right: 4px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,248 @@ |
||||
import React from 'react'; |
||||
import ReactEcharts from 'echarts-for-react'; |
||||
import styles from './onCarChartPop.less'; |
||||
import DragHeader from '@/components/common/DragHeader/DragHeader'; |
||||
import { getOnCarLine, getOnCarBar, getOnCarPie } from "../TrafficSituation/BDCharts/BdMonitorEchatrs"; |
||||
import { Table } from 'antd'; |
||||
import { getStringByRedis } from "../../../services/BdMonitorService"; |
||||
import fetch from 'dva/fetch'; |
||||
const { Column, ColumnGroup } = Table; |
||||
|
||||
class onCarChartPop extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
carOnwayObj: {} |
||||
}; |
||||
} |
||||
|
||||
|
||||
componentDidMount() { |
||||
const { areaFlag } = this.props; |
||||
if (areaFlag == '0') { |
||||
this.queryCarOnway(); |
||||
} |
||||
} |
||||
|
||||
// 处理redis里面的乱码 根据大括号截取
|
||||
handleRedisString = (string) => { |
||||
let str = ''; |
||||
if (string) { |
||||
let start = string.indexOf('{'); |
||||
let end = string.indexOf('}') + 1; |
||||
str = string.substring(start, end); |
||||
} |
||||
if (str) { |
||||
let obj = JSON.parse(str); |
||||
if (obj && Object.keys(obj).length) { |
||||
// 按日期重新排序
|
||||
let newObj = {}; |
||||
let newKeyArr = Object.keys(obj).sort(); |
||||
for(let i = 0; i < newKeyArr.length; i ++ ) { |
||||
newObj[parseInt(newKeyArr[i])] = obj[newKeyArr[i]]; |
||||
} |
||||
return newObj; |
||||
} else { |
||||
return obj |
||||
} |
||||
} else { |
||||
return {}; |
||||
} |
||||
} |
||||
|
||||
checkStatus(response) { |
||||
if (response.status >= 200 && response.status < 300) { |
||||
return response; |
||||
} |
||||
|
||||
const error = new Error(response.statusText); |
||||
error.response = response; |
||||
throw error; |
||||
} |
||||
|
||||
// 重写发送请求
|
||||
requestRedisApi = async (mapKey) => { |
||||
return fetch(window.redisServerUrl + '/hisense/getStringByRedis', { |
||||
method: 'POST', |
||||
body: JSON.stringify({mapKey}),
|
||||
}) |
||||
.then(this.checkStatus) |
||||
.then(response => { |
||||
return response.text(); |
||||
}) |
||||
.catch(err => {
|
||||
console.log(err);
|
||||
}); |
||||
} |
||||
|
||||
// 查询redies中的保定市24小时在途车辆
|
||||
queryCarOnway = async () => { |
||||
// 今日
|
||||
const apiDay = await this.requestRedisApi("traffic_alter_onWayNum") |
||||
// 昨日
|
||||
const apiYestday = await this.requestRedisApi("traffic_alter_onWayNumOnDay") |
||||
// 上周
|
||||
const apiWeek = await this.requestRedisApi("traffic_alter_onWayNumOnWeek") |
||||
Promise.allSettled([apiDay, apiYestday, apiWeek]).then(res => { |
||||
const [resDay, resYestday, resWeek] = res; |
||||
console.log(res, 'res'); |
||||
const dataDay = resDay.value || ""; |
||||
let todayList = this.handleRedisString(dataDay); |
||||
const dataYestday = resYestday.value || ""; |
||||
let yesterdayList = this.handleRedisString(dataYestday); |
||||
const dataWeek = resWeek.value || ""; |
||||
let lastWeekList = this.handleRedisString(dataWeek); |
||||
console.log(todayList, yesterdayList, lastWeekList, 'carOnwayObj'); |
||||
this.setState({ |
||||
carOnwayObj: { |
||||
todayList, |
||||
yesterdayList, |
||||
lastWeekList, |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
onCarChartPopClose = () => { |
||||
const { componentname } = this.props; |
||||
window.g_app._store.dispatch({ |
||||
type: 'global/closePopWindow', |
||||
payload: { |
||||
name: componentname, |
||||
}, |
||||
}); |
||||
}; |
||||
|
||||
render() { |
||||
const { carOnwayObj } = this.state; |
||||
const { left, top, areaFlag, dataObject, resData, sjz, xt } = this.props; |
||||
const dataSource = [ |
||||
{ |
||||
morning: 45, |
||||
noon: 32, |
||||
evening: 65, |
||||
}, |
||||
]; |
||||
|
||||
const columns = [ |
||||
{ |
||||
title: '早高峰', |
||||
dataIndex: 'morning', |
||||
key: 'morning', |
||||
}, |
||||
{ |
||||
title: '午高峰', |
||||
dataIndex: 'noon', |
||||
key: 'noon', |
||||
}, |
||||
{ |
||||
title: '晚高峰', |
||||
dataIndex: 'evening', |
||||
key: 'evening', |
||||
}, |
||||
]; |
||||
return ( |
||||
<div className={styles.oncar_tip_content} style={{ left, top, height: areaFlag === '0' ? 300 : 500 }}> |
||||
<DragHeader /> |
||||
<div className={styles.oncar_tip_header}> |
||||
<p>{`${areaFlag === '0' ? '保定市' : '主城区'}在途车辆分析`}</p> |
||||
<div onClick={this.onCarChartPopClose} className={styles.oncarclose}>x</div> |
||||
</div> |
||||
<div id='onCarbox' className={styles.oncarcontent}> |
||||
<div className={styles.line} style={{ height: areaFlag === '0' ? '100%' : '46%'}}> |
||||
{areaFlag == '0' ? ( |
||||
<ReactEcharts |
||||
option={getOnCarLine(carOnwayObj)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
) : ( |
||||
<ReactEcharts |
||||
option={getOnCarLine(dataObject)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
)} |
||||
</div> |
||||
{areaFlag != '0' && ( |
||||
<div className={styles.oncarEcharts}> |
||||
<div className={styles.oncarEchartsBar}> |
||||
<ReactEcharts |
||||
option={getOnCarBar(dataObject)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
</div> |
||||
<div className={styles.oncarEchartsPie}> |
||||
<ReactEcharts |
||||
option={getOnCarPie(window.yanshiData || resData)} |
||||
notMerge |
||||
lazyUpdate |
||||
style={{ height: '100%', width: '100%' }} |
||||
/> |
||||
</div> |
||||
</div> |
||||
)} |
||||
<div className={styles.fire} style={{ height: '3%', paddingLeft: '40%', textAlign: 'center',display:'none' }}> |
||||
<img src={require('@/assets/BaoDingImg/fire.svg')}></img> |
||||
<span>主城区</span> |
||||
<span style={{ color: window.cityCarColor }}>冀A</span><span style={{ color: window.cityCarColor }}>{window.cityCarNumA || sjz}</span> |
||||
<span style={{ color: window.cityCarColor, marginLeft: window.cityCarBlank }}>冀E</span><span style={{ color: window.cityCarColor }}>{window.cityCarNumE || xt}</span> |
||||
</div> |
||||
{/* <div className={styles.tableLise}> |
||||
<div className={styles.tableListTitle}>高峰时段</div> |
||||
<table className={styles.tableDiv}> |
||||
<th className={styles.tableTitle}>早高峰</th> |
||||
<th className={styles.tableTitle}>午高峰</th> |
||||
<th className={styles.tableTitle}>晚高峰</th> |
||||
<tr> |
||||
<td className={styles.timeDuantd}> |
||||
<div className={styles.timeDuan} style={{borderBottom:'1px solid'}}> |
||||
<div className={styles.rightLine}>8:00</div> |
||||
<div className={styles.rightLine}>9:00</div> |
||||
<div>10:00</div> |
||||
</div> |
||||
<div className={styles.timeDuan}> |
||||
<div className={styles.rightLine}>8238964</div> |
||||
<div className={styles.rightLine}>789</div> |
||||
<div>42676</div> |
||||
</div> |
||||
</td> |
||||
<td className={styles.timeDuantd}> |
||||
<div className={styles.timeDuan} style={{borderBottom:'1px solid'}}> |
||||
<div className={styles.rightLine}>8:00</div> |
||||
<div className={styles.rightLine}>9:00</div> |
||||
<div>10:00</div> |
||||
</div> |
||||
<div className={styles.timeDuan}> |
||||
<div className={styles.rightLine}>64</div> |
||||
<div className={styles.rightLine}>789</div> |
||||
<div>42676</div> |
||||
</div> |
||||
</td> |
||||
<td className={styles.timeDuantd}> |
||||
<div className={styles.timeDuan} style={{borderBottom:'1px solid'}}> |
||||
<div className={styles.rightLine}>8:00</div> |
||||
<div className={styles.rightLine}>9:00</div> |
||||
<div>10:00</div> |
||||
</div> |
||||
<div className={styles.timeDuan}> |
||||
<div className={styles.rightLine}>64</div> |
||||
<div className={styles.rightLine}>789</div> |
||||
<div>42676</div> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> */} |
||||
</div> |
||||
</div> |
||||
|
||||
); |
||||
} |
||||
} |
||||
|
||||
export default onCarChartPop; |
||||
@ -0,0 +1,146 @@ |
||||
@import '../../../themes/default.less'; |
||||
|
||||
.oncar_tip_content { |
||||
width: 855px; |
||||
height: 500px; |
||||
background: @outline-bg; |
||||
border: 1px solid #1483d4; |
||||
position: absolute; |
||||
pointer-events: auto; |
||||
} |
||||
|
||||
.oncar_tip_header { |
||||
height: 35px; |
||||
background: @component-inner-background; |
||||
width: 100%; |
||||
} |
||||
|
||||
.oncar_tip_header p { |
||||
height: 35px; |
||||
line-height: 35px; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
float: left; |
||||
margin: 0; |
||||
margin-left: 10px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.oncar_tip_header div { |
||||
float: right; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: 5px 10px 5px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.oncarclose { |
||||
font-size: 20px; |
||||
color: #7cbae9; |
||||
line-height: 20px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.oncartiptitle { |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 34px; |
||||
} |
||||
|
||||
.oncarcontent { |
||||
width: 100%; |
||||
height: calc(100% - 53px); |
||||
padding: 10px; |
||||
|
||||
.radars { |
||||
width: 100%; |
||||
height: 48%; |
||||
margin: 1% 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
.radar { |
||||
width: 48%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.line { |
||||
width: 100%; |
||||
height: 46%; |
||||
margin: 1% 0; |
||||
} |
||||
|
||||
.oncarEcharts { |
||||
width: 100%; |
||||
height: 48%; |
||||
margin-top: 1%; |
||||
|
||||
.oncarEchartsBar { |
||||
display: inline-block; |
||||
width: 40%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.oncarEchartsPie { |
||||
display: inline-block; |
||||
width: 60%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.tableLise { |
||||
width: 100%; |
||||
margin-top: 8%; |
||||
padding: 0 4px; |
||||
|
||||
.tableListTitle { |
||||
font-size: 1.2em; |
||||
} |
||||
|
||||
.tableDiv { |
||||
width: 100%; |
||||
text-align: center; |
||||
border: 1px solid; |
||||
margin-top: 2%; |
||||
|
||||
.tableTitle { |
||||
border-bottom: 1px solid; |
||||
border-right: 1px solid; |
||||
} |
||||
|
||||
.timeDuantd { |
||||
border-right: 1px solid; |
||||
} |
||||
|
||||
.timeDuan { |
||||
display: flex; |
||||
// justify-content: space-around; |
||||
} |
||||
|
||||
.timeDuan div { |
||||
width: 33%; |
||||
} |
||||
|
||||
.rightLine { |
||||
border-right: 1px solid; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.fire { |
||||
padding-top: 5px; |
||||
|
||||
span { |
||||
margin: 0 5px; |
||||
} |
||||
|
||||
img { |
||||
width: 22px; |
||||
height: 22px; |
||||
margin-left: 5px; |
||||
margin-top: -5px; |
||||
} |
||||
} |
||||
@ -0,0 +1,262 @@ |
||||
import React, { Suspense } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { Layout } from 'antd'; |
||||
import classNames from 'classnames'; |
||||
import isEqual from 'lodash/isEqual'; |
||||
import { formatMessage } from 'umi/locale'; |
||||
import pathToRegexp from 'path-to-regexp'; |
||||
import { ContainerQuery } from 'react-container-query'; |
||||
import DocumentTitle from 'react-document-title'; |
||||
import memoizeOne from 'memoize-one'; |
||||
import HeaderView from './Header'; |
||||
import Context from './MenuContext'; |
||||
import Footer from './Footer'; |
||||
import SettingDrawer from '@/components/SettingDrawer'; |
||||
|
||||
import MaskLayer from './MaskLayer'; |
||||
import TrackCanvas from '../components/common/TrackCanvas'; |
||||
import PageLoading from '@/components/PageLoading'; |
||||
import { isIe } from '@/utils/util'; |
||||
|
||||
import styles from './SingalLayout.less'; |
||||
|
||||
const { Content } = Layout; |
||||
const windowReloadF = () => { |
||||
window.location.reload(); |
||||
}; |
||||
// Conversion router to menu.
|
||||
function formatter(data, parentPath = '', parentAuthority, parentName) { |
||||
return data.map(item => { |
||||
let locale = 'menu'; |
||||
if (parentName && item.name) { |
||||
locale = `${parentName}.${item.name}`; |
||||
} else if (item.name) { |
||||
locale = `menu.${item.name}`; |
||||
} else if (parentName) { |
||||
locale = parentName; |
||||
} |
||||
const result = { |
||||
...item, |
||||
locale, |
||||
authority: item.authority || parentAuthority, |
||||
}; |
||||
if (item.routes) { |
||||
const children = formatter(item.routes, `${parentPath}${item.path}/`, item.authority, locale); |
||||
// Reduce memory usage
|
||||
result.children = children; |
||||
} |
||||
delete result.routes; |
||||
return result; |
||||
}); |
||||
} |
||||
|
||||
const query = { |
||||
'screen-xs': { |
||||
maxWidth: 575, |
||||
}, |
||||
'screen-sm': { |
||||
minWidth: 576, |
||||
maxWidth: 767, |
||||
}, |
||||
'screen-md': { |
||||
minWidth: 768, |
||||
maxWidth: 991, |
||||
}, |
||||
'screen-lg': { |
||||
minWidth: 992, |
||||
maxWidth: 1199, |
||||
}, |
||||
'screen-xl': { |
||||
minWidth: 1200, |
||||
maxWidth: 1599, |
||||
}, |
||||
'screen-xxl': { |
||||
minWidth: 1600, |
||||
maxWidth: 1920, |
||||
}, |
||||
'screen-2k': { |
||||
minWidth: 1921, |
||||
maxWidth: 3840 - 1, |
||||
}, |
||||
'screen-4k': { |
||||
minWidth: 1920 * 2 + 1, |
||||
maxWidth: 1920 * 4 - 1, |
||||
}, |
||||
'screen-8k': { |
||||
minWidth: 1920 * 4, |
||||
}, |
||||
}; |
||||
|
||||
class BasicLayout extends React.PureComponent { |
||||
constructor(props) { |
||||
super(props); |
||||
this.clearRAMIntervalId = ''; |
||||
this.getPageTitle = memoizeOne(this.getPageTitle); |
||||
this.getBreadcrumbNameMap = memoizeOne(this.getBreadcrumbNameMap, isEqual); |
||||
this.breadcrumbNameMap = this.getBreadcrumbNameMap(); |
||||
this.clearRAMInterval = this.clearRAMInterval.bind(this); |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.clearRAMIntervalId = setTimeout(this.clearRAMInterval, 60000); |
||||
/* let passiveSupported = false; |
||||
|
||||
try { |
||||
const options = Object.defineProperty({}, 'passive', { |
||||
// eslint-disable-next-line
|
||||
get() { |
||||
passiveSupported = true; |
||||
}, |
||||
}); |
||||
// IE感觉 刷新不彻底..参考工作台添加
|
||||
window.addEventListener('beforeunload', windowReloadF, options); |
||||
} catch (err) { |
||||
console.log(` err ${err} `); |
||||
} */ |
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
/* let passiveSupported = false; |
||||
const options = Object.defineProperty({}, 'passive', { |
||||
// eslint-disable-next-line
|
||||
get() { |
||||
passiveSupported = true; |
||||
}, |
||||
}); */ |
||||
clearTimeout(this.clearRAMIntervalId); |
||||
// window.removeEventListener('beforeunload', windowReloadF, options);
|
||||
} |
||||
|
||||
getMenuData() { |
||||
const { |
||||
route: { routes }, |
||||
} = this.props; |
||||
return formatter(routes); |
||||
} |
||||
|
||||
getContext() { |
||||
const { location } = this.props; |
||||
return { |
||||
location, |
||||
breadcrumbNameMap: this.breadcrumbNameMap, |
||||
}; |
||||
} |
||||
|
||||
getLayoutStyle = () => ({ |
||||
position: 'relative', |
||||
overflow: 'hidden' |
||||
}); |
||||
|
||||
getContentStyle = () => { |
||||
const { fixedHeader } = this.props; |
||||
return { |
||||
margin: '0px 0px 0', |
||||
paddingTop: fixedHeader ? 64 : 0, |
||||
position: 'absolute', |
||||
width: '100%', |
||||
height: '100%' |
||||
}; |
||||
}; |
||||
|
||||
/** |
||||
* 获取面包屑映射 |
||||
* @param {Object} menuData 菜单配置 |
||||
*/ |
||||
getBreadcrumbNameMap() { |
||||
const routerMap = {}; |
||||
const mergeMenuAndRouter = data => { |
||||
data.forEach(menuItem => { |
||||
if (menuItem.children) { |
||||
mergeMenuAndRouter(menuItem.children); |
||||
} |
||||
// Reduce memory usage
|
||||
routerMap[menuItem.path] = menuItem; |
||||
}); |
||||
}; |
||||
mergeMenuAndRouter(this.getMenuData()); |
||||
return routerMap; |
||||
} |
||||
|
||||
getPageTitle = pathname => { |
||||
let currRouterData = null; |
||||
// match params path
|
||||
Object.keys(this.breadcrumbNameMap).forEach(key => { |
||||
if (pathToRegexp(key).test(pathname)) { |
||||
currRouterData = this.breadcrumbNameMap[key]; |
||||
} |
||||
}); |
||||
if (!currRouterData) { |
||||
return 'Hiatmp'; |
||||
} |
||||
const message = formatMessage({ |
||||
id: currRouterData.locale || currRouterData.name, |
||||
defaultMessage: currRouterData.name, |
||||
}); |
||||
return `保定市智慧交管一体化指挥平台`; |
||||
}; |
||||
|
||||
/** |
||||
* 每过 5 秒主动释放内存 |
||||
*/ |
||||
clearRAMInterval() { |
||||
if (isIe()) { |
||||
console.log('定时清理ie缓存'); |
||||
if (!this.stopClearRAM && this.canclearIecache) { |
||||
// window.CollectGarbage(); // IE 特有 释放内存
|
||||
} |
||||
this.clearRAMIntervalId = setTimeout(this.clearRAMInterval, 20000); |
||||
} |
||||
} |
||||
|
||||
render() { |
||||
const { |
||||
children, |
||||
location: { pathname }, |
||||
} = this.props; |
||||
|
||||
const layout = ( |
||||
<Layout> |
||||
<Layout |
||||
style={{ |
||||
...this.getLayoutStyle(), |
||||
minHeight: '100vh', |
||||
}} |
||||
> |
||||
<HeaderView |
||||
menuData={{}} |
||||
handleMenuCollapse={this.handleMenuCollapse} |
||||
isMobile={false} |
||||
{...this.props} |
||||
/> |
||||
<Content style={this.getContentStyle()}> |
||||
<MaskLayer /> |
||||
{children} |
||||
</Content> |
||||
<TrackCanvas /> |
||||
</Layout> |
||||
<Suspense fallback={<PageLoading />}> |
||||
<SettingDrawer /> |
||||
</Suspense> |
||||
|
||||
<div className={styles.footer}> |
||||
<Footer /> |
||||
</div> |
||||
</Layout> |
||||
); |
||||
return ( |
||||
<React.Fragment> |
||||
<DocumentTitle title={this.getPageTitle(pathname)}> |
||||
<ContainerQuery query={query}> |
||||
{params => ( |
||||
<Context.Provider value={{ ...this.getContext(), ...params }}> |
||||
<div className={classNames({ ...params, defaulthiew: true })}>{layout}</div> |
||||
</Context.Provider> |
||||
)} |
||||
</ContainerQuery> |
||||
</DocumentTitle> |
||||
</React.Fragment> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default BasicLayout; |
||||
@ -0,0 +1,51 @@ |
||||
|
||||
import styles from './Two.less' |
||||
import TrafficSituation from '../../components/CommandPlatform/TrafficSituation'; |
||||
import EarlyWarning from '../../components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarning'; |
||||
|
||||
import MotorVehicle from '../../components/CommandPlatform/MotorVehicle'; |
||||
|
||||
|
||||
const BackImg = require('@/assets/CommandPlatform/background.png'); |
||||
const TxtBg = require('@/assets/CommandPlatform/two/txtbg.png'); |
||||
|
||||
class Two extends React.PureComponent { |
||||
constructor(props) { |
||||
super(props); |
||||
} |
||||
|
||||
|
||||
render() { |
||||
return ( |
||||
<div className={styles.container}> |
||||
<div className={styles.left}> |
||||
<div style={{ width: '50%' }}> |
||||
<TrafficSituation/> |
||||
</div> |
||||
<div style={{ width: '50%' }}> |
||||
<div style={{display:'flex',justifyContent:'space-between',alignItem:'center'}}> |
||||
<div> |
||||
<div>带班领导</div> |
||||
<div style={{background:`url(${TxtBg}) no-repeat`, width:'40%', lineHeight:'30px', textAlign:'center'}}>赵宝山</div> |
||||
</div> |
||||
<div> |
||||
<div>带班组长</div> |
||||
<div>赵宝山</div> |
||||
</div> |
||||
</div> |
||||
<EarlyWarning/> |
||||
</div> |
||||
</div> |
||||
<div className={styles.maps}></div> |
||||
<div className={styles.right}> |
||||
<div style={{ width: '50%' }}> |
||||
<MotorVehicle/> |
||||
</div> |
||||
<div style={{width:'50%'}}></div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default Two; |
||||
@ -0,0 +1,41 @@ |
||||
// @import '../themes/default.less'; |
||||
.container { |
||||
width: 100%; |
||||
height: 90vh; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 0 0.3rem; |
||||
background: url(../../assets/CommandPlatform/background.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
margin-top: 10vh; |
||||
|
||||
.left { |
||||
width: 2136px; |
||||
height: 1785px; |
||||
padding: 0 76px 0 100px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
&>div { |
||||
border: 1px solid red; |
||||
} |
||||
} |
||||
|
||||
.maps { |
||||
width: 1962px; |
||||
border: 1px solid red; |
||||
} |
||||
|
||||
.right { |
||||
width: 2131px; |
||||
height: 2055px; |
||||
padding: 0 1.6rem 0 0.6rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
&>div { |
||||
border: 1px solid red; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue