Skip to content

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

代码优化

parent 0b4c954a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 402 additions and 414 deletions
src/view/biz/duty/detail/data.js
View file @ 82e0fcfa
This diff is collapsed.
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
This diff is collapsed.
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
This diff is collapsed.
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
This diff is collapsed.
src/view/biz/duty/situationDetail/index.js
View file @ 82e0fcfa
This diff is collapsed.
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