Skip to content

S
station-elec-manage-view
Commit f1cfa0a3 authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

数据提取

parent ea19bd3a
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 298 deletions
src/_mock/rczsData/data.js
View file @ f1cfa0a3
//安全指数top10
export const SafetyRateData = [ export const SafetyRateData = [
{ name: '1.伊克昭', value: 100 }, { name: '1.伊克昭', value: 100 },
{ name: '2.伊克昭', value: 99 }, { name: '2.伊克昭', value: 99 },
...@@ -10,6 +11,7 @@ export const SafetyRateData = [ ...@@ -10,6 +11,7 @@ export const SafetyRateData = [
{ name: '9.伊克昭', value: 20 }, { name: '9.伊克昭', value: 20 },
{ name: '10.伊克昭', value: 10 } { name: '10.伊克昭', value: 10 }
]; ];
//安全风险失效Top10
export const riskFailureData = [ export const riskFailureData = [
{ name: '1.伊克昭', value: 100 }, { name: '1.伊克昭', value: 100 },
{ name: '2.伊克昭', value: 99 }, { name: '2.伊克昭', value: 99 },
...@@ -22,6 +24,8 @@ export const riskFailureData = [ ...@@ -22,6 +24,8 @@ export const riskFailureData = [
{ name: '9.伊克昭', value: 20 }, { name: '9.伊克昭', value: 20 },
{ name: '10.伊克昭', value: 10 } { name: '10.伊克昭', value: 10 }
]; ];
//告警隐患增幅统计
export const growthData = [ export const growthData = [
{ date: '03/29', risk: '120/99', growth: '5%/2%' }, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{ date: '03/29', risk: '120/99', growth: '5%/2%' }, { date: '03/29', risk: '120/99', growth: '5%/2%' },
...@@ -31,295 +35,29 @@ export const growthData = [ ...@@ -31,295 +35,29 @@ export const growthData = [
{ date: '03/29', risk: '120/99', growth: '5%/2%' }, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{ date: '03/29', risk: '120/99', growth: '5%/2%' } { date: '03/29', risk: '120/99', growth: '5%/2%' }
]; ];
export const riskTrendData = {
legend: {
data: ['告警', '隐患', '风险'],
x: 100,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14
}
},
xAxis: { //安全风险总体趋势
type: 'category', export const riskTrendData = {
boundaryGap: false, dataX: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '伊克昭', '苏州', '西安'],
data: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '伊克昭', '苏州', '西安'], alarmDataY: [0, 22, 0, 55, 69, 77, 88, 99, 60, 88, 77, 99, 55, 0, 33, 22, 90, 0],
axisLabel: { riskDataY: [0, 22, 33, 44, 44, 44, 44, 55, 55, 90, 77, 66, 55, 44, 33, 22, 44, 55],
show: true, dangerDataY: [33, 22, 55, 44, 66, 77, 77, 99, 40, 77, 77, 66, 88, 44, 55, 44, 33, 22]
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
series: [
{
name: '告警',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [0, 22, 0, 55, 69, 77, 88, 99, 60, 88, 77, 99, 55, 0, 33, 22, 90, 0],
itemStyle: {
normal: {
color: '#FF0000',
lineStyle: {
color: '#FF0000',
width: 2
}
}
}
},
{
name: '隐患',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [33, 22, 55, 44, 66, 77, 77, 99, 40, 77, 77, 66, 88, 44, 55, 44, 33, 22],
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '风险',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [0, 22, 33, 44, 44, 44, 44, 55, 55, 90, 77, 66, 55, 44, 33, 22, 44, 55],
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
};
export const recentData1 = {
legend: {
data: ['送电', '收电'],
x: 20,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [10, 20, 80, 60, 90, 20, 0],
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [0, 32, 1, 34, 90, 30, 10],
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
}; };
export const recentData2 = {
legend: { //最近7日风险统计
data: ['送电', '收电'], export const recentData = {
x: 20, //最近7日风险统计（告警）
y: 20, alarmData: {
textStyle: { dataX: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
color: '#fff', shoudianY: [0, 32, 1, 34, 90, 30, 10],
fontSize: 14 songdianY: [10, 20, 80, 60, 90, 20, 0]
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
}, },
series: [ //最近7日风险统计（隐患）
{ dangerData: {
name: '送电', dataX: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
type: 'line', shoudianY: [0, 40, 1, 70, 0, 30, 10],
symbol: 'circle', songdianY: [0, 20, 60, 60, 70, 20, 0]
symbolSize: 8, }
data: [0, 20, 60, 60, 70, 20, 0],
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [0, 40, 1, 70, 0, 30, 10],
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
}; };
export const chainMapData = { export const chainMapData = {
......
src/_mock/rczsData/geo.js
View file @ f1cfa0a3
//地图数据
const provienceData = [ const provienceData = [
{ name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: '0' }, { name: '黑龙江', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
{ name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: '0' }, { name: '吉林', area: '东北大区', type: 'areaCenterCity', InValue: '0' },
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ f1cfa0a3
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import { recentData1, recentData2 } from './../../../../_mock/rczsData/data'; import { recentData } from './../../../../_mock/rczsData/data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
...@@ -11,18 +10,217 @@ class RecentStatistics extends Component { ...@@ -11,18 +10,217 @@ class RecentStatistics extends Component {
super(props); super(props);
this.state = { this.state = {
value: '1', value: '1',
recentData: recentData1 data: {}
}; };
} }
componentWillUnmount() {}
handleChange = value => { handleChange = value => {
if (value == '1') { if (value === '1') {
this.setState({ value: value, recentData: recentData1 }); this.setState({ value: '1' });
} else { } else {
this.setState({ value: value, recentData: recentData2 }); this.setState({ value: '2' });
} }
}; };
getOptions = () => {
let data = recentData;
const { value } = this.state;
//value为1时告警 2为隐患
if (value === '1') {
return {
legend: {
data: ['送电', '收电'],
x: 20,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.alarmData.dataX,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: data.alarmData.songdianY,
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: data.alarmData.shoudianY,
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
};
}
if (value === '2') {
return {
legend: {
data: ['送电', '收电'],
x: 20,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.dangerData.dataX,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: data.dangerData.songdianY,
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: data.dangerData.shoudianY,
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
};
}
};
render() { render() {
const { value, recentData } = this.state; debugger;
const { value } = this.state;
const select = { backgroundColor: '#0C85B1', color: '#FFF700' }; const select = { backgroundColor: '#0C85B1', color: '#FFF700' };
const noselect = { backgroundColor: 'rgba(12, 133, 177, 0)', color: '#45FEFE' }; const noselect = { backgroundColor: 'rgba(12, 133, 177, 0)', color: '#45FEFE' };
...@@ -34,9 +232,11 @@ class RecentStatistics extends Component { ...@@ -34,9 +232,11 @@ class RecentStatistics extends Component {
<Button size="sm" children={<span>告警</span>} className="button-style" value="1" style={value == '1' ? select : noselect} /> <Button size="sm" children={<span>告警</span>} className="button-style" value="1" style={value == '1' ? select : noselect} />
<Button size="sm" children={<span>隐患</span>} className="button-style" value="2" style={value == '2' ? select : noselect} /> <Button size="sm" children={<span>隐患</span>} className="button-style" value="2" style={value == '2' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className="recent-statistics-content" style={{position: 'relative'}}> <div className="recent-statistics-content" style={{ position: 'relative' }}>
<div className="content-detail" onClick={this.props.onStatisticClick}>...</div> <div className="content-detail" onClick={this.props.onStatisticClick}>
<ReactEcharts option={recentData} className="div-echars-style" /> ...
</div>
<ReactEcharts option={this.getOptions()} className="div-echars-style" />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/RiskTrend.js
View file @ f1cfa0a3
...@@ -9,12 +9,127 @@ class RiskTrend extends Component { ...@@ -9,12 +9,127 @@ class RiskTrend extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value: '1' value: '1',
data: {}
}; };
} }
handleChange = value => { handleChange = value => {
this.setState({ value: value }); this.setState({ value: value });
}; };
getOption = () =>{
let data = riskTrendData;
return {
legend: {
data: ['告警', '隐患', '风险'],
x: 100,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: riskTrendData.dataX,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
},
axisLine: {
lineStyle: {
color: '#245665'
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1
}
}
},
series: [
{
name: '告警',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: riskTrendData.alarmDataY,
itemStyle: {
normal: {
color: '#FF0000',
lineStyle: {
color: '#FF0000',
width: 2
}
}
}
},
{
name: '隐患',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: riskTrendData.dangerDataY,
itemStyle: {
normal: {
color: '#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
}
}
}
},
{
name: '风险',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: riskTrendData.riskDataY,
itemStyle: {
normal: {
color: '#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
}
}
}
}
]
};
}
render() { render() {
const { value } = this.state; const { value } = this.state;
...@@ -31,7 +146,7 @@ class RiskTrend extends Component { ...@@ -31,7 +146,7 @@ class RiskTrend extends Component {
<Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} /> <Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className="risk-trend-content"> <div className="risk-trend-content">
<ReactEcharts option={riskTrendData} className="div-echars" /> <ReactEcharts option={this.getOption()} className="div-echars" />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment