Skip to content

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

合并代码

parent 2eaecdc8
Hide whitespace changes
Inline Side-by-side
Showing with 1559 additions and 0 deletions
src/styles/view/biz/detail/detail.scss 0 → 100644
View file @ 4f698c35
.mainContent{
width: 1440px;
height: 810px;
background: url('../../../../assets/detail/bgImg.png') no-repeat;
background-size: cover;
.amos-layout{
widows:1400px;
height:780px;
background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
opacity:1;
.contentHeader{
width:1440px;
background: url('../../../../assets/detail/bg-header.png') no-repeat;
background-size: cover;
box-shadow: pxToRem(0px) pxToRem(3px) pxToRem(6px) rgba(0,0,0,0.16);
opacity:1;
margin-left: pxToRem(-6px);
margin-top: pxToRem(-6px);
.headerLeft{
width: pxToRem(200px);
height: pxToRem(32px);
font-size: pxToRem(18px);
margin-top: pxToRem(18px);
color: #F7FF00;
line-height: pxToRem(32px);
float: left;
margin-left: pxToRem(40px);
}
.headerRight{
margin-top: pxToRem(17px);
width: pxToRem(32px);
height: pxToRem(32px);
float: right;
}
}
.content{
overflow: auto;
padding: pxToRem(0px) pxToRem(22.5px);
background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
opacity:1;
.contentInfo{
border: pxToRem(1px) solid rgba(95,255,253,1);
height: pxToRem(732px);
opacity: 1;
.infoHeader{
background:rgba(0,35,51,1);
height: pxToRem(67px);
opacity: 1;
.ant-input-group{
width: pxToRem(217.5px) ;
margin-top: pxToRem(21px);
text-align: center;
.titleInput{
border: 0;
height: pxToRem(25.5px);
width: pxToRem(180px);
background:rgba(0,185,255,0.3);
border-radius: pxToRem(13px) pxToRem(0px) pxToRem(0px) pxToRem(13px);
margin-left: pxToRem(590px);
}
.ant-input-group-addon{
border: 0;
height: pxToRem(25.5px) ;
margin-left: pxToRem(-2px);
background:rgba(0,185,255,0.3);
border-radius: pxToRem(0px) pxToRem(13px) pxToRem(13px) pxToRem(0px);
}
}
}
.infoContent{
height: pxToRem(665px);
opacity: 1;
.ant-table-content{
opacity:1;
.ant-table-placeholder{
background:rgba(14,127,180,0.29);
opacity:0.63;
}
.ant-table-tbody {
.ant-table-row{
margin-left: pxToRem(10px);
width: pxToRem(1362px) ;
}
}
.ant-table-body>.clickRowStyl:hover>td {
background-color: #00b4ed;
}
}
.ant-table-pagination{
float: none;
text-align: center;
.ant-pagination-total-text{
color: white;
}
}
.ant-table-pagination > li {
background:rgba(0,185,255,0.3);
border-radius: 0;
opacity:1;
margin:0;
}
}
}
}
.amos-layout-header{
padding: 0;
}
}
.risksider{
height: pxToRem(733px);
flex: 0 0 pxToRem(300px)!important;
width: pxToRem(340px)!important;
margin: pxToRem(70px) pxToRem(30px) pxToRem(0px) pxToRem(0px);
background: transparent;
.risksiderHeader{
height: pxToRem(29px);
background: transparent;
}
.risksiderContent{
height: pxToRem(704px);
border:1px solid rgba(95,255,253,1);
}
}
}
.tableDetail{
height: pxToRem(35px);
.ant-table-thead > tr > th {
background:rgba(0,185,255,0.38);
font-size: pxToRem(15px);
font-family:Microsoft YaHei;
font-weight:bold;
color:rgba(255,255,255,1);
text-align: center;
padding: pxToRem(6px) pxToRem(8px);
opacity: 1;
}
.ant-table-body > tr{
margin: pxToRem(0px) pxToRem(12px);
}
.ant-table-tbody > tr > td{
font-size: pxToRem(15px);
font-family:Microsoft YaHei;
color:rgba(255,255,255,1);
border: 0;
text-align: center;
padding: pxToRem(6px) pxToRem(8px);
}
}
.ant-table-wrapper {
.ant-table-row:hover>td {
background-color:transparent;
}
}
.light-row{
background-color: rgba(14,127,180,0.29);;
}
/**
* 换流站风险详情页
*/
.riskcontent{
display: inline-block;
width: pxToRem(1080px);
.blockOneHeader{
width: pxToRem(1038px);
height: pxToRem(460px);
margin: pxToRem(14px) pxToRem(23px);
background-color:transparent;
.oneChildHeader{
height: pxToRem(29px);
width: pxToRem(192px);
border:1px solid rgba(95,255,253,1);
}
.oneHeaderContent{
border:1px solid rgba(95,255,253,1);
text-align: center;
height: pxToRem(431px);
background:linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
}
}
.blockOneContent{
width: pxToRem(520px);
height: pxToRem(257px);
margin-left: pxToRem(23px);
display: inline-block;
.oneChildLayout {
height: pxToRem(257px);
.oneChildSider{
background-color:transparent;
height: pxToRem(257px);
.twoChildHeader{
background:'none';
height: pxToRem(29px);
width: pxToRem(208px);
border: pxToRem(1px) solid rgba(95,255,253,1);
}
.twoHeaderContent{
height: pxToRem(227px);
width: pxToRem(520px);
border: pxToRem(1px) solid rgba(95,255,253,1);
}
}
}
}
.blockTwoContent{
width: pxToRem(496px);
height: pxToRem(257px);
margin-left: pxToRem(23px);
display: inline-block;
.oneChildLayout {
height: pxToRem(257px);
.oneChildSider{
background-color:transparent;
height: pxToRem(257px);
.twoChildHeader{
background:'none';
height: pxToRem(29px);
width: pxToRem(208px);
border: pxToRem(1px) solid rgba(95,255,253,1);
}
.twoHeaderContent{
height: pxToRem(227px);
width: pxToRem(496px);
border: pxToRem(1px) solid rgba(95,255,253,1);
}
}
}
}
.situation-map-legend {
position: unset;
width: pxToRem(80px);
color: ivory;
font-size: pxToRem(14px);
display: inline-block;
margin-top: pxToRem(275px);
margin-left: pxToRem(80px);
.situation-map-legend-item{
height: pxToRem(23px);
.situation-map-legend-block{
float: left;
width: pxToRem(15px);
height: pxToRem(10px);
margin-right: pxToRem(10px);
}
}
}
}
\ No newline at end of file
src/view/biz/duty/detail/data.js 0 → 100644
View file @ 4f698c35
import React, { Component } from 'react';
const riskData = [
{
'ka': '复龙换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '奉贤换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '苏州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '中州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '天山换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '金华换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '龙泉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '政平换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '伊克昭换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '陕北换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
},
{
'ka': '武汉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97',
}
]
const dangerWeekCensusData = [
{
'da': '复龙换流站', 'db': '12', 'dc': '12',
},
{
'da': '奉贤换流站', 'db': '12', 'dc': '12',
},
{
'da': '苏州换流站', 'db': '12', 'dc': '12',
},
{
'da': '中州换流站', 'db': '12', 'dc': '12',
},
{
'da': '天山换流站', 'db': '12', 'dc': '12',
},
{
'da': '金华换流站', 'db': '12', 'dc': '12',
},
{
'da': '龙泉换流站', 'db': '12', 'dc': '12',
},
{
'da': '政平换流站', 'db': '12', 'dc': '12',
},
{
'da': '伊克昭换流站', 'db': '12', 'dc': '12'
},
{
'da': '陕北换流站', 'db': '12', 'dc': '12',
},
{
'da': '武汉换流站', 'db': '12', 'dc': '12',
},
{
'da': '金华换流站', 'db': '12', 'dc': '12',
},
{
'da': '龙泉换流站', 'db': '12', 'dc': '12',
},
{
'da': '政平换流站', 'db': '12', 'dc': '12',
},
{
'da': '伊克昭换流站', 'db': '12', 'dc': '12'
},
{
'da': '陕北换流站', 'db': '12', 'dc': '12',
},
{
'da': '武汉换流站', 'db': '12', 'dc': '12',
}]
const sevenDaysRiskCensusData = [{
'sa': '复龙换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '奉贤换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '苏州换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '中州换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '天山换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '金华换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '龙泉换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '政平换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '伊克昭换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '陕北换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
},
{
'sa': '武汉换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97',
}]
/**
* 数据组件
*/
class JsonData extends Component {
}
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData };
src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js 0 → 100644
View file @ 4f698c35
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AmosEcharts from 'amos-viz/lib/echarts';
// import { queryRiskSourceMatrixAction } from './../../../../services/situationService';
/**
* 发生率/严重度矩阵
* @class IncidenceSeverityMatrix
* @extends {Component}
*/
class IncidenceSeverityMatrix extends Component {
constructor(props) {
super(props);
this.state = {
dataAll: [],
dangerPoints: [],
safePoints: [],
warnPoints: []
};
}
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];
}
},
color: ['green', 'red', '#ff6600'],
xAxis: [
{
nameGap: 5,
gridIndex: 0,
min: 0,
max: 10,
name: 'S(严重度)',
// nameRotate: 90,
nameTextStyle: {
fontWeight: 'bold',
fontSize: 15
}
}
],
yAxis: [
{
nameGap: 5,
gridIndex: 0,
min: 0,
max: 10,
name: 'O(故障率)',
nameTextStyle: {
fontWeight: 'bold',
fontSize: 15
}
}
],
// symbol: 'rect',
legend: {
top: 5,
right: 100,
selectedMode: false,
data: ['最低线', '最高线', '']
},
series: this.getSeries()
};
}
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'
},
{
coord: [0, 4],
symbol: 'none'
}
];
} else if (type === 'danger') {
color = 'red';
data1 = [
{
coord: [9, 0],
symbol: 'none'
},
{
coord: [0, 8],
symbol: 'none'
}
];
}
return {
animation: false,
label: {
normal: {
formatter: '',
textStyle: {
align: ''
}
}
},
lineStyle: {
normal: {
type: 'solid',
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
// });
// });
}
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} />
</div>
);
}
}
IncidenceSeverityMatrix.propTypes = {};
IncidenceSeverityMatrix.defaultProps = {
data: {},
legend: [],
chartStyle: { width: '100%', height: '10rem' }
};
export default IncidenceSeverityMatrix;
src/view/biz/duty/detail/echarts/RiskDegreeHistogram.js 0 → 100644
View file @ 4f698c35
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 { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const eventConnect = Connect.eventConnect;
const labelOption = {
normal: {
show: true,
position: 'right',
distance: 5,
align: 'left',
formatter: '{c}',
color: 'black'
}
};
/**
* 风险度(RPN) TOP10
*
* @class RiskDegreeHistogram
* @extends {Component}
*/
class RiskDegreeHistogram extends Component {
constructor(props) {
super(props);
this.state = {
riskNameList: [],
rpniData: [],
rpnrData: []
};
}
componentDidMount() {
this.getBarViewContent();
}
componentWillReceiveProps() {
}
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() {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [
{
name: 'RPNi',
icon: 'circle'
},
{
name: 'RPNr',
icon: 'circle'
}
],
x: 'right',
top: '20',
right: '120'
},
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.03]
},
yAxis: {
type: 'category',
data: this.state.riskNameList
},
color: ['#35bf73', '#f16060'],
series: [
{
name: 'RPNi',
type: 'bar',
label: labelOption,
data: this.state.rpniData,
// barGap: 2
barWidth: 14
},
{
name: 'RPNr',
type: 'bar',
label: labelOption,
data: this.state.rpnrData,
barWidth: 14
}
]
};
}
handleData = () => {
this.getBarViewContent();
}
render() {
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>
);
}
}
RiskDegreeHistogram.propTypes = {};
RiskDegreeHistogram.defaultProps = {
data: {},
legend: [],
chartStyle: { width: '100%', height: '20rem' }
};
export default RiskDegreeHistogram;
src/view/biz/duty/detail/echarts/RiskDegreePie.js 0 → 100644
View file @ 4f698c35
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 { getRiskRiseUprateAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const eventConnect = Connect.eventConnect;
/**
* 巡检点统计
* @class MonthlyInspection
* @extends {Component}
*/
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 }
};
}
componentWillMount() {
this.getRiskRiseUprate();
}
getRiskRiseUprate() {
// getRiskRiseUprateAction().then(
// data => {
// let { monthData, seasonData, yearData } = this.state;
// monthData = data.month;
// seasonData = data.season;
// yearData = data.year;
// this.setState({
// monthData,
// seasonData,
// yearData
// });
// }
// );
}
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;
data2.name = '';
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
color: 'black',
position: 'center',
formatter: '{b}'
}
},
labelLine: {
normal: {
show: false
}
},
data
}
]
};
}
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;
data2.name = '';
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
color: 'black',
position: 'center',
formatter: '{b}'
}
},
labelLine: {
normal: {
show: false
}
},
data
}
]
};
}
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;
data2.name = '';
data.push(data1);
data.push(data2);
}
let colors = [];
colors.push(color);
colors.push('lightgray');
return {
color: colors,
series: [
{
name: '风险率',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
color: 'black',
position: 'center',
formatter: '{b}'
}
},
labelLine: {
normal: {
show: false
}
},
data
}
]
};
}
handleData = () => {
this.getRiskRiseUprate();
}
render() {
let { monthData, seasonData, yearData } = this.state;
// const wsURL = completeToken(SysWsURL.rulews);
let monthOption = this.getMonthOptions('month', monthData);
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-pie1">
<AmosEcharts option={monthOption} />
<span>本月风险上升率 | {monthData.type0Rate} {monthData.countOfType0}个</span>
</div>
<div className="risk-degree-pie2">
<AmosEcharts option={seasonOption} />
<span>本季度风险上升率 | {seasonData.type0Rate} {seasonData.countOfType0}个</span>
</div>
<div className="risk-degree-pie3">
<AmosEcharts option={yearOption} />
<span>本年风险上升率 | {yearData.type0Rate} {yearData.countOfType0}个</span>
</div>
</div>
);
}
}
RiskDegreePie.propTypes = {};
RiskDegreePie.defaultProps = {
data: {},
legend: [],
chartStyle: { width: '100%', height: '20rem' }
};
export default RiskDegreePie;
src/view/biz/duty/detail/index.js 0 → 100644
View file @ 4f698c35
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Layout } from 'amos-framework';
import {Input,Table, Button } from 'amos-antd';
import './../../../../styles/view/biz/detail/detail.scss';
import JsonData from './data';
import RiskAssessment from './riskDetail';
const { Header, Content } = Layout;
const riskData = JsonData.riskData;
const dangerWeekCensusData=JsonData.dangerWeekCensusData;
const sevenDaysRiskCensusData=JsonData.sevenDaysRiskCensusData;
const pageSize=13;
class CentralInfoView extends Component {
constructor(props) {
super(props);
this.updateParent= this.updateParent.bind(this);
this.state = {
title: '', //modal标题
divVisable: 'none',
riskVisable: 'none',
buttonVisable:'block',
type:'', //当前表格类型
detailTitle:''
};
}
/**
* 安全指数详情
*/
kpsi = () => {
this.setState({
title: "安全指数",
divVisable: 'block',
buttonVisable:'none',
type: 'kpsi'
})
}
/**
* 安全风险失效详情
*/
safetyRiskFailure = () => {
this.setState({
title: "安全风险失效",
divVisable: 'block',
buttonVisable:'none',
type: 'safetyRiskFailure'
})
}
/**
* 告警隐患周增幅统计详情
*/
dangerWeekCensus = () => {
this.setState({
title: "告警隐患周增幅统计",
divVisable: 'block',
buttonVisable:'none',
type: 'dangerWeekCensus'
})
}
/**
* 七日风险统计详情
*/
sevenDaysRiskCensus = () => {
this.setState({
title: "七日风险统计",
divVisable: 'block',
buttonVisable:'none',
type: 'sevenDaysRiskCensus'
})
}
/**
* 弹窗关闭
*/
closeDiv = () => {
this.setState({
divVisable: 'none',
buttonVisable:'block',
title:'',
type:''
})
}
/**
* 根据类型切换列
*/
columns= (type)=>{
if(type==="kpsi"){
return (
[
{
title: '换流站',
dataIndex: 'ka',
width: 100,
render : (text, record) => {
return(<div style={{color:'yellow'}}>{text}</div>)
}
},
{
title: ' 极1高端阀厅',
dataIndex: 'kb',
width: 100
},
{
title: '极1低端阀厅',
dataIndex: 'kc',
width: 100
},
{
title: '极2高端阀厅',
dataIndex: 'kd',
width: 100
},
{
title: '极2低端阀厅',
dataIndex: 'ke',
width: 100
},
{
title: '交流场',
dataIndex: 'kf',
width: 80
},
{
title: '直流场',
dataIndex: 'kg',
width: 80
},
{
title: '主控楼',
dataIndex: 'kh',
width: 80
},
{
title: '极1辅控楼',
dataIndex: 'ki',
width: 100
},
{
title: '极2辅控楼',
dataIndex: 'kj',
width: 100
},
{
title: '其他（剩余区域）',
dataIndex: 'kk',
width: 120
},
{
title: <div><span>总安全指数</span>&nbsp;<span style={{color:'#B8C10B',height:8,width:11}}>↓</span></div>,
dataIndex: 'kl',
width: 120
},
]
)
}else if(type==="safetyRiskFailure"){
return (
[
{
title: '换流站',
dataIndex: 'ka',
width: 100,
render : (text, record) => {
return(<div style={{color:'yellow'}}>{text}</div>)
}
},
{
title: ' 极1高端阀厅',
dataIndex: 'kb',
width: 100
},
{
title: '极1低端阀厅',
dataIndex: 'kc',
width: 100
},
{
title: '极2高端阀厅',
dataIndex: 'kd',
width: 100
},
{
title: '极2低端阀厅',
dataIndex: 'ke',
width: 100
},
{
title: '交流场',
dataIndex: 'kf',
width: 80
},
{
title: '直流场',
dataIndex: 'kg',
width: 80
},
{
title: '主控楼',
dataIndex: 'kh',
width:80
},
{
title: '极1辅控楼',
dataIndex: 'ki',
width: 100
},
{
title: '极2辅控楼',
dataIndex: 'kj',
width: 100
},
{
title: '其他（剩余区域）',
dataIndex: 'kk',
width: 120
},
{
title: <div><span>总安全指数</span>&nbsp;<span style={{color:'#B8C10B',height:8,width:11}}>↓</span></div>,
dataIndex: 'kl',
width: 120
}
]
)
}
else if(type==="dangerWeekCensus"){
return (
[
{
title: '换流站',
dataIndex: 'da',
width: 120
},
{
title: '告警',
dataIndex: 'db',
width: 120
},
{
title: '隐患',
dataIndex: 'dc',
width: 120
},
]
)
}
else if(type==="sevenDaysRiskCensus"){
return (
[
{
title: '换流站',
dataIndex: 'sa',
width: 100
},
{
title: '类型',
dataIndex: 'sb',
width: 100
},
{
title: '类别',
dataIndex: 'sc',
width: 100
},
{
title: '今天',
dataIndex: 'sd',
width: 100
},
{
title: '05-01',
dataIndex: 'se',
width: 100
},
{
title: '04-30',
dataIndex: 'sf',
width: 100
},
{
title: '04-29',
dataIndex: 'sg',
width: 100
},
{
title: '04-28',
dataIndex: 'sh',
width: 100
},
{
title: '04-27',
dataIndex: 'si',
width: 100
},
{
title: '04-26',
dataIndex: 'sj',
width: 100
},
]
)
}else{
return (
[]
)
}
}
/**
* 根据类型切换数据
*/
getDataSource =(type)=>{
if(type==="kpsi"||type==="safetyRiskFailure"){
return riskData;
}
else if(type==="dangerWeekCensus"){
return dangerWeekCensusData;
}
else if(type==="sevenDaysRiskCensus"){
return sevenDaysRiskCensusData;
}
}
/**
* 自定义总页数
*/
showTotalPage = (total) =>{
let pages=Math.ceil(total/pageSize);
return `共 ${pages} 页`;
}
/**
* 设定间隔行样式
*/
rowClassChange=(record,index) => {
let className = 'light-row';
if (index % 2 === 0) className = 'dark-row';
return className;
}
/**
* 当前行点击事件
*/
onRowClick=(record)=>{
if(this.state.type==="kpsi"){
this.setState({
divVisable:'none',
riskVisable:'block',
buttonVisable:'none',
detailTitle:record.ka
})
}
}
/**
* 子组件返回当前列表
*/
updateParent(values){
if(values!=null){
this.setState({
divVisable:values.divVisable,
riskVisable:values.riskVisable,
})
}
}
render() {
const {title,divVisable,type,detailTitle,riskVisable,buttonVisable} = this.state;
const _pageNation={pageSize:pageSize,size:'small',showTotal:this.showTotalPage};
return (
<div>
<div style={{display:buttonVisable}}>
<Button onClick={this.kpsi}>安全指数</Button>
<Button onClick={this.safetyRiskFailure}>安全风险失效</Button>
<Button onClick={this.dangerWeekCensus}>告警隐患周增幅统计</Button>
<Button onClick={this.sevenDaysRiskCensus}>七日风险统计</Button>
</div>
<div className="mainContent" style={{display:divVisable}} >
<Layout>
<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="36px"/>
</div>
</Header>
<Content className="content">
<div className="contentInfo">
<div className="infoHeader">
<Input className="titleInput" addonAfter={<img src="/src/assets/detail/search.png" style={{width:20}}/>} />
</div>
<div className="infoContent">
<Table className="tableDetail"
dataSource={this.getDataSource(type)}
style={{background:'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)'}}
columns={this.columns(type)}
rowClassName={this.rowClassChange}
onRowClick={this.onRowClick}
pagination={_pageNation}>
</Table>
</div>
</div>
</Content>
</Layout>
</div>
<RiskAssessment detailTitle={detailTitle} riskVisable={riskVisable} updateParents={this.updateParent}></RiskAssessment>
</div>
);
}
}
CentralInfoView.propTypes = {
};
CentralInfoView.defaultProps={
pages:5
}
export default CentralInfoView;
\ No newline at end of file
src/view/biz/duty/detail/riskDetail.js 0 → 100644
View file @ 4f698c35
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Layout } from 'amos-framework';
const { Header, Content, Sider } = Layout;
import RiskDegreePie from './echarts/RiskDegreePie';
import RiskDegreeHistogram from './echarts/RiskDegreeHistogram';
import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix';
/**
* 风险评估
*/
class RiskAssessment extends Component {
//获取等级
getLegend() {
return (
<div className='situation-map-legend' >
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#15653d' }} />
<div>初始</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#0078ef' }} />
<div>4/5级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ffcc2a' }} />
<div>3级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ff5a20' }} />
<div>2级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#f42828' }} />
<div>1级</div>
</div>
</div>
);
}
onClick=()=>{
this.props.updateParents({ divVisable: 'block',riskVisable:'none'});
}
render() {
return (
<div className="mainContent" style={{ width: '100%', height: '100%', display: this.props.riskVisable }}>
<Layout>
<Layout style={{width : 900}}>
<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="36px" />
</div>
</Header>
<Content className="riskcontent">
<Header className="blockOneHeader">
<Header className="oneChildHeader">
<img src="/src/assets/detail/secondTitle1.png" style={{ width: 192, height: 29, margin: 0 }} />
</Header>
<Content className="oneHeaderContent">
<img src="/src/assets/detail/RPNr.png" style={{ width: 692, height: 378, marginTop: 20 ,marginLeft: 100}} />
{this.getLegend()}
</Content>
</Header>
<Content className="blockOneContent">
<Layout className="oneChildLayout">
<Sider className="oneChildSider">
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 192, height: 29, 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> */}
</div>
</div>
</Content>
</Sider>
</Layout>
</Content>
<Content className="blockTwoContent">
<Layout className="oneChildLayout">
<Sider className="oneChildSider">
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 208, height: 29, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
{/* <IncidenceSeverityMatrix /> */}
</Content>
</Sider>
</Layout>
</Content>
</Content>
</Layout>
<Sider className="risksider">
<Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 192, height: 29, margin: 0 }} />
</Header>
<Content className="risksiderContent">
{/* <RiskDegreeHistogram /> */}
</Content>
</Sider>
</Layout>
</div>
);
}
}
RiskAssessment.propTypes = {
};
export default RiskAssessment;
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