Skip to content

S
station-elec-manage-view
Commit 11c42e31 authored by 万伟's avatar 万伟
Browse files
Options

风险详情页图标引入，布局样式调整

parent 8db56280
Expand all Show whitespace changes
Inline Side-by-side
Showing with 367 additions and 292 deletions
report.20200527.184722.3868.0.001.json 0 → 100644
View file @ 11c42e31
This diff is collapsed.
src/styles/view/biz/detail/detail.scss
View file @ 11c42e31
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
margin: -60px 0; margin: -60px 0;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
overflow-y:auto;
.amos-layout{ .amos-layout{
widows:100%; widows:100%;
height:100%; height:100%;
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
color: #F7FF00; color: #F7FF00;
line-height: 32px; line-height: 32px;
float: left; float: left;
margin-left: 40px; margin-left: 50px;
} }
.headerRight{ .headerRight{
margin-top: 15px; margin-top: 15px;
...@@ -134,14 +135,14 @@ ...@@ -134,14 +135,14 @@
.oneHeaderContent{ .oneHeaderContent{
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
text-align: center; text-align: center;
height:575px; height:550px;
background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%); background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
} }
} }
.blockOneContent{ .blockOneContent{
width:47%; width:46%;
height: 370px; height: 370px;
margin-left: 30px; margin: 45px 0 0 30px;
display: inline-block; display: inline-block;
.oneChildLayout { .oneChildLayout {
background: transparent; background: transparent;
...@@ -156,18 +157,19 @@ ...@@ -156,18 +157,19 @@
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.twoHeaderContent{ .twoHeaderContent{
height:330px; height:320px;
width: 748px; width: 648px;
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
} }
} }
} }
} }
.blockTwoContent{ .blockTwoContent{
width:47%; width:46%;
height: 370px; height: 370px;
display: inline-block; display: inline-block;
margin-left: 35px; margin: 45px 0 0 35px;
.oneChildLayout { .oneChildLayout {
height: 360px; height: 360px;
background: transparent; background: transparent;
...@@ -181,9 +183,13 @@ ...@@ -181,9 +183,13 @@
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
} }
.twoHeaderContent{ .twoHeaderContent{
height:330px; height:320px;
width: 748px; width: 648px;
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
.risk-incidence-severity-matrix{
height: 95%;
}
} }
} }
} }
...@@ -193,15 +199,15 @@ ...@@ -193,15 +199,15 @@
} }
} }
.risksider{ .risksider{
height:1020px; height:970px;
flex: 0 0 486px!important; flex: 0 0 456px!important;
width: 486px!important; width: 456px!important;
margin: 6px 40px 0px 0px; margin: 6px 40px 0px 0px;
background: transparent; background: transparent;
.amos-layout-sider-children{ .amos-layout-sider-children{
margin-top: 10px; margin-top: 10px;
.risksiderHeader{ .risksiderHeader{
height:40px; height:35px;
background: transparent; background: transparent;
margin-left: -50px; margin-left: -50px;
} }
...@@ -213,12 +219,11 @@ ...@@ -213,12 +219,11 @@
} }
.risksiderContent{ .risksiderContent{
margin-top: -3px; height:939px;
height:980px;
border:1px solid rgba(95,255,253,1); border:1px solid rgba(95,255,253,1);
background: linear-gradient(180deg, rgba(0,0,0,0.57) 0%, rgba(12,181,213,0.1) 100%);
} }
} }
} }
} }
...@@ -261,7 +266,7 @@ ...@@ -261,7 +266,7 @@
} }
.blockTwoContent{ .blockTwoContent{
width: 699; width: 699px;
height: 342px; height: 342px;
display: inline-block; display: inline-block;
.oneChildLayout { .oneChildLayout {
...@@ -288,7 +293,7 @@ ...@@ -288,7 +293,7 @@
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
margin-top: 380px; margin-top: 380px;
margin-left: 140px; margin-left: 80px;
position: initial; position: initial;
width: 108px; width: 108px;
height:30px; height:30px;
...@@ -307,6 +312,90 @@ ...@@ -307,6 +312,90 @@
} }
} }
}
.risk-degree-pie-child {
display: inline-block;
width: 100%;
height: 310px;;
.risk-degree-pie1 {
display: inline-block;
width: 30%;
height: 75%;
text-align: center;
}
.risk-degree-pie2 {
display: inline-block;
width: 30%;
height: 75%;
text-align: center;
}
.risk-degree-pie3 {
display: inline-block;
width: 30%;
height: 75%;
text-align: center;
}
}
.risk-top-ten-content{
color: '#fff';
font-size: 14px;
width: 100%;
height: 100%;
.top-ten-content{
padding:pxToRem(30px) pxToRem(20px);
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
.top-ten-item{
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 15px;
.top-risk{
display: block;
margin-left: pxToRem(16px);
width: pxToRem(320px);
.top-ten-item-middle{
width:pxToRem(248px);
height: pxToRem(16px);
display: flex;
justify-content: center;
background-color: #1C6264;
.top-ten-item-middlelinear{
display: flex;
height: pxToRem(16px)!important;
background-image: linear-gradient(to right, #1C6264 , #00FFF7);
}
}
.top-ten-item-middleRed{
margin-top: pxToRem(15px);
width:pxToRem(248px);
height: pxToRem(16px);
display: flex;
justify-content: center;
background-color: #1C6264;
.top-ten-item-middlelinearRed{
display: flex;
height: pxToRem(16px)!important;
background-image: linear-gradient(172deg,rgba(255,0,0,1) 0%,rgba(255,128,0,0) 100%);
}
}
}
.top-ten-item-bottom{
width:pxToRem(36px);
display: pxToRem(16px);
flex-direction:row;
justify-content: flex-end;
}
}
}
} }
\ No newline at end of file
src/view/biz/duty/detail/data.js
View file @ 11c42e31
...@@ -44,63 +44,63 @@ const riskData = [ ...@@ -44,63 +44,63 @@ const riskData = [
] ]
const dangerWeekCensusData = [ const dangerWeekCensusData = [
{ {
'da': '复龙换流站', 'db': '12', 'dc': '12', 'da': '复龙换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '奉贤换流站', 'db': '12', 'dc': '12', 'da': '奉贤换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '苏州换流站', 'db': '12', 'dc': '12', 'da': '苏州换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '中州换流站', 'db': '12', 'dc': '12', 'da': '中州换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '天山换流站', 'db': '12', 'dc': '12', 'da': '天山换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '金华换流站', 'db': '12', 'dc': '12', 'da': '金华换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '龙泉换流站', 'db': '12', 'dc': '12', 'da': '龙泉换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '政平换流站', 'db': '12', 'dc': '12', 'da': '政平换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '伊克昭换流站', 'db': '12', 'dc': '12' 'da': '伊克昭换流站', 'db': 23, 'dc': 22
}, },
{ {
'da': '陕北换流站', 'db': '12', 'dc': '12', 'da': '陕北换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '武汉换流站', 'db': '12', 'dc': '12', 'da': '武汉换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '金华换流站', 'db': '12', 'dc': '12', 'da': '金华换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '龙泉换流站', 'db': '12', 'dc': '12', 'da': '龙泉换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '政平换流站', 'db': '12', 'dc': '12', 'da': '政平换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '伊克昭换流站', 'db': '12', 'dc': '12' 'da': '伊克昭换流站', 'db': 23, 'dc': 22
}, },
{ {
'da': '陕北换流站', 'db': '12', 'dc': '12', 'da': '陕北换流站', 'db': 23, 'dc': 22,
}, },
{ {
'da': '武汉换流站', 'db': '12', 'dc': '12', 'da': '武汉换流站', 'db': 23, 'dc': 22,
}] }]
const sevenDaysRiskCensusData = [{ const sevenDaysRiskCensusData = [{
...@@ -143,6 +143,20 @@ const sevenDaysRiskCensusData = [{ ...@@ -143,6 +143,20 @@ const sevenDaysRiskCensusData = [{
}] }]
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},
]
/** /**
* 数据组件 * 数据组件
*/ */
...@@ -150,4 +164,4 @@ class JsonData extends Component { ...@@ -150,4 +164,4 @@ class JsonData extends Component {
} }
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData }; export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData,riskTopTenData};
src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js
View file @ 11c42e31
...@@ -19,182 +19,133 @@ class IncidenceSeverityMatrix extends Component { ...@@ -19,182 +19,133 @@ class IncidenceSeverityMatrix extends Component {
}; };
} }
componentDidMount() {
this.queryRiskSourceMatrix();
}
getOptions() { getOptions() {
return { return {
grid: [{ x: '8%', y: '13%', width: '75%', height: '75%' }],
tooltip: { legend: {
formatter: item => { data: ['故障率(O)', '严重度(S)', '最低线', '最高线'],
let text = item.value; x: 100,
// console.log(JSON.stringify(item)); y: 20,
return text[2] + '<br>' + 'S:' + text[0] + ' ' + ' O:' + text[1]; textStyle: {
} color: '#fff',
fontSize: 14,
}, },
color: ['green', 'red', '#ff6600'], },
xAxis: [ xAxis: {
{ type: 'category',
nameGap: 5, name: 'S',
gridIndex: 0,
min: 0,
max: 10,
name: 'S(严重度)',
// nameRotate: 90,
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15 fontSize: 20,
color:'#5FFFFD',
},
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14,
} }
},
axisLine: {
lineStyle: {
color: '#245665',
} }
], },
yAxis: [ splitLine: {
{ show: true,
nameGap: 5, lineStyle: {
gridIndex: 0, color: ['#245665'],
min: 0, width: 1,
max: 10, },
name: 'O(故障率)',
}
},
yAxis: {
type: 'value',
name: 'O',
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 15 fontSize: 20,
color:'#5FFFFD',
},
fontSize:20,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
} }
},
axisLine: {
lineStyle: {
color: '#245665',
} }
],
// symbol: 'rect',
legend: {
top: 5,
right: 100,
selectedMode: false,
data: ['最低线', '最高线', '']
}, },
series: this.getSeries() splitLine: {
}; show: true,
lineStyle: {
color: ['#245665'],
width: 1,
} }
getSeries() {
let series = [];
let safetySeries = {
name: '最低线',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: this.state.dataAll[2],
markLine: this.markLineOpt('safety')
};
let dangerSeries = {
name: '最高线',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: this.state.dataAll[0],
markLine: this.markLineOpt('danger')
};
let warnSeries = {
name: '111',
type: 'scatter',
xAxisIndex: 0,
yAxisIndex: 0,
data: this.state.dataAll[1]
};
series.push(safetySeries);
series.push(dangerSeries);
series.push(warnSeries);
return series;
} }
markLineOpt(type) {
var data1 = [];
let color = 'green';
if (type === 'safety') {
color = 'green';
data1 = [
{
coord: [7, 0],
symbol: 'none'
}, },
series: [
{ {
coord: [0, 4], name: '故障率(O)',
symbol: 'none' type: 'line',
} data: []
]; },
} else if (type === 'danger') {
color = 'red';
data1 = [
{ {
coord: [9, 0], name: '严重度(S)',
symbol: 'none' type: 'line',
data: []
}, },
{ {
coord: [0, 8], name: '最低线',
symbol: 'none' type: 'line',
} symbol: 'circle',
]; symbolSize: 8,
} data: [0, 2, 4, 5, 3, 2, 1, 3, 4, 9],
return { itemStyle: {
animation: false,
label: {
normal: { normal: {
formatter: '', color: '#0A73FF',
textStyle: {
align: ''
}
}
},
lineStyle: { lineStyle: {
normal: { color: '#0A73FF',
type: 'solid', width: 2
color: color
}
}, },
tooltip: {
formatter: ''
}, },
data: [data1]
};
}
queryRiskSourceMatrix() {
// queryRiskSourceMatrixAction().then(data => {
// data &&
// data.map(e => {
// this.classifyPoints(e);
// });
// let { dataAll, dangerPoints, safePoints, warnPoints } = this.state;
// dataAll.push(dangerPoints);
// dataAll.push(warnPoints);
// dataAll.push(safePoints);
// this.setState({
// dataAll
// });
// });
} }
},
{
name: '最高线',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [4, 5, 1, 2, 3, 7, 9, 3, 2, 1],
itemStyle: {
normal: {
color: '#FF0000',
lineStyle: {
color: '#FF0000',
width: 2
},
},
classifyPoints(point) { },
let { dangerPoints, safePoints, warnPoints } = this.state; },
let d = []; ]
d.push(point.evaluationSid);
d.push(point.evaluationOid);
d.push(point.name);
if (((8 * point.evaluationSid) + (9 * point.evaluationOid)) > 72) {//红色区域：S>=9或O>=8 (直线右侧区域8x + 9y - 72 > 0)
dangerPoints.push(d);
} else if (((4 * point.evaluationSid) + (7 * point.evaluationOid)) < 28) {//绿色区域：S<7且O<4 (直线左侧区域4x + 7y - 28 < 0)
safePoints.push(d);
} else {//橙色区域：S<9且O<8&&S>=7且O>=4
warnPoints.push(d);
} }
this.setState({
dangerPoints,
safePoints,
warnPoints
});
} }
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
return ( return (
<div className="risk-incidence-severity-matrix"> <div className="risk-incidence-severity-matrix">
<AmosEcharts option={option} /> <AmosEcharts option={option} style={{ height: '330px', width: '660px' }} />
</div> </div>
); );
} }
......
src/view/biz/duty/detail/echarts/RiskDegreeHistogram.js
View file @ 11c42e31
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import AmosEcharts from 'amos-viz/lib/echarts'; import AmosEcharts from 'amos-viz/lib/echarts';
import AmosWebSocket from 'amos-websocket'; import JsonData from './../data';
import { Connect } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
// import { queryRiskSourceRpnCountAction } from './../../../../services/situationService'; // import { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts'; // import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const eventConnect = Connect.eventConnect; const riskTopTenData=JsonData.riskTopTenData;
const labelOption = { const labelOption = {
normal: { normal: {
show: true, show: true,
...@@ -42,26 +42,7 @@ class RiskDegreeHistogram extends Component { ...@@ -42,26 +42,7 @@ class RiskDegreeHistogram extends Component {
} }
getBarViewContent() { getBarViewContent() {
// queryRiskSourceRpnCountAction().then(
// data => {
// let riskNameList = [];
// let rpniData = [];
// let rpnrData = [];
// data && data.map(e => {
// riskNameList.push(e.name);
// rpniData.push(e.rpni);
// rpnrData.push(e.rpn);
// });
// this.setState({
// riskNameList: riskNameList.reverse(),
// rpniData: rpniData.reverse(),
// rpnrData: rpnrData.reverse()
// });
// },
// err => {
// console.log(err);
// }
// );
} }
getOptions() { getOptions() {
...@@ -73,50 +54,52 @@ class RiskDegreeHistogram extends Component { ...@@ -73,50 +54,52 @@ class RiskDegreeHistogram extends Component {
} }
}, },
legend: { legend: {
data: [ data: ['RPNi', 'RPNr']
{
name: 'RPNi',
icon: 'circle'
},
{
name: 'RPNr',
icon: 'circle'
}
],
x: 'right',
top: '20',
right: '120'
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '6%', right: '3%',
bottom: '3%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
boundaryGap: [0, 0.03] boundaryGap: [0, 0]
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: this.state.riskNameList data: ['极3低端换流变流台', '极2低端换流变流台','极1低端换流变流台','极3低端换流变流台','极2低端换流变流台', '极1低端换流变流台',
'极3低端换流变流台', '极2低端换流变流台', '极1低端换流变流台','极3低端换流变流台' ],
width:50,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 18,
width:'10px'
}
},
}, },
color: ['#35bf73', '#f16060'],
series: [ series: [
{ {
name: 'RPNi', name: 'RPNi',
type: 'bar', type: 'bar',
label: labelOption, itemStyle:{
data: this.state.rpniData, normal: {
// barGap: 2 color:'#5FFFFD',
barWidth: 14 },
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100,100]
}, },
{ {
name: 'RPNr', name: 'RPNr',
type: 'bar', type: 'bar',
label: labelOption, itemStyle:{
data: this.state.rpnrData, normal: {
barWidth: 14 color:'#FF0000',
},
},
data: [99,99,99,99,99,99,99,99,99,99]
} }
] ]
}; };
...@@ -130,9 +113,36 @@ class RiskDegreeHistogram extends Component { ...@@ -130,9 +113,36 @@ class RiskDegreeHistogram extends Component {
const option = this.getOptions(); const option = this.getOptions();
// const wsURL = completeToken(SysWsURL.rulews); // const wsURL = completeToken(SysWsURL.rulews);
return ( return (
<div className="risk-degree-rpn-histogram"> <div className="risk-top-ten-content">
<AmosWebSocket ref={node => this.aws = node} onMessage={this.handleData} reconnect debug /> {/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */}
<AmosEcharts option={option} />
<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>
{
riskTopTenData.map((item,index)=>
<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>
<div className="top-risk">
<div className='top-ten-item-middle' style={{display:'flex'}}>
<div className='top-ten-item-middlelinear' style={{height:16,width:`${item.rpni}%`}}> </div>
<div style={{lineHeight:'15px',position:'absolute',right:'45px'}}>{item.rpni}</div>
</div>
<div className='top-ten-item-middleRed' style={{display:'flex'}}>
<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 className ='top-ten-item-bottom'>
<span>{item.value}</span>
</div>
</div>
)
}
</div>
</div> </div>
); );
} }
...@@ -143,7 +153,7 @@ RiskDegreeHistogram.propTypes = {}; ...@@ -143,7 +153,7 @@ RiskDegreeHistogram.propTypes = {};
RiskDegreeHistogram.defaultProps = { RiskDegreeHistogram.defaultProps = {
data: {}, data: {},
legend: [], legend: [],
chartStyle: { width: '100%', height: '20rem' } chartStyle: { width: '100%', height: '100%' }
}; };
export default RiskDegreeHistogram; export default RiskDegreeHistogram;
src/view/biz/duty/detail/echarts/RiskDegreePie.js
View file @ 11c42e31
...@@ -17,9 +17,9 @@ class RiskDegreePie extends Component { ...@@ -17,9 +17,9 @@ class RiskDegreePie extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
monthData: { type0Rate: '0%', countOfType0: 0 }, monthData: { type0Rate: '2%', countOfType0: 5 },
seasonData: { type0Rate: '0%', countOfType0: 0 }, seasonData: { type0Rate: '2%', countOfType0: 5 },
yearData: { type0Rate: '0%', countOfType0: 0 } yearData: { type0Rate: '2%', countOfType0: 5 }
}; };
} }
...@@ -45,19 +45,15 @@ class RiskDegreePie extends Component { ...@@ -45,19 +45,15 @@ class RiskDegreePie extends Component {
getMonthOptions(value, obj) { getMonthOptions(value, obj) {
let data = []; let data = [];
let color = 'lightgray';
let data1 = {}; let data1 = {};
let data2 = {}; let data2 = {};
if (obj) { if (obj) {
if (value === 'month') { if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') { } else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') { } else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
} }
data1.value = obj.countOfType0; data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0; data2.value = obj.countOfSource - obj.countOfType0;
...@@ -65,21 +61,19 @@ class RiskDegreePie extends Component { ...@@ -65,21 +61,19 @@ class RiskDegreePie extends Component {
data.push(data1); data.push(data1);
data.push(data2); data.push(data2);
} }
let colors = [];
colors.push(color);
colors.push('lightgray');
return { return {
color: colors,
series: [ series: [
{ {
name: '风险率', name: '风险率',
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['60%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
color:['#FE0000','#5FFFFD'],
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'black', color: 'white',
fontSize:25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -89,7 +83,10 @@ class RiskDegreePie extends Component { ...@@ -89,7 +83,10 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
} }
] ]
}; };
...@@ -97,19 +94,15 @@ class RiskDegreePie extends Component { ...@@ -97,19 +94,15 @@ class RiskDegreePie extends Component {
getSeasonOptions(value, obj) { getSeasonOptions(value, obj) {
let data = []; let data = [];
let color = 'lightgray';
let data1 = {}; let data1 = {};
let data2 = {}; let data2 = {};
if (obj) { if (obj) {
if (value === 'month') { if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') { } else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') { } else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
} }
data1.value = obj.countOfType0; data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0; data2.value = obj.countOfSource - obj.countOfType0;
...@@ -117,21 +110,19 @@ class RiskDegreePie extends Component { ...@@ -117,21 +110,19 @@ class RiskDegreePie extends Component {
data.push(data1); data.push(data1);
data.push(data2); data.push(data2);
} }
let colors = [];
colors.push(color);
colors.push('lightgray');
return { return {
color: colors,
series: [ series: [
{ {
name: '风险率', name: '风险率',
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['60%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
color:['#FE6600','#5FFFFD'],
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'black', color: 'white',
fontSize:25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -141,7 +132,10 @@ class RiskDegreePie extends Component { ...@@ -141,7 +132,10 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
} }
] ]
}; };
...@@ -149,19 +143,15 @@ class RiskDegreePie extends Component { ...@@ -149,19 +143,15 @@ class RiskDegreePie extends Component {
getYearOptions(value, obj) { getYearOptions(value, obj) {
let data = []; let data = [];
let color = 'lightgray';
let data1 = {}; let data1 = {};
let data2 = {}; let data2 = {};
if (obj) { if (obj) {
if (value === 'month') { if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') { } else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') { } else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率'; data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
} }
data1.value = obj.countOfType0; data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0; data2.value = obj.countOfSource - obj.countOfType0;
...@@ -169,21 +159,19 @@ class RiskDegreePie extends Component { ...@@ -169,21 +159,19 @@ class RiskDegreePie extends Component {
data.push(data1); data.push(data1);
data.push(data2); data.push(data2);
} }
let colors = [];
colors.push(color);
colors.push('lightgray');
return { return {
color: colors,
series: [ series: [
{ {
name: '风险率', name: '风险率',
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['60%', '70%'],
color:['#FFD600','#5FFFFD'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'black', color: 'white',
fontSize:25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -193,7 +181,10 @@ class RiskDegreePie extends Component { ...@@ -193,7 +181,10 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
} }
] ]
}; };
...@@ -210,19 +201,31 @@ class RiskDegreePie extends Component { ...@@ -210,19 +201,31 @@ class RiskDegreePie extends Component {
let seasonOption = this.getSeasonOptions('season', seasonData); let seasonOption = this.getSeasonOptions('season', seasonData);
let yearOption = this.getYearOptions('year', yearData); let yearOption = this.getYearOptions('year', yearData);
return ( return (
<div className="risk-degree-pie"> <div className="risk-degree-pie-child" style={{color:'#5FFFFD',textAlign:'center'}}>
<AmosWebSocket ref={node => this.aws = node} onMessage={this.handleData} reconnect debug />
<div className="risk-degree-pie1"> <div className="risk-degree-pie1">
<AmosEcharts option={monthOption} /> <AmosEcharts option={monthOption} style={{ height: '210px', width: '210px' }}/>
<span>本月风险上升率 | {monthData.type0Rate} {monthData.countOfType0}个</span>
<div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </div>
<div style={{fontSize:22,color:'red',fontWeight:'bold',display:'inline-block',marginLeft:10}}>{monthData.type0Rate}↑</div>
</div>
<div style={{fontSize:22,color:'#CEC700'}}>本月风险</div>
</div> </div>
<div className="risk-degree-pie2"> <div className="risk-degree-pie2">
<AmosEcharts option={seasonOption} /> <AmosEcharts option={seasonOption} style={{ height: '210px', width: '210px' }}/>
<span>本季度风险上升率 | {seasonData.type0Rate} {seasonData.countOfType0}个</span> <div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </div>
<div style={{fontSize:22,fontWeight:'bold',color:'red',display:'inline-block',marginLeft:10}}>{monthData.type0Rate}↑</div>
</div>
<div style={{fontSize:22,color:'#CEC700'}}>本季度风险</div>
</div> </div>
<div className="risk-degree-pie3"> <div className="risk-degree-pie3">
<AmosEcharts option={yearOption} /> <AmosEcharts option={yearOption} style={{ height: '210px', width: '210px' }}/>
<span>本年风险上升率 | {yearData.type0Rate} {yearData.countOfType0}个</span> <div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </div>
<div style={{fontSize:22,color:'red',fontWeight:'bold',display:'inline-block',marginLeft:10}}>{monthData.type0Rate}↑</div>
</div>
<div style={{fontSize:22,color:'#CEC700'}}>本年风险</div>
</div> </div>
</div> </div>
); );
......
src/view/biz/duty/detail/index.js
View file @ 11c42e31
...@@ -247,12 +247,18 @@ class CentralInfoView extends Component { ...@@ -247,12 +247,18 @@ class CentralInfoView extends Component {
{ {
title: '告警', title: '告警',
dataIndex: 'db', dataIndex: 'db',
width: 120 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: '隐患', title: '隐患',
dataIndex: 'dc', dataIndex: 'dc',
width: 120 width: 120,
render : (text, record) => {
return(<div><span>{text}</span><span style={{marginLeft:100}}>{Math.round((text/(record.db+record.dc))*100)}%</span></div>)
}
}, },
] ]
) )
...@@ -390,7 +396,7 @@ class CentralInfoView extends Component { ...@@ -390,7 +396,7 @@ class CentralInfoView extends Component {
<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:'5px'}}/> <img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="42px" style={{marginTop:'3px'}}/>
</div> </div>
</Header> </Header>
<Content className="content"> <Content className="content">
......
src/view/biz/duty/detail/riskDetail.js
View file @ 11c42e31
...@@ -51,7 +51,7 @@ class RiskAssessment extends Component { ...@@ -51,7 +51,7 @@ class RiskAssessment extends Component {
<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:5}} /> <img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{marginTop:3}} />
</div> </div>
</Header> </Header>
<Layout> <Layout>
...@@ -59,10 +59,10 @@ class RiskAssessment extends Component { ...@@ -59,10 +59,10 @@ class RiskAssessment extends Component {
<Header className="blockOneHeader"> <Header className="blockOneHeader">
<Header className="oneChildHeader"> <Header className="oneChildHeader">
<img src="/src/assets/detail/secondTitle1.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:248}} /> <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35 ,marginLeft:160}} />
{this.getLegend()} {this.getLegend()}
</Content> </Content>
...@@ -70,31 +70,32 @@ class RiskAssessment extends Component { ...@@ -70,31 +70,32 @@ class RiskAssessment extends Component {
<Content className="blockOneContent"> <Content className="blockOneContent">
<Layout className="oneChildLayout"> <Layout className="oneChildLayout">
<Sider className="oneChildSider"> <Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader"> <Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} /> <img src="/src/assets/detail/secondTitle1.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header> </Header>
<Content className="twoHeaderContent"> <Content className="twoHeaderContent">
<div className="risk-degree-pie"> <div className="risk-degree-pie">
<div className="risk-degree-pie1"> <div className="risk-degree-pie1">
{/* <RiskDegreePie /> */} <RiskDegreePie />
<div>5</div>
<div>2%↑</div>
<div>本年风险</div>
</div> </div>
</div> </div>
</Content> </Content>
</Layout>
</Sider> </Sider>
</Layout> </Layout>
</Content> </Content>
<Content className="blockTwoContent"> <Content className="blockTwoContent">
<Layout className="oneChildLayout"> <Layout className="oneChildLayout">
<Sider className="oneChildSider"> <Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader"> <Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 277, height: 38, margin: 0 }} /> <img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header> </Header>
<Content className="twoHeaderContent"> <Content className="twoHeaderContent">
{/* <IncidenceSeverityMatrix /> */} <IncidenceSeverityMatrix />
</Content> </Content>
</Layout>
</Sider> </Sider>
</Layout> </Layout>
</Content> </Content>
...@@ -103,10 +104,10 @@ class RiskAssessment extends Component { ...@@ -103,10 +104,10 @@ class RiskAssessment extends Component {
<Sider className="risksider"> <Sider className="risksider">
<Header className="risksiderHeader"> <Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} /> <img src="/src/assets/detail/secondTitle3.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header> </Header>
<Content className="risksiderContent"> <Content className="risksiderContent">
{/* <RiskDegreeHistogram /> */} <RiskDegreeHistogram />
</Content> </Content>
</Sider> </Sider>
</Layout> </Layout>
......
src/view/biz/duty/situation/GrowthStatistics.js
View file @ 11c42e31
...@@ -11,7 +11,7 @@ class GrowthStatistics extends Component { ...@@ -11,7 +11,7 @@ class GrowthStatistics extends Component {
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>
{ {
......
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