Skip to content

S
station-elec-manage-view
Commit d7e5ee38 authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

Merge branch 'developer' of http://172.16.10.76/station/station-elec-manage-view into developer

parents becf5f9c 11c42e31
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 @ d7e5ee38
This diff is collapsed.
src/styles/view/biz/detail/detail.scss
View file @ d7e5ee38
......@@ -6,6 +6,7 @@
margin: -60px 0;
position: absolute;
z-index: 9999;
overflow-y:auto;
.amos-layout{
widows:100%;
height:100%;
......@@ -27,7 +28,7 @@
color: #F7FF00;
line-height: 32px;
float: left;
margin-left: 40px;
margin-left: 50px;
}
.headerRight{
margin-top: 15px;
......@@ -134,14 +135,14 @@
.oneHeaderContent{
border:1px solid rgba(95,255,253,1);
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%);
}
}
.blockOneContent{
width:47%;
width:46%;
height: 370px;
margin-left: 30px;
margin: 45px 0 0 30px;
display: inline-block;
.oneChildLayout {
background: transparent;
......@@ -156,18 +157,19 @@
border:1px solid rgba(95,255,253,1);
}
.twoHeaderContent{
height:330px;
width: 748px;
height:320px;
width: 648px;
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{
width:47%;
width:46%;
height: 370px;
display: inline-block;
margin-left: 35px;
margin: 45px 0 0 35px;
.oneChildLayout {
height: 360px;
background: transparent;
......@@ -181,9 +183,13 @@
border:1px solid rgba(95,255,253,1);
}
.twoHeaderContent{
height:330px;
width: 748px;
height:320px;
width: 648px;
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 @@
}
}
.risksider{
height:1020px;
flex: 0 0 486px!important;
width: 486px!important;
height:970px;
flex: 0 0 456px!important;
width: 456px!important;
margin: 6px 40px 0px 0px;
background: transparent;
.amos-layout-sider-children{
margin-top: 10px;
.risksiderHeader{
height:40px;
height:35px;
background: transparent;
margin-left: -50px;
}
......@@ -213,12 +219,11 @@
}
.risksiderContent{
margin-top: -3px;
height:980px;
height:939px;
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 @@
}
.blockTwoContent{
width: 699;
width: 699px;
height: 342px;
display: inline-block;
.oneChildLayout {
......@@ -288,7 +293,7 @@
font-size: 18px;
display: inline-block;
margin-top: 380px;
margin-left: 140px;
margin-left: 80px;
position: initial;
width: 108px;
height:30px;
......@@ -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 @ d7e5ee38
......@@ -44,63 +44,63 @@ const riskData = [
]
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 = [{
......@@ -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 {
}
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData };
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData,riskTopTenData};
src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js
View file @ d7e5ee38
......@@ -19,182 +19,133 @@ class IncidenceSeverityMatrix extends Component {
};
}
componentDidMount() {
this.queryRiskSourceMatrix();
}
getOptions() {
return {
grid: [{ x: '8%', y: '13%', width: '75%', height: '75%' }],
tooltip: {
formatter: item => {
let text = item.value;
// console.log(JSON.stringify(item));
return text[2] + '<br>' + 'S:' + text[0] + ' ' + ' O:' + text[1];
}
legend: {
data: ['故障率(O)', '严重度(S)', '最低线', '最高线'],
x: 100,
y: 20,
textStyle: {
color: '#fff',
fontSize: 14,
},
color: ['green', 'red', '#ff6600'],
xAxis: [
{
nameGap: 5,
gridIndex: 0,
min: 0,
max: 10,
name: 'S(严重度)',
// nameRotate: 90,
},
xAxis: {
type: 'category',
name: 'S',
nameTextStyle: {
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: [
{
nameGap: 5,
gridIndex: 0,
min: 0,
max: 10,
name: 'O(故障率)',
},
splitLine: {
show: true,
lineStyle: {
color: ['#245665'],
width: 1,
},
}
},
yAxis: {
type: 'value',
name: 'O',
nameTextStyle: {
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],
symbol: 'none'
}
];
} else if (type === 'danger') {
color = 'red';
data1 = [
name: '故障率(O)',
type: 'line',
data: []
},
{
coord: [9, 0],
symbol: 'none'
name: '严重度(S)',
type: 'line',
data: []
},
{
coord: [0, 8],
symbol: 'none'
}
];
}
return {
animation: false,
label: {
name: '最低线',
type: 'line',
symbol: 'circle',
symbolSize: 8,
data: [0, 2, 4, 5, 3, 2, 1, 3, 4, 9],
itemStyle: {
normal: {
formatter: '',
textStyle: {
align: ''
}
}
},
color: '#0A73FF',
lineStyle: {
normal: {
type: 'solid',
color: color
}
color: '#0A73FF',
width: 2
},
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() {
const option = this.getOptions();
return (
<div className="risk-incidence-severity-matrix">
<AmosEcharts option={option} />
<AmosEcharts option={option} style={{ height: '330px', width: '660px' }} />
</div>
);
}
......
src/view/biz/duty/detail/echarts/RiskDegreeHistogram.js
View file @ d7e5ee38
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AmosEcharts from 'amos-viz/lib/echarts';
import AmosWebSocket from 'amos-websocket';
import { Connect } from 'amos-framework';
import JsonData from './../data';
import { OverFlowText } from 'amos-framework';
// import { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const eventConnect = Connect.eventConnect;
const riskTopTenData=JsonData.riskTopTenData;
const labelOption = {
normal: {
show: true,
......@@ -42,26 +42,7 @@ class RiskDegreeHistogram extends Component {
}
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() {
......@@ -73,50 +54,52 @@ class RiskDegreeHistogram extends Component {
}
},
legend: {
data: [
{
name: 'RPNi',
icon: 'circle'
},
{
name: 'RPNr',
icon: 'circle'
}
],
x: 'right',
top: '20',
right: '120'
data: ['RPNi', 'RPNr']
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
right: '3%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.03]
boundaryGap: [0, 0]
},
yAxis: {
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: [
{
name: 'RPNi',
type: 'bar',
label: labelOption,
data: this.state.rpniData,
// barGap: 2
barWidth: 14
itemStyle:{
normal: {
color:'#5FFFFD',
},
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100,100]
},
{
name: 'RPNr',
type: 'bar',
label: labelOption,
data: this.state.rpnrData,
barWidth: 14
itemStyle:{
normal: {
color:'#FF0000',
},
},
data: [99,99,99,99,99,99,99,99,99,99]
}
]
};
......@@ -130,9 +113,36 @@ class RiskDegreeHistogram extends Component {
const option = this.getOptions();
// const wsURL = completeToken(SysWsURL.rulews);
return (
<div className="risk-degree-rpn-histogram">
<AmosWebSocket ref={node => this.aws = node} onMessage={this.handleData} reconnect debug />
<AmosEcharts option={option} />
<div className="risk-top-ten-content">
{/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */}
<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>
);
}
......@@ -143,7 +153,7 @@ RiskDegreeHistogram.propTypes = {};
RiskDegreeHistogram.defaultProps = {
data: {},
legend: [],
chartStyle: { width: '100%', height: '20rem' }
chartStyle: { width: '100%', height: '100%' }
};
export default RiskDegreeHistogram;
src/view/biz/duty/detail/echarts/RiskDegreePie.js
View file @ d7e5ee38
......@@ -17,9 +17,9 @@ class RiskDegreePie extends Component {
constructor(props) {
super(props);
this.state = {
monthData: { type0Rate: '0%', countOfType0: 0 },
seasonData: { type0Rate: '0%', countOfType0: 0 },
yearData: { type0Rate: '0%', countOfType0: 0 }
monthData: { type0Rate: '2%', countOfType0: 5 },
seasonData: { type0Rate: '2%', countOfType0: 5 },
yearData: { type0Rate: '2%', countOfType0: 5 }
};
}
......@@ -45,19 +45,15 @@ class RiskDegreePie extends Component {
getMonthOptions(value, obj) {
let data = [];
let color = 'lightgray';
let data1 = {};
let data2 = {};
if (obj) {
if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
}
data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0;
......@@ -65,21 +61,19 @@ class RiskDegreePie extends Component {
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
radius: ['60%', '70%'],
avoidLabelOverlap: false,
color:['#FE0000','#5FFFFD'],
label: {
normal: {
show: true,
color: 'black',
color: 'white',
fontSize:25,
position: 'center',
formatter: '{b}'
}
......@@ -89,7 +83,10 @@ class RiskDegreePie extends Component {
show: false
}
},
data
data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
}
]
};
......@@ -97,19 +94,15 @@ class RiskDegreePie extends Component {
getSeasonOptions(value, obj) {
let data = [];
let color = 'lightgray';
let data1 = {};
let data2 = {};
if (obj) {
if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
}
data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0;
......@@ -117,21 +110,19 @@ class RiskDegreePie extends Component {
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
radius: ['60%', '70%'],
avoidLabelOverlap: false,
color:['#FE6600','#5FFFFD'],
label: {
normal: {
show: true,
color: 'black',
color: 'white',
fontSize:25,
position: 'center',
formatter: '{b}'
}
......@@ -141,7 +132,10 @@ class RiskDegreePie extends Component {
show: false
}
},
data
data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
}
]
};
......@@ -149,19 +143,15 @@ class RiskDegreePie extends Component {
getYearOptions(value, obj) {
let data = [];
let color = 'lightgray';
let data1 = {};
let data2 = {};
if (obj) {
if (value === 'month') {
data1.name = obj.type0Rate + '\r\n' + '本月风险' + '\r\n' + '上升率';
color = '#3aa0fe';
} else if (value === 'season') {
data1.name = obj.type0Rate + '\r\n' + '本季度风险' + '\r\n' + '上升率';
color = '#68d288';
} else if (value === 'year') {
data1.name = obj.type0Rate + '\r\n' + '本年风险' + '\r\n' + '上升率';
color = '#fad955';
}
data1.value = obj.countOfType0;
data2.value = obj.countOfSource - obj.countOfType0;
......@@ -169,21 +159,19 @@ class RiskDegreePie extends Component {
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
radius: ['60%', '70%'],
color:['#FFD600','#5FFFFD'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
color: 'black',
color: 'white',
fontSize:25,
position: 'center',
formatter: '{b}'
}
......@@ -193,7 +181,10 @@ class RiskDegreePie extends Component {
show: false
}
},
data
data:[
{value: 125, name: null},
{value: 810, name: '2%'},
]
}
]
};
......@@ -210,19 +201,31 @@ class RiskDegreePie extends Component {
let seasonOption = this.getSeasonOptions('season', seasonData);
let yearOption = this.getYearOptions('year', yearData);
return (
<div className="risk-degree-pie">
<AmosWebSocket ref={node => this.aws = node} onMessage={this.handleData} reconnect debug />
<div className="risk-degree-pie-child" style={{color:'#5FFFFD',textAlign:'center'}}>
<div className="risk-degree-pie1">
<AmosEcharts option={monthOption} />
<span>本月风险上升率 | {monthData.type0Rate} {monthData.countOfType0}个</span>
<AmosEcharts option={monthOption} style={{ height: '210px', width: '210px' }}/>
<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 className="risk-degree-pie2">
<AmosEcharts option={seasonOption} />
<span>本季度风险上升率 | {seasonData.type0Rate} {seasonData.countOfType0}个</span>
<AmosEcharts option={seasonOption} style={{ height: '210px', width: '210px' }}/>
<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 className="risk-degree-pie3">
<AmosEcharts option={yearOption} />
<span>本年风险上升率 | {yearData.type0Rate} {yearData.countOfType0}个</span>
<AmosEcharts option={yearOption} style={{ height: '210px', width: '210px' }}/>
<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>
);
......
src/view/biz/duty/detail/index.js
View file @ d7e5ee38
......@@ -247,12 +247,18 @@ class CentralInfoView extends Component {
{
title: '告警',
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: '隐患',
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 {
<Header className="contentHeader">
<div className="headerLeft" style={{display:'inline'}}>{title}</div>
<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>
</Header>
<Content className="content">
......
src/view/biz/duty/detail/riskDetail.js
View file @ d7e5ee38
......@@ -51,7 +51,7 @@ class RiskAssessment extends Component {
<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:5}} />
<img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{marginTop:3}} />
</div>
</Header>
<Layout>
......@@ -59,10 +59,10 @@ class RiskAssessment extends Component {
<Header className="blockOneHeader">
<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>
<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()}
</Content>
......@@ -70,31 +70,32 @@ class RiskAssessment extends Component {
<Content className="blockOneContent">
<Layout className="oneChildLayout">
<Sider className="oneChildSider">
<Layout>
<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>
<Content className="twoHeaderContent">
<div className="risk-degree-pie">
<div className="risk-degree-pie1">
{/* <RiskDegreePie /> */}
<div>5</div>
<div>2%↑</div>
<div>本年风险</div>
<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/secondTitle3.png" style={{ width: 277, height: 38, margin: 0 }} />
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
{/* <IncidenceSeverityMatrix /> */}
<IncidenceSeverityMatrix />
</Content>
</Layout>
</Sider>
</Layout>
</Content>
......@@ -103,10 +104,10 @@ class RiskAssessment extends Component {
<Sider className="risksider">
<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>
<Content className="risksiderContent">
{/* <RiskDegreeHistogram /> */}
<RiskDegreeHistogram />
</Content>
</Sider>
</Layout>
......
src/view/biz/duty/situation/GrowthStatistics.js
View file @ d7e5ee38
......@@ -11,7 +11,7 @@ class GrowthStatistics extends Component {
onClick={this.props.onWarnClick}></div>
<div className='growth-item growth-item-header'>
<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