Skip to content

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

代码优化

parent 0b4c954a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 354 additions and 366 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,14 +129,13 @@ class IncidenceSeverityMatrix extends Component { ...@@ -133,14 +129,13 @@ class IncidenceSeverityMatrix extends Component {
lineStyle: { lineStyle: {
color: '#FF0000', color: '#FF0000',
width: 2 width: 2
},
},
},
},
]
} }
} }
}
}
]
};
}
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
return ( return (
......
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,12 +34,9 @@ class RiskDegreeHistogram extends Component { ...@@ -38,12 +34,9 @@ class RiskDegreeHistogram extends Component {
this.getBarViewContent(); this.getBarViewContent();
} }
componentWillReceiveProps() { componentWillReceiveProps() {}
}
getBarViewContent() {
} getBarViewContent() {}
getOptions() { getOptions() {
return { return {
...@@ -68,38 +61,48 @@ class RiskDegreeHistogram extends Component { ...@@ -68,38 +61,48 @@ class RiskDegreeHistogram extends Component {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['极3低端换流变流台', '极2低端换流变流台','极1低端换流变流台','极3低端换流变流台','极2低端换流变流台', '极1低端换流变流台', data: [
'极3低端换流变流台', '极2低端换流变流台', '极1低端换流变流台','极3低端换流变流台' ], '极3低端换流变流台',
width:50, '极2低端换流变流台',
'极1低端换流变流台',
'极3低端换流变流台',
'极2低端换流变流台',
'极1低端换流变流台',
'极3低端换流变流台',
'极2低端换流变流台',
'极1低端换流变流台',
'极3低端换流变流台'
],
width: 50,
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 18, fontSize: 18,
width:'10px' 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', name: 'RPNr',
type: 'bar', type: 'bar',
itemStyle:{ itemStyle: {
normal: { normal: {
color:'#FF0000', color: '#FF0000'
}, }
}, },
data: [99,99,99,99,99,99,99,99,99,99] data: [99, 99, 99, 99, 99, 99, 99, 99, 99, 99]
} }
] ]
}; };
...@@ -107,7 +110,7 @@ class RiskDegreeHistogram extends Component { ...@@ -107,7 +110,7 @@ class RiskDegreeHistogram extends Component {
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 style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpni}</div>
</div> </div>
<div className='top-ten-item-middleRed' style={{display:'flex'}}> <div className="top-ten-item-middleRed" style={{ display: 'flex' }}>
<div className='top-ten-item-middlelinearRed' style={{height:16,width:`${item.rpnr}%`}}></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 style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpnr}</div>
</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,61 +10,58 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix'; ...@@ -10,61 +10,58 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix';
*/ */
class RiskAssessment extends Component { class RiskAssessment extends Component {
//获取等级 //获取等级
getLegend() { getLegend() {
return ( return (
<div className='situation-map-legend' > <div className="situation-map-legend">
<div className='situation-map-legend-item'> <div className="situation-map-legend-item">
<div className='situation-map-legend-block' style={{ background: '#15653d' }} /> <div className="situation-map-legend-block" style={{ background: '#15653d' }} />
<div>初始</div> <div>初始</div>
</div> </div>
<div className='situation-map-legend-item'> <div className="situation-map-legend-item">
<div className='situation-map-legend-block' style={{ background: '#0078ef' }} /> <div className="situation-map-legend-block" style={{ background: '#0078ef' }} />
<div>4/5级</div> <div>4/5级</div>
</div> </div>
<div className='situation-map-legend-item'> <div className="situation-map-legend-item">
<div className='situation-map-legend-block' style={{ background: '#ffcc2a' }} /> <div className="situation-map-legend-block" style={{ background: '#ffcc2a' }} />
<div>3级</div> <div>3级</div>
</div> </div>
<div className='situation-map-legend-item'> <div className="situation-map-legend-item">
<div className='situation-map-legend-block' style={{ background: '#ff5a20' }} /> <div className="situation-map-legend-block" style={{ background: '#ff5a20' }} />
<div>2级</div> <div>2级</div>
</div> </div>
<div className='situation-map-legend-item'> <div className="situation-map-legend-item">
<div className='situation-map-legend-block' style={{ background: '#f42828' }} /> <div className="situation-map-legend-block" style={{ background: '#f42828' }} />
<div>1级</div> <div>1级</div>
</div> </div>
</div> </div>
); );
} }
onClick=()=>{ onClick = () => {
this.props.updateParents({ divVisable:'block', riskVisable:'none'}); this.props.updateParents({ divVisable: 'block', riskVisable: 'none' });
} };
render() { render() {
return ( return (
<div className="mainContent" style={{display: this.props.riskVisable }}> <div className="mainContent" style={{ display: this.props.riskVisable }}>
<Layout> <Layout>
<Header className="contentHeader"> <Header className="contentHeader">
<div className="headerLeft" style={{ display: 'inline' }}>{this.props.detailTitle}</div> <div className="headerLeft" style={{ display: 'inline' }}>
{this.props.detailTitle}
</div>
<div className="headerRight" style={{ display: 'inline' }}> <div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{marginTop:3}} /> <img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{ marginTop: 3 }} />
</div> </div>
</Header> </Header>
<Layout> <Layout>
<Content className="riskcontent"> <Content className="riskcontent">
<Header className="blockOneHeader"> <Header className="blockOneHeader">
<Header className="oneChildHeader"> <Header className="oneChildHeader">
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} /> <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header> </Header>
<Content className="oneHeaderContent"> <Content className="oneHeaderContent">
<img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35 ,marginLeft:160}} /> <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35, marginLeft: 160 }} />
{this.getLegend()} {this.getLegend()}
</Content> </Content>
</Header> </Header>
<Content className="blockOneContent"> <Content className="blockOneContent">
...@@ -99,7 +96,6 @@ class RiskAssessment extends Component { ...@@ -99,7 +96,6 @@ class RiskAssessment extends Component {
</Sider> </Sider>
</Layout> </Layout>
</Content> </Content>
</Content> </Content>
<Sider className="risksider"> <Sider className="risksider">
...@@ -117,7 +113,5 @@ class RiskAssessment extends Component { ...@@ -117,7 +113,5 @@ class RiskAssessment extends Component {
} }
} }
RiskAssessment.propTypes = { 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 className ='top-ten-item-bottom'> </div>
<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 className ='top-ten-item-bottom'> </div>
<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() {
}
onRef=(ref)=>{ componentWillUnmount() {}
this.child1=ref;
}
onRef = 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></div>
</div> <CentralInfoView onRef={this.onRef} />
<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
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;
...@@ -27,25 +27,24 @@ class SituationDetail extends Component { ...@@ -27,25 +27,24 @@ class SituationDetail 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;
} };
/** /**
* 自定义总页数 * 自定义总页数
*/ */
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: '换流站', title: '换流站',
dataIndex: 'sita', dataIndex: 'sita',
width: 120, width: 120,
render: (text, record) => { render: (text, record) => {
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
} }
}, },
{ {
...@@ -56,55 +55,56 @@ class SituationDetail extends Component { ...@@ -56,55 +55,56 @@ class SituationDetail extends Component {
{ {
title: '告警', title: '告警',
width: 200, width: 200,
children:[ children: [
{ {
title: '火灾', title: '火灾',
dataIndex: 'sitAlarmHuo', dataIndex: 'sitAlarmHuo',
color:'#00EFE9', color: '#00EFE9'
}, },
{ {
title: '故障', title: '故障',
dataIndex: 'sitAlarmGu', dataIndex: 'sitAlarmGu',
color:'#00EFE9', color: '#00EFE9'
}, },
{ {
title: '巡检', title: '巡检',
dataIndex: 'sitAlarmXun', dataIndex: 'sitAlarmXun',
color:'#00EFE9', color: '#00EFE9'
}, },
{ {
title: '同比/环比', title: '同比/环比',
dataIndex: 'sitAlarmTb', dataIndex: 'sitAlarmTb',
color:'#00EFE9', color: '#00EFE9',
render: (text, record) => { render: (text, record) => {
return ( return (
<div> <div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitAlarmTb*100}%↑</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 style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitAlarmHb * 100}%↓</div>
</div>) </div>
);
} }
}, }
], ]
}, },
{ {
title: '风险', title: '风险',
width: 200, width: 200,
children:[ children: [
{ {
title: '一级', title: '一级',
dataIndex: 'sitRiskLevel1', dataIndex: 'sitRiskLevel1'
}, },
{ {
title: '二级', title: '二级',
dataIndex: 'sitRiskLevel2', dataIndex: 'sitRiskLevel2'
}, },
{ {
title: '三级', title: '三级',
dataIndex: 'sitRiskLevel3', dataIndex: 'sitRiskLevel3'
}, },
{ {
title: '四级', title: '四级',
dataIndex: 'sitRiskLevel4', dataIndex: 'sitRiskLevel4'
}, },
{ {
title: '同比/环比', title: '同比/环比',
...@@ -112,28 +112,29 @@ class SituationDetail extends Component { ...@@ -112,28 +112,29 @@ class SituationDetail extends Component {
render: (text, record) => { render: (text, record) => {
return ( return (
<div> <div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitRiskTb*100}%↑</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 style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitRiskHb * 100}%↓</div>
</div>) </div>
);
} }
}, }
], ]
}, },
{ {
title: '隐患', title: '隐患',
width: 200, width: 200,
children:[ children: [
{ {
title: '发现', title: '发现',
dataIndex: 'sitDangerFa', dataIndex: 'sitDangerFa'
}, },
{ {
title: '治理', title: '治理',
dataIndex: 'sitDangerZl', dataIndex: 'sitDangerZl'
}, },
{ {
title: '未治理', title: '未治理',
dataIndex: 'sitDangerWzl', dataIndex: 'sitDangerWzl'
}, },
{ {
title: '同比/环比', title: '同比/环比',
...@@ -141,84 +142,85 @@ class SituationDetail extends Component { ...@@ -141,84 +142,85 @@ class SituationDetail extends Component {
render: (text, record) => { render: (text, record) => {
return ( return (
<div> <div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitDangerTb*100}%↑</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 style={{ color: 'green', display: 'inline-block', marginLeft: 5 }}>{record.sitDangerHb * 100}%↓</div>
</div>) </div>
);
} }
}, }
], ]
}, },
{ {
title: '消防安全管理', title: '消防安全管理',
width: 200, width: 200,
children:[ children: [
{ {
title: '培训', title: '培训',
dataIndex: 'sitManagerPx', dataIndex: 'sitManagerPx'
}, },
{ {
title: '训练', title: '训练',
dataIndex: 'sitManagerXl', dataIndex: 'sitManagerXl'
}, },
{ {
title: '器材保养', title: '器材保养',
dataIndex: 'sitManagerBy', dataIndex: 'sitManagerBy'
}, },
{ {
title: '应急预案', title: '应急预案',
dataIndex: 'sitManagerYj', 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>
{'：指数<=60 '}
</div> </div>
</Header> </Header>
<Content> <Content>
<Table className="tableDetail" <Table
className="tableDetail"
rowKey={record => record.id} rowKey={record => record.id}
dataSource={situationData} dataSource={situationData}
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()} columns={this.columns()}
rowClassName={this.rowClassChange} rowClassName={this.rowClassChange}
pagination={_pageNation}> pagination={_pageNation}
</Table> ></Table>
</Content> </Content>
</Layout> </Layout>
</div> </div>
...@@ -226,8 +228,6 @@ class SituationDetail extends Component { ...@@ -226,8 +228,6 @@ class SituationDetail extends Component {
} }
} }
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