Skip to content

S
station-elec-manage-view
Commit 82e0fcfa authored by 李成龙's avatar 李成龙
Browse files
Options

代码优化

parent 0b4c954a
Hide whitespace changes
Inline Side-by-side
Showing with 1799 additions and 1250 deletions
src/view/biz/duty/detail/data.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
const riskData = [ const riskData = [
{ {
'ka': '复龙换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', ka: '复龙换流站',
}, kb: '12',
{ kc: '12',
'ka': '奉贤换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kd: '23',
}, ke: '23',
{ kf: '12',
'ka': '苏州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kg: '97',
}, kh: '12',
{ ki: '23',
'ka': '中州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kj: '23',
kk: '12',
}, kl: '97'
{ },
'ka': '天山换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', {
}, ka: '奉贤换流站',
{ kb: '12',
'ka': '金华换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kc: '12',
}, kd: '23',
{ ke: '23',
'ka': '龙泉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kf: '12',
kg: '97',
}, kh: '12',
{ ki: '23',
'ka': '政平换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kj: '23',
kk: '12',
}, kl: '97'
{ },
'ka': '伊克昭换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', {
ka: '苏州换流站',
}, kb: '12',
{ kc: '12',
'ka': '陕北换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kd: '23',
ke: '23',
}, kf: '12',
{ kg: '97',
'ka': '武汉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kh: '12',
ki: '23',
} kj: '23',
] kk: '12',
kl: '97'
},
{
ka: '中州换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '天山换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '金华换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '龙泉换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '政平换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '伊克昭换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '陕北换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '武汉换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
}
];
const dangerWeekCensusData = [ const dangerWeekCensusData = [
{ {
'da': '复龙换流站', 'db': 23, 'dc': 22, da: '复龙换流站',
}, db: 23,
{ dc: 22
'da': '奉贤换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '奉贤换流站',
'da': '苏州换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '中州换流站', 'db': 23, 'dc': 22, {
da: '苏州换流站',
}, db: 23,
{ dc: 22
'da': '天山换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '中州换流站',
'da': '金华换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '龙泉换流站', 'db': 23, 'dc': 22, {
da: '天山换流站',
}, db: 23,
{ dc: 22
'da': '政平换流站', 'db': 23, 'dc': 22, },
{
}, da: '金华换流站',
{ db: 23,
'da': '伊克昭换流站', 'db': 23, 'dc': 22 dc: 22
},
}, {
{ da: '龙泉换流站',
'da': '陕北换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '武汉换流站', 'db': 23, 'dc': 22, {
da: '政平换流站',
}, db: 23,
{ dc: 22
'da': '金华换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '伊克昭换流站',
'da': '龙泉换流站', 'db': 23, 'dc': 22, db: 23,
dc: 22
}, },
{ {
'da': '政平换流站', 'db': 23, 'dc': 22, da: '陕北换流站',
db: 23,
}, dc: 22
{ },
'da': '伊克昭换流站', 'db': 23, 'dc': 22 {
da: '武汉换流站',
}, db: 23,
{ dc: 22
'da': '陕北换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '金华换流站',
'da': '武汉换流站', 'db': 23, 'dc': 22, db: 23,
dc: 22
}] },
const sevenDaysRiskCensusData = [{ {
'sa': '复龙换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', da: '龙泉换流站',
}, db: 23,
{ dc: 22
'sa': '奉贤换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', },
}, {
{ da: '政平换流站',
'sa': '苏州换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', db: 23,
}, dc: 22
{ },
'sa': '中州换流站', 'sb': '收点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', {
da: '伊克昭换流站',
}, db: 23,
{ dc: 22
'sa': '天山换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', },
}, {
{ da: '陕北换流站',
'sa': '金华换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', db: 23,
}, dc: 22
{ },
'sa': '三亚换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', {
da: '武汉换流站',
}, db: 23,
{ dc: 22
'sa': '龙泉换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', }
];
}, const sevenDaysRiskCensusData = [
{ {
'sa': '厦门换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sa: '复龙换流站',
sb: '送点',
}, sc: '告警',
{ sd: '23',
'sa': '南昌换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', se: '23',
sf: '12',
}, sg: '12',
sh: '12',
{ si: '23',
'sa': '政平换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sj: '97'
},
}, {
{ sa: '奉贤换流站',
'sa': '伊克昭换流站', 'sb': '收点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sb: '收点',
sc: '告警',
}, sd: '23',
{ se: '23',
'sa': '陕北换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sf: '12',
sg: '12',
}, sh: '12',
{ si: '23',
'sa': '武汉换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sj: '97'
},
}] {
sa: '苏州换流站',
sb: '送点',
export const riskTopTenData=[ sc: '告警',
{name:'1.极1低端换流变流台',rpni:100,rpnr:99}, sd: '23',
{name:'2.极2低端换流变流台',rpni:100,rpnr:99}, se: '23',
{name:'3.极1高端换流变流台',rpni:100,rpnr:99}, sf: '12',
{name:'4.极2高端换流变流台',rpni:100,rpnr:99}, sg: '12',
{name:'5.极1低端换流变流台',rpni:100,rpnr:99}, sh: '12',
{name:'6.极2低端换流变流台',rpni:100,rpnr:99}, si: '23',
{name:'7.极1低端换流变流台',rpni:100,rpnr:99}, sj: '97'
{name:'8.极2低端换流变流台',rpni:100,rpnr:99}, },
{name:'9.极1低端换流变流台',rpni:100,rpnr:99}, {
{name:'10.极2低端换流变流台',rpni:100,rpnr:99}, sa: '中州换流站',
] sb: '收点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '天山换流站',
sb: '送点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '金华换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '三亚换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '龙泉换流站',
sb: '收点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '厦门换流站',
sb: '收点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '南昌换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '政平换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '伊克昭换流站',
sb: '收点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '陕北换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '武汉换流站',
sb: '送点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
}
];
export const riskTopTenData = [
{ name: '1.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '2.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '3.极1高端换流变流台', rpni: 100, rpnr: 99 },
{ name: '4.极2高端换流变流台', rpni: 100, rpnr: 99 },
{ name: '5.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '6.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '7.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '8.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '9.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '10.极2低端换流变流台', rpni: 100, rpnr: 99 }
];
/** /**
* 数据组件 * 数据组件
*/ */
class JsonData extends Component { class JsonData extends Component {}
}
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData,riskTopTenData}; export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData, riskTopTenData };
src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js
View file @ 82e0fcfa
...@@ -19,18 +19,16 @@ class IncidenceSeverityMatrix extends Component { ...@@ -19,18 +19,16 @@ class IncidenceSeverityMatrix extends Component {
}; };
} }
getOptions() { getOptions() {
return { return {
legend: { legend: {
data: ['故障率(O)', '严重度(S)', '最低线', '最高线'], data: ['故障率(O)', '严重度(S)', '最低线', '最高线'],
x: 100, x: 100,
y: 20, y: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14, fontSize: 14
}, }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -38,7 +36,7 @@ class IncidenceSeverityMatrix extends Component { ...@@ -38,7 +36,7 @@ class IncidenceSeverityMatrix extends Component {
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 20, fontSize: 20,
color:'#5FFFFD', color: '#5FFFFD'
}, },
boundaryGap: false, boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
...@@ -46,21 +44,20 @@ class IncidenceSeverityMatrix extends Component { ...@@ -46,21 +44,20 @@ class IncidenceSeverityMatrix extends Component {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14, fontSize: 14
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#245665', color: '#245665'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ['#245665'], color: ['#245665'],
width: 1, width: 1
}, }
} }
}, },
yAxis: { yAxis: {
...@@ -69,9 +66,9 @@ class IncidenceSeverityMatrix extends Component { ...@@ -69,9 +66,9 @@ class IncidenceSeverityMatrix extends Component {
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 20, fontSize: 20,
color:'#5FFFFD', color: '#5FFFFD'
}, },
fontSize:20, fontSize: 20,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: { axisLabel: {
show: true, show: true,
...@@ -82,14 +79,14 @@ class IncidenceSeverityMatrix extends Component { ...@@ -82,14 +79,14 @@ class IncidenceSeverityMatrix extends Component {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#245665', color: '#245665'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ['#245665'], color: ['#245665'],
width: 1, width: 1
} }
} }
}, },
...@@ -116,9 +113,8 @@ class IncidenceSeverityMatrix extends Component { ...@@ -116,9 +113,8 @@ class IncidenceSeverityMatrix extends Component {
lineStyle: { lineStyle: {
color: '#0A73FF', color: '#0A73FF',
width: 2 width: 2
}, }
}, }
} }
}, },
{ {
...@@ -133,13 +129,12 @@ class IncidenceSeverityMatrix extends Component { ...@@ -133,13 +129,12 @@ class IncidenceSeverityMatrix extends Component {
lineStyle: { lineStyle: {
color: '#FF0000', color: '#FF0000',
width: 2 width: 2
}, }
}, }
}
}, }
},
] ]
} };
} }
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
......
src/view/biz/duty/detail/echarts/RiskDegreeHistogram.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AmosEcharts from 'amos-viz/lib/echarts';
import JsonData from './../data'; import JsonData from './../data';
import { OverFlowText } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
// import { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const riskTopTenData=JsonData.riskTopTenData; const riskTopTenData = JsonData.riskTopTenData;
const labelOption = { const labelOption = {
normal: { normal: {
show: true, show: true,
...@@ -38,76 +34,83 @@ class RiskDegreeHistogram extends Component { ...@@ -38,76 +34,83 @@ class RiskDegreeHistogram extends Component {
this.getBarViewContent(); this.getBarViewContent();
} }
componentWillReceiveProps() { componentWillReceiveProps() {}
}
getBarViewContent() { getBarViewContent() {}
}
getOptions() { getOptions() {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
}, },
legend: { legend: {
data: ['RPNi', 'RPNr'] data: ['RPNi', 'RPNr']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '3%', right: '3%',
bottom: '1%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
boundaryGap: [0, 0] boundaryGap: [0, 0]
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['极3低端换流变流台', '极2低端换流变流台','极1低端换流变流台','极3低端换流变流台','极2低端换流变流台', '极1低端换流变流台', data: [
'极3低端换流变流台', '极2低端换流变流台', '极1低端换流变流台','极3低端换流变流台' ], '极3低端换流变流台',
width:50, '极2低端换流变流台',
axisLabel: { '极1低端换流变流台',
show: true, '极3低端换流变流台',
textStyle: { '极2低端换流变流台',
color: '#fff', '极1低端换流变流台',
fontSize: 18, '极3低端换流变流台',
width:'10px' '极2低端换流变流台',
} '极1低端换流变流台',
}, '极3低端换流变流台'
],
width: 50,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 18,
width: '10px'
}
}
}, },
series: [ series: [
{ {
name: 'RPNi', name: 'RPNi',
type: 'bar', type: 'bar',
itemStyle:{ itemStyle: {
normal: { normal: {
color:'#5FFFFD', color: '#5FFFFD'
}, }
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100,100]
}, },
{ data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
name: 'RPNr', },
type: 'bar', {
itemStyle:{ name: 'RPNr',
normal: { type: 'bar',
color:'#FF0000', itemStyle: {
}, normal: {
}, color: '#FF0000'
data: [99,99,99,99,99,99,99,99,99,99] }
} },
data: [99, 99, 99, 99, 99, 99, 99, 99, 99, 99]
}
] ]
}; };
} }
handleData = () => { handleData = () => {
this.getBarViewContent(); this.getBarViewContent();
} };
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
...@@ -115,34 +118,31 @@ class RiskDegreeHistogram extends Component { ...@@ -115,34 +118,31 @@ class RiskDegreeHistogram extends Component {
return ( return (
<div className="risk-top-ten-content"> <div className="risk-top-ten-content">
{/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */} {/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */}
<div className="top-ten-content" style={{ position: 'initial' }}>
<div className='top-ten-content' style={{position:"initial"}}> <div style={{ position: 'initial', width: 28, height: 28, marginTop: -32, marginLeft: 352 }} onClick={this.props.onClick}></div>
<div style={{position:"initial",width:28,height:28,marginTop:-32,marginLeft:352}} {riskTopTenData.map((item, index) => (
onClick={this.props.onClick}></div> <div className="top-ten-item" key={index}>
{ <OverFlowText style={{ marginTop: 10 }}>
riskTopTenData.map((item,index)=> <div style={{ width: '100px', height: '70px', whiteSpace: 'normal', lineHeight: '30px' }}>{item.name}</div>
<div className='top-ten-item' key={index}>
<OverFlowText style={{marginTop:10}}>
<div style={{ width: '100px',height:'70px',whiteSpace:'normal',lineHeight:'30px'}}>{item.name}</div>
</OverFlowText> </OverFlowText>
<div className="top-risk"> <div className="top-risk">
<div className='top-ten-item-middle' style={{display:'flex'}}> <div className="top-ten-item-middle" style={{ display: 'flex' }}>
<div className='top-ten-item-middlelinear' style={{height:16,width:`${item.rpni}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 16, width: `${item.rpni}%` }}>
<div style={{lineHeight:'15px',position:'absolute',right:'45px'}}>{item.rpni}</div> {' '}
</div> </div>
<div className='top-ten-item-middleRed' style={{display:'flex'}}> <div style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpni}</div>
<div className='top-ten-item-middlelinearRed' style={{height:16,width:`${item.rpnr}%`}}></div> </div>
<div style={{lineHeight:'15px',position:'absolute',right:'45px'}}>{item.rpnr}</div> <div className="top-ten-item-middleRed" style={{ display: 'flex' }}>
</div> <div className="top-ten-item-middlelinearRed" style={{ height: 16, width: `${item.rpnr}%` }}></div>
<div style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpnr}</div>
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</div> </div>
); );
} }
......
src/view/biz/duty/detail/index.js
View file @ 82e0fcfa
...@@ -14,17 +14,17 @@ class CentralInfoView extends Component { ...@@ -14,17 +14,17 @@ class CentralInfoView extends Component {
super(props); super(props);
this.updateParent = this.updateParent.bind(this); this.updateParent = this.updateParent.bind(this);
this.state = { this.state = {
title: '', //modal标题 title: '', //modal标题
divVisable: 'none', divVisable: 'none',
riskVisable: 'none', riskVisable: 'none',
buttonVisable: 'block', buttonVisable: 'block',
type: '', //当前表格类型 type: '', //当前表格类型
detailTitle: '', detailTitle: '',
sevenDaySelectValue1:null, sevenDaySelectValue1: null,
sevenDaySelectValue2:null, sevenDaySelectValue2: null,
kpsiData:JsonData.riskData, kpsiData: JsonData.riskData,
riskFailureData:JsonData.riskData, riskFailureData: JsonData.riskData,
dangerWeekCensusData:JsonData.dangerWeekCensusData, dangerWeekCensusData: JsonData.dangerWeekCensusData,
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
}; };
} }
...@@ -33,58 +33,57 @@ class CentralInfoView extends Component { ...@@ -33,58 +33,57 @@ class CentralInfoView extends Component {
this.props.onRef && this.props.onRef(this); this.props.onRef && this.props.onRef(this);
} }
/** /**
* 安全指数详情 * 安全指数详情
*/ */
kpsi = (values) => { kpsi = values => {
console.log(values); console.log(values);
this.setState({ this.setState({
title: "安全指数", title: '安全指数',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'kpsi' type: 'kpsi'
}) });
} };
/** /**
* 安全风险失效详情 * 安全风险失效详情
*/ */
safetyRiskFailure = () => { safetyRiskFailure = () => {
this.setState({ this.setState({
title: "安全风险失效", title: '安全风险失效',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'safetyRiskFailure' type: 'safetyRiskFailure'
}) });
} };
/** /**
* 告警隐患周增幅统计详情 * 告警隐患周增幅统计详情
*/ */
dangerWeekCensus = () => { dangerWeekCensus = () => {
this.setState({ this.setState({
title: "告警隐患周增幅统计", title: '告警隐患周增幅统计',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'dangerWeekCensus' type: 'dangerWeekCensus'
}) });
} };
/** /**
* 七日风险统计详情 * 七日风险统计详情
*/ */
sevenDaysRiskCensus = () => { sevenDaysRiskCensus = () => {
this.setState({ this.setState({
title: "七日风险统计", title: '七日风险统计',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'sevenDaysRiskCensus' type: 'sevenDaysRiskCensus'
}) });
} };
/** /**
* 弹窗关闭 * 弹窗关闭
*/ */
closeDiv = () => { closeDiv = () => {
this.setState({ this.setState({
...@@ -92,276 +91,279 @@ class CentralInfoView extends Component { ...@@ -92,276 +91,279 @@ class CentralInfoView extends Component {
buttonVisable: 'block', buttonVisable: 'block',
title: '', title: '',
type: '', type: '',
kpsiData:JsonData.riskData, kpsiData: JsonData.riskData,
riskFailureData:JsonData.riskData, riskFailureData: JsonData.riskData,
dangerWeekCensusData:JsonData.dangerWeekCensusData, dangerWeekCensusData: JsonData.dangerWeekCensusData,
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
}) });
} };
/** /**
* 根据类型切换列 * 根据类型切换列
*/ */
columns = (type) => { columns = type => {
if (type === "kpsi") { if (type === 'kpsi') {
return ( return [
[ {
{ title: '换流站',
title: '换流站', dataIndex: 'ka',
dataIndex: 'ka', width: 100,
width: 100, render: (text, record) => {
render: (text, record) => { return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) }
} },
}, {
{ title: ' 极1高端阀厅',
title: ' 极1高端阀厅', dataIndex: 'kb',
dataIndex: 'kb', width: 100
width: 100 },
}, {
{ title: '极1低端阀厅',
title: '极1低端阀厅', dataIndex: 'kc',
dataIndex: 'kc',
width: 100 width: 100
}, },
{ {
title: '极2高端阀厅', title: '极2高端阀厅',
dataIndex: 'kd', dataIndex: 'kd',
width: 100 width: 100
}, },
{ {
title: '极2低端阀厅', title: '极2低端阀厅',
dataIndex: 'ke', dataIndex: 'ke',
width: 100 width: 100
}, },
{ {
title: '交流场', title: '交流场',
dataIndex: 'kf', dataIndex: 'kf',
width: 80 width: 80
}, },
{ {
title: '直流场', title: '直流场',
dataIndex: 'kg', dataIndex: 'kg',
width: 80 width: 80
}, },
{ {
title: '主控楼', title: '主控楼',
dataIndex: 'kh', dataIndex: 'kh',
width: 80 width: 80
}, },
{ {
title: '极1辅控楼', title: '极1辅控楼',
dataIndex: 'ki', dataIndex: 'ki',
width: 100 width: 100
}, },
{ {
title: '极2辅控楼', title: '极2辅控楼',
dataIndex: 'kj', dataIndex: 'kj',
width: 100 width: 100
}, },
{ {
title: '其他（剩余区域）', title: '其他（剩余区域）',
dataIndex: 'kk', dataIndex: 'kk',
width: 120 width: 120
}, },
{ {
title: <div><span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span></div>, title: (
dataIndex: 'kl', <div>
width: 120 <span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span>
}, </div>
] ),
) dataIndex: 'kl',
} else if (type === "safetyRiskFailure") { width: 120
return ( }
[ ];
{ } else if (type === 'safetyRiskFailure') {
title: '换流站', return [
dataIndex: 'ka', {
width: 100, title: '换流站',
render: (text, record) => { dataIndex: 'ka',
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) width: 100,
} render: (text, record) => {
}, return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
{
title: ' 极1高端阀厅',
dataIndex: 'kb',
width: 100
},
{
title: '极1低端阀厅',
dataIndex: 'kc',
width: 100
},
{
title: '极2高端阀厅',
dataIndex: 'kd',
width: 100
},
{
title: '极2低端阀厅',
dataIndex: 'ke',
width: 100
},
{
title: '交流场',
dataIndex: 'kf',
width: 80
},
{
title: '直流场',
dataIndex: 'kg',
width: 80
},
{
title: '主控楼',
dataIndex: 'kh',
width: 80
},
{
title: '极1辅控楼',
dataIndex: 'ki',
width: 100
},
{
title: '极2辅控楼',
dataIndex: 'kj',
width: 100
},
{
title: '其他（剩余区域）',
dataIndex: 'kk',
width: 120
},
{
title: <div><span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span></div>,
dataIndex: 'kl',
width: 120
} }
] },
) {
} title: ' 极1高端阀厅',
else if (type === "dangerWeekCensus") { dataIndex: 'kb',
return ( width: 100
[ },
{ {
title: '换流站', title: '极1低端阀厅',
dataIndex: 'da', dataIndex: 'kc',
width: 120, width: 100
render: (text, record) => { },
return (<div style={{ fontWeight: 'normal' }}>{text}</div>) {
} title: '极2高端阀厅',
}, dataIndex: 'kd',
{ width: 100
title: '告警', },
dataIndex: 'db', {
width: 120, title: '极2低端阀厅',
render: (text, record) => { dataIndex: 'ke',
return (<div><span>{text}</span><span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span></div>) width: 100
} },
}, {
{ title: '交流场',
title: '隐患', dataIndex: 'kf',
dataIndex: 'dc', width: 80
width: 120, },
render: (text, record) => { {
return (<div><span>{text}</span><span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span></div>) title: '直流场',
} dataIndex: 'kg',
}, width: 80
] },
) {
} title: '主控楼',
else if (type === "sevenDaysRiskCensus") { dataIndex: 'kh',
return ( width: 80
[ },
{ {
title: '换流站', title: '极1辅控楼',
dataIndex: 'sa', dataIndex: 'ki',
width: 100, width: 100
render: (text, record) => { },
return (<div style={{ fontWeight: 'normal' }}>{text}</div>) {
} title: '极2辅控楼',
}, dataIndex: 'kj',
{ width: 100
title: '类型', },
dataIndex: 'sb', {
width: 100 title: '其他（剩余区域）',
}, dataIndex: 'kk',
{ width: 120
title: '类别', },
dataIndex: 'sc', {
width: 100 title: (
}, <div>
{ <span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span>
title: '今天', </div>
dataIndex: 'sd', ),
width: 100 dataIndex: 'kl',
}, width: 120
{ }
title: '05-01', ];
dataIndex: 'se', } else if (type === 'dangerWeekCensus') {
width: 100 return [
}, {
{ title: '换流站',
title: '04-30', dataIndex: 'da',
dataIndex: 'sf', width: 120,
width: 100 render: (text, record) => {
}, return <div style={{ fontWeight: 'normal' }}>{text}</div>;
{ }
title: '04-29', },
dataIndex: 'sg', {
width: 100 title: '告警',
}, dataIndex: 'db',
{ width: 120,
title: '04-28', render: (text, record) => {
dataIndex: 'sh', return (
width: 100 <div>
}, <span>{text}</span>
{ <span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span>
title: '04-27', </div>
dataIndex: 'si', );
width: 100 }
}, },
{ {
title: '04-26', title: '隐患',
dataIndex: 'sj', dataIndex: 'dc',
width: 100 width: 120,
}, render: (text, record) => {
] return (
) <div>
<span>{text}</span>
<span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span>
</div>
);
}
}
];
} else if (type === 'sevenDaysRiskCensus') {
return [
{
title: '换流站',
dataIndex: 'sa',
width: 100,
render: (text, record) => {
return <div style={{ fontWeight: 'normal' }}>{text}</div>;
}
},
{
title: '类型',
dataIndex: 'sb',
width: 100
},
{
title: '类别',
dataIndex: 'sc',
width: 100
},
{
title: '今天',
dataIndex: 'sd',
width: 100
},
{
title: '05-01',
dataIndex: 'se',
width: 100
},
{
title: '04-30',
dataIndex: 'sf',
width: 100
},
{
title: '04-29',
dataIndex: 'sg',
width: 100
},
{
title: '04-28',
dataIndex: 'sh',
width: 100
},
{
title: '04-27',
dataIndex: 'si',
width: 100
},
{
title: '04-26',
dataIndex: 'sj',
width: 100
}
];
} else { } else {
return ( return [];
[]
)
} }
} };
/** /**
* 根据类型切换数据 * 根据类型切换数据
*/ */
getDataSource = (type) => { getDataSource = type => {
let{kpsiData, riskFailureData,dangerWeekCensusData, sevenDaysRiskCensusData}=this.state; let { kpsiData, riskFailureData, dangerWeekCensusData, sevenDaysRiskCensusData } = this.state;
if (type === "kpsi") { if (type === 'kpsi') {
return kpsiData; return kpsiData;
} } else if (type === 'safetyRiskFailure') {
else if(type === "safetyRiskFailure"){
return riskFailureData; return riskFailureData;
} } else if (type === 'dangerWeekCensus') {
else if (type === "dangerWeekCensus") {
return dangerWeekCensusData; return dangerWeekCensusData;
} } else if (type === 'sevenDaysRiskCensus') {
else if (type === "sevenDaysRiskCensus") {
return sevenDaysRiskCensusData; return sevenDaysRiskCensusData;
} }
} };
/** /**
* 自定义总页数 * 自定义总页数
*/ */
showTotalPage = (total) => { showTotalPage = total => {
let pages = Math.ceil(total / pageSize); let pages = Math.ceil(total / pageSize);
return `共 ${pages} 页`; return `共 ${pages} 页`;
} };
/** /**
* 设定间隔行样式 * 设定间隔行样式
...@@ -370,148 +372,149 @@ class CentralInfoView extends Component { ...@@ -370,148 +372,149 @@ class CentralInfoView extends Component {
let className = 'light-row'; let className = 'light-row';
if (index % 2 === 0) className = 'dark-row'; if (index % 2 === 0) className = 'dark-row';
return className; return className;
} };
/** /**
* 当前行点击事件 * 当前行点击事件
*/ */
onRowClick = (record) => { onRowClick = record => {
if (this.state.type === "kpsi") { if (this.state.type === 'kpsi') {
this.setState({ this.setState({
divVisable: 'none', divVisable: 'none',
riskVisable: 'block', riskVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
detailTitle: record.ka detailTitle: record.ka
}) });
} }
} };
/** /**
* 子组件返回当前列表 * 子组件返回当前列表
*/ */
updateParent(values){ updateParent(values) {
if (values != null) { if (values != null) {
this.setState({ this.setState({
divVisable: values.divVisable, divVisable: values.divVisable,
riskVisable: values.riskVisable, riskVisable: values.riskVisable
}) });
} }
} }
/* /*
*监听七日风险详情页类型切换 *监听七日风险详情页类型切换
*/ */
onTypeChange=(value)=>{ onTypeChange = value => {
let{sevenDaySelectValue2}=this.state; let { sevenDaySelectValue2 } = this.state;
let sevenDaysRiskCensusData =JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
if(value==='收点'||value==='送点'){ if (value === '收点' || value === '送点') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sb===value); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sb === value);
} }
if(sevenDaySelectValue2!==null&&sevenDaySelectValue2!=='全部'){ if (sevenDaySelectValue2 !== null && sevenDaySelectValue2 !== '全部') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sc===sevenDaySelectValue2); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sc === sevenDaySelectValue2);
} }
this.setState({ this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData, sevenDaysRiskCensusData: sevenDaysRiskCensusData,
sevenDaySelectValue1:value sevenDaySelectValue1: value
}) });
};
}
/* /*
*监听七日风险详情页统计类别切换 *监听七日风险详情页统计类别切换
*/ */
onSumClazzChange=(value,item)=>{ onSumClazzChange = (value, item) => {
let{sevenDaySelectValue1}=this.state; let { sevenDaySelectValue1 } = this.state;
let sevenDaysRiskCensusData =JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
if(value==='告警'||value==='隐患'){ if (value === '告警' || value === '隐患') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sc===value); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sc === value);
} }
if(sevenDaySelectValue1!==null&&sevenDaySelectValue1!=='全部'){ if (sevenDaySelectValue1 !== null && sevenDaySelectValue1 !== '全部') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sb===sevenDaySelectValue1); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sb === sevenDaySelectValue1);
} }
this.setState({ this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData, sevenDaysRiskCensusData: sevenDaysRiskCensusData,
sevenDaySelectValue2:value sevenDaySelectValue2: value
}) });
} };
/* /*
*安全指数查询 *安全指数查询
*/ */
onKpsiSearch=(e,value)=>{ onKpsiSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let kpsiData=JsonData.riskData; let kpsiData = JsonData.riskData;
kpsiData = kpsiData.filter(item => (item.ka).indexOf(value) > -1); kpsiData = kpsiData.filter(item => item.ka.indexOf(value) > -1);
this.setState({
kpsiData:kpsiData
})
} else{
this.setState({ this.setState({
kpsiData:JsonData.riskData kpsiData: kpsiData
}) });
} else {
this.setState({
kpsiData: JsonData.riskData
});
} }
} };
/* /*
*安全风险失效查询 *安全风险失效查询
*/ */
onRiskFailureSearch=(e,value)=>{ onRiskFailureSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let riskFailureData=JsonData.riskData; let riskFailureData = JsonData.riskData;
riskFailureData = riskFailureData.filter(item => (item.ka).indexOf(value) > -1); riskFailureData = riskFailureData.filter(item => item.ka.indexOf(value) > -1);
this.setState({ this.setState({
riskFailureData:riskFailureData riskFailureData: riskFailureData
}) });
} else{ } else {
this.setState({ this.setState({
riskFailureData:JsonData.riskData riskFailureData: JsonData.riskData
}) });
} }
} };
/* /*
*七日风险查询 *七日风险查询
*/ */
onSevenDaysSearch=(e,value)=>{ onSevenDaysSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let sevenDaysRiskCensusData=JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => (item.sa).indexOf(value) > -1); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sa.indexOf(value) > -1);
this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData
})
} else{
this.setState({ this.setState({
sevenDaysRiskCensusData:JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: sevenDaysRiskCensusData
}) });
} else {
this.setState({
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
});
} }
} };
/* /*
*告警隐患查询 *告警隐患查询
*/ */
onDangerWeekSearch=(e,value)=>{ onDangerWeekSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let dangerWeekCensusData=JsonData.dangerWeekCensusData; let dangerWeekCensusData = JsonData.dangerWeekCensusData;
dangerWeekCensusData = dangerWeekCensusData.filter(item => (item.da).indexOf(value) > -1); dangerWeekCensusData = dangerWeekCensusData.filter(item => item.da.indexOf(value) > -1);
this.setState({ this.setState({
dangerWeekCensusData:dangerWeekCensusData dangerWeekCensusData: dangerWeekCensusData
}) });
} else{ } else {
this.setState({ this.setState({
dangerWeekCensusData:JsonData.dangerWeekCensusData dangerWeekCensusData: JsonData.dangerWeekCensusData
}) });
} }
} };
render() { render() {
const { title, divVisable, type, detailTitle, riskVisable, buttonVisable } = this.state; const { title, divVisable, type, detailTitle, riskVisable, buttonVisable } = this.state;
const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage }; const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage };
return ( return (
<div> <div>
<div className="mainContent" style={{ display: divVisable }} > <div className="mainContent" style={{ display: divVisable }}>
<Layout> <Layout>
<Header className="contentHeader"> <Header className="contentHeader">
<div className="headerLeft" style={{ display: 'inline' }}>{title}</div> <div className="headerLeft" style={{ display: 'inline' }}>
{title}
</div>
<div className="headerRight" style={{ display: 'inline' }}> <div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="42px" style={{ marginTop: '3px' }} /> <img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="42px" style={{ marginTop: '3px' }} />
</div> </div>
...@@ -519,50 +522,68 @@ class CentralInfoView extends Component { ...@@ -519,50 +522,68 @@ class CentralInfoView extends Component {
<Content className="content"> <Content className="content">
<div className="contentInfo"> <div className="contentInfo">
<div className="infoHeader"> <div className="infoHeader">
{type === "sevenDaysRiskCensus" ? {type === 'sevenDaysRiskCensus' ? (
<div> <div>
<Search icon="search" style={{ marginLeft: 610 }} defaultValue='搜索' onIconClick={this.onSevenDaysSearch} /> <Search icon="search" style={{ marginLeft: 610 }} defaultValue="搜索" onIconClick={this.onSevenDaysSearch} />
<div className="selectDiv" style={{display:"inline-block"}}> <div className="selectDiv" style={{ display: 'inline-block' }}>
类型：<Select defaultValue="全部" onChange={this.onTypeChange}> 类型：
<Option value="全部" >全部</Option> <Select defaultValue="全部" onChange={this.onTypeChange}>
<Option value="全部">全部</Option>
<Option value="送点">送点</Option> <Option value="送点">送点</Option>
<Option value="收点">收点</Option> <Option value="收点">收点</Option>
</Select> </Select>
</div> </div>
<div className="selectDiv" style={{display:"inline-block"}}> <div className="selectDiv" style={{ display: 'inline-block' }}>
统计类别：<Select defaultValue="全部" onChange={this.onSumClazzChange}> 统计类别：
<Option value="全部" >全部</Option> <Select defaultValue="全部" onChange={this.onSumClazzChange}>
<Option value="全部">全部</Option>
<Option value="告警">告警</Option> <Option value="告警">告警</Option>
<Option value="隐患">隐患</Option> <Option value="隐患">隐患</Option>
</Select> </Select>
</div> </div>
</div> : </div>
<div style={{display:'flex'}}> ) : (
{type === "dangerWeekCensus" ? <div style={{ display: 'flex' }}>
{type === 'dangerWeekCensus' ? (
<div> <div>
<div style={{display:'inline-block' ,color:'white',fontSize:20, position:'relative',top: 27,left: 80}}>2020-05-23到2020-05-29</div> <div style={{ display: 'inline-block', color: 'white', fontSize: 20, position: 'relative', top: 27, left: 80 }}>
<Search icon="search" style={{ marginLeft: 500,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onDangerWeekSearch} /> 2020-05-23到2020-05-29
</div>: </div>
<Search
icon="search"
style={{ marginLeft: 500, display: 'inline-block' }}
defaultValue="搜索"
onIconClick={this.onDangerWeekSearch}
/>
</div>
) : (
<div> <div>
{type === "kpsi" ? {type === 'kpsi' ? (
<Search icon="search" style={{ marginLeft: 790,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onKpsiSearch} />: <Search icon="search" style={{ marginLeft: 790, display: 'inline-block' }} defaultValue="搜索" onIconClick={this.onKpsiSearch} />
<Search icon="search" style={{ marginLeft: 790,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onRiskFailureSearch} /> ) : (
} <Search
icon="search"
</div>} style={{ marginLeft: 790, display: 'inline-block' }}
</div>} defaultValue="搜索"
onIconClick={this.onRiskFailureSearch}
/>
)}
</div>
)}
</div>
)}
</div> </div>
<div className="infoContent"> <div className="infoContent">
<Table className="tableDetail" <Table
className="tableDetail"
dataSource={this.getDataSource(type)} dataSource={this.getDataSource(type)}
style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }} style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }}
columns={this.columns(type)} columns={this.columns(type)}
rowClassName={this.rowClassChange} rowClassName={this.rowClassChange}
onRowClick={this.onRowClick} onRowClick={this.onRowClick}
pagination={_pageNation}> pagination={_pageNation}
</Table> ></Table>
</div> </div>
</div> </div>
</Content> </Content>
</Layout> </Layout>
...@@ -573,10 +594,8 @@ class CentralInfoView extends Component { ...@@ -573,10 +594,8 @@ class CentralInfoView extends Component {
} }
} }
CentralInfoView.propTypes = { CentralInfoView.propTypes = {};
};
CentralInfoView.defaultProps = { CentralInfoView.defaultProps = {
pages: 5 pages: 5
} };
export default CentralInfoView; export default CentralInfoView;
\ No newline at end of file
src/view/biz/duty/detail/riskDetail.js
View file @ 82e0fcfa
...@@ -10,114 +10,108 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix'; ...@@ -10,114 +10,108 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix';
*/ */
class RiskAssessment extends Component { class RiskAssessment extends Component {
//获取等级
getLegend() {
return (
<div className="situation-map-legend">
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#15653d' }} />
<div>初始</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#0078ef' }} />
<div>4/5级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#ffcc2a' }} />
<div>3级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#ff5a20' }} />
<div>2级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#f42828' }} />
<div>1级</div>
</div>
</div>
);
}
onClick = () => {
this.props.updateParents({ divVisable: 'block', riskVisable: 'none' });
};
//获取等级 render() {
getLegend() { return (
return ( <div className="mainContent" style={{ display: this.props.riskVisable }}>
<div className='situation-map-legend' > <Layout>
<div className='situation-map-legend-item'> <Header className="contentHeader">
<div className='situation-map-legend-block' style={{ background: '#15653d' }} /> <div className="headerLeft" style={{ display: 'inline' }}>
<div>初始</div> {this.props.detailTitle}
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#0078ef' }} />
<div>4/5级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ffcc2a' }} />
<div>3级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ff5a20' }} />
<div>2级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#f42828' }} />
<div>1级</div>
</div>
</div> </div>
); <div className="headerRight" style={{ display: 'inline' }}>
} <img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{ marginTop: 3 }} />
onClick=()=>{ </div>
this.props.updateParents({ divVisable:'block', riskVisable:'none'}); </Header>
} <Layout>
<Content className="riskcontent">
<Header className="blockOneHeader">
<Header className="oneChildHeader">
render() { <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
return (
<div className="mainContent" style={{display: this.props.riskVisable }}>
<Layout>
<Header className="contentHeader">
<div className="headerLeft" style={{ display: 'inline' }}>{this.props.detailTitle}</div>
<div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{marginTop:3}} />
</div>
</Header> </Header>
<Layout> <Content className="oneHeaderContent">
<Content className="riskcontent"> <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35, marginLeft: 160 }} />
{this.getLegend()}
<Header className="blockOneHeader"> </Content>
<Header className="oneChildHeader"> </Header>
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} /> <Content className="blockOneContent">
</Header> <Layout className="oneChildLayout">
<Content className="oneHeaderContent"> <Sider className="oneChildSider">
<img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35 ,marginLeft:160}} /> <Layout>
{this.getLegend()} <Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle1.png" style={{ width: 277, height: 38, margin: 0 }} />
</Content> </Header>
</Header> <Content className="twoHeaderContent">
<Content className="blockOneContent"> <div className="risk-degree-pie">
<Layout className="oneChildLayout"> <div className="risk-degree-pie1">
<Sider className="oneChildSider"> <RiskDegreePie />
<Layout> </div>
<Header className="twoChildHeader"> </div>
<img src="/src/assets/detail/secondTitle1.png" style={{ width: 277, height: 38, margin: 0 }} /> </Content>
</Header> </Layout>
<Content className="twoHeaderContent"> </Sider>
<div className="risk-degree-pie">
<div className="risk-degree-pie1">
<RiskDegreePie />
</div>
</div>
</Content>
</Layout>
</Sider>
</Layout>
</Content>
<Content className="blockTwoContent">
<Layout className="oneChildLayout">
<Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
<IncidenceSeverityMatrix />
</Content>
</Layout>
</Sider>
</Layout>
</Content>
</Content>
<Sider className="risksider">
<Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header>
<Content className="risksiderContent">
<RiskDegreeHistogram />
</Content>
</Sider>
</Layout>
</Layout> </Layout>
</div> </Content>
); <Content className="blockTwoContent">
} <Layout className="oneChildLayout">
} <Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
<IncidenceSeverityMatrix />
</Content>
</Layout>
</Sider>
</Layout>
</Content>
</Content>
RiskAssessment.propTypes = { <Sider className="risksider">
<Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header>
<Content className="risksiderContent">
<RiskDegreeHistogram />
</Content>
</Sider>
</Layout>
</Layout>
</div>
);
}
}
}; RiskAssessment.propTypes = {};
export default RiskAssessment; export default RiskAssessment;
src/view/biz/duty/situation/GrowthStatistics.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {growthData} from './data'; import { growthData } from './data';
class GrowthStatistics extends Component { class GrowthStatistics extends Component {
render() { render() {
return ( return (
<div className='growth-statistics-view common-margin'> <div className="growth-statistics-view common-margin">
<div className='daily-title daily-title-content'>告警隐患周增幅统计</div> <div className="daily-title daily-title-content">告警隐患周增幅统计</div>
<div className='growth-content'> <div className="growth-content">
<div style={{position:"initial",width:28,height:28,marginTop:-28,marginLeft:358}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -28, marginLeft: 358 }} onClick={this.props.onWarnClick}></div>
onClick={this.props.onWarnClick}></div> <div className="growth-item growth-item-header">
<div className='growth-item growth-item-header'>
<div>日期</div> <div>日期</div>
<div>告警/隐患</div> <div>告警/隐患</div>
<div>周增量</div> <div>周增量</div>
</div> </div>
{ {growthData.map((item, index) => (
growthData.map((item,index)=>( <div className="growth-item growth-item-text">
<div className='growth-item growth-item-text'> <div className="growth-item-datatext">{item.date}</div>
<div className='growth-item-datatext'>{item.date}</div>
<div>{item.risk}</div> <div>{item.risk}</div>
<div>{item.growth}</div> <div>{item.growth}</div>
</div> </div>
) ))}
)
}
</div> </div>
</div> </div>
); );
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import {recentData1,recentData2} from './data'; import { recentData1, recentData2 } from './data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
class RecentStatistics extends Component { class RecentStatistics extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value:'1', value: '1',
recentData:recentData1 recentData: recentData1
}; };
} }
handleChange = (value) => { handleChange = value => {
if(value == '1'){ if (value == '1') {
this.setState({value:value,recentData:recentData1}) this.setState({ value: value, recentData: recentData1 });
}else{ } else {
this.setState({value:value,recentData:recentData2}) this.setState({ value: value, recentData: recentData2 });
} }
};
}
render() { render() {
const {value,recentData} =this.state const { value, recentData } = 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' };
return ( return (
<div className='recent-statistics-view common-margin'> <div className="recent-statistics-view common-margin">
<div className='daily-title daily-title-content'>最近 7 日风险统计</div> <div className="daily-title daily-title-content">最近 7 日风险统计</div>
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}> <ButtonGroup className="buttongroup-style" defaultValue="1" onChange={this.handleChange}>
<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'> <div className="recent-statistics-content">
<div style={{position:"initial",width:28,height:28,marginTop:-19,marginLeft:362}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -19, marginLeft: 362 }} onClick={this.props.onStatisticClick}></div>
onClick={this.props.onStatisticClick}></div> <ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
<ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} /> </div>
</div>
</div> </div>
); );
} }
......
src/view/biz/duty/situation/RiskFailure.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {riskFailureData} from './data' import { riskFailureData } from './data';
import { OverFlowText } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
class RiskFailure extends Component { class RiskFailure extends Component {
render() { render() {
return ( return (
<div className='risk-failure-view common-margin daily-title'> <div className="risk-failure-view common-margin daily-title">
<div className='daily-title daily-title-content'>安全风险失效 TOP10</div> <div className="daily-title daily-title-content">安全风险失效 TOP10</div>
<div className='top-ten-content'> <div className="top-ten-content">
<div style={{position:"initial",width:28,height:28,marginTop:-35,marginLeft:352}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -35, marginLeft: 352 }} onClick={this.props.onRiskClick}></div>
onClick={this.props.onRiskClick}></div> {riskFailureData.map((item, index) => (
{ <div className="top-ten-item" key={index}>
riskFailureData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText> <OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p> <p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText> </OverFlowText>
<div className='top-ten-item-middle'> <div className="top-ten-item-middle">
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</div> </div>
); );
......
src/view/biz/duty/situation/RiskTrend.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import {riskTrendData} from './data' import { riskTrendData } from './data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
class RiskTrend extends Component { class RiskTrend extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value:'1', value: '1'
}; };
} }
handleChange = (value) => { handleChange = value => {
this.setState({value:value}) this.setState({ value: value });
} };
render() { render() {
const {value} =this.state 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' };
return ( return (
<div className='risk-trend-view common-margin'> <div className="risk-trend-view common-margin">
<div className='daily-title daily-title-content'>安全风险总体趋势</div> <div className="daily-title daily-title-content">安全风险总体趋势</div>
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}> <ButtonGroup className="buttongroup-style" defaultValue="1" onChange={this.handleChange}>
<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} />
<Button size='sm' children={<span>上升数</span>} className='button-style' value="3" style={(value == '3')?select:noselect}/> <Button size="sm" children={<span>上升数</span>} className="button-style" value="3" style={value == '3' ? select : noselect} />
<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} style={{ height: '280px', width: '1100px',left:'-60px'}} /> <ReactEcharts option={riskTrendData} style={{ height: '280px', width: '1100px', left: '-60px' }} />
</div> </div>
</div> </div>
); );
} }
......
src/view/biz/duty/situation/SafetyRate.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {SafetyRateData} from './data'; import { SafetyRateData } from './data';
import { OverFlowText, Button } from 'amos-framework'; import { OverFlowText, Button } from 'amos-framework';
class SafetyRate extends Component { class SafetyRate extends Component {
render() { render() {
return ( return (
<div className='safety-rate-view common-margin daily-title'> <div className="safety-rate-view common-margin daily-title">
<div className='daily-title-content'> <div className="daily-title-content">安全指数 TOP10</div>
安全指数 TOP10 <div className="top-ten-content" style={{ position: 'initial' }}>
</div> <div style={{ position: 'initial', width: 28, height: 28, marginTop: -36, marginLeft: 352 }} onClick={this.props.onClick}></div>
<div className='top-ten-content' style={{position:"initial"}}> {SafetyRateData.map((item, index) => (
<div style={{position:"initial",width:28,height:28,marginTop:-36,marginLeft:352}} <div className="top-ten-item" key={index}>
onClick={this.props.onClick}></div>
{
SafetyRateData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText> <OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p> <p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText> </OverFlowText>
<div className='top-ten-item-middle'> <div className="top-ten-item-middle">
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</div> </div>
); );
......
src/view/biz/duty/situation/Statistics.js
View file @ 82e0fcfa
...@@ -5,20 +5,19 @@ import { chainMapData, option123 } from './data'; ...@@ -5,20 +5,19 @@ import { chainMapData, option123 } from './data';
import echarts from 'echarts/lib/echarts'; import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china'; import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json'; import geoJson from 'echarts/map/json/china.json';
import { geoCoordMap, provienceData } from "./geo"; import { geoCoordMap, provienceData } from './geo';
export const dmtData = [ export const dmtData = [
{ 'latitude': 30.67, 'longitude': 104.07 }, { latitude: 30.67, longitude: 104.07 },
{ 'latitude': 34.76, 'longitude': 113.65 }, { latitude: 34.76, longitude: 113.65 },
{ 'latitude': 29.65, 'longitude': 91.13 }, { latitude: 29.65, longitude: 91.13 },
{ 'latitude': 43.82, 'longitude': 87.62 } { latitude: 43.82, longitude: 87.62 }
] ];
class Statistics extends Component { class Statistics extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {};
}
} }
componentDidMount() { componentDidMount() {
...@@ -64,83 +63,83 @@ class Statistics extends Component { ...@@ -64,83 +63,83 @@ class Statistics extends Component {
{ name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' } { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
]; ];
echarts.registerMap('china', geoJson); echarts.registerMap('china', geoJson);
debugger debugger;
for (const item of provienceData) { for (const item of provienceData) {
if (item.area === '东北大区') { if (item.area === '东北大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#3CA2FC', areaColor: '#3CA2FC'
}, },
emphasis: { emphasis: {
areaColor: '#3CA2FC', areaColor: '#3CA2FC'
} }
} };
} else if (item.area === '华北大区') { } else if (item.area === '华北大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#6CAFBE', areaColor: '#6CAFBE'
}, },
emphasis: { emphasis: {
areaColor: '#6CAFBE', areaColor: '#6CAFBE'
} }
} };
} else if (item.area === '华中大区') { } else if (item.area === '华中大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#ADD03C', areaColor: '#ADD03C'
}, },
emphasis: { emphasis: {
areaColor: '#ADD03C', areaColor: '#ADD03C'
} }
} };
} else if (item.area === '华东大区') { } else if (item.area === '华东大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#A13614', areaColor: '#A13614'
}, },
emphasis: { emphasis: {
areaColor: '#A13614', areaColor: '#A13614'
} }
} };
} else if (item.area === '华西大区') { } else if (item.area === '华西大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#FFBA00', areaColor: '#FFBA00'
}, },
emphasis: { emphasis: {
areaColor: '#FFBA00', areaColor: '#FFBA00'
} }
} };
} else if (item.area === '华南大区') { } else if (item.area === '华南大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#001AC5', areaColor: '#001AC5'
}, },
emphasis: { emphasis: {
areaColor: '#001AC5', areaColor: '#001AC5'
} }
} };
} else if (item.area === '南海诸岛') { } else if (item.area === '南海诸岛') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
borderColor: '#fff', // 区域边框颜色 borderColor: '#fff', // 区域边框颜色
areaColor: '#fff', // 区域颜色 areaColor: '#fff' // 区域颜色
}, },
emphasis: { emphasis: {
show: false, show: false
// borderColor: '#fff', // borderColor: '#fff',
// areaColor:"#fff", // areaColor:"#fff",
} }
} };
} else { } else {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#D9D9D9', areaColor: '#D9D9D9'
}, },
emphasis: { emphasis: {
areaColor: '#D9D9D9', areaColor: '#D9D9D9'
} }
} };
} }
} }
const myChart = echarts.init(document.getElementById('mainMap')); const myChart = echarts.init(document.getElementById('mainMap'));
...@@ -150,8 +149,8 @@ class Statistics extends Component { ...@@ -150,8 +149,8 @@ class Statistics extends Component {
// formatter: '{b}', // 提示标签格式 // formatter: '{b}', // 提示标签格式
//鼠标放地图的某一块，显示的提示框 //鼠标放地图的某一块，显示的提示框
formatter(params, ticket, callback) { formatter(params, ticket, callback) {
console.log(params) console.log(params);
return `'告警数'<br />${params.name}：${params.data.InValue}` return `'告警数'<br />${params.name}：${params.data.InValue}`;
}, },
backgroundColor: '#ff7f50', // 提示标签背景颜色 backgroundColor: '#ff7f50', // 提示标签背景颜色
textStyle: { color: '#fff' } // 提示标签字体颜色 textStyle: { color: '#fff' } // 提示标签字体颜色
...@@ -168,14 +167,15 @@ class Statistics extends Component { ...@@ -168,14 +167,15 @@ class Statistics extends Component {
roam: false, roam: false,
zoom: 1.2, zoom: 1.2,
tooltip: { tooltip: {
show: false, // 不显示提示标签 show: false // 不显示提示标签
}, },
label: { label: {
normal: { normal: {
show: false, // 显示省份标签 show: false, // 显示省份标签
textStyle: { color: '#c71585' }// 省份标签字体颜色 textStyle: { color: '#c71585' } // 省份标签字体颜色
}, },
emphasis: {// 对应的鼠标悬浮效果 emphasis: {
// 对应的鼠标悬浮效果
show: false, show: false,
textStyle: { color: '#800080' } textStyle: { color: '#800080' }
} }
...@@ -191,12 +191,11 @@ class Statistics extends Component { ...@@ -191,12 +191,11 @@ class Statistics extends Component {
show: false, show: false,
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#4b0082', borderColor: '#4b0082',
areaColor: '#ffdead', areaColor: '#ffdead'
} }
}, }
}, },
series: [ series: [
{ {
type: 'scatter', type: 'scatter',
...@@ -237,14 +236,14 @@ class Statistics extends Component { ...@@ -237,14 +236,14 @@ class Statistics extends Component {
roam: false, roam: false,
zoom: 1.2, zoom: 1.2,
tooltip: { tooltip: {
show: false, // 不显示提示标签 show: false // 不显示提示标签
}, },
label: { label: {
normal: { normal: {
show: false // 显示省份标签 show: false // 显示省份标签
}, },
emphasis: { emphasis: {
show: false, show: false
} }
}, },
itemStyle: { itemStyle: {
...@@ -254,7 +253,7 @@ class Statistics extends Component { ...@@ -254,7 +253,7 @@ class Statistics extends Component {
label: { show: false } label: { show: false }
}, },
emphasis: { emphasis: {
show: false, show: false
} }
}, },
// geoIndex: 0, // geoIndex: 0,
...@@ -270,15 +269,15 @@ class Statistics extends Component { ...@@ -270,15 +269,15 @@ class Statistics extends Component {
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: 'stroke'
}, },
symbolSize: function (val, params) { symbolSize: function(val, params) {
return 30; return 30;
}, },
data: dmtData.map(function (itemOpt) { data: dmtData.map(function(itemOpt) {
return { return {
// name: itemOpt.name, // name: itemOpt.name,
value: [ value: [
itemOpt.longitude, itemOpt.longitude,
itemOpt.latitude, itemOpt.latitude
// itemOpt.value //数量 // itemOpt.value //数量
], ],
label: { label: {
...@@ -290,17 +289,17 @@ class Statistics extends Component { ...@@ -290,17 +289,17 @@ class Statistics extends Component {
itemStyle: { itemStyle: {
normal: { normal: {
// color: itemOpt.color //色值 // color: itemOpt.color //色值
color: "red" color: 'red'
} }
} }
}; };
}), }),
symbolSize: function (val) { symbolSize: function(val) {
return 5;//描点的大小 return 5; //描点的大小
}, }
} }
], ]
}) });
// 鼠标放上颜色变红 // 鼠标放上颜色变红
// myChart.on('mouseover', params => { // myChart.on('mouseover', params => {
...@@ -310,7 +309,7 @@ class Statistics extends Component { ...@@ -310,7 +309,7 @@ class Statistics extends Component {
myChart.on('click', params => { myChart.on('click', params => {
if (params.name === '海南') { if (params.name === '海南') {
this.props.history.push('/Dashboard/map2') this.props.history.push('/Dashboard/map2');
} }
}); });
} }
...@@ -336,41 +335,51 @@ class Statistics extends Component { ...@@ -336,41 +335,51 @@ class Statistics extends Component {
return '1'; return '1';
} }
render() { render() {
return ( return (
<div className='statistics-view common-margin'> <div className="statistics-view common-margin">
<div className='statistics-title statistics-title-content'>全国</div> <div className="statistics-title statistics-title-content">全国</div>
<div className='statistics-banner'> <div className="statistics-banner">
<div className='statistics-banner-content'> <div className="statistics-banner-content">
<div className='statistics-banner-item'> <div className="statistics-banner-item">
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>现有告警</p> <p>现有告警</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>累计告警</p> <p>累计告警</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>消缺告警</p> <p>消缺告警</p>
</div> </div>
</div> </div>
</div> </div>
<div className='statistics-banner-content'> <div className="statistics-banner-content">
<div className='statistics-banner-item'> <div className="statistics-banner-item">
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>现有隐患</p> <p>现有隐患</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>累计隐患</p> <p>累计隐患</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>治理隐患</p> <p>治理隐患</p>
</div> </div>
</div> </div>
......
src/view/biz/duty/situation/index.js
View file @ 82e0fcfa
...@@ -18,82 +18,84 @@ class Situation extends Component { ...@@ -18,82 +18,84 @@ class Situation extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
divVisable:'none' ,//控制弹窗显示 divVisable: 'none', //控制弹窗显示
title: '', //modal标题 title: '', //modal标题
type: '' //弹窗类型（根据类型切换不同弹窗） type: '' //弹窗类型（根据类型切换不同弹窗）
}; };
} }
componentWillMount() { componentWillMount() {}
} componentDidMount() {}
componentDidMount() {
}
componentWillUnmount() {
} componentWillUnmount() {}
onRef=(ref)=>{ onRef = ref => {
this.child1=ref; this.child1 = ref;
} };
//安全指数弹窗 //安全指数弹窗
kpsi(values){ kpsi(values) {
console.log(values); console.log(values);
this.setState({ this.setState({
divVisable : values.divVisable, divVisable: values.divVisable,
title : values.title, title: values.title,
type : values.type type: values.type
}) });
} }
render() { render() {
return ( return (
<div className='class-Situation'> <div className="class-Situation">
<div className='daily-duties-content'> <div className="daily-duties-content">
<div className='daily-duties-left'> <div className="daily-duties-left">
<div> <div>
<SafetyRate onClick={()=>{ <SafetyRate
this.child1.kpsi()}}/> onClick={() => {
this.child1.kpsi();
}}
/>
</div> </div>
<div> <div>
<GrowthStatistics onWarnClick={()=>{ <GrowthStatistics
this.child1.dangerWeekCensus()}}/> onWarnClick={() => {
this.child1.dangerWeekCensus();
}}
/>
</div> </div>
</div> </div>
<div className='daily-duties-middle'> <div className="daily-duties-middle">
<div> <div>
<Statistics/> <Statistics />
</div> </div>
<div> <div>
<RiskTrend/> <RiskTrend />
</div> </div>
</div> </div>
<div className='daily-duties-right'> <div className="daily-duties-right">
<div> <div>
<RiskFailure onRiskClick={()=>{ <RiskFailure
this.child1.safetyRiskFailure()}}/> onRiskClick={() => {
this.child1.safetyRiskFailure();
}}
/>
</div> </div>
<div> <div>
<RecentStatistics onStatisticClick={()=>{ <RecentStatistics
this.child1.sevenDaysRiskCensus()}}/> onStatisticClick={() => {
this.child1.sevenDaysRiskCensus();
}}
/>
</div> </div>
</div> </div>
</div>
<div>
</div> </div>
<CentralInfoView onRef={this.onRef}/> <div></div>
<CentralInfoView onRef={this.onRef} />
</div> </div>
); );
} }
} }
Situation.propTypes = { Situation.propTypes = {};
};
export default Situation; export default Situation;
src/view/biz/duty/situationDetail/data.js
View file @ 82e0fcfa
export const situationDetailData = [ export const situationDetailData = [
{ {
id:'1', sita: '复龙换流站', sitb: '80', id: '1',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sita: '复龙换流站',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitb: '80',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmHuo: 0,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmGu: 12,
}, sitAlarmXun: 23,
{ sitAlarmTb: 0.1,
id:'2', sita: '奉贤换流站', sitb: '80', sitAlarmHb: 0.23,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel1: 23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel2: 20,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel3: 16,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskLevel4: 12,
}, sitRiskTb: 0.1,
{ sitRiskHb: 0.23,
id:'3', sita: '锦屏换流站', sitb: '80', sitDangerFa: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerZl: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitDangerWzl: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitDangerTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerHb: 0.23,
}, sitManagerPx: 23,
{ sitManagerXl: 12,
id:'4', sita: '苏州换流站', sitb: '80', sitManagerBy: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitManagerYj: 97
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, },
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, {
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, id: '2',
}, sita: '奉贤换流站',
{ sitb: '80',
id:'5', sita: '天山换流站', sitb: '80', sitAlarmHuo: 0,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmGu: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitAlarmXun: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHb: 0.23,
}, sitRiskLevel1: 23,
{ sitRiskLevel2: 20,
id:'6', sita: '中州换流站', sitb: '80', sitRiskLevel3: 16,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel4: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskTb: 0.1,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerFa: 12,
}, sitDangerZl: 12,
{ sitDangerWzl: 23,
id:'7', sita: '宜宾换流站', sitb: '80', sitDangerTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerPx: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitManagerXl: 12,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitManagerBy: 12,
}, sitManagerYj: 97
{ },
id:'8', sita: '金华换流站', sitb: '80', {
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, id: '3',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sita: '锦屏换流站',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitb: '80',
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHuo: 0,
}, sitAlarmGu: 12,
{ sitAlarmXun: 23,
id:'9', sita: '龙泉换流站', sitb: '80', sitAlarmTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel1: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel2: 20,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskLevel3: 16,
}, sitRiskLevel4: 12,
{ sitRiskTb: 0.1,
id:'10', sita: '政平换流站', sitb: '80', sitRiskHb: 0.23,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerFa: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitDangerZl: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitDangerWzl: 23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerTb: 0.1,
}, sitDangerHb: 0.23,
{ sitManagerPx: 23,
id:'11', sita: '伊克昭换流站', sitb: '80', sitManagerXl: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitManagerBy: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerYj: 97
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, },
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, {
}, id: '4',
{ sita: '苏州换流站',
id:'12', sita: '沂南换流站', sitb: '80', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHuo: 0,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitAlarmGu: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmXun: 23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmTb: 0.1,
}, sitAlarmHb: 0.23,
{ sitRiskLevel1: 23,
id:'13', sita: '陕北换流站', sitb: '80', sitRiskLevel2: 20,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel3: 16,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel4: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskHb: 0.23,
}, sitDangerFa: 12,
{ sitDangerZl: 12,
id:'14', sita: '武汉换流站', sitb: '80', sitDangerWzl: 23,
sitDangerTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerPx: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitManagerXl: 12,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitManagerBy: 12,
}, sitManagerYj: 97
{ },
id:'15', sita: '洛阳换流站', sitb: '80', {
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, id: '5',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sita: '天山换流站',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitb: '80',
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHuo: 0,
}, sitAlarmGu: 12,
{ sitAlarmXun: 23,
id:'16', sita: '贵州换流站', sitb: '80', sitAlarmTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel1: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel2: 20,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskLevel3: 16,
}, sitRiskLevel4: 12,
] sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '6',
sita: '中州换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '7',
sita: '宜宾换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '8',
sita: '金华换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '9',
sita: '龙泉换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '10',
sita: '政平换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '11',
sita: '伊克昭换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '12',
sita: '沂南换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '13',
sita: '陕北换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '14',
sita: '武汉换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '15',
sita: '洛阳换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
},
{
id: '16',
sita: '贵州换流站',
sitb: '80',
sitAlarmHuo: 0,
sitAlarmGu: 12,
sitAlarmXun: 23,
sitAlarmTb: 0.1,
sitAlarmHb: 0.23,
sitRiskLevel1: 23,
sitRiskLevel2: 20,
sitRiskLevel3: 16,
sitRiskLevel4: 12,
sitRiskTb: 0.1,
sitRiskHb: 0.23,
sitDangerFa: 12,
sitDangerZl: 12,
sitDangerWzl: 23,
sitDangerTb: 0.1,
sitDangerHb: 0.23,
sitManagerPx: 23,
sitManagerXl: 12,
sitManagerBy: 12,
sitManagerYj: 97
}
];
src/view/biz/duty/situationDetail/index.js
View file @ 82e0fcfa
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {situationDetailData} from './data'; import { situationDetailData } from './data';
import { Table } from 'amos-antd'; import { Table } from 'amos-antd';
import { Layout,Search } from 'amos-framework'; import { Layout, Search } from 'amos-framework';
const { Header, Content } = Layout; const { Header, Content } = Layout;
const pageSize = 12; const pageSize = 12;
...@@ -19,215 +19,215 @@ class SituationDetail extends Component { ...@@ -19,215 +19,215 @@ class SituationDetail extends Component {
situationData: situationDetailData situationData: situationDetailData
}; };
} }
/** /**
* 设定间隔行样式 * 设定间隔行样式
*/ */
rowClassChange = (record, index) => { rowClassChange = (record, index) => {
let className = 'light-row'; let className = 'light-row';
if (index % 2 === 0) className = 'dark-row'; if (index % 2 === 0) className = 'dark-row';
return className; return className;
} };
/** /**
* 自定义总页数 * 自定义总页数
*/ */
showTotalPage = (total) => { showTotalPage = total => {
let pages = Math.ceil(total / pageSize); let pages = Math.ceil(total / pageSize);
return `共 ${pages} 页`; return `共 ${pages} 页`;
} };
columns = () => { columns = () => {
return ( return [
[ {
title: '换流站',
dataIndex: 'sita',
width: 120,
render: (text, record) => {
return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
}
},
{
title: ' 安全指数',
dataIndex: 'sitb',
width: 100
},
{
title: '告警',
width: 200,
children: [
{
title: '火灾',
dataIndex: 'sitAlarmHuo',
color: '#00EFE9'
},
{
title: '故障',
dataIndex: 'sitAlarmGu',
color: '#00EFE9'
},
{
title: '巡检',
dataIndex: 'sitAlarmXun',
color: '#00EFE9'
},
{
title: '同比/环比',
dataIndex: 'sitAlarmTb',
color: '#00EFE9',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display: 'inline-block' }}>{record.sitAlarmTb * 100}%↑</div>
<div style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitAlarmHb * 100}%↓</div>
</div>
);
}
}
]
},
{
title: '风险',
width: 200,
children: [
{
title: '一级',
dataIndex: 'sitRiskLevel1'
},
{
title: '二级',
dataIndex: 'sitRiskLevel2'
},
{
title: '三级',
dataIndex: 'sitRiskLevel3'
},
{
title: '四级',
dataIndex: 'sitRiskLevel4'
},
{ {
title: '换流站', title: '同比/环比',
dataIndex: 'sita', dataIndex: 'sitRiskTb',
width: 120,
render: (text, record) => { render: (text, record) => {
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) return (
<div>
<div style={{ color: 'red', display: 'inline-block' }}>{record.sitRiskTb * 100}%↑</div>
<div style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitRiskHb * 100}%↓</div>
</div>
);
} }
}
]
},
{
title: '隐患',
width: 200,
children: [
{
title: '发现',
dataIndex: 'sitDangerFa'
}, },
{ {
title: ' 安全指数', title: '治理',
dataIndex: 'sitb', dataIndex: 'sitDangerZl'
width: 100
}, },
{ {
title: '告警', title: '未治理',
width: 200, dataIndex: 'sitDangerWzl'
children:[
{
title: '火灾',
dataIndex: 'sitAlarmHuo',
color:'#00EFE9',
},
{
title: '故障',
dataIndex: 'sitAlarmGu',
color:'#00EFE9',
},
{
title: '巡检',
dataIndex: 'sitAlarmXun',
color:'#00EFE9',
},
{
title: '同比/环比',
dataIndex: 'sitAlarmTb',
color:'#00EFE9',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitAlarmTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitAlarmHb*100}%↓</div>
</div>)
}
},
],
}, },
{ {
title: '风险', title: '同比/环比',
width: 200, dataIndex: 'sitDangerTb',
children:[ render: (text, record) => {
{ return (
title: '一级', <div>
dataIndex: 'sitRiskLevel1', <div style={{ color: 'red', display: 'inline-block' }}>{record.sitDangerTb * 100}%↑</div>
}, <div style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitDangerHb * 100}%↓</div>
{ </div>
title: '二级', );
dataIndex: 'sitRiskLevel2', }
}, }
{ ]
title: '三级', },
dataIndex: 'sitRiskLevel3', {
}, title: '消防安全管理',
{ width: 200,
title: '四级', children: [
dataIndex: 'sitRiskLevel4', {
}, title: '培训',
{ dataIndex: 'sitManagerPx'
title: '同比/环比', },
dataIndex: 'sitRiskTb', {
render: (text, record) => { title: '训练',
return ( dataIndex: 'sitManagerXl'
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitRiskTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitRiskHb*100}%↓</div>
</div>)
}
},
],
}, },
{ {
title: '隐患', title: '器材保养',
width: 200, dataIndex: 'sitManagerBy'
children:[
{
title: '发现',
dataIndex: 'sitDangerFa',
},
{
title: '治理',
dataIndex: 'sitDangerZl',
},
{
title: '未治理',
dataIndex: 'sitDangerWzl',
},
{
title: '同比/环比',
dataIndex: 'sitDangerTb',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitDangerTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitDangerHb*100}%↓</div>
</div>)
}
},
],
}, },
{ {
title: '消防安全管理', title: '应急预案',
width: 200, dataIndex: 'sitManagerYj'
children:[ }
{
title: '培训',
dataIndex: 'sitManagerPx',
},
{
title: '训练',
dataIndex: 'sitManagerXl',
},
{
title: '器材保养',
dataIndex: 'sitManagerBy',
},
{
title: '应急预案',
dataIndex: 'sitManagerYj',
},
],
}
] ]
) }
} ];
};
/* /*
*态势查询 *态势查询
*/ */
onSituationDetailSearch=(e,value)=>{ onSituationDetailSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let {situationData}=this.state; let { situationData } = this.state;
situationData = situationData.filter(item => (item.sita).indexOf(value) > -1); situationData = situationData.filter(item => item.sita.indexOf(value) > -1);
this.setState({ this.setState({
situationData:situationData situationData: situationData
}) });
} else{ } else {
this.setState({ this.setState({
situationData:situationDetailData situationData: situationDetailData
}) });
} }
} };
render() { render() {
const {situationData} =this.state; const { situationData } = this.state;
const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage}; const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage };
return ( return (
<div className="class-situation-detail"> <div className="class-situation-detail">
<Layout> <Layout>
<Header style={{display:'flex'}}> <Header style={{ display: 'flex' }}>
<div>
<div><Search icon="search" style={{ marginLeft: 690,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onSituationDetailSearch} /></div> <Search icon="search" style={{ marginLeft: 690, display: 'inline-block' }} defaultValue="搜索" onIconClick={this.onSituationDetailSearch} />
<div class="dangerClass" style={{marginLeft:240,marginTop:10,fontSize:20,color:'#ffffff'}}> </div>
<div style={{color:'green'}}>{"安全"}</div> <div class="dangerClass" style={{ marginLeft: 240, marginTop: 10, fontSize: 20, color: '#ffffff' }}>
{"：指数>=90 "} <div style={{ color: 'green' }}>{'安全'}</div>
<div style={{color:'yellow',marginLeft:10}}>{"低风险"}</div> {'：指数>=90 '}
{"：60<指数<90 "} <div style={{ color: 'yellow', marginLeft: 10 }}>{'低风险'}</div>
<div style={{color:'red',marginLeft:10}}>{"高风险"}</div> {'：60<指数<90 '}
{"：指数<=60 "} <div style={{ color: 'red', marginLeft: 10 }}>{'高风险'}</div>
</div> {'：指数<=60 '}
</Header> </div>
<Content> </Header>
<Table className="tableDetail" <Content>
rowKey={record => record.id} <Table
dataSource={situationData} className="tableDetail"
style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }} rowKey={record => record.id}
columns={this.columns()} dataSource={situationData}
rowClassName={this.rowClassChange} style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }}
pagination={_pageNation}> columns={this.columns()}
</Table> rowClassName={this.rowClassChange}
</Content> pagination={_pageNation}
</Layout> ></Table>
</div> </Content>
</Layout>
</div>
); );
} }
} }
SituationDetail.propTypes = { SituationDetail.propTypes = {};
};
export default SituationDetail; export default SituationDetail;
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