Skip to content

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

Merge branch 'developer' of http://172.16.10.76/station/station-elec-manage-view into developer

parents 2ba129e8 db3fa24f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4481 additions and 168 deletions
package.json
View file @ 9c3c23f1
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
"amos-build": "^3.x", "amos-build": "^3.x",
"amos-core": "^2.0.27", "amos-core": "^2.0.27",
"amos-framework": "^1.0.35", "amos-framework": "^1.0.35",
"amos-pluggable": "^1.0.6",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"eslint-config-ray": "^1.0.25", "eslint-config-ray": "^1.0.25",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.0.1-beta3",
......
src/assets/dailyDuties/bg.png deleted 100644 → 0
View file @ 2ba129e8
This diff is collapsed.
src/assets/homePage/xfsl/background.png 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/assets/safetyManage/bjt.png 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/consts/wsUrlConsts.js 0 → 100644
View file @ 9c3c23f1
import * as endConf from 'amos-processor/lib/config/endconf';
import formatUrl from 'amos-processor/lib/utils/urlFormat';
import { Store } from 'amos-tool';
import SysConsts from 'amos-processor/lib/config/consts';
const lsTool = Store.lsTool;
const completePrefix = endConf.completePrefix;
const AmosConfig = endConf.AmosConfig;
const baseURI = AmosConfig.wsURI.baseURI;
const view3dURI = AmosConfig.wsURI.view3dURI;
const getToken = () => {
return lsTool.read(SysConsts.token);
};
export default {
rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
viewIndexws: completePrefix(baseURI, '3dViewMessage')
};
export const completeToken = (url) => {
const token = getToken();
const result = formatUrl(url, { token });
return result;
};
src/routes/asyncView.js
View file @ 9c3c23f1
...@@ -9,6 +9,11 @@ const AsyncSituation = props => <AsyncLoader load={import('../view/biz/duty/situ ...@@ -9,6 +9,11 @@ const AsyncSituation = props => <AsyncLoader load={import('../view/biz/duty/situ
const AsyncRegulate = props => <AsyncLoader load={import('../view/monitor/regulate')} 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 AsyncBills = props => <AsyncLoader load={import('../view/biz/regulate/bills')} componentProps={props} />;
const AsyncRootBizView = props => <AsyncLoader load={import('./../view/biz/index')} componentProps={props} />; const AsyncRootBizView = props => <AsyncLoader load={import('./../view/biz/index')} componentProps={props} />;
const AsyncSafetyTraining = props => <AsyncLoader load={import('../view/monitor/safetyManage/index')} componentProps={props} />;
const AsyncDaliyTraining = props => <AsyncLoader load={import('../view/monitor/dailyTrain/index')} componentProps={props} />;
const AsyncEquipmentMaintain = props => <AsyncLoader load={import('../view/monitor/equipmentMaintain/index')} componentProps={props} />;
const AsyncSafetyInspection = props => <AsyncLoader load={import('../view/monitor/safetyInspection/index')} componentProps={props} />;
// const AsyncRegionList = props => <AsyncLoader load={import('./../view/common/region/index')} componentProps={props} />; // const AsyncRegionList = props => <AsyncLoader load={import('./../view/common/region/index')} componentProps={props} />;
const Routes = { const Routes = {
...@@ -16,11 +21,19 @@ const Routes = { ...@@ -16,11 +21,19 @@ const Routes = {
duty: AsyncDuty, duty: AsyncDuty,
situation: AsyncSituation, situation: AsyncSituation,
regulate: AsyncRegulate, regulate: AsyncRegulate,
bills: AsyncBills bills: AsyncBills,
safetyTraining: AsyncSafetyTraining,
dailyTrain:AsyncDaliyTraining,
equipmentMaintain:AsyncEquipmentMaintain,
safetyInspection:AsyncSafetyInspection
}; };
export const businessRouts = [ export const businessRouts = [
{ path: 'situation',group: 'biz',component: AsyncSituation, childRoutes: [] }, { path: 'situation',group: 'biz',component: AsyncSituation, childRoutes: [] },
{ path: 'bills',group: 'biz',component: AsyncBills, childRoutes: [] } { path: 'safetyTraining',group: 'biz',component: AsyncSafetyTraining, childRoutes: [] },
{ path: 'bills',group: 'biz',component: AsyncBills, childRoutes: [] },
{ path: 'dailyTrain',group: 'biz',component: AsyncDaliyTraining, childRoutes: [] },
{ path: 'equipmentMaintain',group: 'biz',component: AsyncEquipmentMaintain, childRoutes: [] },
{ path: 'safetyInspection',group: 'biz',component: AsyncSafetyInspection, childRoutes: [] }
]; ];
const pageCompontent = key => { const pageCompontent = key => {
return Routes[key] || AsyncEmptyPage; return Routes[key] || AsyncEmptyPage;
......
src/routes/view.js
View file @ 9c3c23f1
...@@ -6,17 +6,29 @@ import Regulate from '../view/monitor/regulate'; ...@@ -6,17 +6,29 @@ import Regulate from '../view/monitor/regulate';
import Bills from '../view/biz/regulate/bills'; import Bills from '../view/biz/regulate/bills';
import RootBizView from './../view/biz/index'; import RootBizView from './../view/biz/index';
import EmptyPage from './../view/common/emptyPage/EmptyPage'; import EmptyPage from './../view/common/emptyPage/EmptyPage';
import SafetyTraining from './../view/monitor/safetyManage/index';
import DaliyTraining from './../view/monitor/dailyTrain/index';
import EquipmentMaintain from './../view/monitor/equipmentMaintain/index';
import SafetyInspection from './../view/monitor/safetyInspection/index';
const Routes = { const Routes = {
main: RootView, main: RootView,
duty: Duty, duty: Duty,
situation: Situation, situation: Situation,
regulate: Regulate, regulate: Regulate,
bills: Bills bills: Bills,
safetyTraining:SafetyTraining,
dailyTrain:DaliyTraining,
equipmentMaintain:EquipmentMaintain,
safetyInspection:SafetyInspection
}; };
export const businessRouts = [ export const businessRouts = [
{ path: 'situation',group: 'biz',component: Situation, childRoutes: [] }, { path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
{ path: 'bills',group: 'biz',component: Bills, childRoutes: [] } { path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: SafetyTraining, childRoutes: [] },
{ path: 'dailyTrain',group: 'biz',component: DaliyTraining, childRoutes: [] },
{ path: 'equipmentMaintain',group: 'biz',component: EquipmentMaintain, childRoutes: [] },
{ path: 'safetyInspection',group: 'biz',component: SafetyInspection, childRoutes: [] }
]; ];
const pageCompontent = key => { const pageCompontent = key => {
return Routes[key] || EmptyPage; return Routes[key] || EmptyPage;
......
src/styles/common.scss
View file @ 9c3c23f1
...@@ -733,98 +733,98 @@ a { ...@@ -733,98 +733,98 @@ a {
} }
} }
*, // *,
*::before, // *::before,
*::after { // *::after {
padding: 0; // padding: 0;
margin: 0; // margin: 0;
box-sizing: inherit; // box-sizing: inherit;
} // }
.amos-modal-container { // .amos-modal-container {
// width: 50% !important; // // width: 50% !important;
position: relative; // position: relative;
left: 0 !important; // left: 0 !important;
margin: 0 auto; // margin: 0 auto;
background: rgba(12, 73, 126, 1); // background: rgba(12, 73, 126, 1);
box-shadow: none; // box-shadow: none;
.ant-select-selection--single { // .ant-select-selection--single {
height: 36px; // height: 36px;
} // }
.ant-input { // .ant-input {
height: 36px; // height: 36px;
} // }
} // }
.amos-modal-close { // .amos-modal-close {
color: #ec0000 !important; // color: #ec0000 !important;
} // }
.amos-modal-close-x { // .amos-modal-close-x {
width: 0.56rem; // width: 0.56rem;
height: 0.56rem; // height: 0.56rem;
font-size: 0.24rem !important; // font-size: 0.24rem !important;
line-height: 0.56rem; // line-height: 0.56rem;
} // }
.amos-modal-content { // .amos-modal-content {
max-height: 4.2rem; // max-height: 4.2rem;
padding: 0.2rem; // padding: 0.2rem;
color: #fff; // color: #fff;
font-size: 0.16rem; // font-size: 0.16rem;
} // }
.amos-modal-header { // .amos-modal-header {
padding: 0.12rem 0.24rem; // padding: 0.12rem 0.24rem;
color: #fff; // color: #fff;
border: none; // border: none;
height: 0.56rem; // height: 0.56rem;
background: linear-gradient(180deg,rgba(154,203,251,0.24) 0%,rgba(225,238,255,0.36) 54%,rgba(157,183,223,0.1) 54%,rgba(63,117,209,0) 100%); // background: linear-gradient(180deg,rgba(154,203,251,0.24) 0%,rgba(225,238,255,0.36) 54%,rgba(157,183,223,0.1) 54%,rgba(63,117,209,0) 100%);
box-shadow: inset 0px 0px 18px 0px rgba(111,194,226,0.67); // box-shadow: inset 0px 0px 18px 0px rgba(111,194,226,0.67);
border-radius: 4px 4px 0px 0px; // border-radius: 4px 4px 0px 0px;
.amos-modal-title { // .amos-modal-title {
color: #307fdd; // color: #307fdd;
text-align: center; // text-align: center;
} // }
} // }
.amos-modal-footer { // .amos-modal-footer {
padding: 0 0.12rem; // padding: 0 0.12rem;
color: #307fdd; // color: #307fdd;
// background: rgba(7, 17, 35, 0.9) !important; // // background: rgba(7, 17, 35, 0.9) !important;
// border: 1px solid #1274cf; // // border: 1px solid #1274cf;
font-size: 0.16rem; // font-size: 0.16rem;
border: none; // border: none;
.detail-footer { // .detail-footer {
padding: 0.12rem 0; // padding: 0.12rem 0;
border-top: 1px solid #6FC2E2; // border-top: 1px solid #6FC2E2;
} // }
.amos-btn { // .amos-btn {
height: 0.336rem; // height: 0.336rem;
padding: 0 0.216rem; // padding: 0 0.216rem;
margin-left: 0.096rem; // margin-left: 0.096rem;
i[class*='icon'] { // i[class*='icon'] {
margin-right: 0.036rem; // margin-right: 0.036rem;
} // }
} // }
} // }
.ant-calendar-picker-input { // .ant-calendar-picker-input {
color: #5cc1e3; // color: #5cc1e3;
background: #061f3b; // background: #061f3b;
border: 0px; // border: 0px;
} // }
.amos-modal-wrap { // .amos-modal-wrap {
.select-scroll-wrapper { // .select-scroll-wrapper {
display: inline-flex !important; // display: inline-flex !important;
// width: 130px !important; // // width: 130px !important;
// margin-left: 10px; // // margin-left: 10px;
} // }
} // }
.ant-table { .ant-table {
width: 100%; width: 100%;
......
src/styles/view/biz/index.scss
View file @ 9c3c23f1
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
height: pxToRem(42px); height: pxToRem(42px);
width: pxToRem(176.16px); width: pxToRem(176.16px);
padding-top: pxToRem(6px); padding-top: pxToRem(6px);
display: contents;
} }
.amos-nav-item { .amos-nav-item {
......
src/styles/view/biz/situation/situation.scss
View file @ 9c3c23f1
.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{ .daily-duties-content{
position:absolute; position:absolute;
left:0; left:0;
top:68px; top:pxToRem(68px);
right:0; right:0;
bottom:0; //left,top,right,bottom都为0，充满真个页面 bottom:0; //left,top,right,bottom都为0，充满真个页面
overflow-y:auto; overflow-y:auto;
...@@ -24,21 +10,21 @@ ...@@ -24,21 +10,21 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
.common-margin{ .common-margin{
margin-top: 19px; margin-top: pxToRem(19px);
} }
.daily-title{ .daily-title{
font-size:20px ; font-size:pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.daily-title-content{ .daily-title-content{
width:257px; width:pxToRem(257px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.top-ten-content{ .top-ten-content{
padding:30px 30px; padding:pxToRem(30px) pxToRem(30px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
...@@ -49,8 +35,8 @@ ...@@ -49,8 +35,8 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.top-ten-item-middle{ .top-ten-item-middle{
width:208px; width:pxToRem(208px);
height: 16px; height: pxToRem(16px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
...@@ -60,7 +46,7 @@ ...@@ -60,7 +46,7 @@
} }
} }
.top-ten-item-bottom{ .top-ten-item-bottom{
width:36px; width:pxToRem(36px);
display: flex; display: flex;
flex-direction:row; flex-direction:row;
justify-content: flex-end; justify-content: flex-end;
...@@ -74,27 +60,27 @@ ...@@ -74,27 +60,27 @@
.safety-rate-view{ .safety-rate-view{
background-image: url('../../assets/dailyDuties/leftTop.png'); background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:412px; width:pxToRem(412px);
height:469px; height:pxToRem(469px);
} }
.growth-statistics-view{ .growth-statistics-view{
background-image: url('../../assets/dailyDuties/leftBottom.png'); background-image: url('../../assets/dailyDuties/leftBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:411px; width:pxToRem(411px);
height:474px; height:pxToRem(474px);
.growth-content{ .growth-content{
padding:30px 24px; padding:pxToRem(30px) pxToRem(24px);
height: 100%; height: 100%;
.growth-item-header{ .growth-item-header{
font-size: 20px; font-size: pxToRem(20px);
color: #52EDF2; color: #52EDF2;
} }
.growth-item-text{ .growth-item-text{
font-size: 20px; font-size: pxToRem(20px);
color: #ffffff; color: #ffffff;
} }
.growth-item-datatext{ .growth-item-datatext{
font-size: 20px; font-size: pxToRem(20px);
color: #00CACE; color: #00CACE;
} }
.growth-item{ .growth-item{
...@@ -102,10 +88,10 @@ ...@@ -102,10 +88,10 @@
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
height:42px; height:pxToRem(42px);
width: 362px; width: pxToRem(362px);
background-color:#1C6264 ; background-color:#1C6264 ;
margin-top:5px ; margin-top:pxToRem(5px);
} }
.growth-item:hover{ .growth-item:hover{
background-color:#00B9FF ; background-color:#00B9FF ;
...@@ -116,10 +102,10 @@ ...@@ -116,10 +102,10 @@
.class-Situation .daily-duties-middle{ .class-Situation .daily-duties-middle{
height: 100%; height: 100%;
margin-left: 19px; margin-left: pxToRem(19px);
margin-right: 19px; margin-right: pxToRem(19px);
.statistics-title{ .statistics-title{
font-size: 32px; font-size: pxToRem(32px);
color: #00EEE8; color: #00EEE8;
} }
.statistics-title-content{ .statistics-title-content{
...@@ -131,27 +117,27 @@ ...@@ -131,27 +117,27 @@
.statistics-view{ .statistics-view{
background-image: url('../../assets/dailyDuties/middleTop.png'); background-image: url('../../assets/dailyDuties/middleTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:999px; width:pxToRem(999px);
height:615px; height:pxToRem(615px);
position: relative; position: relative;
.statistics-banner{ .statistics-banner{
position: absolute; position: absolute;
left:95px; left:pxToRem(95px);
right: 95px; right: pxToRem(95px);
top:68px; top:pxToRem(68px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
z-index: 2; z-index: 2;
.statistics-banner-content{ .statistics-banner-content{
height: 100px; height: pxToRem(100px);
width:380px; width:pxToRem(380px);
background-color:rgba(28, 98, 100, 0.5) ; background-color:rgba(28, 98, 100, 0.5) ;
border-radius: 5px; border-radius: pxToRem(5px);
.statistics-banner-item{ .statistics-banner-item{
height: 100px; height: pxToRem(100px);
margin-left: 32px; margin-left: pxToRem(32px);
margin-right: 32px; margin-right: pxToRem(32px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
...@@ -160,10 +146,10 @@ ...@@ -160,10 +146,10 @@
text-align: center; text-align: center;
.statistics-text-number{ .statistics-text-number{
font-weight: bold; font-weight: bold;
font-size: 35px; font-size: pxToRem(35px);
color:#00EEE8 ; color:#00EEE8 ;
letter-spacing:5px; letter-spacing:pxToRem(5px);
height: 44px; height: pxToRem(44px);
display: flex; display: flex;
flex-direction:row; flex-direction:row;
justify-content: flex-start; justify-content: flex-start;
...@@ -171,13 +157,13 @@ ...@@ -171,13 +157,13 @@
} }
span{ span{
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: pxToRem(20px);
color:#FF0000 ; color:#FF0000 ;
letter-spacing:5px; letter-spacing:pxToRem(5px);
padding-top: 9px; padding-top: pxToRem(9px);
} }
p{ p{
font-size: 14px; font-size: pxToRem(14px);
color:#FFF ; color:#FFF ;
} }
} }
...@@ -188,22 +174,22 @@ ...@@ -188,22 +174,22 @@
.risk-trend-view{ .risk-trend-view{
background-image: url('../../assets/dailyDuties/middleBottom.png'); background-image: url('../../assets/dailyDuties/middleBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:1002px; width:pxToRem(1002px);
height:325px; height:pxToRem(325px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
right:50px; right:pxToRem(50px);
top:56px; top:pxToRem(56px);
z-index:2 ; z-index:2 ;
.button-style{ .button-style{
border-width: 1px; border-width: pxToRem(1px);
border-color: #45FEFE; border-color: #45FEFE;
width:80px width:pxToRem(80px);
} }
} }
.risk-trend-content{ .risk-trend-content{
padding:20px; padding:pxToRem(20px);
width:100%; width:100%;
height: 100%; height: 100%;
} }
...@@ -214,29 +200,29 @@ ...@@ -214,29 +200,29 @@
.risk-failure-view{ .risk-failure-view{
background-image: url('../../assets/dailyDuties/leftTop.png'); background-image: url('../../assets/dailyDuties/leftTop.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:412px; width:pxToRem(412px);
height:469px; height:pxToRem(469px);
} }
.recent-statistics-view{ .recent-statistics-view{
background-image: url('../../assets/dailyDuties/rightBottom.png'); background-image: url('../../assets/dailyDuties/rightBottom.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width:411px; width:pxToRem(411px);
height:474px; height:pxToRem(474px);
position: relative; position: relative;
.buttongroup-style{ .buttongroup-style{
position: absolute; position: absolute;
right:50px; right:pxToRem(50px);
top:56px; top:pxToRem(56px);
z-index:2 ; z-index:2 ;
.button-style{ .button-style{
border-width: 1px; border-width: pxToRem(1px);
border-color: #45FEFE; border-color: #45FEFE;
width:80px width:pxToRem(80px)
} }
} }
.recent-statistics-content{ .recent-statistics-content{
padding:20px; padding:pxToRem(20px);
width:100%; width:100%;
height: 100%; height: 100%;
} }
......
src/styles/view/index.scss
View file @ 9c3c23f1
...@@ -3,3 +3,21 @@ ...@@ -3,3 +3,21 @@
//@import './panelframe.scss'; //@import './panelframe.scss';
@import './monitor/index.scss'; @import './monitor/index.scss';
@import './biz/index.scss'; @import './biz/index.scss';
// 导入amos-antd
@import '~amos-antd/dist/amosantd.css';
// 导入amos-framework
@import '~amos-framework/dist/amosframework.css';
// 导入amos-pro
@import '~amos-pro/dist/amospro.css';
@import '~ray-progress/assets/progress.css';
//安全培训
@import './monitor/safetyTrain.scss';
@import './monitor/table.scss';
//日常训练
@import './monitor/dailyTrain.scss';
//器材保养equipmentMaintain
@import './monitor/equipmentMaintain.scss';
//安全巡检 safetyInspection
@import './monitor/safetyInspection.scss';
src/styles/view/monitor/dailyTrain.scss 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/styles/view/monitor/equipmentMaintain.scss 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/styles/view/monitor/homePage.scss 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/styles/view/monitor/index.scss
View file @ 9c3c23f1
@import './duty.scss'; @import './duty.scss';
@import './map.scss'; @import './map.scss';
@import './homePage.scss';
.view-root { .view-root {
height: 100%; height: 100%;
background: url('/src/assets/bg/bg.png') no-repeat; background: url('/src/assets/bg/bg.png') no-repeat;
......
src/styles/view/monitor/safetyInspection.scss 0 → 100644
View file @ 9c3c23f1
.safetyInspection-safety{
position: absolute;
height: 100%;
width: 100%;
background-image: url('/src/assets/safetyManage/bjt.png');
background-repeat: no-repeat;
.safetyInspection-safty-content {
height: 100%;
.safetyInspection-top{
height: 2%;
width: 100%;
}
.safetyInspection-bottom{
height: 93%;
width:100%;
position: relative;
.safetyInspection-bottom-left {
height: 98%;
width: 94%;
position: absolute;
left: 2.6%;
border:2px solid rgba(0,185,255,0.3);
.safetyInspection-bottom-left-content {
height: 100%;
.one-div {
height: 9%;
// border:2px solid blue;
width: 100%;
display: flex;
background: #222b51 !important;
.search-one {
height: 100%;
width: 30%;
position: relative;
text-align: center;
/* vertical-align: middle; */
top: 29%;
left: 41%;
.search-one-input{
width: 59%;
.ant-input-affix-wrapper .ant-input-suffix{
position: absolute;
padding-right: 24px;
top: 50%;
transform: translateY(-50%);
line-height: 0;
color: rgba(0, 0, 0, 0.65);
}
.ant-input-affix-wrapper {
padding: 0;
margin: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
list-style: none;
box-sizing: border-box;
position: relative;
display: inline-block;
width: 50;
padding-left: 24px;
padding-right: 24px;
}
.ant-input-search {
.anticon-search {
&::before {
position: relative;
display: inline-block;
background: url('/src/assets/safetyManage/sousuo.png') no-repeat;
width: 20px;
height: 20px;
background-size: 100% 100%;
top: 0px;
content: '' !important;
}
}
}
.ant-input {
// width: 10.7rem;
height: 30px;
// position: relative;
font-size:10px;
font-family:Microsoft YaHei;
font-weight:bold;
// line-height:50px;
color:rgba(225,231,232,1);
-webkit-text-stroke:1 rgba(0,0,0,0.00);
text-stroke:1 rgba(0,0,0,0.00);
opacity:1;
background: rgba(0,185,255,0.3) !important;
border-radius: 17px;
left: 34%;
.anticon:before {
margin-top: 1px;
}
border-color:rgba(0,185,255,0.3)
}
}
}
}
.two-div {
height: 91%;
// border:2px solid green;
}
}
}
}
}
}
\ No newline at end of file
src/styles/view/monitor/safetyTrain.scss 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/styles/view/monitor/table.scss 0 → 100644
View file @ 9c3c23f1
.table-styles {
height: 100%;
.ant-table-content {
height: 100%;
.ant-table-body {
// max-height: 500px !important ;
overflow-y: auto !important;
background:transparent!important;
table {
width: 300px;
border-color: transparent !important;
td {
border-color: transparent !important;
}
}
}
}
.ant-table {
background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
border-radius: 0px 0px 0 0;
}
.ant-pagination.mini .ant-pagination-total-text {
height: 20px;
line-height: 20px;
}
//表格正文居中
.ant-table-content .ant-table-body table td {
border-color: transparent !important;
text-align: center;
}
.ant-table-fixed-header .ant-table-scroll .ant-table-header{
overflow: hidden;
}
.ant-pagination.mini .ant-pagination-total-text {
font-size:13px;
font-family:Microsoft YaHei UI;
font-weight:400;
line-height: 19px;
color:rgba(255,255,255,1);
float: right
}
//修改表头文字、背景颜色
.ant-table-thead > tr >th{
color: white;
background: #3d466b !important;
//background: #222b51 !important;
border-color: transparent !important;
text-align: center;
}
//鼠标悬浮行背景色修改
table tbody tr:hover>td {
background-color:#00B9FF !important;
}
.ant-table-content {
.ant-table-scroll .ant-table-header {
margin-bottom: 3px !important;
// padding-bottom: 0px !important;
margin-top: -2px !important;
margin-left: -2px !important;
margin-right: -2px !important
}
//背景色奇数和偶数
.back-02 {
background:transparent!important;
opacity:1;
}
.back-01 {
background:rgba(14,127,180,0.29);
}
}
.ant-pagination {
left: 39%;
position: absolute;
.ant-pagination-options {
.select-scroll-wrapper {
margin: 0;
}
}
.ant-pagination-total-text {
color: white;
}
.ant-pagination-prev {
background: url('/src/assets/safetyManage/zuo.png') no-repeat;
a {
&::after {
color:rgba(0,185,255,0.3)
}
}
}
.ant-pagination-next {
background: url('/src/assets/safetyManage/you.png') no-repeat;
background-size: 100% 100%;
a {
&::after {
color:rgba(0,185,255,0.3)
}
}
}
//分页颜色调整
.ant-pagination-item-active {
background-color: #5FFFFD !important;
border-color: #5FFFFD !important;
}
.ant-pagination-item {
border: 0;
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
background-color: #00B9FF !important;
}
.ant-pagination-jump-next {
&::after {
color: white;
}
}
}
.ant-pagination.mini .ant-pagination-options {
margin-left: 8px;
display: none;
}
//滚动条样式
.ant-table-body{
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background-image: url('/src/assets/safetyManage/hengxian.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: 0;
border-radius: 0;
background-image: url('/src/assets/safetyManage/gdt.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
&::-webkit-scrollbar-button {
background-image: url('/src/assets/safetyManage/shang.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
src/view/monitor/dailyTrain/DailyTrainLeft.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/dailyTrain/DailyTrainRight.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/dailyTrain/index.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import DailyTrainyLeft from './DailyTrainLeft';
import DailyTrainRight from './DailyTrainRight';
/**
* 日常训练模块
*/
export default class DailyTrain extends Component {
render() {
return (
<div className="dailyTrain-safety">
<div className="dailyTrain-safty-content">
<div className="dailyTrain-top"></div>
<div className="dailyTrain-bottom">
<DailyTrainyLeft />
<DailyTrainRight />
</div>
</div>
</div>
);
}
}
src/view/monitor/duty/index.js
View file @ 9c3c23f1
...@@ -30,7 +30,6 @@ class Duty extends Component { ...@@ -30,7 +30,6 @@ class Duty extends Component {
render() { render() {
return ( return (
<div className="duty-root"> <div className="duty-root">
日常值守
</div> </div>
); );
} }
......
src/view/monitor/equipmentMaintain/EquipmentMaintainLeft.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/equipmentMaintain/EquipmentMaintainRight.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/equipmentMaintain/index.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import EquipmentMaintainLeft from './EquipmentMaintainLeft';
import EquipmentMaintainRight from './EquipmentMaintainRight';
/**
* 器材保养模块
*/
export default class EquipmentMaintainTrain extends Component {
render() {
return (
<div className="equipmentMaintain-safety">
<div className="equipmentMaintain-safty-content">
<div className="equipmentMaintain-top"></div>
<div className="equipmentMaintain-bottom">
<EquipmentMaintainLeft />
<EquipmentMaintainRight />
</div>
</div>
</div>
);
}
}
src/view/monitor/firestrength/FireStrengthDetail.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import { Tabs } from 'amos-antd';
const { TabPane} = Tabs;
/**
* 消防实力统计详情
*/
class FireStrengthDetail extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
}
render() {
return (
<div className="fire-strength-detail">
<Tabs defaultactivekey="1" type="card">
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
</div>
);
}
}
FireStrengthDetail.propTypes = {
};
export default FireStrengthDetail;
src/view/monitor/index.js
View file @ 9c3c23f1
...@@ -5,6 +5,14 @@ import { Store } from 'amos-tool'; ...@@ -5,6 +5,14 @@ import { Store } from 'amos-tool';
import Header from './../main/header'; import Header from './../main/header';
import loadScripts from 'dt2react/lib/utils/loadScripts'; import loadScripts from 'dt2react/lib/utils/loadScripts';
import { outMap } from './../../consts/urlConsts'; import { outMap } from './../../consts/urlConsts';
import { Modal, Select } from 'amos-framework';
import RiskControlTable from './../monitor/statistical/RiskControlTable';
import DangerControlTable from './../monitor/statistical/DangerControlTable';
import AlarmControlTable from './../monitor/statistical/AlarmControlTable';
import CenterLevelLeft from './../monitor/statistical/indexLeft';
import CenterLevelRight from './../monitor/statistical/indexRight';
const lsTool = Store.lsTool; const lsTool = Store.lsTool;
...@@ -21,7 +29,11 @@ class RootView extends Component { ...@@ -21,7 +29,11 @@ class RootView extends Component {
submenu: [], submenu: [],
extendSystem: [], extendSystem: [],
loadAmap: false, loadAmap: false,
BasicMap: null BasicMap: null,
visible1: false,
visible2: false,
visible3: false,
flag:false,
}; };
} }
...@@ -72,7 +84,63 @@ class RootView extends Component { ...@@ -72,7 +84,63 @@ class RootView extends Component {
componentWillUnmount() { componentWillUnmount() {
} }
cancel = () => {
this.setState({
visible1: false,
visible2: false,
visible3: false,
flag:true,
});
}
getContext = (type) => {
const { flag } = this.state;
if(type==='1'){
return <RiskControlTable refresh={flag}/>;
}else if(type==='2'){
return <DangerControlTable refresh={flag} />;
}else if(type==='3'){
return <AlarmControlTable refresh={flag} />;
}
};
ondetails = (type) => {
if(type==='1'){
this.setState({
visible1: true
});
}else if(type==='2'){
this.setState({
visible2: true
});
}else{
this.setState({
visible3: true
});
}
};
render() { render() {
const { visible1,visible2,visible3,flag } = this.state;
let type1="1";
let type2="2";
let type3="3";
const { children } = this.props; const { children } = this.props;
let BasicMap = this.state.BasicMap; let BasicMap = this.state.BasicMap;
return ( return (
...@@ -84,6 +152,49 @@ class RootView extends Component { ...@@ -84,6 +152,49 @@ class RootView extends Component {
{children} {children}
{ this.state.loadAmap && <BasicMap />} { this.state.loadAmap && <BasicMap />}
</div> </div>
<CenterLevelLeft ondetails={ this.ondetails } />
<CenterLevelRight />
<Modal
header="风险管控情况"
visible={visible1}
className="risk-model-model99"
width={'50%'}
noDefaultFooter
content={ this.getContext(type1)}
onCancel={ this.cancel}
destroyOnClose={true}
/>
<Modal
header="隐患管控情况"
visible={visible2}
className="risk-model-model99"
width={'50%'}
noDefaultFooter
content={ this.getContext(type2)}
onCancel={ this.cancel }
destroyOnClose={true}
/>
<Modal
header="告警管控情况"
visible={visible3}
className="risk-model-model99"
width={'50%'}
noDefaultFooter
content={this.getContext(type3)}
onCancel={ this.cancel}
destroyOnClose={true}
/>
</div> </div>
); );
} }
......
src/view/monitor/safetyInspection/SafetyInspectionLeft.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/safetyInspection/index.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import SafetyInspectionLeft from './SafetyInspectionLeft';
/**
* 安全巡检模块
*/
export default class SafetyInspection extends Component {
render() {
return (
<div className="safetyInspection-safety">
<div className="safetyInspection-safty-content">
<div className="safetyInspection-top"></div>
<div className="safetyInspection-bottom">
<SafetyInspectionLeft />
</div>
</div>
</div>
);
}
}
src/view/monitor/safetyManage/AmosGridTable.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table } from 'amos-antd';
import { Log } from 'amos-tool';
/**
* 基础信息表格组件
* @class AmosGridTable
* @extends {Component}
*/
class AmosGridTable extends Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],//表格选择的行key值集合
selectedRows: [],//表格选择的行数据集合
loading: false,//页面是否加载中,默认false
dataList: [],//表格数据集合
size: 'middle',//表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
filter: {},//表格过滤条件
totals: 1,//所有数据总和
showFilter: true,
otherFilter: props.otherFilter,
maxHeight: 450
};
}
/**
* 初始获取表格数据
*/
componentDidMount() {
this.props.callBack(this.reload);
this.getHeightOffset();
window.addEventListener('resize', this.onWindowResize);
}
componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url){
this.reload();
}
if (nextProps.otherFilter && nextProps.otherFilter !== this.props.otherFilter){
this.setState({ otherFilter: nextProps.otherFilter }, this.reload);
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize);
}
onWindowResize = (e) => {
this.getHeightOffset();
}
/**
* 获取复选框选择的数据，并进行回调
*/
onSelectChange = (selectedRowKeys,selectedRows) => {
this.setState({
selectedRowKeys,
selectedRows
},this.props.getSelectedRows(selectedRows,selectedRowKeys));
}
/**
* 设置页面数据大小事件
*/
onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload);
}
/**
* 设置当前页事件
*/
onPaginationChange = (current) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload);
}
/**
* 获取表格所有的外部按钮封装成数组
*/
getbtns = () => {
let btns = [];
return <div key={`btntool`} className='amos-grid-oper-btn'>{this.props.operBtns}</div>;
}
/**
* 获取表格数据的筛选条件，通过回调获得的，并通过该条件进行表格刷新获取
*/
changeFilters = (obj) => {
let newobj = obj;
let res = {};
let list = Object.keys(newobj);
list.map(e=>{
let varName = newobj[e];
if (varName && varName !== ''){
res[e] = varName;
if (e === 'enabled'){
res[e] = varName === '启用';
}
}
});
this.setState({ filter: res },this.reload);
}
openFilter = () => {
let showFilter = this.state.showFilter;
this.setState({ showFilter: !showFilter });
}
/**
* 获取表格数据（刷新）
*/
reload = () => {
let { current,pageSize,filter,otherFilter } = this.state;
this.props.getTableDataAction({ current: current - 1, pageSize },JSON.stringify(filter),otherFilter);
this.getHeightOffset();
}
/**
* 获取表格内部按钮
*/
addOperateCol =(text,record) =>{
const { operateCol } = this.props;
let operBtns = operateCol(text,record);
return (<div className='operation-buttons'>{operBtns}</div>);
}
showTotal = (total) => {
return `共 ${total} 条`;
}
generateRowkey = (record, index) => {
// return record.id ? record.id : UUID.uuidFast();
return record.key ? record.key : record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
// return index + (this.state.current - 1) * this.state.pageSize;
}
getHeightOffset = () => {
let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? 450 : getPanelHeight();
height && this.setState({ maxHeight: height });
}
isVisableSearch(columns){
let list = columns;
let res = false;
list.map((e)=>{
if (e.query){
res = true;
return true;
}
});
return res;
}
render() {
const { loading, selectedRowKeys,size,maxHeight } = this.state;
let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals,rowClassName, onRowClick, onRowDoubleClick } = this.props;
//设置复选框参数
let rowSelection = {
selectedRowKeys: this.props.selectedRowKeys || selectedRowKeys,
onChange: this.onSelectChange
};
//设置是否添加复选框
rowSelection = isChecked ? rowSelection : undefined;
//如果表格各行存在内部按钮，将各个按钮添加到表格列模型中
if (operateCol){
columns[columns.length - 1].render = (text,record) => this.addOperateCol(text,record);
}
let tepmPage = Object.assign({
size: 'small',
total: totals,
current: this.state.current,
pageSize: this.state.pageSize,
onShowSizeChange: this.onSizeChange,
onChange: this.onPaginationChange,
showSizeChanger: true,
showTotal: this.showTotal
}, pagination);
let _tempPagination = isPageable === false ? false :tepmPage;
let bordered = true;
// 当为true 或 undefined时则分页
let _pagination = isPageable === false ? false : _tempPagination;
let divStyle = this.state.showFilter ? 'other-table-bar' : 'table-bar';
let display = this.state.showFilter ? 'block' : 'none';
let searchStyle = { display };
return (
<div className="table-styles">
{ onRowClick ?
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={dataList}
pagination={_pagination}
size={size}
bordered={bordered}
scroll={{ y: maxHeight }}
rowClassName={rowClassName}
onRowClick={onRowClick}
/> :
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={dataList}
pagination={_pagination}
size={size}
bordered={bordered}
scroll={{ y: maxHeight }}
rowClassName={rowClassName}
onRowDoubleClick={onRowDoubleClick}
/>
}
</div>
);
}
}
AmosGridTable.propTypes = {
url: PropTypes.string,//请求表格数据的url不带参数的
columns: PropTypes.array,//表格列模型
getSelectedRows: PropTypes.func,//获取选择的行数据，用于各个具体的表格回调获取数据。
operBtns: PropTypes.array,//表格外部操作按钮，如'新增'，'编辑'等
isChecked: PropTypes.bool,//表格是否包含复选框
operateCol: PropTypes.func,//表格内部操作按钮，如'查看详情'等
callBack: PropTypes.func,//获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
otherFilter: PropTypes.string,//其他查询条件
dataList: PropTypes.array,
getTableDataAction: PropTypes.func,
selectedRowKeys: PropTypes.array,
totals: PropTypes.number,
pagination: PropTypes.any, // 分页props, false时无分页
isPageable: PropTypes.bool, // 是否分页: true 分页, false 不分页, 当为undefined时默认有分页
isTreeTable: PropTypes.bool, // 是否是treeTable 默认非
rowClassName: PropTypes.func,
setPageConfig: PropTypes.func, //把分页参数给父类
defaultPageConfig: PropTypes.object, //父类默认分页参数
getPanelHeight: PropTypes.func
};
AmosGridTable.defaultProps = {
operBtns: [],
dataList: [],
totals: 1,
columns: [],
isChecked: true,
isTreeTable: false,
otherFilter: ''
};
export default AmosGridTable;
src/view/monitor/safetyManage/SafteyLeft.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/safetyManage/SafteyRight.js 0 → 100644
View file @ 9c3c23f1
This diff is collapsed.
src/view/monitor/safetyManage/index.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import SafteyLeft from './SafteyLeft';
import SafteyRight from './SafteyRight';
/**
* 中心级2侧模块
*/
export default class Safety extends Component {
render() {
return (
<div className="fire-safety">
<div className="fire-safty-content">
<div className="fire-top"></div>
<div className="fire-bottom">
<SafteyLeft />
<SafteyRight />
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/AlarmControl.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
/**
* 告警管控
*/
export default class AlarmControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData:[],
hj:0,
gz:0,
xj:0
};
}
componentDidMount(){
let dates=[
{value:3, name:'火警告警'},
{value:31, name:'故障告警'},
{value:10, name:'巡检告警'},
];
if(dates){
this.setState({ seriesData: dates,hj:dates[0].value,gz:dates[1].value,xj:dates[2].value});
}
}
ondetails = (type) => {
this.props.ondetails("3");
};
//获取告警管控数据
getOptionsx = () => {
const { seriesData } = this.state;
return {
color:['rgba(243, 12, 12, 1)','rgba(219, 121, 23, 1)','rgba(209, 209, 52, 1)'],
series: [
{
name: "",
type: "pie",
radius: ["0%", "55%"],
center: ["50%", "50%"],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
radius: ['60%', '72%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: function(param) {
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '告警总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(255,255,255,1)',
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
}
]
};
}
render() {
const { hj,gz,xj } = this.state;
return (
<div className="AlarmControl">
<div className="AlarmControl_1">
<div className="AlarmControl_1_1"><span>告警管控情况</span></div>
</div>
<div className="AlarmControl_2">
<div className="AlarmControl_2_1" onClick={this.ondetails}> </div>
<div className="AlarmControl_2_2">
<div className="AlarmControl_2_2_1">
<div className="AlarmControl8">
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 火警告警：</div>
<div className="AlarmControl2_13">{hj}</div>
</div>
<div className="AlarmControl2_2"></div>
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">故障告警：</div>
<div className="AlarmControl2_13">{gz}</div>
</div>
<div className="AlarmControl2_3"></div>
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1" >
<div className="AlarmControl2_12">巡检告警：</div>
<div className="AlarmControl2_13">{xj}</div>
</div>
<div className="AlarmControl2_4"></div>
</div>
</div>
</div>
<div className="AlarmControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
</div>
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/AlarmControlTable.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment';
import InputTable from './InputTable';
import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const tableList1 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' }
];
const tableList2 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
];
const data = [
{ id: 0, name: '失控' },
{ id: 1, name: '受控' }
];
const checkInputColumns = (_this) => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '10%',
query: true,
},
{
title: '火警告警',
dataIndex: 'sex',
key: 'sex',
width: '9%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="yi">{text}</p> ;
// }
},
{
title: '故障报警',
dataIndex: 'age',
key: 'age',
width: '10%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: '巡检告警',
dataIndex: 'address',
key: 'address',
width: '10%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
// }
},
// {
// title: '四级',
// dataIndex: 'id',
// key: 'id',
// query: true,
// required: true, //是否是默认显示的
// width: '10%',
// render: (text,record) => {
// return <p className="si">{text}</p> ;
// }
// },
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '10%'
}
];
};
/**
* 风险管控详情
*/
class AlarmControlTable extends Component {
constructor(props) {
super(props);
this.state = {
dataList: [], //表格数据集合
size: 'small', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'),
};
}
componentWillMount = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
};
componentDidMount = () => {
};
componentWillReceiveProps = (nextProps) => {
}
/**
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
reload: () => {
r();
}
},
r()
);
};
//搜索
onIconClick1 = () => {
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){
this.setState({ name:"" });
this.setState({ startTime: moment().format('YYYY-MM-DD')});
this.setState({ endTime:moment().add(1, "years").format('YYYY-MM-DD') });
}
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
this.setState({ name:value });
}
onChange = (key, value) => {
debugger
if(key==='name'){
this.setState({ name:value });
}else if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else{
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
}
}
render() {
const { dataList,totals ,name,endTime,startTime} = this.state;
return (
<div className="souh" >
<div className="sou">
<div className="inputxq3">
<StdForm >
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} />
</StdForm>
</div>
<div className="inputxq">
<StdForm label="日期">
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="至">
<DatePicker
format="YYYY-MM-DD"
value={moment(endTime)}
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</StdForm>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div>
);
}
}
export default AlarmControlTable;
src/view/monitor/statistical/AllSafety.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
//import { AllSafetyAction } from './../../../services/centerLevelService';
/**
* 总体消防安全情况
*/
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
// color: ['#00CACE', '#F70D0E'],
color: ['#F70D0E', '#00CACE'],
graphic: [{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '30%',
style: {
text: '80', //'80' + '\n' + '总数'
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
width: 30,
height: 30,
fontSize: 25,
fontFamily: "Microsoft YaHei",
fontWeight:"bold"
}
},
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '45%',
style: {
text: '站点',
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
width: 24,
height: 16,
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontWeight:400
}
}],
series: [
{
name: '总体消防安全情况',
type: 'pie',
radius: ['65%', '80%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
// hoverAnimation: false, //是否突出
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 40,
name: "不合格",
},
{
value: 60,
name: '正常',
}
]
},
{
name: "中间的背景",
type: "pie",
radius: ["0%", "60%"],
center: ["50%", "40%"],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
},
//隐藏多余文字提示
label: {
show: false
},
labelLine: {
show: false
},
tooltip: {
show: false
},
// hoverAnimation: false,
data: [100]
}
]
};
class AllSafety extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
}
getOptionsx = () => {
return option;
}
render() {
return (
<div className="AllSafety">
<div className="all-safety-content">
<div className="all-safety-font">总体消防安全情况</div>
<div className="content-detail">
<div className="all-safety-left">
<ReactEcharts option={this.getOptionsx()} className="div-echars" />
</div>
<div className="all-safety-right">
<div className="all-safety-right-one">
<div className="right-one-font">1个</div>
</div>
<div className="all-safety-right-two">
<div className="right-two-font"><span className="jiantou">&darr;</span>-1</div>
</div>
<div className="all-safety-right-three">
<div className="right-three-font">1个</div>
</div>
<div className="all-safety-right-four">
<div className="right-four-font"><span className="jiantou">&uarr;</span>+1</div>
</div>
</div>
</div>
</div>
{/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */}
</div>
);
}
}
AllSafety.propTypes = {
};
export default AllSafety;
src/view/monitor/statistical/DangerControl.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';
import ReactEcharts from 'amos-viz/lib/echarts';
const centerLevelIcon = imgStatic.centerLevelIcon;
/**
* 隐患管控
*/
export default class DangerControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData: [],
yq:0,
sw:0,
zl:0,
jd:'0%'
};
}
componentDidMount(){
let dates={jd:'20%',
seriesData: [
{value:35, name:'逾期未治理'},
{value:10, name:'尚未治理'},
{value:4, name:'治理验收'},
]};
if(dates){
this.setState({ seriesData: dates.seriesData,jd:dates.jd,yq:dates.seriesData[0].value,sw:dates.seriesData[1].value,zl:dates.seriesData[2].value});
}
}
ondetails = (type) => {
this.props.ondetails("2");
};
getOptionsx = () => {
const { seriesData} = this.state;
return {
color:['rgba(254, 0, 0, 1)','rgba(255, 214, 0, 1)','rgba(0, 255, 238, 1)'],
series: [
{
name: "",
type: "pie",
radius: ["0%", "55%"],
center: ["50%", "50%"],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
radius: ['60%', '72%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: function(param) {
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '隐患总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(255,255,255,1)',
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
}
]
};
}
render() {
const { yq,sw,zl,jd} = this.state;
return (
<div className='DangerControl'>
<div className="DangerControl_1">
<div className="DangerControl_1_1"><span>隐患管控情况</span></div>
</div>
<div className="DangerControl_2">
<div className="DangerControl_2_1" onClick={this.ondetails}></div>
<div className="DangerControl_2_2">
<div className="DangerControl_2_2_1">
<div className="AlarmControl8">
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 逾期未治理：</div>
<div className="AlarmControl2_13">{yq}</div>
</div>
<div className="AlarmControl2_2"></div>
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">尚未治理：</div>
<div className="AlarmControl2_13">{sw}</div>
</div>
<div className="AlarmControl2_3"></div>
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">治理验收：</div>
<div className="AlarmControl2_13">{zl}</div>
</div>
<div className="AlarmControl2_4"></div>
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">治理进度：</div>
<div className="AlarmControl2_13">{jd}</div>
</div>
<div className="AlarmControl2_6"></div>
</div>
</div>
</div>
<div className="DangerControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
</div>
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/DangerControlTable.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment';
import InputTable from './InputTable';
import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const Option = Select.Option;
const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' }
];
const tableList2 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
];
const data = [
{ id: 1, name: '严重' },
{ id: 2, name: '一般' }
];
const checkInputColumns = (_this) => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '10%',
query: true,
},
{
title: '已治理',
dataIndex: 'sex',
key: 'sex',
width: '9%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="yi">{text}</p> ;
// }
},
{
title: '未治理',
dataIndex: 'age',
key: 'age',
width: '10%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: '逾期未治理',
dataIndex: 'address',
key: 'address',
width: '10%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
// }
},
{
title: '治理验收',
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '10%',
// render: (text,record) => {
// return <p className="si">{text}</p> ;
// }
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '10%'
}
];
};
/**
* 风险管控详情
*/
class DangerControlTable extends Component {
constructor(props) {
super(props);
this.state = {
dataList: [], //表格数据集合
size: 'small', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'),
grade:""
};
}
componentWillMount = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
};
componentDidMount = () => {
};
componentWillReceiveProps = (nextProps) => {
}
/**
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
reload: () => {
r();
}
},
r()
);
};
//搜索
onIconClick1 = () => {
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){
this.setState({ name:"" });
this.setState({ startTime: moment().format('YYYY-MM-DD')});
this.setState({ endTime:moment().add(1, "years").format('YYYY-MM-DD') });
this.setState({ grade: "" });
}
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
this.setState({ name:value });
}
onChange = (key, value) => {
if(key==='name'){
this.setState({ name:value });
}else if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else if(key==='endTime'){
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
}else{
this.setState({ grade: value });
}
}
render() {
const { dataList,totals ,name,grade,endTime,startTime} = this.state;
return (
<div className="souh" >
<div className="sou">
<div className="inputxq1">
<StdForm >
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} />
</StdForm>
</div>
<div className="inputxq">
<StdForm >
<Select
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="日期">
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="至">
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</StdForm>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div>
);
}
}
export default DangerControlTable;
src/view/monitor/statistical/FireSafety.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
/**
* 消防安全管理
*/
class FireSafety extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
}
// handleData = (data) => {
// let map = new Map();
// if (data && data.length > 0) {
// data.map(item => {
// map.set(item.name, item.value);
// })
// }
// return map;
// }
render() {
return (
<div className="FireSafety">
<div className="fire-safety-content">
<div className="fire-safety-font">消防安全管理(累计)</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-yjya'></span>
</div>
<span className='fire-safety-wenzi'>应急预案</span>
<span className="right-font">100套</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-aqpx' ></span>
</div>
<span className='fire-safety-wenzi'>安全培训</span>
<span className="right-font">123次</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-rcxl' ></span>
</div>
<span className='fire-safety-wenzi'>日常训练</span>
<span className="right-font">100次</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-qcby'></span>
</div>
<span className='fire-safety-wenzi'>器材保养</span>
<span className="right-font">14445件</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-aqxj' ></span>
</div>
<span className='fire-safety-wenzi'>安全巡检</span>
<span className="right-font">800次</span>
</div>
</div>
{/**分割线 */}
</div>
</div>
);
}
}
FireSafety.propTypes = {
};
export default FireSafety;
src/view/monitor/statistical/FireStrength.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import { Modal } from 'amos-framework';
import FireStrengthDetail from'./../firestrength/FireStrengthDetail';
/**
* 消防实力统计
*/
class FireStrength extends Component {
constructor(props) {
super(props);
this.state = {
data: {}
};
}
componentDidMount() {
}
onClick=()=>
{
alert(123);
}
render() {
return (
<div className="FireStrength">
<FireStrengthDetail />
<div className="strength-safety-content">
<div className="strength-safety-font">消防实力情况(累计) </div>
<div className="strength-safety-content-box">
<div style={{margin:'auto'}}>
<div className="item" style={{marginTop:"0%"}} onClick={this.onClick} >
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='mods/components/centerLevel/assets/centerLevel/xfsl/zzxfd.png'/></div><span>驻站消防队:</span><span className="item-value">18支</span> </div>
</div>
<div className="item">
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='mods/components/centerLevel/assets/centerLevel/xfsl/zzxfy.png'/></div><span>驻站消防员:</span><span className="item-value">300人</span> </div>
</div>
<div className="item">
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='mods/components/centerLevel/assets/centerLevel/xfsl/znzs.png'/></div><span>站内值守:</span><span className="item-value">200人</span> </div>
</div>
<div className="item">
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='mods/components/centerLevel/assets/centerLevel/xfsl/xfc.png'/></div><span>消防车:</span><span className="item-value">50辆</span> </div>
</div>
<div className="item">
<div className="item-content"> <div className="item-img-div"> <img className="item-img"src='mods/components/centerLevel/assets/centerLevel/xfsl/xfqc.png'/></div><span>消防器材:</span><span className="item-value">20000件</span> </div>
</div>
</div>
</div>
</div>
<Modal
width={1000}
height={1000}
content={<FireStrengthDetail/>}
visible={false}
></Modal>
</div>
);
}
}
FireStrength.propTypes = {
};
export default FireStrength;
src/view/monitor/statistical/InputTable.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table } from 'amos-antd';
/**
* 巡检记录详情
*/
class InputTable extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: props.outterPageConfig ? props.outterPageConfig.current : 1,
pageSize: props.outterPageConfig ? props.outterPageConfig.pageSize : 10
};
this.state = {
loading: false,//页面是否加载中,默认false
dataList: [],//表格数据集合
size: 'middle',//表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
totals: 1,//所有数据总和
maxHeight: 250
};
}
/**
* 初始获取表格数据
*/
componentDidMount() {
this.props.callBack(this.reload);
this.getHeightOffset();
window.addEventListener('resize', this.onWindowResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize);
}
onWindowResize = (e) => {
this.getHeightOffset();
}
/**
* 设置页面数据大小事件
*/
onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload);
}
/**
* 设置当前页事件
*/
onPaginationChange = (current) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload);
}
setPageConfig = ({ pageSize,current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.current = current;
}
}
/**
* 获取表格数据（刷新）
*/
reload = () => {
let { current,pageSize } = this.state;
// this.props.getTableDataAction({ current: current - 1, pageSize });
// this.getHeightOffset();
}
showTotal = (total) => {
return `共 ${total} 条`;
}
generateRowkey = (record, index) => {
return record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
}
getHeightOffset = () => {
let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? '850' : getPanelHeight();
height && this.setState({ maxHeight: height });
}
render() {
let { size, loading, maxHeight } = this.state;
let { columns, dataSource, totals, pagination } = this.props;
let defaultPageConfig = this.pageConfig;
let rowKey = this.generateRowkey;
let _tempPagination = pagination === false ? false : pagination || {
size: 'small',
total: totals,
current: this.state.current,
pageSize: this.state.pageSize,
onShowSizeChange: this.onSizeChange,
onChange: this.onPaginationChange,
showSizeChanger: true,
showTotal: this.showTotal
};
let bordered = true;
// 当为true 或 undefined时则分页
let _pagination = _tempPagination;
return (
<Table
setPageConfig={this.setPageConfig}
loading={loading}
rowKey={rowKey}
columns={columns}
dataSource={dataSource}
bordered={bordered}
pagination={_pagination}
scroll={{ y: maxHeight }}
size={size}
defaultPageConfig={defaultPageConfig}
/>
);
}
}
InputTable.propTypes = {
columns: PropTypes.array,
dataSource: PropTypes.array,
bordered: PropTypes.bool,
pagination: PropTypes.bool,
rowKey: PropTypes.number,
totals: PropTypes.number,
setPageConfig: PropTypes.func, //把分页参数给父类
getTableDataAction: PropTypes.func,
getPanelHeight: PropTypes.func,
callBack: PropTypes.fuc
};
export default InputTable;
src/view/monitor/statistical/ModelContent.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import { RiskControlDetailAction } from './../../../services/centerLevelService';
import moment from 'moment';
const format = 'YYYY-MM-dd';
export default class ModelContent extends Component {
constructor(props) {
super(props);
this.state = {
alarmData: []
};
}
componentDidMount(){
let { type } = this.props;
this.RiskControlDetail(type);
}
RiskControlDetail = (type) => {
RiskControlDetailAction(type).then(data => {
this.setState({
alarmData: data
});
});
}
/**
* 获取标题
*
* @memberof ModelContent
*/
getTitle = (v) => {
const titleParams = {
1: '一级风险点', //一级风险点
2: '二级风险点', //二级风险点
3: '三级风险点', //三级风险点
4: '四级风险点' //四级风险点
};
return titleParams[v];
}
formatData = (str) => {
let date = str.split(' ')[0];
return date;
}
renderContent = (content) =>{
return (
<div className='rows'>
{(content || []).map(itemA => {
return (
<div className='row'>
<span>{itemA.name}</span>
<span className='date'>{this.formatData(itemA.changeDate)}</span>
</div>
);
})}
</div>
);
}
render() {
let { alarmData } = this.state;
let { type } = this.props;
return (
<div className='model-content'>
{(alarmData || []).map(item => {
return (
<div className='content-div'>
<div className='title'>
<span>|</span>
<span className='next-title'>{ type === 'risk' ? this.getTitle(item.typeCode) : item.typeName }</span>
</div>
{this.renderContent(item.content)}
</div>
);
})}
</div>
);
}
}
src/view/monitor/statistical/RiskControl.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
/**
* 风险管控
*/
export default class RiskControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData:[],
shikong:0,
shoukongx:'0%',
shikongx:'0%',
shoukong:0,
yiji:0,
erji:0,
sanji:0,
siji:0
};
}
componentDidMount() {
let dates={
seriesData:[
{value:3, name:'受控'},
{value:7, name:'失控'},
],
yiji:10,
erji:20,
sanji:30,
siji:40,
shoukongx:'30%',
shikongx:'70%'
};
if(dates){
this.setState({ seriesData: dates.seriesData,
yiji:dates.yiji,
erji:dates.erji,
sanji:dates.sanji,
siji:dates.siji,
shoukongx:dates.shoukongx,
shikongx:dates.shikongx,
shoukong:dates.seriesData[0].value,shikong:dates.seriesData[1].value});
}
}
ondetails = (type) => {
this.props.ondetails("1");
};
getOptionsx = () => {
const { seriesData } = this.state;
return {
color:['rgba(0, 202, 206, 1)','rgba(254, 0, 0, 1)'],
series: [
{
name: "",
type: "pie",
radius: ["0%", "65%"],
center: ["50%", "50%"],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
radius: ['70%', '85%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'center',
formatter: function(param) {
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '风险总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(0,255,238,1)',
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
}
]
};
}
render() {
const { shikong,shoukong,shikongx,shoukongx,yiji,erji,sanji,siji} = this.state;
return (
<div className="RiskControl">
<div className="RiskControl_1">
<div className="RiskControl_1_1"><span>风险管控情况</span></div>
</div>
<div className="RiskControl_2">
<div className="RiskControl_2_1" onClick={this.ondetails}></div>
<div className="RiskControl_2_2">
<div className="RiskControl_2_2_1">
<div className="RiskControl_2_2_19">
<div className="RiskControl_2_2_191 shi">{shikongx}</div>
<div className="RiskControl_2_2_192 shi1">失控：{shikong}</div>
</div>
<div className="RiskControl_2_2_19">
<div className="RiskControl_2_2_191 shou">{shoukongx}</div>
<div className="RiskControl_2_2_192 shou1">受控：{shoukong}</div>
</div>
</div>
<div className="RiskControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
</div>
</div>
</div>
<div className="RiskControl_3">
<div className="RiskControl_3_1">
<div className="RiskControl_3_1_1">
<div className="RiskControl_3_1_8">二级：</div>
<div className="RiskControl_3_1_8">{erji}</div>
</div>
<div className="RiskControl_3_1_2"></div>
</div>
<div className="RiskControl_3_1">
<div className="RiskControl_3_1_17">
<div className="RiskControl_3_1_8"> 一级：</div>
<div className="RiskControl_3_1_8">{yiji}</div>
</div>
<div className="RiskControl_3_1_3"></div>
</div>
<div className="RiskControl_3_1">
<div className="RiskControl_3_1_1">
<div className="RiskControl_3_1_8">四级：</div>
<div className="RiskControl_3_1_8">{siji}</div>
</div>
<div className="RiskControl_3_1_4"></div>
</div>
<div className="RiskControl_3_1">
<div className="RiskControl_3_1_17">
<div className="RiskControl_3_1_8">三级：</div>
<div className="RiskControl_3_1_8">{sanji}</div>
</div>
<div className="RiskControl_3_1_5"></div>
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/RiskControlTable.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment';
import InputTable from './InputTable';
import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const Option = Select.Option;
const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' }
];
const tableList2 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
];
const data = [
{ id: "1", name: '失控' },
{ id: "2", name: '受控' }
];
const checkInputColumns = (_this) => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '10%',
query: true,
},
{
title: '一级',
dataIndex: 'sex',
key: 'sex',
width: '9%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="yi">{text}</p> ;
}
},
{
title: '二级',
dataIndex: 'age',
key: 'age',
width: '10%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="er">{text}</p> ;
}
},
{
title: '三级',
dataIndex: 'address',
key: 'address',
width: '10%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="san">{text}</p> ;
}
},
{
title: '四级',
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '10%',
render: (text,record) => {
return <p className="si">{text}</p> ;
}
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '10%'
}
];
};
/**
* 风险管控详情
*/
class RiskControlTable extends Component {
constructor(props) {
super(props);
this.state = {
dataList: [], //表格数据集合
size: 'small', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'),
grade:""
};
}
componentWillMount = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
};
componentDidMount = () => {
};
componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){
this.setState({ name:"" });
this.setState({ startTime: moment().format('YYYY-MM-DD')});
this.setState({ endTime:moment().add(1, "years").format('YYYY-MM-DD') });
this.setState({ grade: "" });
}
}
/**
* 获取表格刷新方法
*/
reload = r => {
this.setState(
{
reload: () => {
r();
}
},
r()
);
};
//搜索
onIconClick1 = () => {
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
debugger
this.setState({ name:value });
}
onChange = (key, value) => {
debugger
if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else if(key==='endTime'){
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
}else{
this.setState({ grade: value });
}
}
// renderEndTime(type) {
// debugger
// const { endTime,startTime} = this.state;
// if(type==="1"&&startTime===""){
// return <DatePicker
// format="YYYY-MM-DD"
// className="input_item_select"
// onChange={ e => this.onChange('startTime', e) }
// /> ;
// }else if(type==="1"&&startTime!=""){
// return <DatePicker
// format="YYYY-MM-DD"
// value={moment(startTime)}
// className="input_item_select"
// onChange={ e => this.onChange('startTime', e) }
// /> ;
// }
// if(type==="2"&&endTime===""){
// return <DatePicker
// format="YYYY-MM-DD"
// className="input_item_select"
// onChange={ e => this.onChange('endTime', e) }
// /> ;
// }else if(type==="2"&&endTime!=""){
// return ;
// }
// }
render() {
const { dataList,totals ,name,grade,endTime,startTime} = this.state;
debugger
return (
<div className="souh" >
<div className="sou">
<div className="inputxq1">
<StdForm >
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} />
</StdForm>
</div>
<div className="inputxq">
<StdForm >
<Select
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="日期">
<DatePicker
format="YYYY-MM-DD"
className="input_item_select"
value={moment(startTime)}
onChange={ e => this.onChange('startTime', e) }
allowClear={false}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="至">
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={ e => this.onChange('endTime', e)}
allowClear={false}
/>
</StdForm>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div>
);
}
}
export default RiskControlTable;
src/view/monitor/statistical/conf.js 0 → 100644
View file @ 9c3c23f1
/**
* 告警控制
*/
export const warnController = [
{ key: 'fire', icon: 'model_fire', type: 'fire', label: '火灾告警' },
{ key: 'risk', icon: 'model_risk', type: 'risk', label: '风险异常' },
{ key: 'check', icon: 'model_patrol', type: 'check', label: '巡检异常' }
];
/**
* 安全执行控制
*/
export const warnTypes = [
{ key: 'warn', icon: 'select_warn', unIcon: 'unselect_warn', type: 'warn', label: '巡检异常' },
{ key: 'fire', icon: 'select_fire', unIcon: 'unselect_fire', type: 'fire', label: '火灾告警' },
{ key: 'risk', icon: 'select_risk', unIcon: 'unselect_risk', type: 'risk', label: '风险异常' },
{ key: 'check', icon: 'select_check', unIcon: 'unselect_check', type: 'check', label: '巡检异常' }
];
src/view/monitor/statistical/index.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl';
import RiskControl from './RiskControl';
import AllSafety from './AllSafety';
import FireSafety from './FireSafety';
import FireStrength from './FireStrength';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
import { Modal, Select } from 'amos-framework';
/**
* 中心级2侧模块
*/
export default class Statistical extends Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl();
break;
case 'fire_safety':
console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyExecute.DangerControl();
break;
case 'monitor_data':
console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
this.equipStatus.AlarmControl();
break;
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'week_safety_index':
console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
this.AllSafety.AllSafetyData();
break;
case 'today_check_status':
console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
this.FireSafety.FireSafetyData();
break;
case 'today_duty':
this.FireStrength.FireStrengthData();
console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl();
this.safetyExecute.DangerControl();
this.equipStatus.AlarmControl();
this.AllSafety.AllSafetyData();
this.FireSafety.FireSafetyData();
this.FireStrength.FireStrengthData();
break;
default:
console.log(refreshType,'：类型不支持');
}
}
cancel = () => {
this.setState({
visible: false
});
}
render() {
const { visible } = this.state;
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<div className="statistical-left">
<RiskControl ref={node => this.RiskControl = node} />
<DangerControl ref={node => this.safetyExecute = node} />
<AlarmControl ref={node => this.equipStatus = node} />
</div>
<div className="statistical-right">
<AllSafety ref={node => this.AllSafety = node} />
<FireSafety ref={node => this.FireSafety = node} />
<FireStrength ref={node => this.FireStrength = node} />
</div>
</div>
);
}
}
src/view/monitor/statistical/indexLeft.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl';
import RiskControl from './RiskControl';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
/**
* 全景监控统计
*/
export default class StatisticalLeft extends Component {
constructor(props) {
super(props);
this.state = {
};
}
ondetails = (type) => {
this.props.ondetails(type);
};
componentWillMount = () => {
};
componentWillReceiveProps = (nextProps) => {
}
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl();
break;
case 'fire_safety':
console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
this.safetyExecute.DangerControl();
break;
case 'monitor_data':
console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
this.equipStatus.AlarmControl();
break;
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页左侧刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl();
this.safetyExecute.DangerControl();
this.equipStatus.AlarmControl();
break;
default:
console.log(refreshType,'：类型不支持');
}
}
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
const { flag } = this.state;
return (
<div className="statistical-left">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<RiskControl ondetails={this.ondetails} />
<DangerControl ondetails={this.ondetails} />
<AlarmControl ondetails={this.ondetails} />
</div>
);
}
}
src/view/monitor/statistical/indexRight.js 0 → 100644
View file @ 9c3c23f1
import React, { Component } from 'react';
import AllSafety from './AllSafety';
import FireSafety from './FireSafety';
import FireStrength from './FireStrength';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from '../../../consts/wsUrlConsts';
/**
* 全景监控统计
*/
export default class StatisticalRight extends Component {
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'week_safety_index':
console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
this.AllSafety.AllSafetyData();
break;
case 'today_check_status':
console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
this.FireSafety.FireSafetyData();
break;
case 'today_duty':
this.FireStrength.FireStrengthData();
console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
break;
case 'all':
console.log('首页右侧刷新~~~~~~~~~~~~~~~~~~~~');
this.AllSafety.AllSafetyData();
this.FireSafety.FireSafetyData();
this.FireStrength.FireStrengthData();
break;
default:
console.log(refreshType,'：类型不支持');
}
}
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical-right">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<AllSafety ref={node => this.AllSafety = node} />
<FireSafety ref={node => this.FireSafety = node} />
<FireStrength ref={node => this.FireStrength = node} />
</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