Skip to content

S
station-elec-manage-view
Commit 42d4e23a authored by 徐建明's avatar 徐建明
Browse files
Options

安全态势页面提交

parent f68760ee
Hide whitespace changes
Inline Side-by-side
Showing with 889 additions and 2 deletions
src/assets/dailyDuties/bg.png 0 → 100644
View file @ 42d4e23a
This diff is collapsed.
src/styles/view/biz/index.scss
View file @ 42d4e23a
@import './situation/situation.scss';
.biz-view-root { .biz-view-root {
height: 100%; height: 100%;
background: url('/src/assets/bg/biz-bg.png') no-repeat; background: url('/src/assets/bg/biz-bg.png') no-repeat;
......
src/styles/view/biz/situation/situation.scss 0 → 100644
View file @ 42d4e23a
.class-Situation{
// background-image: url('../../assets/dailyDuties/bg.png');
// background-repeat: no-repeat;
// background-size: cover;
// background-attachment: fixed;
// top:0;
// left:0;
// right:0;
// bottom: 0;
// background-color: #110C30;
// position: relative;
// height: 100%;
// width:100%;
}
.daily-duties-content{
position:absolute;
left:0;
top:68px;
right:0;
bottom:0; //left,top,right,bottom都为0，充满真个页面
overflow-y:auto;
overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
display: flex;
flex-direction: row;
justify-content: center;
.common-margin{
margin-top: 19px;
}
.daily-title{
font-size:20px ;
color: #ffffff;
}
.daily-title-content{
width:257px;
display: flex;
flex-direction: row;
justify-content: center;
}
.top-ten-content{
padding:30px 30px;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
.top-ten-item{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.top-ten-item-middle{
width:208px;
height: 16px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #1C6264;
.top-ten-item-middlelinear{
background-image: linear-gradient(to right, #1C6264 , #00FFF7);
}
}
.top-ten-item-bottom{
width:36px;
display: flex;
flex-direction:row;
justify-content: flex-end;
}
}
}
}
.class-Situation .daily-duties-left{
height: 100%;
.safety-rate-view{
background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:412px;
height:469px;
}
.growth-statistics-view{
background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat;
width:411px;
height:474px;
.growth-content{
padding:30px 24px;
height: 100%;
.growth-item-header{
font-size: 20px;
color: #52EDF2;
}
.growth-item-text{
font-size: 20px;
color: #ffffff;
}
.growth-item-datatext{
font-size: 20px;
color: #00CACE;
}
.growth-item{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height:42px;
width: 362px;
background-color:#1C6264 ;
margin-top:5px ;
}
.growth-item:hover{
background-color:#00B9FF ;
}
}
}
}
.class-Situation .daily-duties-middle{
height: 100%;
margin-left: 19px;
margin-right: 19px;
.statistics-title{
font-size: 32px;
color: #00EEE8;
}
.statistics-title-content{
width:100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.statistics-view{
background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat;
width:999px;
height:615px;
position: relative;
.statistics-banner{
position: absolute;
left:95px;
right: 95px;
top:68px;
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 2;
.statistics-banner-content{
height: 100px;
width:380px;
background-color:rgba(28, 98, 100, 0.5) ;
border-radius: 5px;
.statistics-banner-item{
height: 100px;
margin-left: 32px;
margin-right: 32px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.statistics-banner-itemblock{
text-align: center;
.statistics-text-number{
font-weight: bold;
font-size: 35px;
color:#00EEE8 ;
letter-spacing:5px;
height: 44px;
display: flex;
flex-direction:row;
justify-content: flex-start;
}
span{
font-weight: bold;
font-size: 20px;
color:#FF0000 ;
letter-spacing:5px;
padding-top: 9px;
}
p{
font-size: 14px;
color:#FFF ;
}
}
}
}
}
}
.risk-trend-view{
background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat;
width:1002px;
height:325px;
position: relative;
.buttongroup-style{
position: absolute;
right:50px;
top:56px;
z-index:2 ;
.button-style{
border-width: 1px;
border-color: #45FEFE;
width:80px
}
}
.risk-trend-content{
padding:20px;
width:100%;
height: 100%;
}
}
}
.class-Situation .daily-duties-right{
height: 100%;
.risk-failure-view{
background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat;
width:412px;
height:469px;
}
.recent-statistics-view{
background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat;
width:411px;
height:474px;
position: relative;
.buttongroup-style{
position: absolute;
right:50px;
top:56px;
z-index:2 ;
.button-style{
border-width: 1px;
border-color: #45FEFE;
width:80px
}
}
.recent-statistics-content{
padding:20px;
width:100%;
height: 100%;
}
}
}
src/view/biz/duty/situation/GrowthStatistics.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {growthData} from './data';
class GrowthStatistics extends Component {
render() {
return (
<div className='growth-statistics-view common-margin'>
<div className='daily-title daily-title-content'>告警隐患周增幅统计</div>
<div className='growth-content'>
<div className='growth-item growth-item-header'>
<div>日期</div>
<div>告警隐患</div>
<div>周增量</div>
</div>
{
growthData.map((item,index)=>(
<div className='growth-item growth-item-text'>
<div className='growth-item-datatext'>{item.date}</div>
<div>{item.risk}</div>
<div>{item.growth}</div>
</div>
)
)
}
</div>
</div>
);
}
}
GrowthStatistics.propTypes = {};
export default GrowthStatistics;
src/view/biz/duty/situation/RecentStatistics.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import {recentData1,recentData2} from './data';
import { Button } from 'amos-framework';
const ButtonGroup = Button.Group;
class RecentStatistics extends Component {
constructor(props) {
super(props);
this.state = {
value:'1',
recentData:recentData1
};
}
handleChange = (value) => {
if(value == '1'){
this.setState({value:value,recentData:recentData1})
}else{
this.setState({value:value,recentData:recentData2})
}
}
render() {
const {value,recentData} =this.state
const select={backgroundColor:'#0C85B1',color:'#FFF700'};
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
return (
<div className='recent-statistics-view common-margin'>
<div className='daily-title daily-title-content'>最近 7 日风险统计</div>
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>告警</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
<Button size='sm' children={<span>隐患</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/>
</ButtonGroup>
<div className='recent-statistics-content'>
<ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
</div>
</div>
);
}
}
RecentStatistics.propTypes = {};
export default RecentStatistics;
src/view/biz/duty/situation/RiskFailure.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {riskFailureData} from './data'
import { OverFlowText } from 'amos-framework';
class RiskFailure extends Component {
render() {
return (
<div className='risk-failure-view common-margin daily-title'>
<div className='daily-title daily-title-content'>安全风险失效 TOP10</div>
<div className='top-ten-content'>
{
riskFailureData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText>
<div className='top-ten-item-middle'>
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
</div>
<div className ='top-ten-item-bottom'>
<span>{item.value}</span>
</div>
</div>
)
}
</div>
</div>
);
}
}
RiskFailure.propTypes = {};
export default RiskFailure;
src/view/biz/duty/situation/RiskTrend.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts';
import {riskTrendData} from './data'
import { Button } from 'amos-framework';
const ButtonGroup = Button.Group;
class RiskTrend extends Component {
constructor(props) {
super(props);
this.state = {
value:'1',
};
}
handleChange = (value) => {
this.setState({value:value})
}
render() {
const {value} =this.state
const select={backgroundColor:'#0C85B1',color:'#FFF700'};
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' }
return (
<div className='risk-trend-view common-margin'>
<div className='daily-title daily-title-content'>安全风险总体趋势</div>
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>总数</span>} className='button-style' value="1" style={(value == '1')?select:noselect} />
<Button size='sm' children={<span>换流站</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/>
<Button size='sm' children={<span>上升数</span>} className='button-style' value="3" style={(value == '3')?select:noselect}/>
<Button size='sm' children={<span>治理数</span>} className='button-style' value="4" style={(value == '4')?select:noselect}/>
</ButtonGroup>
<div className='risk-trend-content'>
<ReactEcharts option={riskTrendData} style={{ height: '280px', width: '1100px',left:'-60px'}} />
</div>
</div>
);
}
}
RiskTrend.propTypes = {};
export default RiskTrend;
src/view/biz/duty/situation/SafetyRate.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {SafetyRateData} from './data';
import { OverFlowText } from 'amos-framework';
class SafetyRate extends Component {
render() {
return (
<div className='safety-rate-view common-margin daily-title'>
<div className='daily-title-content'>安全指数 TOP10</div>
<div className='top-ten-content'>
{
SafetyRateData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText>
<div className='top-ten-item-middle'>
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div>
</div>
<div className ='top-ten-item-bottom'>
<span>{item.value}</span>
</div>
</div>
)
}
</div>
</div>
);
}
}
SafetyRate.propTypes = {};
export default SafetyRate;
src/view/biz/duty/situation/Statistics.js 0 → 100644
View file @ 42d4e23a
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {MapChart} from 'amos-viz/lib/echarts';
import {chainMapData} from './data';
class Statistics extends Component {
render() {
return (
<div className='statistics-view common-margin'>
<div className='statistics-title statistics-title-content'>全国</div>
<div className='statistics-banner'>
<div className='statistics-banner-content'>
<div className='statistics-banner-item'>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>现有告警</p>
</div>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>累计告警</p>
</div>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>消缺告警</p>
</div>
</div>
</div>
<div className='statistics-banner-content'>
<div className='statistics-banner-item'>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>现有隐患</p>
</div>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>累计隐患</p>
</div>
<div className='statistics-banner-itemblock'>
<div className='statistics-text-number'>20<span>5↑</span></div>
<p>治理隐患</p>
</div>
</div>
</div>
</div>
<MapChart option={chainMapData} style={{ height: '100%', width: '100%' }} />
</div>
);
}
}
Statistics.propTypes = {};
export default Statistics;
src/view/biz/duty/situation/data.js 0 → 100644
View file @ 42d4e23a
export const SafetyRateData =[
{name:'1.伊克昭',value:100},
{name:'2.伊克昭',value:99},
{name:'3.伊克昭',value:80},
{name:'4.伊克昭',value:70},
{name:'5.伊克昭',value:60},
{name:'6.伊克昭',value:50},
{name:'7.伊克昭',value:40},
{name:'8.伊克昭',value:30},
{name:'9.伊克昭',value:20},
{name:'10.伊克昭',value:10},
]
export const riskFailureData=[
{name:'1.伊克昭',value:100},
{name:'2.伊克昭',value:99},
{name:'3.伊克昭',value:80},
{name:'4.伊克昭',value:70},
{name:'5.伊克昭',value:60},
{name:'6.伊克昭',value:50},
{name:'7.伊克昭',value:40},
{name:'8.伊克昭',value:30},
{name:'9.伊克昭',value:20},
{name:'10.伊克昭',value:10},
]
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%'},
]
export const riskTrendData ={
legend: {
data: ['告警', '隐患','风险'],
x:100,
y:20,
textStyle: {
color: '#fff',
fontSize:14,
},
},
dataZoom: [
{
show: true,
realtime: true,
backgroundColor:'#00B9ff',
borderColor:"#00B9ff",
left:40,
height:14,
width:996,
bottom:5
},
{
type: 'inside',
realtime: true,
textStyle:false
}
],
xAxis: {
type: 'category',
boundaryGap: false,
data: ['伊克昭', '苏州', '西安', '延安', '延安', '延安', '延安','延安','延安','延安','延安','延安','延安','延安','延安','伊克昭', '苏州', '西安'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
},
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
}
}
},
series: [
{
name: '告警',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [0, 22, 0, 55, 69, 77, 88,99,60,88,77,99,55,0,33,22, 90, 0,],
itemStyle:{
normal:{
color:'#FF0000',
lineStyle: {
color: '#FF0000',
width: 2
},
},
},
},
{
name: '隐患',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [33, 22, 55, 44, 66, 77, 77,99,40,77,77,66,88,44,55,44,33,22],
itemStyle:{
normal:{
color:'#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
},
},
},
},
{
name: '风险',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [0, 22, 33, 44, 44, 44, 44,55,55,90,77,66,55,44,33,22, 44, 55,],
itemStyle:{
normal:{
color:'#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
},
},
},
},
]
};
export const recentData1 = {
legend: {
data: ['送电', '收电'],
x:20,
y:20,
textStyle: {
color: '#fff',
fontSize:14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
},
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
}
}
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [10, 20, 80, 60, 90, 20,0],
itemStyle:{
normal:{
color:'#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
},
},
},
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [0, 32, 1, 34, 90, 30, 10],
itemStyle:{
normal:{
color:'#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
},
},
},
},
]
};
export const recentData2 = {
legend: {
data: ['送电', '收电'],
x:20,
y:20,
textStyle: {
color: '#fff',
fontSize:14,
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1010', '1011', '1012', '1013', '1014', '1015', '1016'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
},
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize : 14
}
},
axisLine:{
lineStyle:{
color:'#245665',
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#245665'],
width: 1,
}
}
},
series: [
{
name: '送电',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [0, 20, 60, 60, 70, 20,0],
itemStyle:{
normal:{
color:'#00FFCD',
lineStyle: {
color: '#00FFCD',
width: 2
},
},
},
},
{
name: '收电',
type: 'line',
symbol: 'circle',
symbolSize:8,
data: [0, 40, 1, 70, 0, 30, 10],
itemStyle:{
normal:{
color:'#0A73FF',
lineStyle: {
color: '#0A73FF',
width: 2
},
},
},
},
]
};
export const chainMapData= {
geo: {
map: 'china'
}
}
src/view/biz/duty/situation/index.js
View file @ 42d4e23a
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import GrowthStatistics from './GrowthStatistics';
import RecentStatistics from './RecentStatistics';
import RiskFailure from './RiskFailure';
import RiskTrend from './RiskTrend';
import Statistics from './Statistics';
import SafetyRate from './SafetyRate';
/** /**
* situation * situation
...@@ -29,8 +35,33 @@ class Situation extends Component { ...@@ -29,8 +35,33 @@ class Situation extends Component {
render() { render() {
return ( return (
<div className="class-Situation"> <div className='class-Situation'>
安全态势 <div className='daily-duties-content'>
<div className='daily-duties-left'>
<div>
<SafetyRate />
</div>
<div>
<GrowthStatistics/>
</div>
</div>
<div className='daily-duties-middle'>
<div>
<Statistics/>
</div>
<div>
<RiskTrend/>
</div>
</div>
<div className='daily-duties-right'>
<div>
<RiskFailure/>
</div>
<div>
<RecentStatistics/>
</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