master
zhangqun
2 years ago
parent
229e267646
commit
1d72a77a34
26 changed files with 4541 additions and 0 deletions
@ -0,0 +1,129 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import styles from './Congestion.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||||
|
|
||||||
|
|
||||||
|
class Congestion extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.congestion}> |
||||||
|
<div className={styles.tit}>拥堵预警</div> |
||||||
|
<div className={styles.containerTop}> |
||||||
|
<div className={styles.top1}>拥堵路段数</div> |
||||||
|
<div className={styles.top2}> |
||||||
|
<div className={styles.num}> |
||||||
|
4 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
0 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
3 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top3}>起</div> |
||||||
|
<div className={styles.top4}> |
||||||
|
<div className={styles.interval}>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top5}> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}>10</div> |
||||||
|
<div> |
||||||
|
12</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}><img src={up1} alt="" /></div> |
||||||
|
<div> |
||||||
|
<img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.containerBottom}> |
||||||
|
<div> |
||||||
|
<div className={styles.num}> |
||||||
|
<div>246</div> |
||||||
|
<div>一级</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compare}> |
||||||
|
<div className={styles.compareFont}> |
||||||
|
<div>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div> |
||||||
|
<div>10</div> |
||||||
|
<div>19 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
<div> |
||||||
|
<img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.num}> |
||||||
|
<div>246</div> |
||||||
|
<div>二级</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compare}> |
||||||
|
<div className={styles.compareFont}> |
||||||
|
<div>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div> |
||||||
|
<div>10</div> |
||||||
|
<div>11 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
<div> |
||||||
|
<img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.num}> |
||||||
|
<div>246</div> |
||||||
|
<div>三级</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compare}> |
||||||
|
<div className={styles.compareFont}> |
||||||
|
<div>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div> |
||||||
|
<div>10</div> |
||||||
|
<div>0</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
<div> |
||||||
|
<img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Congestion; |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
.congestion { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: url(../../../assets/CommandPlatform/tit.png); |
||||||
|
background-size: 100% 100%; |
||||||
|
background-repeat:no-repeat; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.containerTop { |
||||||
|
width: 100%; |
||||||
|
height: 58px; |
||||||
|
margin-bottom: 24px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.interval { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.top1 { |
||||||
|
margin: 0 18px 0 24px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top2 { |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.num { |
||||||
|
width: 48px; |
||||||
|
height: 58px; |
||||||
|
line-height: 58px; |
||||||
|
text-align: center; |
||||||
|
font-size: 34px; |
||||||
|
border: 1px solid lime; |
||||||
|
margin-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.num:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.top3 { |
||||||
|
margin-right: 28px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top4 { |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.top5 { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.top5>div:nth-child(1) { |
||||||
|
margin-right: 10px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.containerBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 142px; |
||||||
|
|
||||||
|
.num { |
||||||
|
width: 100%; |
||||||
|
height: 62px; |
||||||
|
text-align: center; |
||||||
|
padding-bottom: 10px; |
||||||
|
margin-bottom: 6px; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.compare { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 24px; |
||||||
|
|
||||||
|
.compareFont { |
||||||
|
color: rgba(250, 250, 250, 0.8); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.compareNum { |
||||||
|
display: flex; |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,222 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './CongestionTrend.less'; |
||||||
|
|
||||||
|
import { getNowDate } from '../../../utils/util'; |
||||||
|
const serverTime = getNowDate(); |
||||||
|
|
||||||
|
function echartsOption(xAxisData, seriesData) { |
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
boundaryGap: false, |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
symbol: 'none', |
||||||
|
lineStyle: { |
||||||
|
width: 2, |
||||||
|
color: "#00FFFC", |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
color: "#fff", |
||||||
|
backgroundColor: "rgba(26, 208, 163, 1)", |
||||||
|
padding: [4, 4, 2, 4] |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 1, |
||||||
|
x2: 0, |
||||||
|
y2: 0, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "#031a45", |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "#00FFFC", |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
data: seriesData, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsDay () { |
||||||
|
let xAxisData = Array.from({length: 24}, (value, index) => index); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsWeek () { |
||||||
|
let xAxisData = Array.from({length: 7}, (value, index) => index + 1); |
||||||
|
let seriesData = [1,333,4,524,66,8888,10984]; |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsMonth () { |
||||||
|
let xAxisData = Array.from({length: 30}, (value, index) => index + 1); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsRegion () { |
||||||
|
let xAxisData = Array.from({length: 30}, (value, index) => index + 1); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
class CongestionTrend extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
arr: [ |
||||||
|
{ name: '实施', num: 6.2 }, |
||||||
|
{ name: '历史7天', num: 6.2 }, |
||||||
|
{ name: '历史30天', num: 6.2 }, |
||||||
|
{ name: '主城区', num: 6.2 } |
||||||
|
], |
||||||
|
tagNum: 0 |
||||||
|
} |
||||||
|
} |
||||||
|
componentDidMount() { |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.congestionTrend}> |
||||||
|
<div className={styles.tit}> |
||||||
|
<div>拥堵指数趋势</div> |
||||||
|
<div className={styles.tag}> |
||||||
|
{ |
||||||
|
this.state.arr.map((r, i) => ( |
||||||
|
<div key={i} className={this.state.tagNum == i ? styles.tagNum : ''} onClick={() => { |
||||||
|
this.setState({ |
||||||
|
tagNum: i |
||||||
|
}) |
||||||
|
}}>{r.name}</div> |
||||||
|
)) |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{ |
||||||
|
this.state.tagNum == 0 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsDay()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 1 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsWeek()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 2 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsMonth()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 3 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsRegion()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default CongestionTrend; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
.congestionTrend { |
||||||
|
width: 100%; |
||||||
|
.tit { |
||||||
|
font-size: 22px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 14px; |
||||||
|
.tag { |
||||||
|
|
||||||
|
&>div { |
||||||
|
font-size: 16px; |
||||||
|
padding: 4px; |
||||||
|
border: 1px solid rgb(30, 163, 194);; |
||||||
|
margin-right: 4px; |
||||||
|
text-align: center; |
||||||
|
line-height: 16px; |
||||||
|
display: inline-block; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
&>div:last-child{ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
.tagNum{ |
||||||
|
background: rgb(30, 163, 194); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,179 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './SituationDispose.less'; |
||||||
|
|
||||||
|
function echartsOption(seriesData) { |
||||||
|
let xAxisData = ['', '', '', ''] |
||||||
|
|
||||||
|
let loadingFunnel = { |
||||||
|
title: '', |
||||||
|
arrDataX: [], |
||||||
|
arrDataY: [] |
||||||
|
} |
||||||
|
//title标示文字,标示线
|
||||||
|
loadingFunnel.title = (text, top, left, color, fontstyle, fontFamily, fontsize) => { |
||||||
|
return { |
||||||
|
text: text, |
||||||
|
top: top, |
||||||
|
left: left, |
||||||
|
textstyle: { |
||||||
|
color: color, |
||||||
|
fontstyle: fontstyle, |
||||||
|
fontFamily: fontFamily, |
||||||
|
fontsize: fontsize, |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
loadingFunnel.arrDataX = ['已接警', '已到场', '已反馈'] |
||||||
|
loadingFunnel.arrDataY = [20, 30, 50] |
||||||
|
|
||||||
|
|
||||||
|
const option = { |
||||||
|
title: [ |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataX[0], '17%', '32%', '#fff', 'normal', 'sans-serif', '16'), |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataY[0], '17%', '42%', '#ffffff', 'normal', 'sans-serif', '16'), |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataX[1], '38%', '62%', '#4dc6ff', 'normal', 'sans-serif', '16'), |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataY[1], '43%', '62%', '#ffffff', 'normal', 'sans-serif', '16'), |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataX[2], '55%', '62%', '#eaad38', 'normal', 'sans-serif', '16'), |
||||||
|
loadingFunnel.title(loadingFunnel.arrDataY[2], '61%', '62%', '#ffffff', 'normal', 'sans-serif', '16') |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
show: false, |
||||||
|
formatter: function (params) { |
||||||
|
console.log(params) |
||||||
|
return params.marker + params.name + ':' + params.data.number + '万' |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "19", |
||||||
|
left: "10%", |
||||||
|
bottom: "0", |
||||||
|
// containLabel: true,
|
||||||
|
}, |
||||||
|
legend: { |
||||||
|
selectedMode: false, |
||||||
|
right: 0, |
||||||
|
textStyle: { |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
show: false, |
||||||
|
type: "category", |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
show: false, |
||||||
|
type: "value", |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [{ |
||||||
|
type: 'pictorialBar', |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
name: loadingFunnel.arrDataX[0], |
||||||
|
// z:100,
|
||||||
|
value: 20, |
||||||
|
number: loadingFunnel.arrDataY[0], |
||||||
|
symbolsize: ['130%', '90%'], |
||||||
|
symbolPosition: 'center', |
||||||
|
symboloffset: ['60%', '-250%'], |
||||||
|
symbol: 'image://Funnel1.png', |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: loadingFunnel.arrDataX[1], |
||||||
|
// z: 90,
|
||||||
|
value: 40, |
||||||
|
number: loadingFunnel.arrDataY[1], |
||||||
|
symbolsize: ['200%', '40%'], |
||||||
|
symbolPosition: 'center', |
||||||
|
symboloffset: ['-22%', '-130%'], |
||||||
|
symbol: 'image://Funnel2.png' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: loadingFunnel.arrDataX[2], |
||||||
|
// z:80,
|
||||||
|
value: 60, |
||||||
|
number: loadingFunnel.arrDataY[2], |
||||||
|
symbolsize: ['280%', '35%'],
|
||||||
|
symbolPosition: 'center', symboloffset: |
||||||
|
['-60%','10%'],
|
||||||
|
symbol: 'image://Funnel3.png' |
||||||
|
} |
||||||
|
] |
||||||
|
}] |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsData() { |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOption(seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
class SituationDispose extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
} |
||||||
|
} |
||||||
|
componentDidMount() { |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.situationDispose}> |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsData()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 180 }} |
||||||
|
/> |
||||||
|
|
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default SituationDispose; |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Progress } from 'antd'; |
||||||
|
import styles from './Rank.less'; |
||||||
|
|
||||||
|
|
||||||
|
class Rank extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
arr: [ |
||||||
|
{ name: '阳光北大街', num: 6.2 }, |
||||||
|
{ name: '东风中路', num: 6.2 }, |
||||||
|
{ name: '七一中路', num: 6.2 }, |
||||||
|
{ name: '长城北大街', num: 6.2 }, |
||||||
|
{ name: '龙泉路', num: 6.2 } |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.rank}> |
||||||
|
<div className={styles.tit}>拥堵路段排名</div> |
||||||
|
{ |
||||||
|
this.state.arr.map((r,i) => { |
||||||
|
return (<div className={styles.progress}> |
||||||
|
<div className={styles.font}> |
||||||
|
<div className={styles.left}> |
||||||
|
<img src=''></img> |
||||||
|
{r.name} |
||||||
|
</div> |
||||||
|
<div className={styles.right}> |
||||||
|
{r.num} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.progressLine}> |
||||||
|
<Progress percent={62} showInfo={false} className={styles['progress' + i]}/> |
||||||
|
</div> |
||||||
|
</div>) |
||||||
|
}) |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Rank; |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
.rank { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
font-size: 22px; |
||||||
|
height: 38px; |
||||||
|
margin-top: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.progress { |
||||||
|
margin-bottom: 24px; |
||||||
|
|
||||||
|
.font { |
||||||
|
|
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.left { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.right { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.progressLine { |
||||||
|
height: 18px; |
||||||
|
border: 1px solid rgb(32, 112, 163); |
||||||
|
border-radius: 8px; |
||||||
|
padding: 0 2px; |
||||||
|
} |
||||||
|
|
||||||
|
:global(.ant-progress-inner) { |
||||||
|
margin-top: -8px; |
||||||
|
} |
||||||
|
:global(.ant-progress-inner) { |
||||||
|
background-color: rgb(32, 112, 163); |
||||||
|
} |
||||||
|
.progress0 :global(.ant-progress-bg) { |
||||||
|
background-color: rgb(236, 21, 37) !important; |
||||||
|
} |
||||||
|
.progress1 :global(.ant-progress-bg) { |
||||||
|
background-color: rgb(220, 86, 61) !important; |
||||||
|
} |
||||||
|
.progress2 :global(.ant-progress-bg) { |
||||||
|
background-color: rgb(226, 157, 79) !important; |
||||||
|
} |
||||||
|
.progress3 :global(.ant-progress-bg) { |
||||||
|
background-color: rgb(245, 209, 69) !important; |
||||||
|
} |
||||||
|
.progress4 :global(.ant-progress-bg) { |
||||||
|
background-color: rgb(178, 200, 91) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './SituationDispose.less'; |
||||||
|
import Pyramid from './Pyramid' |
||||||
|
import SituationTable from './SituationTable' |
||||||
|
function echartsOption(seriesData) { |
||||||
|
let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] |
||||||
|
const series = [ |
||||||
|
{ name: '拥堵', color: 'rgb(38,250,228)' }, |
||||||
|
{ name: '事故', color: 'rgb(230,127,58)' }, |
||||||
|
{ name: '其他', color: 'rgb(37,160,254)' }, |
||||||
|
].map((r, sid) => { |
||||||
|
return { |
||||||
|
name: r.name, |
||||||
|
type: "bar", |
||||||
|
symbol: 'none', |
||||||
|
stack: 'total', |
||||||
|
barWidth: '20', |
||||||
|
itemStyle: { |
||||||
|
color: r.color |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
color: "#fff", |
||||||
|
backgroundColor: "rgba(135, 103, 62, 1)", |
||||||
|
padding: [4, 4, 2, 4] |
||||||
|
}, |
||||||
|
data: [100, 302, 301] |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
selectedMode: false, |
||||||
|
right: 0, |
||||||
|
textStyle: { |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsData() { |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOption(seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
class SituationDispose extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
arr: [ |
||||||
|
{ name: '实施', num: 6.2 }, |
||||||
|
{ name: '历史7天', num: 6.2 }, |
||||||
|
{ name: '历史30天', num: 6.2 }, |
||||||
|
{ name: '主城区', num: 6.2 } |
||||||
|
], |
||||||
|
tagNum: 0 |
||||||
|
} |
||||||
|
} |
||||||
|
componentDidMount() { |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.situationDispose}> |
||||||
|
<div className={styles.tit}> |
||||||
|
<div>警情处置</div> |
||||||
|
</div> |
||||||
|
<Pyramid /> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsData()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 180, marginBottom: 28 }} |
||||||
|
/> |
||||||
|
<SituationTable /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default SituationDispose; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
.situationDispose { |
||||||
|
width: 100%; |
||||||
|
.tit { |
||||||
|
font-size: 22px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin:28px 0 14px 0; |
||||||
|
.tag { |
||||||
|
|
||||||
|
&>div { |
||||||
|
font-size: 16px; |
||||||
|
padding: 4px; |
||||||
|
border: 1px solid rgb(30, 163, 194);; |
||||||
|
margin-right: 4px; |
||||||
|
text-align: center; |
||||||
|
line-height: 16px; |
||||||
|
display: inline-block; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
&>div:last-child{ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
.tagNum{ |
||||||
|
background: rgb(30, 163, 194); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import styles from './SituationNum.less'; |
||||||
|
|
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||||
|
|
||||||
|
class SituationNum extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.situationNum}> |
||||||
|
<div className={styles.tit}>指挥调度</div> |
||||||
|
<div className={styles.situationNumTop}> |
||||||
|
<div className={styles.top1}>今日警情数</div> |
||||||
|
<div className={styles.top2}> |
||||||
|
<div className={styles.num}> |
||||||
|
4 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
0 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
3 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
3 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top3}>起</div> |
||||||
|
<div className={styles.top4}> |
||||||
|
<div className={styles.interval}>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top5}> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}>10</div> |
||||||
|
<div>0</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}><img src={up1} alt="" /></div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.situationNumBottom}> |
||||||
|
<div> |
||||||
|
<div className={styles.num}> |
||||||
|
<div>246</div> |
||||||
|
<div>拥堵</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compare}> |
||||||
|
<div> |
||||||
|
<div className={styles.compareFont}>同比</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div>10</div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.compareFont}>环比</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div>0</div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<div className={styles.num}> |
||||||
|
<div>246</div> |
||||||
|
<div>事故</div> |
||||||
|
</div> |
||||||
|
<div className={styles.compare}> |
||||||
|
<div> |
||||||
|
<div className={styles.compareFont}>同比</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div>10</div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.compareFont}>环比</div> |
||||||
|
<div className={styles.compareNum}> |
||||||
|
<div>0</div> |
||||||
|
<div><img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default SituationNum; |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
.situationNum { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: lightblue; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.situationNumTop { |
||||||
|
width: 100%; |
||||||
|
height: 58px; |
||||||
|
margin-bottom: 24px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.interval { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.top1 { |
||||||
|
margin: 0 18px 0 24px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top2 { |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.num { |
||||||
|
width: 48px; |
||||||
|
height: 58px; |
||||||
|
line-height: 58px; |
||||||
|
text-align: center; |
||||||
|
font-size: 34px; |
||||||
|
border: 1px solid lime; |
||||||
|
margin-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.num:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.top3 { |
||||||
|
margin-right: 28px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top4 { |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.top5 { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.top5>div:nth-child(1) { |
||||||
|
margin-right: 10px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.situationNumBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 230px; |
||||||
|
|
||||||
|
.num { |
||||||
|
width: 100%; |
||||||
|
height: 62px; |
||||||
|
text-align: center; |
||||||
|
padding-bottom: 10px; |
||||||
|
margin-bottom: 6px; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.compare { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 24px; |
||||||
|
|
||||||
|
&>div { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.compareFont { |
||||||
|
color: rgba(250, 250, 250, 0.8); |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.compareNum { |
||||||
|
display: flex; |
||||||
|
text-align: right; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,5 @@ |
|||||||
|
.box { |
||||||
|
:global(.ant-tabs-tab) { |
||||||
|
padding: 12px 6px !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,223 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './SpeedTrend.less'; |
||||||
|
|
||||||
|
import { getNowDate } from '../../../utils/util'; |
||||||
|
const serverTime = getNowDate(); |
||||||
|
console.log(serverTime) |
||||||
|
function echartsOption(xAxisData, seriesData) { |
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
boundaryGap: false, |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
symbol: 'none', |
||||||
|
lineStyle: { |
||||||
|
width: 2, |
||||||
|
color: "rgba(218, 157, 50, 1)", |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
color: "#fff", |
||||||
|
backgroundColor: "rgba(135, 103, 62, 1)", |
||||||
|
padding: [4, 4, 2, 4] |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 1, |
||||||
|
x2: 0, |
||||||
|
y2: 0, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
|
||||||
|
color: "rgba(60, 88, 109, 1)", |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(135, 103, 62, 1)", |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
data: seriesData, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsDay () { |
||||||
|
let xAxisData = Array.from({length: 24}, (value, index) => index); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsWeek () { |
||||||
|
let xAxisData = Array.from({length: 7}, (value, index) => index + 1); |
||||||
|
let seriesData = [1,333,4,524,66,8888,10984]; |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsMonth () { |
||||||
|
let xAxisData = Array.from({length: 30}, (value, index) => index + 1); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsRegion () { |
||||||
|
let xAxisData = Array.from({length: 30}, (value, index) => index + 1); |
||||||
|
let seriesData = Array.from({length: 24}, (value, index) => index + 1); |
||||||
|
let option = echartsOption(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
class CongestionTrend extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
this.state = { |
||||||
|
arr: [ |
||||||
|
{ name: '实施', num: 6.2 }, |
||||||
|
{ name: '历史7天', num: 6.2 }, |
||||||
|
{ name: '历史30天', num: 6.2 }, |
||||||
|
{ name: '主城区', num: 6.2 } |
||||||
|
], |
||||||
|
tagNum: 0 |
||||||
|
} |
||||||
|
} |
||||||
|
componentDidMount() { |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.speedTrend}> |
||||||
|
<div className={styles.tit}> |
||||||
|
<div>平均速度趋势</div> |
||||||
|
<div className={styles.tag}> |
||||||
|
{ |
||||||
|
this.state.arr.map((r, i) => ( |
||||||
|
<div key={i} className={this.state.tagNum == i ? styles.tagNum : ''} onClick={() => { |
||||||
|
this.setState({ |
||||||
|
tagNum: i |
||||||
|
}) |
||||||
|
}}>{r.name}</div> |
||||||
|
)) |
||||||
|
} |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{ |
||||||
|
this.state.tagNum == 0 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsDay()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 1 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsWeek()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 2 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsMonth()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
{ |
||||||
|
this.state.tagNum == 3 && |
||||||
|
|
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsRegion()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 160 }} |
||||||
|
/> |
||||||
|
} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default CongestionTrend; |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
.speedTrend { |
||||||
|
width: 100%; |
||||||
|
.tit { |
||||||
|
font-size: 22px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin:12px 0 14px 0; |
||||||
|
.tag { |
||||||
|
|
||||||
|
&>div { |
||||||
|
font-size: 16px; |
||||||
|
padding: 4px; |
||||||
|
border: 1px solid rgb(30, 163, 194);; |
||||||
|
margin-right: 4px; |
||||||
|
text-align: center; |
||||||
|
line-height: 16px; |
||||||
|
display: inline-block; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
&>div:last-child{ |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
.tagNum{ |
||||||
|
background: rgb(30, 163, 194); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,147 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import styles from './Baseline.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
function echartsOptionBar(seriesData) { |
||||||
|
let xAxisData = ['基线周', '今日'] |
||||||
|
const series = [{ |
||||||
|
data: [120, 200], |
||||||
|
type: 'bar', |
||||||
|
barWidth: '24' |
||||||
|
}] |
||||||
|
|
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: 'value', |
||||||
|
axisLabel: { |
||||||
|
|
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsBar() { |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOptionBar(seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
class Baseline extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.baseline}> |
||||||
|
<div className={styles.tit}></div> |
||||||
|
<div className={styles.baselineTop}> |
||||||
|
<div> |
||||||
|
<div>84分 |
||||||
|
</div> |
||||||
|
<div>车均延误(每 10km)</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>90%</div> |
||||||
|
<div>信控道路拥堵指数</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>32%</div> |
||||||
|
<div>绿波干线平均速度</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.baselineBottom}> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
车均延误 |
||||||
|
</div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsBar()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '144px', height: 140 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div>
|
||||||
|
<div> |
||||||
|
拥堵指数 |
||||||
|
</div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsBar()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '144px', height: 140 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
平均速度 |
||||||
|
</div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsBar()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '144px', height: 140 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Baseline; |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
.baseline { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.baselineTop { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 36px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 174px; |
||||||
|
height: 84px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
width: 142px; |
||||||
|
height: 54px; |
||||||
|
margin: 0 auto; |
||||||
|
margin-bottom: 12px; |
||||||
|
font-size: 32px; |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.baselineBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 164px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 16px; |
||||||
|
line-height: 16px; |
||||||
|
height: 120px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: flex-end; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,243 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './Cars.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
function echartsOptionLine(xAxisData, seriesData) { |
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
boundaryGap: false, |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
symbol: 'none', |
||||||
|
lineStyle: { |
||||||
|
width: 2, |
||||||
|
color: "#00FFFC", |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
color: "#fff", |
||||||
|
backgroundColor: "rgba(26, 208, 163, 1)", |
||||||
|
padding: [4, 4, 2, 4] |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 1, |
||||||
|
x2: 0, |
||||||
|
y2: 0, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "#031a45", |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "#00FFFC", |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
data: seriesData, |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsLine() { |
||||||
|
let xAxisData = Array.from({ length: 24 }, (value, index) => index); |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOptionLine(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function echartsOptionBar(seriesData) { |
||||||
|
let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] |
||||||
|
const series = { |
||||||
|
data: [120, 200, 150, 80, 70, 110, 130], |
||||||
|
type: 'bar', |
||||||
|
barWidth: '10' |
||||||
|
} |
||||||
|
|
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
rotate: 30
|
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsBar() { |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOptionBar(seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
class Cars extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.cars}> |
||||||
|
<div className={styles.tit}>工程车</div> |
||||||
|
<div className={styles.carsTop}> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<img src={up1} /> |
||||||
|
84 |
||||||
|
</div> |
||||||
|
<div>工程车数据</div> |
||||||
|
<div>接入情况</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<img src={up1} /> |
||||||
|
88 |
||||||
|
</div> |
||||||
|
<div>工程车今日行</div> |
||||||
|
<div>行驶情况</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<img src={up1} /> |
||||||
|
84 |
||||||
|
</div> |
||||||
|
<div>工程车今日</div> |
||||||
|
<div>报警情况</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.carsBottom}> |
||||||
|
<div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsLine()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 110 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsBar()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 110 }} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Cars; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
.cars { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: lightblue; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin:32px 0 28px 0; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.carsTop { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 180px; |
||||||
|
height: 100px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
font-size: 22px; |
||||||
|
color: rgb(30, 186, 198); |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(3) { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.carsBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 284px; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,258 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import ReactEcharts from 'echarts-for-react'; |
||||||
|
import styles from './Construction.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
function echartsOptionLine(xAxisData, seriesData) { |
||||||
|
const option = { |
||||||
|
series: [ |
||||||
|
|
||||||
|
|
||||||
|
{ |
||||||
|
type: 'gauge', |
||||||
|
center: ['50%', '60%'], |
||||||
|
radius: 60, |
||||||
|
splitNumber: 10, |
||||||
|
progress: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
width: 16, |
||||||
|
color: [[1, '#4183a6']] |
||||||
|
} |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
width: '20%', |
||||||
|
lineHeight: 40, |
||||||
|
borderRadius: 8, |
||||||
|
offsetCenter: [0, '-15%'], |
||||||
|
fontSize: 20, |
||||||
|
fontWeight: 'bolder', |
||||||
|
formatter: '25', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 100 |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'gauge', |
||||||
|
center: ['50%', '60%'], |
||||||
|
radius: 60, |
||||||
|
splitNumber: 10, |
||||||
|
z: 10, |
||||||
|
progress: { |
||||||
|
show: true, |
||||||
|
width: 16, |
||||||
|
|
||||||
|
itemStyle: { |
||||||
|
color: color |
||||||
|
}, |
||||||
|
}, |
||||||
|
pointer: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
valueAnimation: true, |
||||||
|
width: '20%', |
||||||
|
lineHeight: 40, |
||||||
|
borderRadius: 8, |
||||||
|
offsetCenter: [0, '18%'], |
||||||
|
fontSize: 14, |
||||||
|
fontWeight: 'bolder', |
||||||
|
formatter: '{value} %', |
||||||
|
color: '#fff' |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 80 |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
] |
||||||
|
}; |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsLine() { |
||||||
|
let xAxisData = Array.from({ length: 24 }, (value, index) => index); |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOptionLine(xAxisData, seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function echartsOptionBar(seriesData) { |
||||||
|
let xAxisData = ['一大队', '二大队', '三大队', '四大队', '五大队', '六大队', '七大队'] |
||||||
|
const series = { |
||||||
|
data: [120, 200, 150, 80, 70, 110, 130], |
||||||
|
type: 'bar', |
||||||
|
barWidth: '10' |
||||||
|
} |
||||||
|
|
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
top: "24", |
||||||
|
left: "0", |
||||||
|
right: "10", |
||||||
|
bottom: "0", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: [ |
||||||
|
{ |
||||||
|
type: "category", |
||||||
|
data: xAxisData, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
margin: 14, |
||||||
|
}, |
||||||
|
rotate: 30 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
show: true, |
||||||
|
axisLabel: { |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#9fabc1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series |
||||||
|
} |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
function echartsBar() { |
||||||
|
let seriesData = Array.from({ length: 24 }, (value, index) => index + 1); |
||||||
|
let option = echartsOptionBar(seriesData) |
||||||
|
return option |
||||||
|
} |
||||||
|
|
||||||
|
class Construction extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.construction}> |
||||||
|
<div className={styles.tit}>道路施工</div> |
||||||
|
<div className={styles.constructionTop}> |
||||||
|
<div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsLine()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 110 }} |
||||||
|
/> |
||||||
|
主干道施工里程 |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsLine()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 110 }} |
||||||
|
/> |
||||||
|
施工中项目 |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<ReactEcharts |
||||||
|
ref={e => { |
||||||
|
// console.log(e)
|
||||||
|
}} |
||||||
|
option={echartsLine()} |
||||||
|
notMerge |
||||||
|
lazyUpdate |
||||||
|
style={{ width: '100%', height: 110 }} |
||||||
|
/> |
||||||
|
次干道施工里程 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.constructionBottom}> |
||||||
|
<div> |
||||||
|
<div>432</div> |
||||||
|
<div>过程巡检</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
<div>开工提醒</div> |
||||||
|
<div>0次</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>超期提醒</div> |
||||||
|
<div>0次</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>验收提醒</div> |
||||||
|
<div>0次</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Construction; |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
.construction { |
||||||
|
width: 100%; |
||||||
|
margin-top: 22px; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: lightblue; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.constructionTop { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 38px; |
||||||
|
&>div { |
||||||
|
width: 130px; |
||||||
|
text-align: center; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.constructionBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
width: 120px; |
||||||
|
height: 116px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
height: 80px; |
||||||
|
margin-bottom: 14px; |
||||||
|
font-size: 34px; |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
width: 450px; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 354px; |
||||||
|
height: 38px; |
||||||
|
line-height: 38px; |
||||||
|
margin: 0 auto; |
||||||
|
margin-bottom: 20px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-evenly; |
||||||
|
&>div:nth-child(1) { |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 18px; |
||||||
|
color: rgb(30, 186, 198); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import styles from './Controls.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
|
||||||
|
|
||||||
|
class Controls extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.control}> |
||||||
|
<div className={styles.tit}>智能信控制</div> |
||||||
|
<div className={styles.controlTop}> |
||||||
|
<div> |
||||||
|
<div>84 |
||||||
|
<span>%</span> |
||||||
|
</div> |
||||||
|
<div>路口在线率</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>90<span>%</span></div> |
||||||
|
<div>优化时长占比</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>32</div> |
||||||
|
<div>优化次数</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.controlBottom}> |
||||||
|
<div> |
||||||
|
<div>507.44</div> |
||||||
|
<div>自适应控制</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>18477</div> |
||||||
|
<div>溢流控制</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div>507.44</div> |
||||||
|
<div>可变车道控</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Controls; |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
.control { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: lightblue; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.controlTop { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 36px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 156px; |
||||||
|
height: 100px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
width: 100%; |
||||||
|
height: 66px; |
||||||
|
margin-bottom: 12px; |
||||||
|
font-size: 32px; |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.controlBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div { |
||||||
|
width: 156px; |
||||||
|
height: 100px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
margin: 16px 0 24px 0; |
||||||
|
font-size: 20px; |
||||||
|
color: rgb(30, 186, 198); |
||||||
|
} |
||||||
|
&>div:nth-child(2) { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import styles from './Opinion.less'; |
||||||
|
const up1 = require('@/assets/arrow-up.png'); // 红升
|
||||||
|
const down2 = require('@/assets/arrow-down.png'); // 绿降
|
||||||
|
|
||||||
|
|
||||||
|
class Opinion extends React.PureComponent { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.opinion}> |
||||||
|
<div className={styles.tit}>民意110</div> |
||||||
|
<div className={styles.opinionTop}> |
||||||
|
<div className={styles.top1}>历史总量</div> |
||||||
|
<div className={styles.top2}> |
||||||
|
<div className={styles.num}> |
||||||
|
4 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
0 |
||||||
|
</div> |
||||||
|
<div className={styles.num}> |
||||||
|
3 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top3}>起</div> |
||||||
|
{/* <div className={styles.top4}> |
||||||
|
<div className={styles.interval}>同比</div> |
||||||
|
<div>环比</div> |
||||||
|
</div> |
||||||
|
<div className={styles.top5}> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}>10</div> |
||||||
|
<div> |
||||||
|
12</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className={styles.interval}><img src={up1} alt="" /></div> |
||||||
|
<div> |
||||||
|
<img src={up1} alt="" /></div> |
||||||
|
</div> |
||||||
|
</div> */} |
||||||
|
</div> |
||||||
|
<div className={styles.opinionBottom}> |
||||||
|
<div> |
||||||
|
<div> |
||||||
|
1269 |
||||||
|
</div> |
||||||
|
历史办结量 |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default Opinion; |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
.opinion { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.tit { |
||||||
|
width: 100%; |
||||||
|
background: lightblue; |
||||||
|
height: 52px; |
||||||
|
padding-left: 128px; |
||||||
|
margin-bottom: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.opinionTop { |
||||||
|
width: 100%; |
||||||
|
height: 58px; |
||||||
|
margin-bottom: 24px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.interval { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.top1 { |
||||||
|
margin: 0 18px 0 24px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top2 { |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.num { |
||||||
|
width: 48px; |
||||||
|
height: 58px; |
||||||
|
line-height: 58px; |
||||||
|
text-align: center; |
||||||
|
font-size: 34px; |
||||||
|
border: 1px solid lime; |
||||||
|
margin-right: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.num:last-child { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.top3 { |
||||||
|
margin-right: 28px; |
||||||
|
line-height: 58px; |
||||||
|
} |
||||||
|
|
||||||
|
.top4 { |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.top5 { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.top5>div:nth-child(1) { |
||||||
|
margin-right: 10px; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.opinionBottom { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&>div:nth-child(1) { |
||||||
|
text-align: center; |
||||||
|
&>div{ |
||||||
|
width: 100px; |
||||||
|
height: 100px; |
||||||
|
line-height: 100px; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 12px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue