suojin
/
hiatmp_htv_new
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
master
zhangqun 2 years ago
parent 229e267646
commit 1d72a77a34
26 changed files with 4541 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 129
      src/components/CommandPlatform/left/Congestion.js
  2. 118
      src/components/CommandPlatform/left/Congestion.less
  3. 222
      src/components/CommandPlatform/left/CongestionTrend.js
  4. 30
      src/components/CommandPlatform/left/CongestionTrend.less
  5. 179
      src/components/CommandPlatform/left/Pyramid.js
  6. 0
      src/components/CommandPlatform/left/Pyramid.less
  7. 48
      src/components/CommandPlatform/left/Rank.js
  8. 56
      src/components/CommandPlatform/left/Rank.less
  9. 140
      src/components/CommandPlatform/left/SituationDispose.js
  10. 30
      src/components/CommandPlatform/left/SituationDispose.less
  11. 103
      src/components/CommandPlatform/left/SituationNum.js
  12. 121
      src/components/CommandPlatform/left/SituationNum.less
  13. 2005
      src/components/CommandPlatform/left/SituationTable.js
  14. 5
      src/components/CommandPlatform/left/SituationTable.less
  15. 223
      src/components/CommandPlatform/left/SpeedTrend.js
  16. 30
      src/components/CommandPlatform/left/SpeedTrend.less
  17. 147
      src/components/CommandPlatform/right/Baseline.js
  18. 64
      src/components/CommandPlatform/right/Baseline.less
  19. 243
      src/components/CommandPlatform/right/Cars.js
  20. 51
      src/components/CommandPlatform/right/Cars.less
  21. 258
      src/components/CommandPlatform/right/Construction.js
  22. 70
      src/components/CommandPlatform/right/Construction.less
  23. 51
      src/components/CommandPlatform/right/Controls.js
  24. 64
      src/components/CommandPlatform/right/Controls.less
  25. 68
      src/components/CommandPlatform/right/Opinion.js
  26. 86
      src/components/CommandPlatform/right/Opinion.less

129
src/components/CommandPlatform/left/Congestion.js
Unescape View File

@ -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;

118
src/components/CommandPlatform/left/Congestion.less
Unescape View File

@ -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;
}
}
}
}
}
}

222
src/components/CommandPlatform/left/CongestionTrend.js
Unescape View File

@ -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;

30
src/components/CommandPlatform/left/CongestionTrend.less
Unescape View File

@ -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);
}
}
}
}

179
src/components/CommandPlatform/left/Pyramid.js
Unescape View File

@ -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
src/components/CommandPlatform/left/Pyramid.less
Unescape View File

48
src/components/CommandPlatform/left/Rank.js
Unescape View File

@ -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;

56
src/components/CommandPlatform/left/Rank.less
Unescape View File

@ -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;
}
}
}

140
src/components/CommandPlatform/left/SituationDispose.js
Unescape View File

@ -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;

30
src/components/CommandPlatform/left/SituationDispose.less
Unescape View File

@ -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);
}
}
}
}

103
src/components/CommandPlatform/left/SituationNum.js
Unescape View File

@ -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;

121
src/components/CommandPlatform/left/SituationNum.less
Unescape View File

@ -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;
}
}
}
}
}
}

2005
src/components/CommandPlatform/left/SituationTable.js
View File

File diff suppressed because it is too large Load Diff

5
src/components/CommandPlatform/left/SituationTable.less
Unescape View File

@ -0,0 +1,5 @@
.box {
:global(.ant-tabs-tab) {
padding: 12px 6px !important;
}
}

223
src/components/CommandPlatform/left/SpeedTrend.js
Unescape View File

@ -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;

30
src/components/CommandPlatform/left/SpeedTrend.less
Unescape View File

@ -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);
}
}
}
}

147
src/components/CommandPlatform/right/Baseline.js
Unescape View File

@ -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;

64
src/components/CommandPlatform/right/Baseline.less
Unescape View File

@ -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;
}
}
}
}

243
src/components/CommandPlatform/right/Cars.js
Unescape View File

@ -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;

51
src/components/CommandPlatform/right/Cars.less
Unescape View File

@ -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;
}
}
}

258
src/components/CommandPlatform/right/Construction.js
Unescape View File

@ -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;

70
src/components/CommandPlatform/right/Construction.less
Unescape View File

@ -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);
}
}
}
}
}

51
src/components/CommandPlatform/right/Controls.js
Unescape View File

@ -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;

64
src/components/CommandPlatform/right/Controls.less
Unescape View File

@ -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;
}
}
}
}

68
src/components/CommandPlatform/right/Opinion.js
Unescape View File

@ -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;

86
src/components/CommandPlatform/right/Opinion.less
Unescape View File

@ -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;
}
}
}
}
Write Preview
Loading…
Cancel
Save