Skip to content

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

代码优化

parent ba83440e
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 218 deletions
src/view/biz/duty/detail/echarts/RiskDegreePie.js
View file @ 886fc20b
import React, { Component } from 'react'; import React, { Component } from 'react';
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 { Connect } from 'amos-framework';
// import { getRiskRiseUprateAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const eventConnect = Connect.eventConnect;
/** /**
* 巡检点统计 * 巡检点统计
...@@ -68,12 +61,12 @@ class RiskDegreePie extends Component { ...@@ -68,12 +61,12 @@ class RiskDegreePie extends Component {
type: 'pie', type: 'pie',
radius: ['60%', '70%'], radius: ['60%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
color:['#FE0000','#5FFFFD'], color: ['#FE0000', '#5FFFFD'],
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'white', color: 'white',
fontSize:25, fontSize: 25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -83,9 +76,9 @@ class RiskDegreePie extends Component { ...@@ -83,9 +76,9 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data:[ data: [
{value: 125, name: null}, { value: 125, name: null },
{value: 810, name: '2%'}, { value: 810, name: '2%' }
] ]
} }
] ]
...@@ -117,12 +110,12 @@ class RiskDegreePie extends Component { ...@@ -117,12 +110,12 @@ class RiskDegreePie extends Component {
type: 'pie', type: 'pie',
radius: ['60%', '70%'], radius: ['60%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
color:['#FE6600','#5FFFFD'], color: ['#FE6600', '#5FFFFD'],
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'white', color: 'white',
fontSize:25, fontSize: 25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -132,9 +125,9 @@ class RiskDegreePie extends Component { ...@@ -132,9 +125,9 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data:[ data: [
{value: 125, name: null}, { value: 125, name: null },
{value: 810, name: '2%'}, { value: 810, name: '2%' }
] ]
} }
] ]
...@@ -165,13 +158,13 @@ class RiskDegreePie extends Component { ...@@ -165,13 +158,13 @@ class RiskDegreePie extends Component {
name: '风险率', name: '风险率',
type: 'pie', type: 'pie',
radius: ['60%', '70%'], radius: ['60%', '70%'],
color:['#FFD600','#5FFFFD'], color: ['#FFD600', '#5FFFFD'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
color: 'white', color: 'white',
fontSize:25, fontSize: 25,
position: 'center', position: 'center',
formatter: '{b}' formatter: '{b}'
} }
...@@ -181,9 +174,9 @@ class RiskDegreePie extends Component { ...@@ -181,9 +174,9 @@ class RiskDegreePie extends Component {
show: false show: false
} }
}, },
data:[ data: [
{value: 125, name: null}, { value: 125, name: null },
{value: 810, name: '2%'}, { value: 810, name: '2%' }
] ]
} }
] ]
...@@ -192,7 +185,7 @@ class RiskDegreePie extends Component { ...@@ -192,7 +185,7 @@ class RiskDegreePie extends Component {
handleData = () => { handleData = () => {
this.getRiskRiseUprate(); this.getRiskRiseUprate();
} };
render() { render() {
let { monthData, seasonData, yearData } = this.state; let { monthData, seasonData, yearData } = this.state;
...@@ -201,31 +194,31 @@ class RiskDegreePie extends Component { ...@@ -201,31 +194,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-child" style={{color:'#5FFFFD',textAlign:'center'}}> <div className="risk-degree-pie-child" style={{ color: '#5FFFFD', textAlign: 'center' }}>
<div className="risk-degree-pie1"> <div className="risk-degree-pie1">
<AmosEcharts option={monthOption} style={{ height: '210px', width: '210px' }}/> <AmosEcharts option={monthOption} style={{ height: '210px', width: '210px' }} />
<div> <div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </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 style={{ fontSize: 22, color: 'red', fontWeight: 'bold', display: 'inline-block', marginLeft: 10 }}>{monthData.type0Rate}↑</div>
</div> </div>
<div style={{fontSize:22,color:'#CEC700'}}>本月风险</div> <div style={{ fontSize: 22, color: '#CEC700' }}>本月风险</div>
</div> </div>
<div className="risk-degree-pie2"> <div className="risk-degree-pie2">
<AmosEcharts option={seasonOption} style={{ height: '210px', width: '210px' }}/> <AmosEcharts option={seasonOption} style={{ height: '210px', width: '210px' }} />
<div> <div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </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 style={{ fontSize: 22, fontWeight: 'bold', color: 'red', display: 'inline-block', marginLeft: 10 }}>{monthData.type0Rate}↑</div>
</div> </div>
<div style={{fontSize:22,color:'#CEC700'}}>本季度风险</div> <div style={{ fontSize: 22, color: '#CEC700' }}>本季度风险</div>
</div> </div>
<div className="risk-degree-pie3"> <div className="risk-degree-pie3">
<AmosEcharts option={yearOption} style={{ height: '210px', width: '210px' }}/> <AmosEcharts option={yearOption} style={{ height: '210px', width: '210px' }} />
<div> <div>
<div style={{fontSize:34,fontWeight:'bold',display:'inline-block'}}>{monthData.countOfType0} </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 style={{ fontSize: 22, color: 'red', fontWeight: 'bold', display: 'inline-block', marginLeft: 10 }}>{monthData.type0Rate}↑</div>
</div> </div>
<div style={{fontSize:22,color:'#CEC700'}}>本年风险</div> <div style={{ fontSize: 22, color: '#CEC700' }}>本年风险</div>
</div> </div>
</div> </div>
); );
......
src/view/biz/duty/situation/data.js
View file @ 886fc20b
export const SafetyRateData = [
export const SafetyRateData =[ { name: '1.伊克昭', value: 100 },
{name:'1.伊克昭',value:100}, { name: '2.伊克昭', value: 99 },
{name:'2.伊克昭',value:99}, { name: '3.伊克昭', value: 80 },
{name:'3.伊克昭',value:80}, { name: '4.伊克昭', value: 70 },
{name:'4.伊克昭',value:70}, { name: '5.伊克昭', value: 60 },
{name:'5.伊克昭',value:60}, { name: '6.伊克昭', value: 50 },
{name:'6.伊克昭',value:50}, { name: '7.伊克昭', value: 40 },
{name:'7.伊克昭',value:40}, { name: '8.伊克昭', value: 30 },
{name:'8.伊克昭',value:30}, { name: '9.伊克昭', value: 20 },
{name:'9.伊克昭',value:20}, { name: '10.伊克昭', value: 10 }
{name:'10.伊克昭',value:10}, ];
] export const riskFailureData = [
export const riskFailureData=[ { name: '1.伊克昭', value: 100 },
{name:'1.伊克昭',value:100}, { name: '2.伊克昭', value: 99 },
{name:'2.伊克昭',value:99}, { name: '3.伊克昭', value: 80 },
{name:'3.伊克昭',value:80}, { name: '4.伊克昭', value: 70 },
{name:'4.伊克昭',value:70}, { name: '5.伊克昭', value: 60 },
{name:'5.伊克昭',value:60}, { name: '6.伊克昭', value: 50 },
{name:'6.伊克昭',value:50}, { name: '7.伊克昭', value: 40 },
{name:'7.伊克昭',value:40}, { name: '8.伊克昭', value: 30 },
{name:'8.伊克昭',value:30}, { name: '9.伊克昭', value: 20 },
{name:'9.伊克昭',value:20}, { name: '10.伊克昭', value: 10 }
{name:'10.伊克昭',value:10}, ];
] export const growthData = [
export const growthData =[ { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' },
{date:'03/29',risk:'120/99', growth:'5%/2%'}, { date: '03/29', risk: '120/99', growth: '5%/2%' }
{date:'03/29',risk:'120/99', growth:'5%/2%'}, ];
] export const riskTrendData = {
export const riskTrendData ={
legend: { legend: {
data: ['告警', '隐患','风险'], data: ['告警', '隐患', '风险'],
x:100, x: 100,
y:20, y: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize:14, fontSize: 14
}, }
}, },
dataZoom: [ dataZoom: [
{ {
show: true, show: true,
realtime: true, realtime: true,
backgroundColor:'#00B9ff', backgroundColor: '#00B9ff',
borderColor:"#00B9ff", borderColor: '#00B9ff',
left:40, left: 40,
height:14, height: 14,
width:996, width: 996,
bottom:5 bottom: 5
}, },
{ {
type: 'inside', type: 'inside',
realtime: true, realtime: true,
textStyle:false textStyle: false
} }
], ],
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安','延安','延安','延安','延安','延安','延安','延安','延安','伊克昭', '苏州', '西安'], data: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '延安', '伊克昭', '苏州', '西安'],
axisLabel: { axisLabel: {
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: {
...@@ -93,19 +88,19 @@ export const riskTrendData ={ ...@@ -93,19 +88,19 @@ export const riskTrendData ={
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
} }
} }
}, },
...@@ -114,68 +109,61 @@ export const riskTrendData ={ ...@@ -114,68 +109,61 @@ export const riskTrendData ={
name: '告警', name: '告警',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [0, 22, 0, 55, 69, 77, 88,99,60,88,77,99,55,0,33,22, 90, 0,], data: [0, 22, 0, 55, 69, 77, 88, 99, 60, 88, 77, 99, 55, 0, 33, 22, 90, 0],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#FF0000', color: '#FF0000',
lineStyle: { lineStyle: {
color: '#FF0000', color: '#FF0000',
width: 2 width: 2
}, }
}, }
}
},
}, },
{ {
name: '隐患', name: '隐患',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [33, 22, 55, 44, 66, 77, 77,99,40,77,77,66,88,44,55,44,33,22], data: [33, 22, 55, 44, 66, 77, 77, 99, 40, 77, 77, 66, 88, 44, 55, 44, 33, 22],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#00FFCD', color: '#00FFCD',
lineStyle: { lineStyle: {
color: '#00FFCD', color: '#00FFCD',
width: 2 width: 2
}, }
}, }
}
},
}, },
{ {
name: '风险', name: '风险',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [0, 22, 33, 44, 44, 44, 44,55,55,90,77,66,55,44,33,22, 44, 55,], data: [0, 22, 33, 44, 44, 44, 44, 55, 55, 90, 77, 66, 55, 44, 33, 22, 44, 55],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#0A73FF', color: '#0A73FF',
lineStyle: { lineStyle: {
color: '#0A73FF', color: '#0A73FF',
width: 2 width: 2
}, }
}, }
}
}, }
},
] ]
}; };
export const recentData1 = { export const recentData1 = {
legend: { legend: {
data: ['送电', '收电'], data: ['送电', '收电'],
x:20, x: 20,
y:20, y: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize:14, fontSize: 14
}, }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -185,21 +173,20 @@ export const recentData1 = { ...@@ -185,21 +173,20 @@ export const recentData1 = {
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: {
...@@ -208,19 +195,19 @@ export const recentData1 = { ...@@ -208,19 +195,19 @@ export const recentData1 = {
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
} }
} }
}, },
...@@ -229,51 +216,45 @@ export const recentData1 = { ...@@ -229,51 +216,45 @@ export const recentData1 = {
name: '送电', name: '送电',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [10, 20, 80, 60, 90, 20,0], data: [10, 20, 80, 60, 90, 20, 0],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#00FFCD', color: '#00FFCD',
lineStyle: { lineStyle: {
color: '#00FFCD', color: '#00FFCD',
width: 2 width: 2
}, }
}, }
}
},
}, },
{ {
name: '收电', name: '收电',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [0, 32, 1, 34, 90, 30, 10], data: [0, 32, 1, 34, 90, 30, 10],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#0A73FF', color: '#0A73FF',
lineStyle: { lineStyle: {
color: '#0A73FF', color: '#0A73FF',
width: 2 width: 2
}, }
}, }
}
}, }
},
] ]
}; };
export const recentData2 = { export const recentData2 = {
legend: { legend: {
data: ['送电', '收电'], data: ['送电', '收电'],
x:20, x: 20,
y:20, y: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize:14, fontSize: 14
}, }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -283,21 +264,20 @@ export const recentData2 = { ...@@ -283,21 +264,20 @@ export const recentData2 = {
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: {
...@@ -306,19 +286,19 @@ export const recentData2 = { ...@@ -306,19 +286,19 @@ export const recentData2 = {
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
} }
} }
}, },
...@@ -327,44 +307,39 @@ export const recentData2 = { ...@@ -327,44 +307,39 @@ export const recentData2 = {
name: '送电', name: '送电',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [0, 20, 60, 60, 70, 20,0], data: [0, 20, 60, 60, 70, 20, 0],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#00FFCD', color: '#00FFCD',
lineStyle: { lineStyle: {
color: '#00FFCD', color: '#00FFCD',
width: 2 width: 2
}, }
}, }
}
},
}, },
{ {
name: '收电', name: '收电',
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize:8, symbolSize: 8,
data: [0, 40, 1, 70, 0, 30, 10], data: [0, 40, 1, 70, 0, 30, 10],
itemStyle:{ itemStyle: {
normal:{ normal: {
color:'#0A73FF', color: '#0A73FF',
lineStyle: { lineStyle: {
color: '#0A73FF', color: '#0A73FF',
width: 2 width: 2
}, }
}, }
}
}, }
},
] ]
}; };
export const chainMapData= { export const chainMapData = {
geo: { geo: {
map: 'china' map: 'china'
} }
} };
src/view/biz/duty/situation/geo.js
View file @ 886fc20b
...@@ -36,7 +36,7 @@ const provienceData = [ ...@@ -36,7 +36,7 @@ const provienceData = [
{ name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' } { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
]; ];
const geoCoordMap = { const geoCoordMap = {
黑龙江: [126.6433411, 45.74149323], 黑龙江: [126.6433411, 45.74149323],
吉林: [125.3154297, 43.89256287], 吉林: [125.3154297, 43.89256287],
辽宁: [123.4116821, 41.7966156], 辽宁: [123.4116821, 41.7966156],
...@@ -268,6 +268,7 @@ const provienceData = [ ...@@ -268,6 +268,7 @@ const provienceData = [
菏泽: [115.480656, 35.23375], 菏泽: [115.480656, 35.23375],
合肥: [117.27, 31.86], 合肥: [117.27, 31.86],
武汉: [114.31, 30.52], 武汉: [114.31, 30.52],
大庆: [125.03, 46.58] }; 大庆: [125.03, 46.58]
};
export { provienceData, geoCoordMap } export { provienceData, geoCoordMap };
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