Skip to content

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

补充态势详情页

parent 09387d48
Hide whitespace changes
Inline Side-by-side
Showing with 491 additions and 1 deletion
src/routes/asyncView.js
View file @ 75c203bf
......@@ -6,6 +6,7 @@ const AsyncRootView = props => <AsyncLoader load={import('../view/monitor')} com
// const AsyncUserInfo = props => <AsyncLoader load={import('./../view/userInfo')} componentProps={props} />;
const AsyncDuty = props => <AsyncLoader load={import('../view/monitor/duty')} componentProps={props} />;
const AsyncSituation = props => <AsyncLoader load={import('../view/biz/duty/situation')} componentProps={props} />;
const AsyncSituationDetail = props => <AsyncLoader load={import('../view/biz/duty/situationDetail')} componentProps={props} />;
const AsyncRegulate = props => <AsyncLoader load={import('../view/monitor/regulate')} componentProps={props} />;
const AsyncBills = props => <AsyncLoader load={import('../view/biz/regulate/bills')} componentProps={props} />;
const AsyncRootBizView = props => <AsyncLoader load={import('./../view/biz/index')} componentProps={props} />;
......@@ -21,6 +22,7 @@ const Routes = {
duty: AsyncDuty,
situation: AsyncSituation,
regulate: AsyncRegulate,
situationDetail:AsyncSituationDetail,
bills: AsyncBills,
safetyTraining: AsyncSafetyTraining,
dailyTrain:AsyncDaliyTraining,
......@@ -29,6 +31,7 @@ const Routes = {
};
export const businessRouts = [
{ path: 'situation',group: 'biz',component: AsyncSituation, childRoutes: [] },
{ path: 'situationDetail',group: 'biz',component: AsyncSituationDetail, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: AsyncSafetyTraining, childRoutes: [] },
{ path: 'bills',group: 'biz',component: AsyncBills, childRoutes: [] },
{ path: 'dailyTrain',group: 'biz',component: AsyncDaliyTraining, childRoutes: [] },
......
src/routes/view.js
View file @ 75c203bf
......@@ -2,6 +2,7 @@
import RootView from '../view/monitor';
import Duty from '../view/monitor/duty';
import Situation from '../view/biz/duty/situation';
import SituationDetail from '../view/biz/duty/situationDetail';
import Regulate from '../view/monitor/regulate';
import Bills from '../view/biz/regulate/bills';
import RootBizView from './../view/biz/index';
......@@ -15,6 +16,7 @@ const Routes = {
main: RootView,
duty: Duty,
situation: Situation,
situationDetail:SituationDetail,
regulate: Regulate,
bills: Bills,
safetyTraining:SafetyTraining,
......@@ -24,6 +26,7 @@ const Routes = {
};
export const businessRouts = [
{ path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
{ path: 'situationDetail',group: 'biz',component: SituationDetail, childRoutes: [] },
{ path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: SafetyTraining, childRoutes: [] },
{ path: 'dailyTrain',group: 'biz',component: DaliyTraining, childRoutes: [] },
......
src/styles/view/biz/detail/detail.scss
View file @ 75c203bf
......@@ -271,7 +271,7 @@
.ant-table-wrapper {
.ant-table-row:hover>td {
background-color:transparent;
background-color:#00B9FF;
}
}
......
src/styles/view/biz/index.scss
View file @ 75c203bf
@import './situation/situation.scss';
@import './detail/detail.scss';
@import './situationDetail/situationDetail.scss';
.biz-view-root {
height: 100%;
background: url('/src/assets/bg/biz-bg.png') no-repeat;
......
src/styles/view/biz/situationDetail/situationDetail.scss 0 → 100644
View file @ 75c203bf
.class-situation-detail{
width: 100%;
height: 100%;
background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
background-size: cover;
position: absolute;
z-index: 9999;
overflow-y:auto;
.amos-layout{
width:100%;
height:100%;
background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
opacity:1;
margin-top: -30px;
.amos-layout-header{
padding: 0;
width: 97%;
margin-left: 1.5%;
padding: 0px 30px;
height: 90px;
background: #002333;
margin-top: 20px;
box-shadow:0px 3px 6px rgba(0,0,0,0.16);
opacity:1;
.amos-search{
border: 0;
height:35px ;
width: 290px ;
background:rgba(0,185,255,0.3);
border-radius:17px;
top: 10px;
color: #5FFFFD;
.amos-search-icon-right{
left: 255px;
top: -13px ;
}
.amos-search-inner{
color: white;
display: block;
height: 37px;
background: transparent;
border-radius: 17px;
}
}
}
.amos-layout-content{
background: #002333;
opacity:1;
width: 97%;
margin-left: 1.5%;
.tableDetail{
height: 46px;
width: 100%;
.ant-table-thead > tr > th {
background:rgba(0,185,255,0.38)!important;
font-size:20px!important;
font-family:Microsoft YaHei;
font-weight:bold;
color:rgba(255,255,255,1);
text-align: center;
padding: 9px 10px!important;
opacity: 1;
}
.ant-table-tbody > tr{
margin: 0px 14px!important;
}
.ant-table-tbody > tr > td{
font-size:20px!important;
font-family:Microsoft YaHei;
color:rgba(255,255,255,1);
font-weight:bold;
border: 0;
text-align: center;
padding: 9px 10px!important;
}
.ant-table-pagination{
float: none;
text-align: center;
.ant-pagination-total-text{
color: white;
font-size: 13px;
}
}
.ant-table-pagination > li {
background:rgba(0,185,255,0.3);
border-radius: 0;
opacity:1;
margin:0;
display: inline-block;
width: 24px;
}
}
}
}
}
.light-row{
background-color: rgba(14,127,180,0.29);;
}
.ant-table-wrapper {
.ant-table-row:hover>td {
background-color:#00B9FF;
}
}
.time {
position: relative;
width: 350px;
display: inline-block;
color: aqua;
top: -35px;
left: 80%;
font-size: 20px;
font-weight: bold;
}
.dangerClass{
margin-left:240;
margin-top:10;
font-size:20;
color:'#ffffff';
div{
display: inline-flex;
}
}
\ No newline at end of file
src/view/biz/duty/situationDetail/data.js 0 → 100644
View file @ 75c203bf
export const situationDetailData = [
{
id:'1', sita: '复龙换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'2', sita: '奉贤换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'3', sita: '锦屏换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'4', sita: '苏州换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'5', sita: '天山换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'6', sita: '中州换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'7', sita: '宜宾换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'8', sita: '金华换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'9', sita: '龙泉换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'10', sita: '政平换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'11', sita: '伊克昭换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'12', sita: '沂南换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'13', sita: '陕北换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'14', sita: '武汉换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'15', sita: '洛阳换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
{
id:'16', sita: '贵州换流站', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97,
},
]
src/view/biz/duty/situationDetail/index.js 0 → 100644
View file @ 75c203bf
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {situationDetailData} from './data';
import { Table } from 'amos-antd';
import { Layout,Search } from 'amos-framework';
const { Header, Content } = Layout;
const pageSize = 12;
/**
* SituationDetail
* 态势详情
* @class SituationDetail
* @extends {Component}
*/
class SituationDetail extends Component {
constructor(props) {
super(props);
this.state = {
situationData: situationDetailData
};
}
c
/**
* 设定间隔行样式
*/
rowClassChange = (record, index) => {
let className = 'light-row';
if (index % 2 === 0) className = 'dark-row';
return className;
}
/**
* 自定义总页数
*/
showTotalPage = (total) => {
let pages = Math.ceil(total / pageSize);
return `共 ${pages} 页`;
}
columns = () => {
return (
[
{
title: '换流站',
dataIndex: 'sita',
width: 120,
render: (text, record) => {
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>)
}
},
{
title: ' 安全指数',
dataIndex: 'sitb',
width: 100
},
{
title: '告警',
width: 200,
children:[
{
title: '火灾',
dataIndex: 'sitAlarmHuo',
color:'#00EFE9',
},
{
title: '故障',
dataIndex: 'sitAlarmGu',
color:'#00EFE9',
},
{
title: '巡检',
dataIndex: 'sitAlarmXun',
color:'#00EFE9',
},
{
title: '同比/环比',
dataIndex: 'sitAlarmTb',
color:'#00EFE9',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitAlarmTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitAlarmHb*100}%↓</div>
</div>)
}
},
],
},
{
title: '风险',
width: 200,
children:[
{
title: '一级',
dataIndex: 'sitRiskLevel1',
},
{
title: '二级',
dataIndex: 'sitRiskLevel2',
},
{
title: '三级',
dataIndex: 'sitRiskLevel3',
},
{
title: '四级',
dataIndex: 'sitRiskLevel4',
},
{
title: '同比/环比',
dataIndex: 'sitRiskTb',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitRiskTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitRiskHb*100}%↓</div>
</div>)
}
},
],
},
{
title: '隐患',
width: 200,
children:[
{
title: '发现',
dataIndex: 'sitDangerFa',
},
{
title: '治理',
dataIndex: 'sitDangerZl',
},
{
title: '未治理',
dataIndex: 'sitDangerWzl',
},
{
title: '同比/环比',
dataIndex: 'sitDangerTb',
render: (text, record) => {
return (
<div>
<div style={{ color: 'red', display:'inline-block' }}>{record.sitDangerTb*100}%↑</div>
<div style={{ color: 'green', display:'inline-block',marginLeft:5 }}>{record.sitDangerHb*100}%↓</div>
</div>)
}
},
],
},
{
title: '消防安全管理',
width: 200,
children:[
{
title: '培训',
dataIndex: 'sitManagerPx',
},
{
title: '训练',
dataIndex: 'sitManagerXl',
},
{
title: '器材保养',
dataIndex: 'sitManagerBy',
},
{
title: '应急预案',
dataIndex: 'sitManagerYj',
},
],
}
]
)
}
/*
*态势查询
*/
onSituationDetailSearch=(e,value)=>{
if(value!==null&&value.trim()!==''){
let {situationData}=this.state;
situationData = situationData.filter(item => (item.sita).indexOf(value) > -1);
this.setState({
situationData:situationData
})
} else{
this.setState({
situationData:situationDetailData
})
}
}
render() {
const {situationData} =this.state;
const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage};
return (
<div className="class-situation-detail">
<div class="time"> 2018-06-03 09:16:18 星期五 [合肥]</div>
<Layout>
<Header style={{display:'flex'}}>
<div><Search icon="search" style={{ marginLeft: 690,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onSituationDetailSearch} /></div>
<div class="dangerClass" style={{marginLeft:240,marginTop:10,fontSize:20,color:'#ffffff'}}>
<div style={{color:'green'}}>{"安全"}</div>
{"：指数>=90 "}
<div style={{color:'yellow',marginLeft:10}}>{"低风险"}</div>
{"：60<指数<90 "}
<div style={{color:'red',marginLeft:10}}>{"高风险"}</div>
{"：指数<=60 "}
</div>
</Header>
<Content>
<Table className="tableDetail"
rowKey={record => record.id}
dataSource={situationData}
style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }}
columns={this.columns()}
rowClassName={this.rowClassChange}
pagination={_pageNation}>
</Table>
</Content>
</Layout>
</div>
);
}
}
SituationDetail.propTypes = {
};
export default SituationDetail;
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