zhangqun 2 years ago
commit acc85cb8e3
  1. BIN
      src/assets/CommandPlatform/c8112e.png
  2. BIN
      src/assets/CommandPlatform/dd.png
  3. BIN
      src/assets/CommandPlatform/j520.png
  4. BIN
      src/assets/CommandPlatform/r1.png
  5. BIN
      src/assets/CommandPlatform/r2.png
  6. BIN
      src/assets/CommandPlatform/r3.png
  7. BIN
      src/assets/CommandPlatform/r4.png
  8. BIN
      src/assets/CommandPlatform/r5.png
  9. BIN
      src/assets/CommandPlatform/z10.png
  10. BIN
      src/assets/CommandPlatform/z4.png
  11. BIN
      src/assets/CommandPlatform/z5.png
  12. BIN
      src/assets/CommandPlatform/z6.png
  13. BIN
      src/assets/CommandPlatform/z7.png
  14. BIN
      src/assets/CommandPlatform/数字框.png
  15. BIN
      src/assets/CommandPlatform/用车公车.png
  16. 170
      src/components/CommandPlatform/left/BarChart2.js
  17. 37
      src/components/CommandPlatform/left/Congestion.js
  18. 170
      src/components/CommandPlatform/left/Congestion.less
  19. 104
      src/components/CommandPlatform/left/CongestionTrend.js
  20. 35
      src/components/CommandPlatform/left/CongestionTrend.less
  21. 155
      src/components/CommandPlatform/left/Pyramid.js
  22. 0
      src/components/CommandPlatform/left/Pyramid.less
  23. 10
      src/components/CommandPlatform/left/Rank.js
  24. 122
      src/components/CommandPlatform/left/Rank.less
  25. 2
      src/components/CommandPlatform/left/SituationDispose.js
  26. 19
      src/components/CommandPlatform/left/SituationDispose.less
  27. 21
      src/components/CommandPlatform/left/SituationNum.js
  28. 165
      src/components/CommandPlatform/left/SituationNum.less
  29. 103
      src/components/CommandPlatform/left/SituationTable.js
  30. 8
      src/components/CommandPlatform/left/SituationTable.less
  31. 106
      src/components/CommandPlatform/left/SpeedTrend.js
  32. 35
      src/components/CommandPlatform/left/SpeedTrend.less
  33. 12
      src/pages/CommandPlatform/One.js
  34. 3
      src/pages/CommandPlatform/One.less

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

