安全态势页面提交

src/styles/view/biz/index.scss

+@import './situation/situation.scss';
 .biz-view-root {
   height: 100%;
   background: url('/src/assets/bg/biz-bg.png') no-repeat;

src/styles/view/biz/situation/situation.scss

+.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

+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

+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

+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

+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

+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

+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

+
+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

 import React, { Component } from 'react';
 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
@@ -29,8 +35,33 @@ class Situation extends Component {
 
   render() {
     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>
     );
   }