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 = [
{ name: '1.伊克昭', value: 100 },
{ name: '2.伊克昭', value: 99 },
......@@ -10,6 +11,7 @@ export const SafetyRateData = [
{ name: '9.伊克昭', value: 20 },
{ name: '10.伊克昭', value: 10 }
];
//安全风险失效Top10
export const riskFailureData = [
{ name: '1.伊克昭', value: 100 },
{ name: '2.伊克昭', value: 99 },
......@@ -22,6 +24,8 @@ export const riskFailureData = [
{ name: '9.伊克昭', value: 20 },
{ name: '10.伊克昭', value: 10 }
];
//告警隐患增幅统计
export const growthData = [
{ 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 = [
{ 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',
boundaryGap: false,
data: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '伊克昭', '苏州', '西安'],
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: [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 riskTrendData = {
dataX: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '伊克昭', '苏州', '西安'],
alarmDataY: [0, 22, 0, 55, 69, 77, 88, 99, 60, 88, 77, 99, 55, 0, 33, 22, 90, 0],
riskDataY: [0, 22, 33, 44, 44, 44, 44, 55, 55, 90, 77, 66, 55, 44, 33, 22, 44, 55],
dangerDataY: [33, 22, 55, 44, 66, 77, 77, 99, 40, 77, 77, 66, 88, 44, 55, 44, 33, 22]
};
export const recentData2 = {
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
}
}
//最近7日风险统计
export const recentData = {
//最近7日风险统计（告警）
alarmData: {
dataX: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
shoudianY: [0, 32, 1, 34, 90, 30, 10],
songdianY: [10, 20, 80, 60, 90, 20, 0]
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
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
}
}
}
}
]
//最近7日风险统计（隐患）
dangerData: {
dataX: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
shoudianY: [0, 40, 1, 70, 0, 30, 10],
songdianY: [0, 20, 60, 60, 70, 20, 0]
}
};
export const chainMapData = {
......
src/_mock/rczsData/geo.js
View file @ f1cfa0a3
//地图数据
const provienceData = [
{ 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 PropTypes from 'prop-types';
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 CommonCard from '../../../common/commonCard/CommonCard';
......@@ -11,18 +10,217 @@ class RecentStatistics extends Component {
super(props);
this.state = {
value: '1',
recentData: recentData1
data: {}
};
}
componentWillUnmount() {}
handleChange = value => {
if (value == '1') {
this.setState({ value: value, recentData: recentData1 });
if (value === '1') {
this.setState({ value: '1' });
} 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() {
const { value, recentData } = this.state;
debugger;
const { value } = this.state;
const select = { backgroundColor: '#0C85B1', color: '#FFF700' };
const noselect = { backgroundColor: 'rgba(12, 133, 177, 0)', color: '#45FEFE' };
......@@ -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="2" style={value == '2' ? select : noselect} />
</ButtonGroup>
<div className="recent-statistics-content" style={{position: 'relative'}}>
<div className="content-detail" onClick={this.props.onStatisticClick}>...</div>
<ReactEcharts option={recentData} className="div-echars-style" />
<div className="recent-statistics-content" style={{ position: 'relative' }}>
<div className="content-detail" onClick={this.props.onStatisticClick}>
...
</div>
<ReactEcharts option={this.getOptions()} className="div-echars-style" />
</div>
</CommonCard>
</div>
......
src/view/biz/duty/situation/RiskTrend.js
View file @ f1cfa0a3
......@@ -9,12 +9,127 @@ class RiskTrend extends Component {
constructor(props) {
super(props);
this.state = {
value: '1'
value: '1',
data: {}
};
}
handleChange = 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() {
const { value } = this.state;
......@@ -31,7 +146,7 @@ class RiskTrend extends Component {
<Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
</ButtonGroup>
<div className="risk-trend-content">
<ReactEcharts option={riskTrendData} className="div-echars" />
<ReactEcharts option={this.getOption()} className="div-echars" />
</div>
</CommonCard>
</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