@ -0,0 +1,170 @@
export function BarChart2(data) {
// 计算总数
const getAll = () => {
if (data.yData && data.yData.length > 0) {
return data.yData.reduce((a, b) => a + b);
}
return 0;
};
const loadingFunnel = {
title: '',
arrDataX: [],
arrDataY: [],
};
// title标示文字,标示线
loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => ({
text,
top,
left,
textStyle: {
color,
fontStyle,
fontFamily,
fontSize,
},
});
loadingFunnel.arrDataX = data?.xData;
loadingFunnel.arrDataY = data?.yData;
const option = {
title: [
loadingFunnel.title(
`———— ${loadingFunnel.arrDataX[0]} ${loadingFunnel.arrDataY[0]} ${(loadingFunnel
.arrDataY[0] /
getAll()) *
100}%`,
'12%',
'42%',
'#ffffff',
'normal',
'',
'14'
),
loadingFunnel.title(
`—— ${loadingFunnel.arrDataX[1]} ${loadingFunnel.arrDataY[1]} ${(loadingFunnel.arrDataY[1] /
getAll()) *
100}%`,
'33%',
'50%',
'#ffffff',
'normal',
'',
'14'
),
loadingFunnel.title(
`${loadingFunnel.arrDataX[2]} ${loadingFunnel.arrDataY[2]} ${(loadingFunnel.arrDataY[2] /
getAll()) *
100}%`,
'52%',
'54%',
'#ffffff',
'normal',
'',
'14'
),
],
tooltip: {
show: false,
formatter(params) {
console.log(params);
return `${params.marker + params.name}:${params.data.number}`;
},
},
grid: {
// containLabel: true,
left: '10%',
top: '10%',
bottom: '0%',
},
xAxis: {
show: false,
data: ['', '', '', ''],
axisTick: {
show: false,
},
axisLabel: {
color: '#5EA2ED',
interval: 0,
},
axisLine: {
lineStyle: {
color: '#1B5BBA',
},
},
},
yAxis: {
show: false,
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: '#1B5BBA',
},
},
axisLabel: {
color: '#5EA2ED',
interval: 0,
},
},
series: [
{
type: 'pictorialBar',
// labelLine:{
// show:true,
// length2:20,
// lineStyle:{
// color:'red',
// width:5
// }
// },
// label: {
// show: true,
// position: 'right',
// formatter: '{b}{c} 万头',
// fontSize: 16,
// color: '#e54035',
// verticalAlign:'top'
// },
data: [
{
name: loadingFunnel.arrDataX[0],
z: 100,
value: 20,
number: loadingFunnel.arrDataY[0],
symbolSize: ['130%', '90%'],
symbolPosition: 'center',
symbolOffset: ['60%', '-250%'],
symbol:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABDCAYAAAAh43M3AAAEXUlEQVR4nOXbPYxVRRjG8d9uVqCBRQuVBW2IQZBeWFypaF0CSAFEMeFTrChAPqKxkF3sxF0TNVFJRAtiY7SjwsJY0hgaEqMJiSSS4BaEkIDFnKuX5X7OmTPnLvyTk+zunXnPO092Zp53zrlDe3/8ywCwFL/9fWsO1mGu3nQYrjuBgg+xqrjO1JwLBkOYDTjS9Pvb2FhTLv9RtzBP4It5eQzjcyyqJaOmJOrkONa3+Pt6HMucywPUKcwanOrw+amiTS3UJcwQPsOSDm2WCFNqKEtG86hLmH3Y3EO7V4u22alDmBU420f7j4o+WalDmI/xZB/tl+NcRbm0Jbcwr+H1iH47ir7ZyCnMUsyW6D9bxMhCTmGmBMsfy6oiRhZyCbMRhxPEOYzxBHG6kkOYRYIfSXGvbOVCDmGOaW37Y3lJhnKhamHW4HQFcU+ruFyoUpghoXJeXEHsxUXsysqFKoXZh4kK409gf1XBqxJmhWDlq+YsxqoIXJUw5wQrXzXLhRIjOVUIMylY+FzsKO6ZlNTCLMNM4pi9MFPcOxmphTmjnO2PJXm5kFKYcWlsfyyHJCwXUgmT0vbHMix4myTlQqqBHBeset2sE3IpTQphXtT5tD83p4ScSlFWmCFhClVh+2NZLMHThbLC7Fet7Y9lAgfKBCgjzJj+TvtzU6pcKCNMLtsfy6gSTxdihZnE9tibZmS7yHIhRphlyp3252ZWRLkQI8wUVkb0q4uVmO63U7/CjAvWe6FxEJv66dCPMIs8/JLPQqHvpwv9DPJdwXIvVNYJY+iJXoVZi5NR6QwWJ4WxdKUXYRov+QyS7Y+l53KhF2EOGEzbH8srwmLckW7CDLrtj2Val3KhmzCfCNb6UWNUGFtbOgmzFduSpjNYbBPG2JJ2wtR12p+bGW1mRDthpi0s2x/LSm2eLrQSZpMeVu1HiENalAvzhWns8wvR9sfS8nh2vgAL3fbH8lC50CzMWpzIms5gcUJTudAQZhBP+3PzwMtIDWEOClb5cWeT4rxpWLDGfZ9wPcJMYWxYB5PzmDKKmRF8gN+xG0/XmdEAcAMXcH4YV3BUeMdkEhdxp77csnNHGPNWQYOjuDLS1OAufiiup7ALe/By3jyz8Su+wbe4Of/Ddg73prD2bBD29rO4XlGCObkujGWtMLYZLUShN+t/VXCFz2GLMAdvJ0kzD7eFnLfgeWEsV7t1GunWoIl7uFRco8LjzzeFY89avtDZgfv4GefxPW71G6AfYZq5hS+LazXeEHa11ZHxUnFNWDPOFz9Hk6KKvob38YLwzdiv8U+CuL0yV9xzc5HDe0qKQtrjhfu4jLfwrLCjXRKmYGoa03oPninuebnIIQmxU6kbjQXvgrBo78Je5d+Nuyr8d3yHP0rG6kiOA6k//b9FjguvZbTcIttwE58WfRvWoVJRyH9S9wveEQrXnfhJMJbzuVt8trNoe6Tom42qplI3Gjb8olCf7RbWCfhKmII36kkt8C/As56eiakjhwAAAABJRU5ErkJggg==',
},
{
name: loadingFunnel.arrDataX[1],
z: 90,
value: 40,
number: loadingFunnel.arrDataY[1],
symbolSize: ['200%', '40%'],
symbolPosition: 'center',
symbolOffset: ['-22%', '-130%'],
symbol:
'image://data:image/png;base64,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',
},
{
name: loadingFunnel.arrDataX[2],
z: 80,
value: 60,
number: loadingFunnel.arrDataY[2],
symbolSize: ['280%', '35%'],
symbolPosition: 'center',
symbolOffset: ['-60%', '10%'],
symbol:
'image://data:image/png;base64,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',
},
],
},
],
};
return option;
}

@ -1,7 +1,11 @@
import React from 'react';
import styles from './Congestion.less';
const up1 = require('@/assets/arrow-up.png'); // 红升
const car = require('@/assets/CommandPlatform/用车公车.png');
const up1 = require('@/assets/arrow-up.png');
const down2 = require('@/assets/arrow-down.png'); // 绿降
const z4 = require('@/assets/CommandPlatform/z4.png');
const z5 = require('@/assets/CommandPlatform/z5.png');
const z6 = require('@/assets/CommandPlatform/z6.png');
class Congestion extends React.PureComponent {
@ -13,7 +17,10 @@ class Congestion extends React.PureComponent {
render() {
return (
<div className={styles.congestion}>
<div className={styles.tit}>拥堵预警</div>
<div className={styles.tit}>
<img src={car} />
<div>拥堵预警</div>
</div>
<div className={styles.containerTop}>
<div className={styles.top1}>拥堵路段数</div>
<div className={styles.top2}>
@ -47,9 +54,9 @@ class Congestion extends React.PureComponent {
</div>
<div className={styles.containerBottom}>
<div>
<div className={styles.num}>
<div>246</div>
<div>一级</div>
<div className={styles.num1}>
<div style={{ color: '#fe7938'}} className={styles.numtop}>246</div>
<div className={styles.numbottom}>一级</div>
</div>
<div className={styles.compare}>
<div className={styles.compareFont}>
@ -65,16 +72,16 @@ class Congestion extends React.PureComponent {
<div>
<div><img src={up1} alt="" /></div>
<div>
<img src={up1} alt="" /></div>
<img src={down2} alt="" /></div>
</div>
</div>
</div>
</div>
<div>
<div className={styles.num}>
<div>246</div>
<div>二级</div>
<div className={styles.num2}>
<div style={{ color: '#ffad0f'}} className={styles.numtop}>246</div>
<div className={styles.numbottom}>二级</div>
</div>
<div className={styles.compare}>
<div className={styles.compareFont}>
@ -90,16 +97,16 @@ class Congestion extends React.PureComponent {
<div>
<div><img src={up1} alt="" /></div>
<div>
<img src={up1} alt="" /></div>
<img src={down2} alt="" /></div>
</div>
</div>
</div>
</div>
<div>
<div className={styles.num}>
<div>246</div>
<div>三级</div>
<div className={styles.num3}>
<div style={{ color: '#ffeb0f'}} className={styles.numtop}>246</div>
<div className={styles.numbottom}>三级</div>
</div>
<div className={styles.compare}>
<div className={styles.compareFont}>
@ -112,9 +119,9 @@ class Congestion extends React.PureComponent {
<div>0</div>
</div>
<div>
<div><img src={up1} alt="" /></div>
<div><img src={up1} alt="" /></div>
<div>
<img src={up1} alt="" /></div>
<img src={down2} alt="" /></div>
</div>
</div>
</div>

@ -5,41 +5,78 @@
width: 100%;
background: url(../../../assets/CommandPlatform/tit.png);
background-size: 100% 100%;
background-repeat:no-repeat;
height: 52px;
padding-left: 128px;
margin-bottom: 28px;
background-repeat: no-repeat;
height: 58px;
font-family: PangMenZhengDao;
font-weight: normal;
font-style: italic;
font-stretch: normal;
line-height: 16px;
letter-spacing: 6px;
color: #ffffff;
box-shadow: 0px 1px 2px 0px rgba(38, 46, 64, 0.27);
margin-bottom: 40px;
position: relative;
img {
position: absolute;
left: 120px;
top: -20px;
width: 48px;
height: 42px;
}
div {
position: absolute;
left: 180px;
top: -12px;
font-size: 44px;
}
}
.containerTop {
width: 100%;
height: 58px;
margin-bottom: 24px;
height: 95px;
margin-bottom: 44px;
display: flex;
.interval {
margin-bottom: 20px;
margin-bottom: 14px;
}
.top1 {
margin: 0 18px 0 24px;
line-height: 58px;
margin: 0 20px 0 36px;
line-height: 95px;
font-size: 30px;
font-family: MicrosoftYaHei;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
}
.top2 {
margin-right: 10px;
margin-right: 12px;
display: flex;
.num {
width: 48px;
height: 58px;
line-height: 58px;
width: 82px;
height: 95px;
line-height: 95px;
text-align: center;
font-size: 34px;
border: 1px solid lime;
margin-right: 12px;
font-family: LetsgoDigital-Regular;
font-size: 50px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 8px;
color: #ffffff;
box-shadow: 0px 10px 5px 0px rgba(1, 10, 18, 0.17);
background: url(../../../assets/CommandPlatform/数字框.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
@ -49,21 +86,45 @@
}
.top3 {
margin-right: 28px;
line-height: 58px;
margin-right: 45px;
line-height: 95px;
font-family: MicrosoftYaHei;
font-size: 29px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
}
.top4 {
margin-right: 18px;
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
}
.top5 {
display: flex;
img {
width: 30px;
height: 32px;
margin-top: 10px;
}
}
.top5>div:nth-child(1) {
margin-right: 10px;
text-align: right;
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
}
@ -73,21 +134,58 @@
justify-content: space-between;
&>div {
width: 142px;
width: 236px;
.num1 {
background: url(../../../assets/CommandPlatform/z4.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.num2 {
background: url(../../../assets/CommandPlatform/z5.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.num3 {
background: url(../../../assets/CommandPlatform/z6.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
&>div {
.num {
width: 100%;
height: 62px;
height: 82px;
text-align: center;
padding-bottom: 10px;
margin-bottom: 6px;
&>div:nth-child(1) {
font-size: 24px;
margin-bottom: 12px;
position: relative;
.numtop {
width: 100%;
position: absolute;
top: -14px;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 5px;
font-family: MicrosoftYaHei;
}
&>div:nth-child(2) {
font-size: 20px;
.numbottom {
width: 100%;
position: absolute;
top: 32px;
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
}
}
@ -98,17 +196,33 @@
padding: 0 24px;
.compareFont {
color: rgba(250, 250, 250, 0.8);
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
}
.compareNum {
display: flex;
text-align: right;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
&>div:nth-child(1) {
margin-right: 8px;
}
img {
width: 30px;
height: 30px;
margin-top: -6px;
}
}
}
}

@ -3,8 +3,8 @@ import ReactEcharts from 'echarts-for-react';
import styles from './CongestionTrend.less';
import { getNowDate } from '../../../utils/util';
const serverTime = getNowDate();
const serverTime = getNowDate();
function echartsOption(xAxisData, seriesData) {
const option = {
grid: {
@ -99,30 +99,30 @@ function echartsOption(xAxisData, seriesData) {
return option
}
function echartsDay () {
let xAxisData = Array.from({length: 24}, (value, index) => index);
let seriesData = Array.from({length: 24}, (value, index) => index + 1);
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];
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);
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);
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
}
@ -163,57 +163,57 @@ class CongestionTrend extends React.PureComponent {
</div>
</div>
{
this.state.tagNum == 0 &&
this.state.tagNum == 0 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsDay()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsDay()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
}
{
this.state.tagNum == 1 &&
this.state.tagNum == 1 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsWeek()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsWeek()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
{
this.state.tagNum == 2 &&
}
{
this.state.tagNum == 2 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsMonth()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsMonth()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
{
this.state.tagNum == 3 &&
}
{
this.state.tagNum == 3 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsRegion()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsRegion()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
}
</div>
);
}

@ -1,27 +1,44 @@
.congestionTrend {
width: 100%;
.tit {
font-size: 22px;
font-family: MicrosoftYaHei;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #feffff;
display: flex;
justify-content: space-between;
margin-bottom: 14px;
margin: 0 0 16px 0;
.tag {
&>div {
font-size: 16px;
padding: 4px;
border: 1px solid rgb(30, 163, 194);;
margin-right: 4px;
font-family: MicrosoftYaHei;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: 2px;
color: #cde9fc;
padding: 12px;
background: #0e2752;
border: 1px solid #2e84d7;
margin-right: 6px;
text-align: center;
line-height: 16px;
display: inline-block;
cursor: pointer;
}
&>div:last-child{
&>div:last-child {
margin-right: 0;
}
.tagNum{
background: rgb(30, 163, 194);
.tagNum {
color: #fff;
background: #0799b8;
}
}
}

@ -1,153 +1,8 @@
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import { BarChart2 } from './BarChart2'
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);
@ -158,6 +13,10 @@ class SituationDispose extends React.PureComponent {
}
render() {
const chart2Data = {
xData: ['已接警', '已到场', '已反馈'],
yData: [20, 30, 50],
};
return (
<div className={styles.situationDispose}>
@ -165,10 +24,10 @@ class SituationDispose extends React.PureComponent {
ref={e => {
// console.log(e)
}}
option={echartsData()}
option={BarChart2(chart2Data)}
notMerge
lazyUpdate
style={{ width: '100%', height: 180 }}
style={{ width: '100%', height: '328px' }}
/>
</div>

@ -23,19 +23,19 @@ class Rank extends React.PureComponent {
<div className={styles.rank}>
<div className={styles.tit}>拥堵路段排名</div>
{
this.state.arr.map((r,i) => {
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 className={styles.imgs + ' ' + styles[`imgs${i}`]}>{i + 1}</div>
<div className={styles.name}>{r.name}</div>
</div>
<div className={styles.right}>
<div className={styles.right+ ' ' + styles[`right${i}`]}>
{r.num}
</div>
</div>
<div className={styles.progressLine}>
<Progress percent={62} showInfo={false} className={styles['progress' + i]}/>
<Progress percent={32} showInfo={false} className={styles['progress' + i] + ' ' + styles.progress} />
</div>
</div>)
})

@ -2,13 +2,18 @@
width: 100%;
.tit {
font-size: 22px;
height: 38px;
margin-top: 32px;
height: 46px;
margin: 30px 0 30px 0;
font-family: MicrosoftYaHei;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #feffff;
}
.progress {
margin-bottom: 24px;
margin-bottom: 48px;
.font {
@ -17,16 +22,88 @@
.left {
font-size: 18px;
display: flex;
margin-bottom: 10px;
.name {
font-family: MicrosoftYaHei;
font-size: 32px;
font-weight: normal;
font-stretch: normal;
color: #ffffff;
margin-left: 18px;
line-height: 32px;
}
.imgs {
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: MicrosoftYaHei;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0;
color: #ff420f;
}
.imgs0 {
background: url(../../../assets/CommandPlatform/r1.png);
}
.imgs1 {
background: url(../../../assets/CommandPlatform/r2.png);
}
.imgs2 {
background: url(../../../assets/CommandPlatform/r3.png);
}
.imgs3 {
background: url(../../../assets/CommandPlatform/r4.png);
}
.imgs4 {
background: url(../../../assets/CommandPlatform/r5.png);
}
}
.right {
font-size: 18px;
font-family: MicrosoftYaHei;
font-size: 33px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
}
.right0 {
color: #ff1021;
}
.right1 {
color: #ff4d1d;
}
.right2 {
color: #ff9f39;
}
.right3 {
color: #f9cf3b;
}
.right4 {
color: #bdcd48;
}
}
.progressLine {
height: 18px;
border: 1px solid rgb(32, 112, 163);
border: 1px solid #0fa2ff;
border-radius: 8px;
padding: 0 2px;
}
@ -34,23 +111,44 @@
:global(.ant-progress-inner) {
margin-top: -8px;
}
:global(.ant-progress-inner) {
background-color: rgb(32, 112, 163);
background-color: #1d71a6;
}
.progress :global(.ant-progress-bg)::after {
content: '';
position: absolute;
top: -46px;
right: -54px;
width: 104px;
height: 96px;
background: url(../../../assets/CommandPlatform/c8112e.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.progress0 :global(.ant-progress-bg) {
background-color: rgb(236, 21, 37) !important;
background-color: #ff1021 !important;
position: relative;
}
.progress1 :global(.ant-progress-bg) {
background-color: rgb(220, 86, 61) !important;
background-color: #ff4d1d !important;
}
.progress2 :global(.ant-progress-bg) {
background-color: rgb(226, 157, 79) !important;
background-color: #ff9f39 !important;
}
.progress3 :global(.ant-progress-bg) {
background-color: rgb(245, 209, 69) !important;
background-color: #f9cf3b !important;
}
.progress4 :global(.ant-progress-bg) {
background-color: rgb(178, 200, 91) !important;
background-color: #bdcd48 !important;
}
}
}

@ -129,7 +129,7 @@ class SituationDispose extends React.PureComponent {
option={echartsData()}
notMerge
lazyUpdate
style={{ width: '100%', height: 180, marginBottom: 28 }}
style={{ width: '100%', height: '284px', marginBottom: 28 }}
/>
<SituationTable />
</div>

@ -1,26 +1,35 @@
.situationDispose {
width: 100%;
.tit {
font-size: 22px;
font-family: MicrosoftYaHei;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #feffff;
display: flex;
justify-content: space-between;
margin:28px 0 14px 0;
margin: 40px 0 24px 0;
.tag {
&>div {
font-size: 16px;
padding: 4px;
border: 1px solid rgb(30, 163, 194);;
border: 1px solid rgb(30, 163, 194);
margin-right: 4px;
text-align: center;
line-height: 16px;
display: inline-block;
cursor: pointer;
}
&>div:last-child{
&>div:last-child {
margin-right: 0;
}
.tagNum{
.tagNum {
background: rgb(30, 163, 194);
}
}

@ -3,6 +3,7 @@ import styles from './SituationNum.less';
const up1 = require('@/assets/arrow-up.png'); // 红升
const down2 = require('@/assets/arrow-down.png'); // 绿降
const car = require('@/assets/CommandPlatform/dd.png');
class SituationNum extends React.PureComponent {
constructor(props) {
@ -13,7 +14,10 @@ class SituationNum extends React.PureComponent {
render() {
return (
<div className={styles.situationNum}>
<div className={styles.tit}>指挥调度</div>
<div className={styles.tit}>
<img src={car} />
<div>指挥调度</div>
</div>
<div className={styles.situationNumTop}>
<div className={styles.top1}>今日警情数</div>
<div className={styles.top2}>
@ -49,8 +53,12 @@ class SituationNum extends React.PureComponent {
<div className={styles.situationNumBottom}>
<div>
<div className={styles.num}>
<div>246</div>
<div>拥堵</div>
<div className={styles.imgs + ' ' + styles.imgs1}></div>
<div className={styles.font}>
<div>246</div>
<div>拥堵</div>
</div>
</div>
<div className={styles.compare}>
<div>
@ -73,8 +81,11 @@ class SituationNum extends React.PureComponent {
<div>
<div className={styles.num}>
<div>246</div>
<div>事故</div>
<div className={styles.imgs + ' ' + styles.imgs2}></div>
<div className={styles.font}>
<div>246</div>
<div>事故</div>
</div>
</div>
<div className={styles.compare}>
<div>

@ -3,41 +3,80 @@
.tit {
width: 100%;
background: lightblue;
height: 52px;
padding-left: 128px;
margin-bottom: 28px;
background: url(../../../assets/CommandPlatform/tit.png);
background-size: 100% 100%;
background-repeat: no-repeat;
height: 58px;
font-family: PangMenZhengDao;
font-weight: normal;
font-style: italic;
font-stretch: normal;
line-height: 16px;
letter-spacing: 6px;
color: #ffffff;
box-shadow: 0px 1px 2px 0px rgba(38, 46, 64, 0.27);
margin-bottom: 40px;
position: relative;
img {
position: absolute;
left: 120px;
top: -20px;
width: 48px;
height: 42px;
}
div {
position: absolute;
left: 180px;
top: -12px;
font-size: 44px;
}
}
.situationNumTop {
width: 100%;
height: 58px;
margin-bottom: 24px;
height: 95px;
margin-bottom: 44px;
display: flex;
.interval {
margin-bottom: 20px;
margin-bottom: 14px;
}
.top1 {
margin: 0 18px 0 24px;
line-height: 58px;
margin: 0 20px 0 36px;
line-height: 95px;
font-size: 30px;
font-family: MicrosoftYaHei;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
}
.top2 {
margin-right: 10px;
margin-right: 12px;
display: flex;
.num {
width: 48px;
height: 58px;
line-height: 58px;
width: 82px;
height: 95px;
line-height: 95px;
text-align: center;
font-size: 34px;
border: 1px solid lime;
margin-right: 12px;
font-family: LetsgoDigital-Regular;
font-size: 50px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 8px;
color: #ffffff;
box-shadow: 0px 10px 5px 0px rgba(1, 10, 18, 0.17);
background: url(../../../assets/CommandPlatform/数字框.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
@ -47,21 +86,45 @@
}
.top3 {
margin-right: 28px;
line-height: 58px;
margin-right: 45px;
line-height: 95px;
font-family: MicrosoftYaHei;
font-size: 29px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
}
.top4 {
margin-right: 18px;
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
}
.top5 {
display: flex;
img {
width: 30px;
height: 32px;
margin-top: 10px;
}
}
.top5>div:nth-child(1) {
margin-right: 10px;
text-align: right;
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
}
@ -71,21 +134,58 @@
justify-content: space-around;
&>div {
width: 230px;
width: 340px;
.num {
display: flex;
width: 100%;
height: 62px;
height: 130px;
text-align: center;
padding-bottom: 10px;
margin-bottom: 6px;
&>div:nth-child(1) {
font-size: 24px;
.imgs1 {
background: url(../../../assets/CommandPlatform/z7.png);
}
&>div:nth-child(2) {
font-size: 20px;
.imgs2 {
background: url(../../../assets/CommandPlatform/z10.png);
}
.imgs {
width: 130px;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.font {
width: 240px;
height: 100%;
text-align: center;
background: url(../../../assets/CommandPlatform/j520.png);
background-size: 100% 100%;
background-repeat: no-repeat;
&>div:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 38px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #20ffed;
margin-bottom: 8px;
}
&>div:nth-child(2) {
font-family: MicrosoftYaHei;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 3px;
color: #ffffff;
}
}
}
@ -101,7 +201,12 @@
}
.compareFont {
color: rgba(250, 250, 250, 0.8);
font-family: MicrosoftYaHei;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #b7dff9;
margin-right: 18px;
}
@ -110,8 +215,20 @@
text-align: right;
&>div:nth-child(1) {
font-family: MicrosoftYaHei;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
margin-right: 8px;
}
img {
width: 30px;
height: 32px;
margin-top: 6px;
}
}
}
}

@ -1,6 +1,6 @@
import React from 'react';
import { Row, Col, Tabs, Select, DatePicker, message, Icon, Tooltip, Input } from 'antd';
import { Row, Col, Tabs, Select, DatePicker, message, Icon, Tooltip, Input, TimePicker } from 'antd';
import { connect } from 'dva';
import ReactEcharts from 'echarts-for-react';
// import { getAlarmSituationEcharts1, getAlarmSituationEcharts2, getAlarmSituationEcharts3, getNewAlarmSituationEcharts1, get24TimePoliceCaseLine, get24TimePoliceCaseLine1 } from '../BDCharts/AlarmSituationEcharts';
@ -222,7 +222,7 @@ class AlarmSituation extends React.Component {
this.doRefreshData();
this.doRefreshData1();
// this.refreshEcharts()
// this.refreshEcharts()
}
}
@ -703,33 +703,33 @@ class AlarmSituation extends React.Component {
return optionlist;
};
// //辖区
// getAreaOption = (AreaList) => {
// const optionlist = [];
// optionlist.push(<Option value="">辖区</Option>);
// if (AreaList && AreaList.length > 0) {
// for (let i = 0; i < AreaList.length; i += 1) {
// const area = AreaList[i];
// if (area.enumvalue && area.enumname) {
// optionlist.push(<Option title={area.enumname} value={area.enumvalue}>{area.enumname}</Option>);
// }
// }
// }
// return optionlist;
// };
getAreaOption = () => {
const AreaList = this.props.global.mainDeptList
getAreaOption = (AreaList) => {
const optionlist = [];
optionlist.push(<Option value="">部门</Option>);
optionlist.push(<Option value="">辖区</Option>);
if (AreaList && AreaList.length > 0) {
for (let i = 0; i < AreaList.length; i += 1) {
const area = AreaList[i];
if (area.cdepartmentid && area.deptshortname) {
optionlist.push(<Option title={area.deptshortname} value={area.cdepartmentid}>{area.deptshortname}</Option>);
if (area.enumvalue && area.enumname) {
optionlist.push(<Option title={area.enumname} value={area.enumvalue}>{area.enumname}</Option>);
}
}
}
return optionlist;
}
};
// getAreaOption = () => {
// const AreaList = this.props.global.mainDeptList
// const optionlist = [];
// optionlist.push(<Option value="">部门</Option>);
// if (AreaList && AreaList.length > 0) {
// for (let i = 0; i < AreaList.length; i += 1) {
// const area = AreaList[i];
// if (area.cdepartmentid && area.deptshortname) {
// optionlist.push(<Option title={area.deptshortname} value={area.cdepartmentid}>{area.deptshortname}</Option>);
// }
// }
// }
// return optionlist;
// }
createPoliceList = (policeCaseList) => {
const {
selectSourceTab,//当前选中的警情来源
@ -1608,7 +1608,7 @@ class AlarmSituation extends React.Component {
let selectDiv = [];
selectDiv.push(
<Row style={{ width: '100%' }}>
<Col span={6}>
<Col span={5}>
<Select style={{ width: '96%' }}
notFoundContent="暂无数据"
defaultValue=""
@ -1618,7 +1618,7 @@ class AlarmSituation extends React.Component {
{this.getSourceOption(CaseSourceList)}
</Select>
</Col>
<Col span={6}>
<Col span={5}>
<Select style={{ width: '96%' }}
notFoundContent="暂无数据"
defaultValue=""
@ -1628,7 +1628,7 @@ class AlarmSituation extends React.Component {
{this.getTypeOption(CaseCategoryList)}
</Select>
</Col>
{/* <Col span={6}>
<Col span={5}>
<Select style={{ width: '96%' }}
notFoundContent="暂无数据"
defaultValue=""
@ -1637,8 +1637,8 @@ class AlarmSituation extends React.Component {
>
{this.getLevelOption()}
</Select>
</Col> */}
<Col span={6}>
</Col>
<Col span={5}>
<Select style={{ width: '96%' }}
notFoundContent="暂无数据"
defaultValue=""
@ -1649,7 +1649,8 @@ class AlarmSituation extends React.Component {
{this.getAreaOption(AreaList)}
</Select>
</Col>
<Col span={6}>
{/* <Col span={6}>
<Search
className={styles.select}
placeholder="地址/描述"
@ -1661,16 +1662,16 @@ class AlarmSituation extends React.Component {
})
}}
/>
</Col> */}
<Col span={4} className={styles.timePicker}>
<RangePicker style={{ width: '100%' }}
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder="时"
// onChange={onChange}
// onOk={onOk}
/>
</Col>
{/*<Col span={5} className={styles.timePicker}>*/}
{/*<RangePicker style={{width:'100%'}}*/}
{/*showTime={{ format: 'HH:mm' }}*/}
{/*format="YYYY-MM-DD HH:mm"*/}
{/*placeholder="时"*/}
{/*// onChange={onChange}*/}
{/*// onOk={onOk}*/}
{/*/>*/}
{/*</Col>*/}
</Row>
)
return selectDiv;
@ -1916,16 +1917,16 @@ class AlarmSituation extends React.Component {
<PoliceCaseAddModal {...policeCaseAddModal} />
<div className={styles.AlarmSituationBox} >
<div className={styles.AlarmSituationAll}>
<div className={styles.policeCaseDiv}>
<div className={styles.AlarmSituation3}>
<Tabs activeKey={selectTab} defaultActiveKey="1" onChange={this.getTabKey}
className={stylesSituationTable.box}
>
<TabPane tab={<span style={{ fontSize: `16px` }}>已接警25
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{nothandingNum !== null ? nothandingNum : 0}</span>) */}
<TabPane tab={<span className={stylesSituationTable.tagn}>已接警25
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{nothandingNum !== null ? nothandingNum : 0}</span>) */}
</span>} key="1">
{this.getSelectDiv()}
<div id="scrollPoliceSituation1" className={styles.AlarmSituation_list}>
@ -1939,8 +1940,8 @@ class AlarmSituation extends React.Component {
>{policelistdom}</ul>
</div>
</TabPane>
<TabPane tab={<span style={{ fontSize: `16px` }}>已派警128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{alreadyNum !== null ? alreadyNum : 0}</span>) */}
<TabPane tab={<span className={stylesSituationTable.tagn}>已派警128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{alreadyNum !== null ? alreadyNum : 0}</span>) */}
</span>} key="3">
{this.getSelectDiv()}
<div id="scrollPoliceSituation3" className={styles.AlarmSituation_list}>
@ -1954,8 +1955,8 @@ class AlarmSituation extends React.Component {
>{policelistdom}</ul>
</div>
</TabPane>
<TabPane tab={<span style={{ fontSize: `16px` }}>已到达128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{arriveNum !== null ? arriveNum : 0}</span>) */}
<TabPane tab={<span className={stylesSituationTable.tagn}>已到达128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{arriveNum !== null ? arriveNum : 0}</span>) */}
</span>} key="11">
{this.getSelectDiv()}
<div id="scrollPoliceSituation11" className={styles.AlarmSituation_list}>
@ -1969,12 +1970,12 @@ class AlarmSituation extends React.Component {
>{policelistdom}</ul>
</div>
</TabPane>
<TabPane tab={<span style={{ fontSize: `16px` }}>已完成128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{handedNum !== null ? handedNum : 0}</span>) */}
<TabPane tab={<span className={stylesSituationTable.tagn}>已完成128
{/* (<span className={styles.AlarmSituation_tabnum} style={{ fontSize: `${0.64 * basefont}px` }}>{handedNum !== null ? handedNum : 0}</span>) */}
</span>} key="7">
{this.getSelectDiv()}
<div id="scrollPoliceSituation7" className={styles.AlarmSituation_list}
style={{ height: 190 }}>
<div id="scrollPoliceSituation7" className={styles.AlarmSituation_list}
style={{ height: 190 }}>
<ul
className={styles.AlarmSituation_ul}
style={{ overflowY: 'auto', height: 190 }}
@ -1987,10 +1988,10 @@ class AlarmSituation extends React.Component {
</TabPane>
</Tabs>
</div>
</div>
</div>
</div>
</div>

@ -2,4 +2,12 @@
:global(.ant-tabs-tab) {
padding: 12px 6px !important;
}
}
.tagn {
font-family: MicrosoftYaHei;
font-size: 32px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
}

@ -3,8 +3,8 @@ import ReactEcharts from 'echarts-for-react';
import styles from './SpeedTrend.less';
import { getNowDate } from '../../../utils/util';
const serverTime = getNowDate();
console.log(serverTime)
const serverTime = getNowDate();
console.log(serverTime)
function echartsOption(xAxisData, seriesData) {
const option = {
grid: {
@ -82,7 +82,7 @@ function echartsOption(xAxisData, seriesData) {
colorStops: [
{
offset: 0,
color: "rgba(60, 88, 109, 1)",
},
{
@ -100,30 +100,30 @@ function echartsOption(xAxisData, seriesData) {
return option
}
function echartsDay () {
let xAxisData = Array.from({length: 24}, (value, index) => index);
let seriesData = Array.from({length: 24}, (value, index) => index + 1);
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];
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);
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);
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
}
@ -164,57 +164,57 @@ class CongestionTrend extends React.PureComponent {
</div>
</div>
{
this.state.tagNum == 0 &&
this.state.tagNum == 0 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsDay()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsDay()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
}
{
this.state.tagNum == 1 &&
this.state.tagNum == 1 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsWeek()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsWeek()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
{
this.state.tagNum == 2 &&
}
{
this.state.tagNum == 2 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsMonth()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsMonth()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
{
this.state.tagNum == 3 &&
}
{
this.state.tagNum == 3 &&
<ReactEcharts
ref={e => {
// console.log(e)
}}
option={echartsRegion()}
notMerge
lazyUpdate
style={{ width: '100%', height: 160 }}
ref={e => {
// console.log(e)
}}
option={echartsRegion()}
notMerge
lazyUpdate
style={{ width: '100%', height: '244px' }}
/>
}
}
</div>
);
}

@ -1,27 +1,44 @@
.speedTrend {
width: 100%;
.tit {
font-size: 22px;
font-family: MicrosoftYaHei;
font-size: 36px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 4px;
color: #feffff;
display: flex;
justify-content: space-between;
margin:12px 0 14px 0;
margin: 32px 0 16px 0;
.tag {
&>div {
font-size: 16px;
padding: 4px;
border: 1px solid rgb(30, 163, 194);;
margin-right: 4px;
font-family: MicrosoftYaHei;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: 2px;
color: #cde9fc;
padding: 12px;
background: #0e2752;
border: 1px solid #2e84d7;
margin-right: 6px;
text-align: center;
line-height: 16px;
display: inline-block;
cursor: pointer;
}
&>div:last-child{
&>div:last-child {
margin-right: 0;
}
.tagNum{
background: rgb(30, 163, 194);
.tagNum {
color: #fff;
background: #0799b8;
}
}
}

@ -26,16 +26,16 @@ class One extends React.PureComponent {
<div className={styles.left}>
<div style={{ width: '910px' }}>
<Congestion />
{/* <Rank />
<Rank />
<CongestionTrend />
<SpeedTrend /> */}
<SpeedTrend />
</div>
<div style={{ width: '860px' }}>
{/* <SituationNum />
<SituationDispose /> */}
<SituationNum />
<SituationDispose />
</div>
</div>
{/* <div className={styles.maps}></div>
<div className={styles.maps}></div>
<div className={styles.right}>
<div style={{ width: '10.16rem' }}>
<Controls />
@ -46,7 +46,7 @@ class One extends React.PureComponent {
<Baseline />
<Opinion/>
</div>
</div> */}
</div>
</div>
);
}

@ -11,7 +11,8 @@
.left {
width: 2136px;
height: 2064px;
height: 1785px;
margin-top: 257px;
padding: 0 76px 0 150px;
display: flex;
justify-content: space-between;

Loading…
Cancel
Save