Skip to content

S
station-elec-manage-view
Commit 4d1ac2ff authored by 王海涛's avatar 王海涛
Browse files
Options

代码合并

parents df33df8f 82e0fcfa
Hide whitespace changes
Inline Side-by-side
Showing with 5692 additions and 6104 deletions
.prettierrc
View file @ 4d1ac2ff
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"useTabs": false, "useTabs": false,
"semi": true, "semi": true,
"singleQuote": true, "singleQuote": true,
"parser": "babylon", "parser": "babel",
"trailingComma": "none", "trailingComma": "none",
"bracketSpacing": true, "bracketSpacing": true,
"jsxBracketSameLine": false, "jsxBracketSameLine": false,
......
amos.config.js
View file @ 4d1ac2ff
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
securityBaseURI: 'http://172.16.10.72:10005/', securityBaseURI: 'http://172.16.10.72:10005/',
//基础平台 //基础平台
loginURI: 'http://172.16.10.72/', loginURI: 'http://172.16.10.72/',
//地图服务
picURI: 'http://172.16.3.121:8001/' picURI: 'http://172.16.3.121:8001/'
}, },
// websocket 地址 // websocket 地址
......
src/_mock/mock.json 0 → 100644
View file @ 4d1ac2ff
{
"result": "SUCCESS",
"dataList": [
{ "id": 0, "name": "≤5km", "value": 5000 },
{ "id": 1, "name": "≤36km", "value": 36000 },
{ "id": 2, "name": "≤60km", "value": 60000 },
{ "id": 3, "name": "≤100km", "value": 100000 }
],
"message": null,
"success": true
}
src/routes/view.js
View file @ 4d1ac2ff
...@@ -3,52 +3,53 @@ import RootView from '../view/monitor'; ...@@ -3,52 +3,53 @@ import RootView from '../view/monitor';
import Duty from '../view/monitor/duty'; import Duty from '../view/monitor/duty';
import Situation from '../view/biz/duty/situation'; import Situation from '../view/biz/duty/situation';
import SituationDetail from '../view/biz/duty/situationDetail'; import SituationDetail from '../view/biz/duty/situationDetail';
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 SafetyManage from './../view/monitor/duty/safetyManage/index';
import DaliyTraining from './../view/monitor/dailyTrain/index'; import DaliyTraining from './../view/monitor/duty/dailyTrain/index';
import EquipmentMaintain from './../view/monitor/equipmentMaintain/index'; import EquipmentMaintain from './../view/monitor/duty/equipmentMaintain/index';
import SafetyInspection from './../view/monitor/safetyInspection/index'; import SafetyInspection from './../view/monitor/duty/safetyInspection/index';
import FireMaterial from './../view/strength/fireMaterial/index'; import FireMaterial from '../view/monitor/duty/strength/fireMaterial/index';
import FireVehicle from './../view/strength/fireVehicle/index'; import FireVehicle from '../view/monitor/duty/strength/fireVehicle/index';
import StationFireMan from './../view/strength/stationFireMan/index'; import StationFireMan from '../view/monitor/duty/strength/stationFireMan/index';
import StationFireTeam from './../view/strength/stationFireTeam/index'; import StationFireTeam from '../view/monitor/duty/strength/stationFireTeam/index';
import StationDuty from './../view/strength/stationDuty/index'; import StationDuty from '../view/monitor/duty/strength/stationDuty/index';
import Disaster from './../view/biz/emergency/disaster'; import Disaster from './../view/biz/emergency/disaster';
import History from './../view/biz/emergency/history'; import History from './../view/biz/emergency/history';
import EmergencyPlan from './../view/biz/emergency/plan'; import EmergencyPlan from './../view/biz/emergency/plan';
const Routes = { const Routes = {
main: RootView, main: RootView,
//日常值守
duty: Duty, duty: Duty,
situation: Situation, situation: Situation,
situationDetail: SituationDetail, situationDetail: SituationDetail,
regulate: Regulate, safetyInspection: SafetyInspection,
bills: Bills,
//应急指挥
emergency: Duty,
disaster: Disaster,
history: History,
plan: EmergencyPlan,
safetyTraining: SafetyTraining,
dailyTrain: DaliyTraining, dailyTrain: DaliyTraining,
equipmentMaintain: EquipmentMaintain, equipmentMaintain: EquipmentMaintain,
safetyInspection: SafetyInspection, safetyTraining: SafetyManage,
//安全监管
regulate: Duty,
bills: Bills,
fireMaterial: FireMaterial, fireMaterial: FireMaterial,
fireVehicle: FireVehicle, fireVehicle: FireVehicle,
stationFireMan: StationFireMan, stationFireMan: StationFireMan,
stationFireTeam: StationFireTeam, stationFireTeam: StationFireTeam,
stationDuty: StationDuty stationDuty: StationDuty,
//应急指挥
emergency: Duty,
disaster: Disaster,
history: History,
plan: EmergencyPlan
}; };
export const businessRouts = [ export const businessRouts = [
{ path: 'situation',group: 'biz',component: Situation, childRoutes: [] }, { path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
{ path: 'situationDetail',group: 'biz',component: SituationDetail, childRoutes: [] }, { path: 'situationDetail',group: 'biz',component: SituationDetail, childRoutes: [] },
{ path: 'bills',group: 'biz',component: Bills, childRoutes: [] }, { path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: SafetyTraining, childRoutes: [] }, { path: 'safetyTraining',group: 'biz',component: SafetyManage, childRoutes: [] },
{ path: 'dailyTrain',group: 'biz',component: DaliyTraining, childRoutes: [] }, { path: 'dailyTrain',group: 'biz',component: DaliyTraining, childRoutes: [] },
{ path: 'equipmentMaintain',group: 'biz',component: EquipmentMaintain, childRoutes: [] }, { path: 'equipmentMaintain',group: 'biz',component: EquipmentMaintain, childRoutes: [] },
{ path: 'safetyInspection',group: 'biz',component: SafetyInspection, childRoutes: [] }, { path: 'safetyInspection',group: 'biz',component: SafetyInspection, childRoutes: [] },
......
src/services/mockServices.js 0 → 100644
View file @ 4d1ac2ff
import { commonGet } from '../utils/request';
const mockFetch = (jsonUrl) => {
return commonGet(jsonUrl);
};
export const mockService = function() {
return mockFetch('/src/_mock/mock.json');
};
src/view/biz/duty/detail/data.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
const riskData = [ const riskData = [
{ {
'ka': '复龙换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', ka: '复龙换流站',
}, kb: '12',
{ kc: '12',
'ka': '奉贤换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kd: '23',
}, ke: '23',
{ kf: '12',
'ka': '苏州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kg: '97',
}, kh: '12',
{ ki: '23',
'ka': '中州换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kj: '23',
kk: '12',
}, kl: '97'
{ },
'ka': '天山换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', {
}, ka: '奉贤换流站',
{ kb: '12',
'ka': '金华换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kc: '12',
}, kd: '23',
{ ke: '23',
'ka': '龙泉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kf: '12',
kg: '97',
}, kh: '12',
{ ki: '23',
'ka': '政平换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kj: '23',
kk: '12',
}, kl: '97'
{ },
'ka': '伊克昭换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', {
ka: '苏州换流站',
}, kb: '12',
{ kc: '12',
'ka': '陕北换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kd: '23',
ke: '23',
}, kf: '12',
{ kg: '97',
'ka': '武汉换流站', 'kb': '12', 'kc': '12', 'kd': '23', 'ke': '23', 'kf': '12', 'kg': '97', 'kh': '12', 'ki': '23', 'kj': '23', 'kk': '12', 'kl': '97', kh: '12',
ki: '23',
} kj: '23',
] kk: '12',
kl: '97'
},
{
ka: '中州换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '天山换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '金华换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '龙泉换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '政平换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '伊克昭换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '陕北换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
},
{
ka: '武汉换流站',
kb: '12',
kc: '12',
kd: '23',
ke: '23',
kf: '12',
kg: '97',
kh: '12',
ki: '23',
kj: '23',
kk: '12',
kl: '97'
}
];
const dangerWeekCensusData = [ const dangerWeekCensusData = [
{ {
'da': '复龙换流站', 'db': 23, 'dc': 22, da: '复龙换流站',
}, db: 23,
{ dc: 22
'da': '奉贤换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '奉贤换流站',
'da': '苏州换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '中州换流站', 'db': 23, 'dc': 22, {
da: '苏州换流站',
}, db: 23,
{ dc: 22
'da': '天山换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '中州换流站',
'da': '金华换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '龙泉换流站', 'db': 23, 'dc': 22, {
da: '天山换流站',
}, db: 23,
{ dc: 22
'da': '政平换流站', 'db': 23, 'dc': 22, },
{
}, da: '金华换流站',
{ db: 23,
'da': '伊克昭换流站', 'db': 23, 'dc': 22 dc: 22
},
}, {
{ da: '龙泉换流站',
'da': '陕北换流站', 'db': 23, 'dc': 22, db: 23,
}, dc: 22
{ },
'da': '武汉换流站', 'db': 23, 'dc': 22, {
da: '政平换流站',
}, db: 23,
{ dc: 22
'da': '金华换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '伊克昭换流站',
'da': '龙泉换流站', 'db': 23, 'dc': 22, db: 23,
dc: 22
}, },
{ {
'da': '政平换流站', 'db': 23, 'dc': 22, da: '陕北换流站',
db: 23,
}, dc: 22
{ },
'da': '伊克昭换流站', 'db': 23, 'dc': 22 {
da: '武汉换流站',
}, db: 23,
{ dc: 22
'da': '陕北换流站', 'db': 23, 'dc': 22, },
}, {
{ da: '金华换流站',
'da': '武汉换流站', 'db': 23, 'dc': 22, db: 23,
dc: 22
}] },
const sevenDaysRiskCensusData = [{ {
'sa': '复龙换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', da: '龙泉换流站',
}, db: 23,
{ dc: 22
'sa': '奉贤换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', },
}, {
{ da: '政平换流站',
'sa': '苏州换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', db: 23,
}, dc: 22
{ },
'sa': '中州换流站', 'sb': '收点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', {
da: '伊克昭换流站',
}, db: 23,
{ dc: 22
'sa': '天山换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', },
}, {
{ da: '陕北换流站',
'sa': '金华换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', db: 23,
}, dc: 22
{ },
'sa': '三亚换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', {
da: '武汉换流站',
}, db: 23,
{ dc: 22
'sa': '龙泉换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', }
];
}, const sevenDaysRiskCensusData = [
{ {
'sa': '厦门换流站', 'sb': '收点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sa: '复龙换流站',
sb: '送点',
}, sc: '告警',
{ sd: '23',
'sa': '南昌换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', se: '23',
sf: '12',
}, sg: '12',
sh: '12',
{ si: '23',
'sa': '政平换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sj: '97'
},
}, {
{ sa: '奉贤换流站',
'sa': '伊克昭换流站', 'sb': '收点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sb: '收点',
sc: '告警',
}, sd: '23',
{ se: '23',
'sa': '陕北换流站', 'sb': '送点', 'sc': '隐患', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sf: '12',
sg: '12',
}, sh: '12',
{ si: '23',
'sa': '武汉换流站', 'sb': '送点', 'sc': '告警', 'sd': '23', 'se': '23', 'sf': '12', 'sg': '12', 'sh': '12', 'si': '23', 'sj': '97', sj: '97'
},
}] {
sa: '苏州换流站',
sb: '送点',
export const riskTopTenData=[ sc: '告警',
{name:'1.极1低端换流变流台',rpni:100,rpnr:99}, sd: '23',
{name:'2.极2低端换流变流台',rpni:100,rpnr:99}, se: '23',
{name:'3.极1高端换流变流台',rpni:100,rpnr:99}, sf: '12',
{name:'4.极2高端换流变流台',rpni:100,rpnr:99}, sg: '12',
{name:'5.极1低端换流变流台',rpni:100,rpnr:99}, sh: '12',
{name:'6.极2低端换流变流台',rpni:100,rpnr:99}, si: '23',
{name:'7.极1低端换流变流台',rpni:100,rpnr:99}, sj: '97'
{name:'8.极2低端换流变流台',rpni:100,rpnr:99}, },
{name:'9.极1低端换流变流台',rpni:100,rpnr:99}, {
{name:'10.极2低端换流变流台',rpni:100,rpnr:99}, sa: '中州换流站',
] sb: '收点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '天山换流站',
sb: '送点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '金华换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '三亚换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '龙泉换流站',
sb: '收点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '厦门换流站',
sb: '收点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '南昌换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '政平换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '伊克昭换流站',
sb: '收点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '陕北换流站',
sb: '送点',
sc: '隐患',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
},
{
sa: '武汉换流站',
sb: '送点',
sc: '告警',
sd: '23',
se: '23',
sf: '12',
sg: '12',
sh: '12',
si: '23',
sj: '97'
}
];
export const riskTopTenData = [
{ name: '1.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '2.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '3.极1高端换流变流台', rpni: 100, rpnr: 99 },
{ name: '4.极2高端换流变流台', rpni: 100, rpnr: 99 },
{ name: '5.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '6.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '7.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '8.极2低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '9.极1低端换流变流台', rpni: 100, rpnr: 99 },
{ name: '10.极2低端换流变流台', rpni: 100, rpnr: 99 }
];
/** /**
* 数据组件 * 数据组件
*/ */
class JsonData extends Component { class JsonData extends Component {}
}
export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData,riskTopTenData}; export default JsonData = { riskData, dangerWeekCensusData, sevenDaysRiskCensusData, riskTopTenData };
src/view/biz/duty/detail/echarts/IncidenceSeverityMatrix.js
View file @ 4d1ac2ff
...@@ -19,18 +19,16 @@ class IncidenceSeverityMatrix extends Component { ...@@ -19,18 +19,16 @@ class IncidenceSeverityMatrix extends Component {
}; };
} }
getOptions() { getOptions() {
return { return {
legend: { legend: {
data: ['故障率(O)', '严重度(S)', '最低线', '最高线'], data: ['故障率(O)', '严重度(S)', '最低线', '最高线'],
x: 100, x: 100,
y: 20, y: 20,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14, fontSize: 14
}, }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -38,7 +36,7 @@ class IncidenceSeverityMatrix extends Component { ...@@ -38,7 +36,7 @@ class IncidenceSeverityMatrix extends Component {
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 20, fontSize: 20,
color:'#5FFFFD', color: '#5FFFFD'
}, },
boundaryGap: false, boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
...@@ -46,21 +44,20 @@ class IncidenceSeverityMatrix extends Component { ...@@ -46,21 +44,20 @@ class IncidenceSeverityMatrix extends Component {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 14, fontSize: 14
} }
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#245665', color: '#245665'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ['#245665'], color: ['#245665'],
width: 1, width: 1
}, }
} }
}, },
yAxis: { yAxis: {
...@@ -69,9 +66,9 @@ class IncidenceSeverityMatrix extends Component { ...@@ -69,9 +66,9 @@ class IncidenceSeverityMatrix extends Component {
nameTextStyle: { nameTextStyle: {
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 20, fontSize: 20,
color:'#5FFFFD', color: '#5FFFFD'
}, },
fontSize:20, fontSize: 20,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: { axisLabel: {
show: true, show: true,
...@@ -82,14 +79,14 @@ class IncidenceSeverityMatrix extends Component { ...@@ -82,14 +79,14 @@ class IncidenceSeverityMatrix extends Component {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#245665', color: '#245665'
} }
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: ['#245665'], color: ['#245665'],
width: 1, width: 1
} }
} }
}, },
...@@ -116,9 +113,8 @@ class IncidenceSeverityMatrix extends Component { ...@@ -116,9 +113,8 @@ class IncidenceSeverityMatrix extends Component {
lineStyle: { lineStyle: {
color: '#0A73FF', color: '#0A73FF',
width: 2 width: 2
}, }
}, }
} }
}, },
{ {
...@@ -133,13 +129,12 @@ class IncidenceSeverityMatrix extends Component { ...@@ -133,13 +129,12 @@ class IncidenceSeverityMatrix extends Component {
lineStyle: { lineStyle: {
color: '#FF0000', color: '#FF0000',
width: 2 width: 2
}, }
}, }
}
}, }
},
] ]
} };
} }
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
......
src/view/biz/duty/detail/echarts/RiskDegreeHistogram.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import AmosEcharts from 'amos-viz/lib/echarts';
import JsonData from './../data'; import JsonData from './../data';
import { OverFlowText } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
// import { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
// import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
const riskTopTenData=JsonData.riskTopTenData; const riskTopTenData = JsonData.riskTopTenData;
const labelOption = { const labelOption = {
normal: { normal: {
show: true, show: true,
...@@ -38,76 +34,83 @@ class RiskDegreeHistogram extends Component { ...@@ -38,76 +34,83 @@ class RiskDegreeHistogram extends Component {
this.getBarViewContent(); this.getBarViewContent();
} }
componentWillReceiveProps() { componentWillReceiveProps() {}
}
getBarViewContent() { getBarViewContent() {}
}
getOptions() { getOptions() {
return { return {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
}, },
legend: { legend: {
data: ['RPNi', 'RPNr'] data: ['RPNi', 'RPNr']
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '3%', right: '3%',
bottom: '1%', bottom: '1%',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
type: 'value', type: 'value',
boundaryGap: [0, 0] boundaryGap: [0, 0]
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['极3低端换流变流台', '极2低端换流变流台','极1低端换流变流台','极3低端换流变流台','极2低端换流变流台', '极1低端换流变流台', data: [
'极3低端换流变流台', '极2低端换流变流台', '极1低端换流变流台','极3低端换流变流台' ], '极3低端换流变流台',
width:50, '极2低端换流变流台',
axisLabel: { '极1低端换流变流台',
show: true, '极3低端换流变流台',
textStyle: { '极2低端换流变流台',
color: '#fff', '极1低端换流变流台',
fontSize: 18, '极3低端换流变流台',
width:'10px' '极2低端换流变流台',
} '极1低端换流变流台',
}, '极3低端换流变流台'
],
width: 50,
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 18,
width: '10px'
}
}
}, },
series: [ series: [
{ {
name: 'RPNi', name: 'RPNi',
type: 'bar', type: 'bar',
itemStyle:{ itemStyle: {
normal: { normal: {
color:'#5FFFFD', color: '#5FFFFD'
}, }
},
data: [100, 100, 100, 100, 100, 100, 100, 100, 100,100]
}, },
{ data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
name: 'RPNr', },
type: 'bar', {
itemStyle:{ name: 'RPNr',
normal: { type: 'bar',
color:'#FF0000', itemStyle: {
}, normal: {
}, color: '#FF0000'
data: [99,99,99,99,99,99,99,99,99,99] }
} },
data: [99, 99, 99, 99, 99, 99, 99, 99, 99, 99]
}
] ]
}; };
} }
handleData = () => { handleData = () => {
this.getBarViewContent(); this.getBarViewContent();
} };
render() { render() {
const option = this.getOptions(); const option = this.getOptions();
...@@ -115,34 +118,31 @@ class RiskDegreeHistogram extends Component { ...@@ -115,34 +118,31 @@ class RiskDegreeHistogram extends Component {
return ( return (
<div className="risk-top-ten-content"> <div className="risk-top-ten-content">
{/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */} {/* <AmosEcharts option={option} style={{ height: '970px', width: '480px' }}/> */}
<div className="top-ten-content" style={{ position: 'initial' }}>
<div className='top-ten-content' style={{position:"initial"}}> <div style={{ position: 'initial', width: 28, height: 28, marginTop: -32, marginLeft: 352 }} onClick={this.props.onClick}></div>
<div style={{position:"initial",width:28,height:28,marginTop:-32,marginLeft:352}} {riskTopTenData.map((item, index) => (
onClick={this.props.onClick}></div> <div className="top-ten-item" key={index}>
{ <OverFlowText style={{ marginTop: 10 }}>
riskTopTenData.map((item,index)=> <div style={{ width: '100px', height: '70px', whiteSpace: 'normal', lineHeight: '30px' }}>{item.name}</div>
<div className='top-ten-item' key={index}>
<OverFlowText style={{marginTop:10}}>
<div style={{ width: '100px',height:'70px',whiteSpace:'normal',lineHeight:'30px'}}>{item.name}</div>
</OverFlowText> </OverFlowText>
<div className="top-risk"> <div className="top-risk">
<div className='top-ten-item-middle' style={{display:'flex'}}> <div className="top-ten-item-middle" style={{ display: 'flex' }}>
<div className='top-ten-item-middlelinear' style={{height:16,width:`${item.rpni}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 16, width: `${item.rpni}%` }}>
<div style={{lineHeight:'15px',position:'absolute',right:'45px'}}>{item.rpni}</div> {' '}
</div> </div>
<div className='top-ten-item-middleRed' style={{display:'flex'}}> <div style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpni}</div>
<div className='top-ten-item-middlelinearRed' style={{height:16,width:`${item.rpnr}%`}}></div> </div>
<div style={{lineHeight:'15px',position:'absolute',right:'45px'}}>{item.rpnr}</div> <div className="top-ten-item-middleRed" style={{ display: 'flex' }}>
</div> <div className="top-ten-item-middlelinearRed" style={{ height: 16, width: `${item.rpnr}%` }}></div>
<div style={{ lineHeight: '15px', position: 'absolute', right: '45px' }}>{item.rpnr}</div>
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</div> </div>
); );
} }
......
src/view/biz/duty/detail/index.js
View file @ 4d1ac2ff
...@@ -14,17 +14,17 @@ class CentralInfoView extends Component { ...@@ -14,17 +14,17 @@ class CentralInfoView extends Component {
super(props); super(props);
this.updateParent = this.updateParent.bind(this); this.updateParent = this.updateParent.bind(this);
this.state = { this.state = {
title: '', //modal标题 title: '', //modal标题
divVisable: 'none', divVisable: 'none',
riskVisable: 'none', riskVisable: 'none',
buttonVisable: 'block', buttonVisable: 'block',
type: '', //当前表格类型 type: '', //当前表格类型
detailTitle: '', detailTitle: '',
sevenDaySelectValue1:null, sevenDaySelectValue1: null,
sevenDaySelectValue2:null, sevenDaySelectValue2: null,
kpsiData:JsonData.riskData, kpsiData: JsonData.riskData,
riskFailureData:JsonData.riskData, riskFailureData: JsonData.riskData,
dangerWeekCensusData:JsonData.dangerWeekCensusData, dangerWeekCensusData: JsonData.dangerWeekCensusData,
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
}; };
} }
...@@ -33,58 +33,57 @@ class CentralInfoView extends Component { ...@@ -33,58 +33,57 @@ class CentralInfoView extends Component {
this.props.onRef && this.props.onRef(this); this.props.onRef && this.props.onRef(this);
} }
/** /**
* 安全指数详情 * 安全指数详情
*/ */
kpsi = (values) => { kpsi = values => {
console.log(values); console.log(values);
this.setState({ this.setState({
title: "安全指数", title: '安全指数',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'kpsi' type: 'kpsi'
}) });
} };
/** /**
* 安全风险失效详情 * 安全风险失效详情
*/ */
safetyRiskFailure = () => { safetyRiskFailure = () => {
this.setState({ this.setState({
title: "安全风险失效", title: '安全风险失效',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'safetyRiskFailure' type: 'safetyRiskFailure'
}) });
} };
/** /**
* 告警隐患周增幅统计详情 * 告警隐患周增幅统计详情
*/ */
dangerWeekCensus = () => { dangerWeekCensus = () => {
this.setState({ this.setState({
title: "告警隐患周增幅统计", title: '告警隐患周增幅统计',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'dangerWeekCensus' type: 'dangerWeekCensus'
}) });
} };
/** /**
* 七日风险统计详情 * 七日风险统计详情
*/ */
sevenDaysRiskCensus = () => { sevenDaysRiskCensus = () => {
this.setState({ this.setState({
title: "七日风险统计", title: '七日风险统计',
divVisable: 'block', divVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
type: 'sevenDaysRiskCensus' type: 'sevenDaysRiskCensus'
}) });
} };
/** /**
* 弹窗关闭 * 弹窗关闭
*/ */
closeDiv = () => { closeDiv = () => {
this.setState({ this.setState({
...@@ -92,276 +91,279 @@ class CentralInfoView extends Component { ...@@ -92,276 +91,279 @@ class CentralInfoView extends Component {
buttonVisable: 'block', buttonVisable: 'block',
title: '', title: '',
type: '', type: '',
kpsiData:JsonData.riskData, kpsiData: JsonData.riskData,
riskFailureData:JsonData.riskData, riskFailureData: JsonData.riskData,
dangerWeekCensusData:JsonData.dangerWeekCensusData, dangerWeekCensusData: JsonData.dangerWeekCensusData,
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
}) });
} };
/** /**
* 根据类型切换列 * 根据类型切换列
*/ */
columns = (type) => { columns = type => {
if (type === "kpsi") { if (type === 'kpsi') {
return ( return [
[ {
{ title: '换流站',
title: '换流站', dataIndex: 'ka',
dataIndex: 'ka', width: 100,
width: 100, render: (text, record) => {
render: (text, record) => { return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) }
} },
}, {
{ title: ' 极1高端阀厅',
title: ' 极1高端阀厅', dataIndex: 'kb',
dataIndex: 'kb', width: 100
width: 100 },
}, {
{ title: '极1低端阀厅',
title: '极1低端阀厅', dataIndex: 'kc',
dataIndex: 'kc',
width: 100 width: 100
}, },
{ {
title: '极2高端阀厅', title: '极2高端阀厅',
dataIndex: 'kd', dataIndex: 'kd',
width: 100 width: 100
}, },
{ {
title: '极2低端阀厅', title: '极2低端阀厅',
dataIndex: 'ke', dataIndex: 'ke',
width: 100 width: 100
}, },
{ {
title: '交流场', title: '交流场',
dataIndex: 'kf', dataIndex: 'kf',
width: 80 width: 80
}, },
{ {
title: '直流场', title: '直流场',
dataIndex: 'kg', dataIndex: 'kg',
width: 80 width: 80
}, },
{ {
title: '主控楼', title: '主控楼',
dataIndex: 'kh', dataIndex: 'kh',
width: 80 width: 80
}, },
{ {
title: '极1辅控楼', title: '极1辅控楼',
dataIndex: 'ki', dataIndex: 'ki',
width: 100 width: 100
}, },
{ {
title: '极2辅控楼', title: '极2辅控楼',
dataIndex: 'kj', dataIndex: 'kj',
width: 100 width: 100
}, },
{ {
title: '其他（剩余区域）', title: '其他（剩余区域）',
dataIndex: 'kk', dataIndex: 'kk',
width: 120 width: 120
}, },
{ {
title: <div><span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span></div>, title: (
dataIndex: 'kl', <div>
width: 120 <span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span>
}, </div>
] ),
) dataIndex: 'kl',
} else if (type === "safetyRiskFailure") { width: 120
return ( }
[ ];
{ } else if (type === 'safetyRiskFailure') {
title: '换流站', return [
dataIndex: 'ka', {
width: 100, title: '换流站',
render: (text, record) => { dataIndex: 'ka',
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) width: 100,
} render: (text, record) => {
}, return <div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>;
{
title: ' 极1高端阀厅',
dataIndex: 'kb',
width: 100
},
{
title: '极1低端阀厅',
dataIndex: 'kc',
width: 100
},
{
title: '极2高端阀厅',
dataIndex: 'kd',
width: 100
},
{
title: '极2低端阀厅',
dataIndex: 'ke',
width: 100
},
{
title: '交流场',
dataIndex: 'kf',
width: 80
},
{
title: '直流场',
dataIndex: 'kg',
width: 80
},
{
title: '主控楼',
dataIndex: 'kh',
width: 80
},
{
title: '极1辅控楼',
dataIndex: 'ki',
width: 100
},
{
title: '极2辅控楼',
dataIndex: 'kj',
width: 100
},
{
title: '其他（剩余区域）',
dataIndex: 'kk',
width: 120
},
{
title: <div><span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span></div>,
dataIndex: 'kl',
width: 120
} }
] },
) {
} title: ' 极1高端阀厅',
else if (type === "dangerWeekCensus") { dataIndex: 'kb',
return ( width: 100
[ },
{ {
title: '换流站', title: '极1低端阀厅',
dataIndex: 'da', dataIndex: 'kc',
width: 120, width: 100
render: (text, record) => { },
return (<div style={{ fontWeight: 'normal' }}>{text}</div>) {
} title: '极2高端阀厅',
}, dataIndex: 'kd',
{ width: 100
title: '告警', },
dataIndex: 'db', {
width: 120, title: '极2低端阀厅',
render: (text, record) => { dataIndex: 'ke',
return (<div><span>{text}</span><span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span></div>) width: 100
} },
}, {
{ title: '交流场',
title: '隐患', dataIndex: 'kf',
dataIndex: 'dc', width: 80
width: 120, },
render: (text, record) => { {
return (<div><span>{text}</span><span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span></div>) title: '直流场',
} dataIndex: 'kg',
}, width: 80
] },
) {
} title: '主控楼',
else if (type === "sevenDaysRiskCensus") { dataIndex: 'kh',
return ( width: 80
[ },
{ {
title: '换流站', title: '极1辅控楼',
dataIndex: 'sa', dataIndex: 'ki',
width: 100, width: 100
render: (text, record) => { },
return (<div style={{ fontWeight: 'normal' }}>{text}</div>) {
} title: '极2辅控楼',
}, dataIndex: 'kj',
{ width: 100
title: '类型', },
dataIndex: 'sb', {
width: 100 title: '其他（剩余区域）',
}, dataIndex: 'kk',
{ width: 120
title: '类别', },
dataIndex: 'sc', {
width: 100 title: (
}, <div>
{ <span>总安全指数</span>&nbsp;<span style={{ color: '#B8C10B', height: 8, width: 11 }}>↓</span>
title: '今天', </div>
dataIndex: 'sd', ),
width: 100 dataIndex: 'kl',
}, width: 120
{ }
title: '05-01', ];
dataIndex: 'se', } else if (type === 'dangerWeekCensus') {
width: 100 return [
}, {
{ title: '换流站',
title: '04-30', dataIndex: 'da',
dataIndex: 'sf', width: 120,
width: 100 render: (text, record) => {
}, return <div style={{ fontWeight: 'normal' }}>{text}</div>;
{ }
title: '04-29', },
dataIndex: 'sg', {
width: 100 title: '告警',
}, dataIndex: 'db',
{ width: 120,
title: '04-28', render: (text, record) => {
dataIndex: 'sh', return (
width: 100 <div>
}, <span>{text}</span>
{ <span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span>
title: '04-27', </div>
dataIndex: 'si', );
width: 100 }
}, },
{ {
title: '04-26', title: '隐患',
dataIndex: 'sj', dataIndex: 'dc',
width: 100 width: 120,
}, render: (text, record) => {
] return (
) <div>
<span>{text}</span>
<span style={{ marginLeft: 100 }}>{Math.round((text / (record.db + record.dc)) * 100)}%</span>
</div>
);
}
}
];
} else if (type === 'sevenDaysRiskCensus') {
return [
{
title: '换流站',
dataIndex: 'sa',
width: 100,
render: (text, record) => {
return <div style={{ fontWeight: 'normal' }}>{text}</div>;
}
},
{
title: '类型',
dataIndex: 'sb',
width: 100
},
{
title: '类别',
dataIndex: 'sc',
width: 100
},
{
title: '今天',
dataIndex: 'sd',
width: 100
},
{
title: '05-01',
dataIndex: 'se',
width: 100
},
{
title: '04-30',
dataIndex: 'sf',
width: 100
},
{
title: '04-29',
dataIndex: 'sg',
width: 100
},
{
title: '04-28',
dataIndex: 'sh',
width: 100
},
{
title: '04-27',
dataIndex: 'si',
width: 100
},
{
title: '04-26',
dataIndex: 'sj',
width: 100
}
];
} else { } else {
return ( return [];
[]
)
} }
} };
/** /**
* 根据类型切换数据 * 根据类型切换数据
*/ */
getDataSource = (type) => { getDataSource = type => {
let{kpsiData, riskFailureData,dangerWeekCensusData, sevenDaysRiskCensusData}=this.state; let { kpsiData, riskFailureData, dangerWeekCensusData, sevenDaysRiskCensusData } = this.state;
if (type === "kpsi") { if (type === 'kpsi') {
return kpsiData; return kpsiData;
} } else if (type === 'safetyRiskFailure') {
else if(type === "safetyRiskFailure"){
return riskFailureData; return riskFailureData;
} } else if (type === 'dangerWeekCensus') {
else if (type === "dangerWeekCensus") {
return dangerWeekCensusData; return dangerWeekCensusData;
} } else if (type === 'sevenDaysRiskCensus') {
else if (type === "sevenDaysRiskCensus") {
return sevenDaysRiskCensusData; return sevenDaysRiskCensusData;
} }
} };
/** /**
* 自定义总页数 * 自定义总页数
*/ */
showTotalPage = (total) => { showTotalPage = total => {
let pages = Math.ceil(total / pageSize); let pages = Math.ceil(total / pageSize);
return `共 ${pages} 页`; return `共 ${pages} 页`;
} };
/** /**
* 设定间隔行样式 * 设定间隔行样式
...@@ -370,148 +372,149 @@ class CentralInfoView extends Component { ...@@ -370,148 +372,149 @@ class CentralInfoView extends Component {
let className = 'light-row'; let className = 'light-row';
if (index % 2 === 0) className = 'dark-row'; if (index % 2 === 0) className = 'dark-row';
return className; return className;
} };
/** /**
* 当前行点击事件 * 当前行点击事件
*/ */
onRowClick = (record) => { onRowClick = record => {
if (this.state.type === "kpsi") { if (this.state.type === 'kpsi') {
this.setState({ this.setState({
divVisable: 'none', divVisable: 'none',
riskVisable: 'block', riskVisable: 'block',
buttonVisable: 'none', buttonVisable: 'none',
detailTitle: record.ka detailTitle: record.ka
}) });
} }
} };
/** /**
* 子组件返回当前列表 * 子组件返回当前列表
*/ */
updateParent(values){ updateParent(values) {
if (values != null) { if (values != null) {
this.setState({ this.setState({
divVisable: values.divVisable, divVisable: values.divVisable,
riskVisable: values.riskVisable, riskVisable: values.riskVisable
}) });
} }
} }
/* /*
*监听七日风险详情页类型切换 *监听七日风险详情页类型切换
*/ */
onTypeChange=(value)=>{ onTypeChange = value => {
let{sevenDaySelectValue2}=this.state; let { sevenDaySelectValue2 } = this.state;
let sevenDaysRiskCensusData =JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
if(value==='收点'||value==='送点'){ if (value === '收点' || value === '送点') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sb===value); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sb === value);
} }
if(sevenDaySelectValue2!==null&&sevenDaySelectValue2!=='全部'){ if (sevenDaySelectValue2 !== null && sevenDaySelectValue2 !== '全部') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sc===sevenDaySelectValue2); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sc === sevenDaySelectValue2);
} }
this.setState({ this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData, sevenDaysRiskCensusData: sevenDaysRiskCensusData,
sevenDaySelectValue1:value sevenDaySelectValue1: value
}) });
};
}
/* /*
*监听七日风险详情页统计类别切换 *监听七日风险详情页统计类别切换
*/ */
onSumClazzChange=(value,item)=>{ onSumClazzChange = (value, item) => {
let{sevenDaySelectValue1}=this.state; let { sevenDaySelectValue1 } = this.state;
let sevenDaysRiskCensusData =JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
if(value==='告警'||value==='隐患'){ if (value === '告警' || value === '隐患') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sc===value); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sc === value);
} }
if(sevenDaySelectValue1!==null&&sevenDaySelectValue1!=='全部'){ if (sevenDaySelectValue1 !== null && sevenDaySelectValue1 !== '全部') {
sevenDaysRiskCensusData=sevenDaysRiskCensusData.filter(item=>item.sb===sevenDaySelectValue1); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sb === sevenDaySelectValue1);
} }
this.setState({ this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData, sevenDaysRiskCensusData: sevenDaysRiskCensusData,
sevenDaySelectValue2:value sevenDaySelectValue2: value
}) });
} };
/* /*
*安全指数查询 *安全指数查询
*/ */
onKpsiSearch=(e,value)=>{ onKpsiSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let kpsiData=JsonData.riskData; let kpsiData = JsonData.riskData;
kpsiData = kpsiData.filter(item => (item.ka).indexOf(value) > -1); kpsiData = kpsiData.filter(item => item.ka.indexOf(value) > -1);
this.setState({
kpsiData:kpsiData
})
} else{
this.setState({ this.setState({
kpsiData:JsonData.riskData kpsiData: kpsiData
}) });
} else {
this.setState({
kpsiData: JsonData.riskData
});
} }
} };
/* /*
*安全风险失效查询 *安全风险失效查询
*/ */
onRiskFailureSearch=(e,value)=>{ onRiskFailureSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let riskFailureData=JsonData.riskData; let riskFailureData = JsonData.riskData;
riskFailureData = riskFailureData.filter(item => (item.ka).indexOf(value) > -1); riskFailureData = riskFailureData.filter(item => item.ka.indexOf(value) > -1);
this.setState({ this.setState({
riskFailureData:riskFailureData riskFailureData: riskFailureData
}) });
} else{ } else {
this.setState({ this.setState({
riskFailureData:JsonData.riskData riskFailureData: JsonData.riskData
}) });
} }
} };
/* /*
*七日风险查询 *七日风险查询
*/ */
onSevenDaysSearch=(e,value)=>{ onSevenDaysSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let sevenDaysRiskCensusData=JsonData.sevenDaysRiskCensusData; let sevenDaysRiskCensusData = JsonData.sevenDaysRiskCensusData;
sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => (item.sa).indexOf(value) > -1); sevenDaysRiskCensusData = sevenDaysRiskCensusData.filter(item => item.sa.indexOf(value) > -1);
this.setState({
sevenDaysRiskCensusData:sevenDaysRiskCensusData
})
} else{
this.setState({ this.setState({
sevenDaysRiskCensusData:JsonData.sevenDaysRiskCensusData sevenDaysRiskCensusData: sevenDaysRiskCensusData
}) });
} else {
this.setState({
sevenDaysRiskCensusData: JsonData.sevenDaysRiskCensusData
});
} }
} };
/* /*
*告警隐患查询 *告警隐患查询
*/ */
onDangerWeekSearch=(e,value)=>{ onDangerWeekSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let dangerWeekCensusData=JsonData.dangerWeekCensusData; let dangerWeekCensusData = JsonData.dangerWeekCensusData;
dangerWeekCensusData = dangerWeekCensusData.filter(item => (item.da).indexOf(value) > -1); dangerWeekCensusData = dangerWeekCensusData.filter(item => item.da.indexOf(value) > -1);
this.setState({ this.setState({
dangerWeekCensusData:dangerWeekCensusData dangerWeekCensusData: dangerWeekCensusData
}) });
} else{ } else {
this.setState({ this.setState({
dangerWeekCensusData:JsonData.dangerWeekCensusData dangerWeekCensusData: JsonData.dangerWeekCensusData
}) });
} }
} };
render() { render() {
const { title, divVisable, type, detailTitle, riskVisable, buttonVisable } = this.state; const { title, divVisable, type, detailTitle, riskVisable, buttonVisable } = this.state;
const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage }; const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage };
return ( return (
<div> <div>
<div className="mainContent" style={{ display: divVisable }} > <div className="mainContent" style={{ display: divVisable }}>
<Layout> <Layout>
<Header className="contentHeader"> <Header className="contentHeader">
<div className="headerLeft" style={{ display: 'inline' }}>{title}</div> <div className="headerLeft" style={{ display: 'inline' }}>
{title}
</div>
<div className="headerRight" style={{ display: 'inline' }}> <div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="42px" style={{ marginTop: '3px' }} /> <img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="42px" style={{ marginTop: '3px' }} />
</div> </div>
...@@ -519,50 +522,68 @@ class CentralInfoView extends Component { ...@@ -519,50 +522,68 @@ class CentralInfoView extends Component {
<Content className="content"> <Content className="content">
<div className="contentInfo"> <div className="contentInfo">
<div className="infoHeader"> <div className="infoHeader">
{type === "sevenDaysRiskCensus" ? {type === 'sevenDaysRiskCensus' ? (
<div> <div>
<Search icon="search" style={{ marginLeft: 610 }} defaultValue='搜索' onIconClick={this.onSevenDaysSearch} /> <Search icon="search" style={{ marginLeft: 610 }} defaultValue="搜索" onIconClick={this.onSevenDaysSearch} />
<div className="selectDiv" style={{display:"inline-block"}}> <div className="selectDiv" style={{ display: 'inline-block' }}>
类型：<Select defaultValue="全部" onChange={this.onTypeChange}> 类型：
<Option value="全部" >全部</Option> <Select defaultValue="全部" onChange={this.onTypeChange}>
<Option value="全部">全部</Option>
<Option value="送点">送点</Option> <Option value="送点">送点</Option>
<Option value="收点">收点</Option> <Option value="收点">收点</Option>
</Select> </Select>
</div> </div>
<div className="selectDiv" style={{display:"inline-block"}}> <div className="selectDiv" style={{ display: 'inline-block' }}>
统计类别：<Select defaultValue="全部" onChange={this.onSumClazzChange}> 统计类别：
<Option value="全部" >全部</Option> <Select defaultValue="全部" onChange={this.onSumClazzChange}>
<Option value="全部">全部</Option>
<Option value="告警">告警</Option> <Option value="告警">告警</Option>
<Option value="隐患">隐患</Option> <Option value="隐患">隐患</Option>
</Select> </Select>
</div> </div>
</div> : </div>
<div style={{display:'flex'}}> ) : (
{type === "dangerWeekCensus" ? <div style={{ display: 'flex' }}>
{type === 'dangerWeekCensus' ? (
<div> <div>
<div style={{display:'inline-block' ,color:'white',fontSize:20, position:'relative',top: 27,left: 80}}>2020-05-23到2020-05-29</div> <div style={{ display: 'inline-block', color: 'white', fontSize: 20, position: 'relative', top: 27, left: 80 }}>
<Search icon="search" style={{ marginLeft: 500,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onDangerWeekSearch} /> 2020-05-23到2020-05-29
</div>: </div>
<Search
icon="search"
style={{ marginLeft: 500, display: 'inline-block' }}
defaultValue="搜索"
onIconClick={this.onDangerWeekSearch}
/>
</div>
) : (
<div> <div>
{type === "kpsi" ? {type === 'kpsi' ? (
<Search icon="search" style={{ marginLeft: 790,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onKpsiSearch} />: <Search icon="search" style={{ marginLeft: 790, display: 'inline-block' }} defaultValue="搜索" onIconClick={this.onKpsiSearch} />
<Search icon="search" style={{ marginLeft: 790,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onRiskFailureSearch} /> ) : (
} <Search
icon="search"
</div>} style={{ marginLeft: 790, display: 'inline-block' }}
</div>} defaultValue="搜索"
onIconClick={this.onRiskFailureSearch}
/>
)}
</div>
)}
</div>
)}
</div> </div>
<div className="infoContent"> <div className="infoContent">
<Table className="tableDetail" <Table
className="tableDetail"
dataSource={this.getDataSource(type)} dataSource={this.getDataSource(type)}
style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }} style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }}
columns={this.columns(type)} columns={this.columns(type)}
rowClassName={this.rowClassChange} rowClassName={this.rowClassChange}
onRowClick={this.onRowClick} onRowClick={this.onRowClick}
pagination={_pageNation}> pagination={_pageNation}
</Table> ></Table>
</div> </div>
</div> </div>
</Content> </Content>
</Layout> </Layout>
...@@ -573,10 +594,8 @@ class CentralInfoView extends Component { ...@@ -573,10 +594,8 @@ class CentralInfoView extends Component {
} }
} }
CentralInfoView.propTypes = { CentralInfoView.propTypes = {};
};
CentralInfoView.defaultProps = { CentralInfoView.defaultProps = {
pages: 5 pages: 5
} };
export default CentralInfoView; export default CentralInfoView;
\ No newline at end of file
src/view/biz/duty/detail/riskDetail.js
View file @ 4d1ac2ff
...@@ -10,114 +10,108 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix'; ...@@ -10,114 +10,108 @@ import IncidenceSeverityMatrix from './echarts/IncidenceSeverityMatrix';
*/ */
class RiskAssessment extends Component { class RiskAssessment extends Component {
//获取等级
getLegend() {
return (
<div className="situation-map-legend">
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#15653d' }} />
<div>初始</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#0078ef' }} />
<div>4/5级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#ffcc2a' }} />
<div>3级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#ff5a20' }} />
<div>2级</div>
</div>
<div className="situation-map-legend-item">
<div className="situation-map-legend-block" style={{ background: '#f42828' }} />
<div>1级</div>
</div>
</div>
);
}
onClick = () => {
this.props.updateParents({ divVisable: 'block', riskVisable: 'none' });
};
//获取等级 render() {
getLegend() { return (
return ( <div className="mainContent" style={{ display: this.props.riskVisable }}>
<div className='situation-map-legend' > <Layout>
<div className='situation-map-legend-item'> <Header className="contentHeader">
<div className='situation-map-legend-block' style={{ background: '#15653d' }} /> <div className="headerLeft" style={{ display: 'inline' }}>
<div>初始</div> {this.props.detailTitle}
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#0078ef' }} />
<div>4/5级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ffcc2a' }} />
<div>3级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#ff5a20' }} />
<div>2级</div>
</div>
<div className='situation-map-legend-item'>
<div className='situation-map-legend-block' style={{ background: '#f42828' }} />
<div>1级</div>
</div>
</div> </div>
); <div className="headerRight" style={{ display: 'inline' }}>
} <img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{ marginTop: 3 }} />
onClick=()=>{ </div>
this.props.updateParents({ divVisable:'block', riskVisable:'none'}); </Header>
} <Layout>
<Content className="riskcontent">
<Header className="blockOneHeader">
<Header className="oneChildHeader">
render() { <img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} />
return (
<div className="mainContent" style={{display: this.props.riskVisable }}>
<Layout>
<Header className="contentHeader">
<div className="headerLeft" style={{ display: 'inline' }}>{this.props.detailTitle}</div>
<div className="headerRight" style={{ display: 'inline' }}>
<img src="/src/assets/detail/return.png" onClick={this.onClick} width="42px" style={{marginTop:3}} />
</div>
</Header> </Header>
<Layout> <Content className="oneHeaderContent">
<Content className="riskcontent"> <img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35, marginLeft: 160 }} />
{this.getLegend()}
<Header className="blockOneHeader"> </Content>
<Header className="oneChildHeader"> </Header>
<img src="/src/assets/detail/secondTitle4.png" style={{ width: 256, height: 38, margin: 0 }} /> <Content className="blockOneContent">
</Header> <Layout className="oneChildLayout">
<Content className="oneHeaderContent"> <Sider className="oneChildSider">
<img src="/src/assets/detail/RPNr.png" style={{ width: 922, height: 503, marginTop: 35 ,marginLeft:160}} /> <Layout>
{this.getLegend()} <Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle1.png" style={{ width: 277, height: 38, margin: 0 }} />
</Content> </Header>
</Header> <Content className="twoHeaderContent">
<Content className="blockOneContent"> <div className="risk-degree-pie">
<Layout className="oneChildLayout"> <div className="risk-degree-pie1">
<Sider className="oneChildSider"> <RiskDegreePie />
<Layout> </div>
<Header className="twoChildHeader"> </div>
<img src="/src/assets/detail/secondTitle1.png" style={{ width: 277, height: 38, margin: 0 }} /> </Content>
</Header> </Layout>
<Content className="twoHeaderContent"> </Sider>
<div className="risk-degree-pie">
<div className="risk-degree-pie1">
<RiskDegreePie />
</div>
</div>
</Content>
</Layout>
</Sider>
</Layout>
</Content>
<Content className="blockTwoContent">
<Layout className="oneChildLayout">
<Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
<IncidenceSeverityMatrix />
</Content>
</Layout>
</Sider>
</Layout>
</Content>
</Content>
<Sider className="risksider">
<Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header>
<Content className="risksiderContent">
<RiskDegreeHistogram />
</Content>
</Sider>
</Layout>
</Layout> </Layout>
</div> </Content>
); <Content className="blockTwoContent">
} <Layout className="oneChildLayout">
} <Sider className="oneChildSider">
<Layout>
<Header className="twoChildHeader">
<img src="/src/assets/detail/secondTitle2.png" style={{ width: 277, height: 38, margin: 0 }} />
</Header>
<Content className="twoHeaderContent">
<IncidenceSeverityMatrix />
</Content>
</Layout>
</Sider>
</Layout>
</Content>
</Content>
RiskAssessment.propTypes = { <Sider className="risksider">
<Header className="risksiderHeader">
<img src="/src/assets/detail/secondTitle3.png" style={{ width: 256, height: 38, margin: 0 }} />
</Header>
<Content className="risksiderContent">
<RiskDegreeHistogram />
</Content>
</Sider>
</Layout>
</Layout>
</div>
);
}
}
}; RiskAssessment.propTypes = {};
export default RiskAssessment; export default RiskAssessment;
src/view/biz/duty/situation/GrowthStatistics.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {growthData} from './data'; import { growthData } from './data';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
class GrowthStatistics extends Component { class GrowthStatistics extends Component {
render() { render() {
return ( return (
<div className='growth-statistics-view common-margin'> <div className="growth-statistics-view common-margin">
{/* <div className='daily-title daily-title-content'>告警隐患周增幅统计</div> */} {/* <div className='daily-title daily-title-content'>告警隐患周增幅统计</div> */}
<CommonCard title="告警隐患周增幅统计"> <CommonCard title="告警隐患周增幅统计">
<div className='growth-content'> <div className="growth-content">
<div style={{position:"initial",width:28,height:28,marginTop:-28,marginLeft:358}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -28, marginLeft: 358 }} onClick={this.props.onWarnClick}></div>
onClick={this.props.onWarnClick}></div> <div className="growth-item growth-item-header">
<div className='growth-item growth-item-header'>
<div>日期</div> <div>日期</div>
<div>告警/隐患</div> <div>告警/隐患</div>
<div>周增量</div> <div>周增量</div>
</div> </div>
{ {growthData.map((item, index) => (
growthData.map((item,index)=>( <div className="growth-item growth-item-text">
<div className='growth-item growth-item-text'> <div className="growth-item-datatext">{item.date}</div>
<div className='growth-item-datatext'>{item.date}</div>
<div>{item.risk}</div> <div>{item.risk}</div>
<div>{item.growth}</div> <div>{item.growth}</div>
</div> </div>
) ))}
)
}
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/RecentStatistics.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import {recentData1,recentData2} from './data'; import { recentData1, recentData2 } from './data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
...@@ -10,38 +10,35 @@ class RecentStatistics extends Component { ...@@ -10,38 +10,35 @@ class RecentStatistics extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value:'1', value: '1',
recentData:recentData1 recentData: recentData1
}; };
} }
handleChange = (value) => { handleChange = value => {
if(value == '1'){ if (value == '1') {
this.setState({value:value,recentData:recentData1}) this.setState({ value: value, recentData: recentData1 });
}else{ } else {
this.setState({value:value,recentData:recentData2}) this.setState({ value: value, recentData: recentData2 });
} }
};
}
render() { render() {
const {value,recentData} =this.state const { value, recentData } = this.state;
const select={backgroundColor:'#0C85B1',color:'#FFF700'}; const select = { backgroundColor: '#0C85B1', color: '#FFF700' };
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' } const noselect = { backgroundColor: 'rgba(12, 133, 177, 0)', color: '#45FEFE' };
return ( return (
<div className='recent-statistics-view common-margin'> <div className="recent-statistics-view common-margin">
{/* <div className='daily-title daily-title-content'>最近 7 日风险统计</div> */} {/* <div className='daily-title daily-title-content'>最近 7 日风险统计</div> */}
<CommonCard title="最近 7 日风险统计"> <CommonCard title="最近 7 日风险统计">
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}> <ButtonGroup className="buttongroup-style" defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>告警</span>} className='button-style' value="1" style={(value == '1')?select:noselect} /> <Button size="sm" children={<span>告警</span>} className="button-style" value="1" style={value == '1' ? select : noselect} />
<Button size='sm' children={<span>隐患</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/> <Button size="sm" children={<span>隐患</span>} className="button-style" value="2" style={value == '2' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className='recent-statistics-content'> <div className="recent-statistics-content">
<div style={{position:"initial",width:28,height:28,marginTop:-19,marginLeft:362}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -19, marginLeft: 362 }} onClick={this.props.onStatisticClick}></div>
onClick={this.props.onStatisticClick}></div> <ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
<ReactEcharts option={recentData} style={{ height: '100%', width: '100%' }} />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
); );
} }
......
src/view/biz/duty/situation/RiskFailure.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {riskFailureData} from './data' import { riskFailureData } from './data';
import { OverFlowText } from 'amos-framework'; import { OverFlowText } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
class RiskFailure extends Component { class RiskFailure extends Component {
render() { render() {
return ( return (
<div className='risk-failure-view common-margin daily-title'> <div className="risk-failure-view common-margin daily-title">
{/* <div className='daily-title daily-title-content'>安全风险失效 TOP10</div> */} {/* <div className='daily-title daily-title-content'>安全风险失效 TOP10</div> */}
<CommonCard title="安全风险失效 TOP10"> <CommonCard title="安全风险失效 TOP10">
<div className='top-ten-content'> <div className="top-ten-content">
<div style={{position:"initial",width:28,height:28,marginTop:-35,marginLeft:352}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -35, marginLeft: 352 }} onClick={this.props.onRiskClick}></div>
onClick={this.props.onRiskClick}></div> {riskFailureData.map((item, index) => (
{ <div className="top-ten-item" key={index}>
riskFailureData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText> <OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p> <p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText> </OverFlowText>
<div className='top-ten-item-middle'> <div className="top-ten-item-middle">
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/RiskTrend.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import {riskTrendData} from './data' import { riskTrendData } from './data';
import { Button } from 'amos-framework'; import { Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
...@@ -10,29 +10,29 @@ class RiskTrend extends Component { ...@@ -10,29 +10,29 @@ class RiskTrend extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value:'1', value: '1'
}; };
} }
handleChange = (value) => { handleChange = value => {
this.setState({value:value}) this.setState({ value: value });
} };
render() { render() {
const {value} =this.state const { value } = this.state;
const select={backgroundColor:'#0C85B1',color:'#FFF700'}; const select = { backgroundColor: '#0C85B1', color: '#FFF700' };
const noselect={backgroundColor:'rgba(12, 133, 177, 0)',color:'#45FEFE' } const noselect = { backgroundColor: 'rgba(12, 133, 177, 0)', color: '#45FEFE' };
return ( return (
<div className='risk-trend-view common-margin'> <div className="risk-trend-view common-margin">
{/* <div className='daily-title daily-title-content'>安全风险总体趋势</div> */} {/* <div className='daily-title daily-title-content'>安全风险总体趋势</div> */}
<CommonCard title="安全风险总体趋势"> <CommonCard title="安全风险总体趋势">
<ButtonGroup className='buttongroup-style' defaultValue="1" onChange={this.handleChange}> <ButtonGroup className="buttongroup-style" defaultValue="1" onChange={this.handleChange}>
<Button size='sm' children={<span>总数</span>} className='button-style' value="1" style={(value == '1')?select:noselect} /> <Button size="sm" children={<span>总数</span>} className="button-style" value="1" style={value == '1' ? select : noselect} />
<Button size='sm' children={<span>换流站</span>} className='button-style' value="2" style={(value == '2')?select:noselect}/> <Button size="sm" children={<span>换流站</span>} className="button-style" value="2" style={value == '2' ? select : noselect} />
<Button size='sm' children={<span>上升数</span>} className='button-style' value="3" style={(value == '3')?select:noselect}/> <Button size="sm" children={<span>上升数</span>} className="button-style" value="3" style={value == '3' ? select : noselect} />
<Button size='sm' children={<span>治理数</span>} className='button-style' value="4" style={(value == '4')?select:noselect}/> <Button size="sm" children={<span>治理数</span>} className="button-style" value="4" style={value == '4' ? select : noselect} />
</ButtonGroup> </ButtonGroup>
<div className='risk-trend-content'> <div className="risk-trend-content">
<ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%'}} /> <ReactEcharts option={riskTrendData} style={{ height: '100%', width: '100%' }} />
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/SafetyRate.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {SafetyRateData} from './data'; import { SafetyRateData } from './data';
import { OverFlowText, Button } from 'amos-framework'; import { OverFlowText, Button } from 'amos-framework';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
class SafetyRate extends Component { class SafetyRate extends Component {
render() { render() {
return ( return (
<div className='safety-rate-view common-margin daily-title'> <div className="safety-rate-view common-margin daily-title">
{/* <div className='daily-title-content'> {/* <div className='daily-title-content'>
安全指数 TOP10 安全指数 TOP10
</div> */} </div> */}
<CommonCard title="安全指数 TOP10"> <CommonCard title="安全指数 TOP10">
<div className='top-ten-content' style={{position:"initial"}}> <div className="top-ten-content" style={{ position: 'initial' }}>
<div style={{position:"initial",width:28,height:28,marginTop:-36,marginLeft:352}} <div style={{ position: 'initial', width: 28, height: 28, marginTop: -36, marginLeft: 352 }} onClick={this.props.onClick}></div>
onClick={this.props.onClick}></div> {SafetyRateData.map((item, index) => (
{ <div className="top-ten-item" key={index}>
SafetyRateData.map((item,index)=>
<div className='top-ten-item' key={index}>
<OverFlowText> <OverFlowText>
<p style={{ width: '80px' }}>{item.name}</p> <p style={{ width: '80px' }}>{item.name}</p>
</OverFlowText> </OverFlowText>
<div className='top-ten-item-middle'> <div className="top-ten-item-middle">
<div className='top-ten-item-middlelinear' style={{height:8,width:`${item.value}%`}}> </div> <div className="top-ten-item-middlelinear" style={{ height: 8, width: `${item.value}%` }}>
{' '}
</div>
</div> </div>
<div className ='top-ten-item-bottom'> <div className="top-ten-item-bottom">
<span>{item.value}</span> <span>{item.value}</span>
</div> </div>
</div> </div>
) ))}
}
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
......
src/view/biz/duty/situation/Statistics.js
View file @ 4d1ac2ff
...@@ -5,21 +5,20 @@ import { chainMapData, option123 } from './data'; ...@@ -5,21 +5,20 @@ import { chainMapData, option123 } from './data';
import echarts from 'echarts/lib/echarts'; import echarts from 'echarts/lib/echarts';
import 'echarts/map/js/china'; import 'echarts/map/js/china';
import geoJson from 'echarts/map/json/china.json'; import geoJson from 'echarts/map/json/china.json';
import { geoCoordMap, provienceData } from "./geo"; import { geoCoordMap, provienceData } from './geo';
import CommonCard from '../../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
export const dmtData = [ export const dmtData = [
{ 'latitude': 30.67, 'longitude': 104.07 }, { latitude: 30.67, longitude: 104.07 },
{ 'latitude': 34.76, 'longitude': 113.65 }, { latitude: 34.76, longitude: 113.65 },
{ 'latitude': 29.65, 'longitude': 91.13 }, { latitude: 29.65, longitude: 91.13 },
{ 'latitude': 43.82, 'longitude': 87.62 } { latitude: 43.82, longitude: 87.62 }
] ];
class Statistics extends Component { class Statistics extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {};
}
} }
componentDidMount() { componentDidMount() {
...@@ -65,83 +64,83 @@ class Statistics extends Component { ...@@ -65,83 +64,83 @@ class Statistics extends Component {
{ name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' } { name: '新疆', area: '其他', type: 'areaCenterCity', InValue: '0' }
]; ];
echarts.registerMap('china', geoJson); echarts.registerMap('china', geoJson);
debugger debugger;
for (const item of provienceData) { for (const item of provienceData) {
if (item.area === '东北大区') { if (item.area === '东北大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#3CA2FC', areaColor: '#3CA2FC'
}, },
emphasis: { emphasis: {
areaColor: '#3CA2FC', areaColor: '#3CA2FC'
} }
} };
} else if (item.area === '华北大区') { } else if (item.area === '华北大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#6CAFBE', areaColor: '#6CAFBE'
}, },
emphasis: { emphasis: {
areaColor: '#6CAFBE', areaColor: '#6CAFBE'
} }
} };
} else if (item.area === '华中大区') { } else if (item.area === '华中大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#ADD03C', areaColor: '#ADD03C'
}, },
emphasis: { emphasis: {
areaColor: '#ADD03C', areaColor: '#ADD03C'
} }
} };
} else if (item.area === '华东大区') { } else if (item.area === '华东大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#A13614', areaColor: '#A13614'
}, },
emphasis: { emphasis: {
areaColor: '#A13614', areaColor: '#A13614'
} }
} };
} else if (item.area === '华西大区') { } else if (item.area === '华西大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#FFBA00', areaColor: '#FFBA00'
}, },
emphasis: { emphasis: {
areaColor: '#FFBA00', areaColor: '#FFBA00'
} }
} };
} else if (item.area === '华南大区') { } else if (item.area === '华南大区') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#001AC5', areaColor: '#001AC5'
}, },
emphasis: { emphasis: {
areaColor: '#001AC5', areaColor: '#001AC5'
} }
} };
} else if (item.area === '南海诸岛') { } else if (item.area === '南海诸岛') {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
borderColor: '#fff', // 区域边框颜色 borderColor: '#fff', // 区域边框颜色
areaColor: '#fff', // 区域颜色 areaColor: '#fff' // 区域颜色
}, },
emphasis: { emphasis: {
show: false, show: false
// borderColor: '#fff', // borderColor: '#fff',
// areaColor:"#fff", // areaColor:"#fff",
} }
} };
} else { } else {
item.itemStyle = { item.itemStyle = {
normal: { normal: {
areaColor: '#D9D9D9', areaColor: '#D9D9D9'
}, },
emphasis: { emphasis: {
areaColor: '#D9D9D9', areaColor: '#D9D9D9'
} }
} };
} }
} }
const myChart = echarts.init(document.getElementById('mainMap')); const myChart = echarts.init(document.getElementById('mainMap'));
...@@ -151,8 +150,8 @@ class Statistics extends Component { ...@@ -151,8 +150,8 @@ class Statistics extends Component {
// formatter: '{b}', // 提示标签格式 // formatter: '{b}', // 提示标签格式
//鼠标放地图的某一块，显示的提示框 //鼠标放地图的某一块，显示的提示框
formatter(params, ticket, callback) { formatter(params, ticket, callback) {
console.log(params) console.log(params);
return `'告警数'<br />${params.name}：${params.data.InValue}` return `'告警数'<br />${params.name}：${params.data.InValue}`;
}, },
backgroundColor: '#ff7f50', // 提示标签背景颜色 backgroundColor: '#ff7f50', // 提示标签背景颜色
textStyle: { color: '#fff' } // 提示标签字体颜色 textStyle: { color: '#fff' } // 提示标签字体颜色
...@@ -169,14 +168,15 @@ class Statistics extends Component { ...@@ -169,14 +168,15 @@ class Statistics extends Component {
roam: false, roam: false,
zoom: 1.2, zoom: 1.2,
tooltip: { tooltip: {
show: false, // 不显示提示标签 show: false // 不显示提示标签
}, },
label: { label: {
normal: { normal: {
show: false, // 显示省份标签 show: false, // 显示省份标签
textStyle: { color: '#c71585' }// 省份标签字体颜色 textStyle: { color: '#c71585' } // 省份标签字体颜色
}, },
emphasis: {// 对应的鼠标悬浮效果 emphasis: {
// 对应的鼠标悬浮效果
show: false, show: false,
textStyle: { color: '#800080' } textStyle: { color: '#800080' }
} }
...@@ -192,12 +192,11 @@ class Statistics extends Component { ...@@ -192,12 +192,11 @@ class Statistics extends Component {
show: false, show: false,
borderWidth: 0.5, borderWidth: 0.5,
borderColor: '#4b0082', borderColor: '#4b0082',
areaColor: '#ffdead', areaColor: '#ffdead'
} }
}, }
}, },
series: [ series: [
{ {
type: 'scatter', type: 'scatter',
...@@ -238,14 +237,14 @@ class Statistics extends Component { ...@@ -238,14 +237,14 @@ class Statistics extends Component {
roam: false, roam: false,
zoom: 1.2, zoom: 1.2,
tooltip: { tooltip: {
show: false, // 不显示提示标签 show: false // 不显示提示标签
}, },
label: { label: {
normal: { normal: {
show: false // 显示省份标签 show: false // 显示省份标签
}, },
emphasis: { emphasis: {
show: false, show: false
} }
}, },
itemStyle: { itemStyle: {
...@@ -255,7 +254,7 @@ class Statistics extends Component { ...@@ -255,7 +254,7 @@ class Statistics extends Component {
label: { show: false } label: { show: false }
}, },
emphasis: { emphasis: {
show: false, show: false
} }
}, },
// geoIndex: 0, // geoIndex: 0,
...@@ -271,15 +270,15 @@ class Statistics extends Component { ...@@ -271,15 +270,15 @@ class Statistics extends Component {
rippleEffect: { rippleEffect: {
brushType: 'stroke' brushType: 'stroke'
}, },
symbolSize: function (val, params) { symbolSize: function(val, params) {
return 30; return 30;
}, },
data: dmtData.map(function (itemOpt) { data: dmtData.map(function(itemOpt) {
return { return {
// name: itemOpt.name, // name: itemOpt.name,
value: [ value: [
itemOpt.longitude, itemOpt.longitude,
itemOpt.latitude, itemOpt.latitude
// itemOpt.value //数量 // itemOpt.value //数量
], ],
label: { label: {
...@@ -291,17 +290,17 @@ class Statistics extends Component { ...@@ -291,17 +290,17 @@ class Statistics extends Component {
itemStyle: { itemStyle: {
normal: { normal: {
// color: itemOpt.color //色值 // color: itemOpt.color //色值
color: "red" color: 'red'
} }
} }
}; };
}), }),
symbolSize: function (val) { symbolSize: function(val) {
return 5;//描点的大小 return 5; //描点的大小
}, }
} }
], ]
}) });
// 鼠标放上颜色变红 // 鼠标放上颜色变红
// myChart.on('mouseover', params => { // myChart.on('mouseover', params => {
...@@ -311,7 +310,7 @@ class Statistics extends Component { ...@@ -311,7 +310,7 @@ class Statistics extends Component {
myChart.on('click', params => { myChart.on('click', params => {
if (params.name === '海南') { if (params.name === '海南') {
this.props.history.push('/Dashboard/map2') this.props.history.push('/Dashboard/map2');
} }
}); });
} }
...@@ -337,42 +336,52 @@ class Statistics extends Component { ...@@ -337,42 +336,52 @@ class Statistics extends Component {
return '1'; return '1';
} }
render() { render() {
return ( return (
<div className='statistics-view common-margin'> <div className="statistics-view common-margin">
{/* <div className='statistics-title statistics-title-content'>全国</div> */} {/* <div className='statistics-title statistics-title-content'>全国</div> */}
<CommonCard title="全国" position="center"> <CommonCard title="全国" position="center">
<div className='statistics-banner'> <div className="statistics-banner">
<div className='statistics-banner-content'> <div className="statistics-banner-content">
<div className='statistics-banner-item'> <div className="statistics-banner-item">
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>现有告警</p> <p>现有告警</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>累计告警</p> <p>累计告警</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>消缺告警</p> <p>消缺告警</p>
</div> </div>
</div> </div>
</div> </div>
<div className='statistics-banner-content'> <div className="statistics-banner-content">
<div className='statistics-banner-item'> <div className="statistics-banner-item">
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>现有隐患</p> <p>现有隐患</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>累计隐患</p> <p>累计隐患</p>
</div> </div>
<div className='statistics-banner-itemblock'> <div className="statistics-banner-itemblock">
<div className='statistics-text-number'>20<span>5↑</span></div> <div className="statistics-text-number">
20<span>5↑</span>
</div>
<p>治理隐患</p> <p>治理隐患</p>
</div> </div>
</div> </div>
......
src/view/biz/duty/situation/index.js
View file @ 4d1ac2ff
...@@ -18,82 +18,84 @@ class Situation extends Component { ...@@ -18,82 +18,84 @@ class Situation extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
divVisable:'none' ,//控制弹窗显示 divVisable: 'none', //控制弹窗显示
title: '', //modal标题 title: '', //modal标题
type: '' //弹窗类型（根据类型切换不同弹窗） type: '' //弹窗类型（根据类型切换不同弹窗）
}; };
} }
componentWillMount() { componentWillMount() {}
} componentDidMount() {}
componentDidMount() {
}
componentWillUnmount() {
} componentWillUnmount() {}
onRef=(ref)=>{ onRef = ref => {
this.child1=ref; this.child1 = ref;
} };
//安全指数弹窗 //安全指数弹窗
kpsi(values){ kpsi(values) {
console.log(values); console.log(values);
this.setState({ this.setState({
divVisable : values.divVisable, divVisable: values.divVisable,
title : values.title, title: values.title,
type : values.type type: values.type
}) });
} }
render() { render() {
return ( return (
<div className='class-Situation'> <div className="class-Situation">
<div className='daily-duties-content'> <div className="daily-duties-content">
<div className='daily-duties-left'> <div className="daily-duties-left">
<div> <div>
<SafetyRate onClick={()=>{ <SafetyRate
this.child1.kpsi()}}/> onClick={() => {
this.child1.kpsi();
}}
/>
</div> </div>
<div> <div>
<GrowthStatistics onWarnClick={()=>{ <GrowthStatistics
this.child1.dangerWeekCensus()}}/> onWarnClick={() => {
this.child1.dangerWeekCensus();
}}
/>
</div> </div>
</div> </div>
<div className='daily-duties-middle'> <div className="daily-duties-middle">
<div> <div>
<Statistics/> <Statistics />
</div> </div>
<div> <div>
<RiskTrend/> <RiskTrend />
</div> </div>
</div> </div>
<div className='daily-duties-right'> <div className="daily-duties-right">
<div> <div>
<RiskFailure onRiskClick={()=>{ <RiskFailure
this.child1.safetyRiskFailure()}}/> onRiskClick={() => {
this.child1.safetyRiskFailure();
}}
/>
</div> </div>
<div> <div>
<RecentStatistics onStatisticClick={()=>{ <RecentStatistics
this.child1.sevenDaysRiskCensus()}}/> onStatisticClick={() => {
this.child1.sevenDaysRiskCensus();
}}
/>
</div> </div>
</div> </div>
</div>
<div>
</div> </div>
<CentralInfoView onRef={this.onRef}/> <div></div>
<CentralInfoView onRef={this.onRef} />
</div> </div>
); );
} }
} }
Situation.propTypes = { Situation.propTypes = {};
};
export default Situation; export default Situation;
src/view/biz/duty/situationDetail/data.js
View file @ 4d1ac2ff
export const situationDetailData = [ export const situationDetailData = [
{ {
id:'1', sita: '复龙换流站', sitb: '80', id: '1',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sita: '复龙换流站',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitb: '80',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmHuo: 0,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmGu: 12,
}, sitAlarmXun: 23,
{ sitAlarmTb: 0.1,
id:'2', sita: '奉贤换流站', sitb: '80', sitAlarmHb: 0.23,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel1: 23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel2: 20,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel3: 16,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskLevel4: 12,
}, sitRiskTb: 0.1,
{ sitRiskHb: 0.23,
id:'3', sita: '锦屏换流站', sitb: '80', sitDangerFa: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerZl: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitDangerWzl: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitDangerTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerHb: 0.23,
}, sitManagerPx: 23,
{ sitManagerXl: 12,
id:'4', sita: '苏州换流站', sitb: '80', sitManagerBy: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitManagerYj: 97
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',
id:'5', sita: '天山换流站', sitb: '80', sitAlarmHuo: 0,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmGu: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitAlarmXun: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHb: 0.23,
}, sitRiskLevel1: 23,
{ sitRiskLevel2: 20,
id:'6', sita: '中州换流站', sitb: '80', sitRiskLevel3: 16,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel4: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskTb: 0.1,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskHb: 0.23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerFa: 12,
}, sitDangerZl: 12,
{ sitDangerWzl: 23,
id:'7', sita: '宜宾换流站', sitb: '80', sitDangerTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerPx: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitManagerXl: 12,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitManagerBy: 12,
}, sitManagerYj: 97
{ },
id:'8', sita: '金华换流站', sitb: '80', {
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, id: '3',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sita: '锦屏换流站',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitb: '80',
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHuo: 0,
}, sitAlarmGu: 12,
{ sitAlarmXun: 23,
id:'9', sita: '龙泉换流站', sitb: '80', sitAlarmTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel1: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel2: 20,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskLevel3: 16,
}, sitRiskLevel4: 12,
{ sitRiskTb: 0.1,
id:'10', sita: '政平换流站', sitb: '80', sitRiskHb: 0.23,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerFa: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitDangerZl: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitDangerWzl: 23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitDangerTb: 0.1,
}, sitDangerHb: 0.23,
{ sitManagerPx: 23,
id:'11', sita: '伊克昭换流站', sitb: '80', sitManagerXl: 12,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitManagerBy: 12,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerYj: 97
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, },
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, {
}, id: '4',
{ sita: '苏州换流站',
id:'12', sita: '沂南换流站', sitb: '80', sitb: '80',
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHuo: 0,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitAlarmGu: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitAlarmXun: 23,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmTb: 0.1,
}, sitAlarmHb: 0.23,
{ sitRiskLevel1: 23,
id:'13', sita: '陕北换流站', sitb: '80', sitRiskLevel2: 20,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitRiskLevel3: 16,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel4: 12,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskTb: 0.1,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitRiskHb: 0.23,
}, sitDangerFa: 12,
{ sitDangerZl: 12,
id:'14', sita: '武汉换流站', sitb: '80', sitDangerWzl: 23,
sitDangerTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitDangerHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitManagerPx: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitManagerXl: 12,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitManagerBy: 12,
}, sitManagerYj: 97
{ },
id:'15', sita: '洛阳换流站', sitb: '80', {
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, id: '5',
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sita: '天山换流站',
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitb: '80',
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, sitAlarmHuo: 0,
}, sitAlarmGu: 12,
{ sitAlarmXun: 23,
id:'16', sita: '贵州换流站', sitb: '80', sitAlarmTb: 0.1,
sitAlarmHuo: 0, sitAlarmGu: 12, sitAlarmXun: 23, sitAlarmTb: 0.1, sitAlarmHb: 0.23, sitAlarmHb: 0.23,
sitRiskLevel1: 23, sitRiskLevel2: 20, sitRiskLevel3: 16, sitRiskLevel4: 12, sitRiskTb: 0.1, sitRiskHb: 0.23, sitRiskLevel1: 23,
sitDangerFa: 12, sitDangerZl: 12, sitDangerWzl: 23, sitDangerTb: 0.1, sitDangerHb: 0.23, sitRiskLevel2: 20,
sitManagerPx: 23, sitManagerXl: 12, sitManagerBy: 12, sitManagerYj: 97, 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
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import {situationDetailData} from './data'; import { situationDetailData } from './data';
import { Table } from 'amos-antd'; import { Table } from 'amos-antd';
import { Layout,Search } from 'amos-framework'; import { Layout, Search } from 'amos-framework';
const { Header, Content } = Layout; const { Header, Content } = Layout;
const pageSize = 12; const pageSize = 12;
...@@ -19,215 +19,215 @@ class SituationDetail extends Component { ...@@ -19,215 +19,215 @@ class SituationDetail extends Component {
situationData: situationDetailData situationData: situationDetailData
}; };
} }
/** /**
* 设定间隔行样式 * 设定间隔行样式
*/ */
rowClassChange = (record, index) => { rowClassChange = (record, index) => {
let className = 'light-row'; let className = 'light-row';
if (index % 2 === 0) className = 'dark-row'; if (index % 2 === 0) className = 'dark-row';
return className; return className;
} };
/** /**
* 自定义总页数 * 自定义总页数
*/ */
showTotalPage = (total) => { showTotalPage = total => {
let pages = Math.ceil(total / pageSize); let pages = Math.ceil(total / pageSize);
return `共 ${pages} 页`; return `共 ${pages} 页`;
} };
columns = () => { columns = () => {
return ( 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: '换流站', title: '同比/环比',
dataIndex: 'sita', dataIndex: 'sitRiskTb',
width: 120,
render: (text, record) => { render: (text, record) => {
return (<div style={{ color: 'yellow', fontWeight: 'normal' }}>{text}</div>) 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: ' 安全指数', title: '治理',
dataIndex: 'sitb', dataIndex: 'sitDangerZl'
width: 100
}, },
{ {
title: '告警', title: '未治理',
width: 200, dataIndex: 'sitDangerWzl'
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: '风险', title: '同比/环比',
width: 200, dataIndex: 'sitDangerTb',
children:[ render: (text, record) => {
{ return (
title: '一级', <div>
dataIndex: 'sitRiskLevel1', <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: '二级', );
dataIndex: 'sitRiskLevel2', }
}, }
{ ]
title: '三级', },
dataIndex: 'sitRiskLevel3', {
}, title: '消防安全管理',
{ width: 200,
title: '四级', children: [
dataIndex: 'sitRiskLevel4', {
}, title: '培训',
{ dataIndex: 'sitManagerPx'
title: '同比/环比', },
dataIndex: 'sitRiskTb', {
render: (text, record) => { title: '训练',
return ( dataIndex: 'sitManagerXl'
<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: '隐患', title: '器材保养',
width: 200, dataIndex: 'sitManagerBy'
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: '消防安全管理', title: '应急预案',
width: 200, dataIndex: 'sitManagerYj'
children:[ }
{
title: '培训',
dataIndex: 'sitManagerPx',
},
{
title: '训练',
dataIndex: 'sitManagerXl',
},
{
title: '器材保养',
dataIndex: 'sitManagerBy',
},
{
title: '应急预案',
dataIndex: 'sitManagerYj',
},
],
}
] ]
) }
} ];
};
/* /*
*态势查询 *态势查询
*/ */
onSituationDetailSearch=(e,value)=>{ onSituationDetailSearch = (e, value) => {
if(value!==null&&value.trim()!==''){ if (value !== null && value.trim() !== '') {
let {situationData}=this.state; let { situationData } = this.state;
situationData = situationData.filter(item => (item.sita).indexOf(value) > -1); situationData = situationData.filter(item => item.sita.indexOf(value) > -1);
this.setState({ this.setState({
situationData:situationData situationData: situationData
}) });
} else{ } else {
this.setState({ this.setState({
situationData:situationDetailData situationData: situationDetailData
}) });
} }
} };
render() { render() {
const {situationData} =this.state; const { situationData } = this.state;
const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage}; const _pageNation = { pageSize: pageSize, size: 'small', showTotal: this.showTotalPage };
return ( return (
<div className="class-situation-detail"> <div className="class-situation-detail">
<Layout> <Layout>
<Header style={{display:'flex'}}> <Header style={{ display: 'flex' }}>
<div>
<div><Search icon="search" style={{ marginLeft: 690,display:'inline-block' }} defaultValue='搜索' onIconClick={this.onSituationDetailSearch} /></div> <Search icon="search" style={{ marginLeft: 690, display: 'inline-block' }} defaultValue="搜索" onIconClick={this.onSituationDetailSearch} />
<div class="dangerClass" style={{marginLeft:240,marginTop:10,fontSize:20,color:'#ffffff'}}> </div>
<div style={{color:'green'}}>{"安全"}</div> <div class="dangerClass" style={{ marginLeft: 240, marginTop: 10, fontSize: 20, color: '#ffffff' }}>
{"：指数>=90 "} <div style={{ color: 'green' }}>{'安全'}</div>
<div style={{color:'yellow',marginLeft:10}}>{"低风险"}</div> {'：指数>=90 '}
{"：60<指数<90 "} <div style={{ color: 'yellow', marginLeft: 10 }}>{'低风险'}</div>
<div style={{color:'red',marginLeft:10}}>{"高风险"}</div> {'：60<指数<90 '}
{"：指数<=60 "} <div style={{ color: 'red', marginLeft: 10 }}>{'高风险'}</div>
</div> {'：指数<=60 '}
</Header> </div>
<Content> </Header>
<Table className="tableDetail" <Content>
rowKey={record => record.id} <Table
dataSource={situationData} className="tableDetail"
style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }} rowKey={record => record.id}
columns={this.columns()} dataSource={situationData}
rowClassName={this.rowClassChange} style={{ background: 'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)' }}
pagination={_pageNation}> columns={this.columns()}
</Table> rowClassName={this.rowClassChange}
</Content> pagination={_pageNation}
</Layout> ></Table>
</div> </Content>
</Layout>
</div>
); );
} }
} }
SituationDetail.propTypes = { SituationDetail.propTypes = {};
};
export default SituationDetail; export default SituationDetail;
src/view/biz/regulate/bills/index.js
View file @ 4d1ac2ff
...@@ -10,34 +10,20 @@ import PropTypes from 'prop-types'; ...@@ -10,34 +10,20 @@ import PropTypes from 'prop-types';
class Bills extends Component { class Bills extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {};
};
}
componentWillMount() {
} }
componentDidMount() { componentWillMount() {}
} componentDidMount() {}
componentWillUnmount() {
} componentWillUnmount() {}
render() { render() {
return ( return <div className="class-bills">单据管理</div>;
<div className="class-bills">
单据管理
</div>
);
} }
} }
Bills.propTypes = { Bills.propTypes = {};
};
export default Bills; export default Bills;
src/view/common/commonCard/CommonCard.js
View file @ 4d1ac2ff
...@@ -2,18 +2,16 @@ import React, { Component } from 'react'; ...@@ -2,18 +2,16 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './index.scss'; import './index.scss';
class CommonCard extends Component { class CommonCard extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
const { title, children, position } = this.props; const { title, children, position } = this.props;
return ( return (
<div className="common-card"> <div className="common-card">
<div className={`card-title ${position === 'center' ? 'center-title' : ''}`} > <div className={`card-title ${position === 'center' ? 'center-title' : ''}`}>
<div className="title-contain"> <div className="title-contain">
<div className="title-bg"> <div className="title-bg">
<div className="title-shape"> <div className="title-shape">
...@@ -39,4 +37,4 @@ CommonCard.propTypes = { ...@@ -39,4 +37,4 @@ CommonCard.propTypes = {
children: PropTypes.node children: PropTypes.node
}; };
export default CommonCard; export default CommonCard;
\ No newline at end of file
src/view/monitor/dailyTrain/DailyTrainRight.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '训练科目',
width: '15%',
dataIndex: 'xlkm',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '训练内容',
width: '15%',
dataIndex: 'xlnr',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '训练时间',
width: '20%',
dataIndex: 'xlsj',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '参加人数',
width: '10%',
dataIndex: 'cjrs',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '达标条件',
width: '20%',
dataIndex: 'dbtj',
render: val => <span style={{color:"green"}}>{val}</span>,
},
{
title: '达标率%',
width: '20%',
dataIndex: 'dbl',
render: val => <span style={{color:"white"}}>{val}</span>,
}
];
const data = [
{
key: '1',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '2',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '3',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '4',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '5',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '6',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '7',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '8',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '9',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '10',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '11',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '12',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '13',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '14',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '15',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '16',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '17',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '18',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '19',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '20',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '21',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '22',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '23',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '225',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '25',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '26',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '27',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '28',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
},
{
key: '29',
xlkm: '消防技能培训',
xlnr: "1500米长跑",
xlsj:'2019-01-01',
cjrs: 4,
dbtj:'队列整齐',
dbl:"60%"
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 日常训练右侧
*/
class DailyTrainRight extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 10
};
this.state = {
data: [],
loading: false,
equimentId:null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
};
}
componentDidMount() {
}
onEdit = (id) => {
// this.type = 'edit';
// electricFireDetailsAction(id).then(d => {
// this.setState({
// form: d,
// title: d.name
// })
// })
console.log("id:" + id)
this.setState({
data:data,
totalCount:data.length
})
}
onChange = (value, item) =>{
console.log(value, item);
}
onTimeChange= (value, dateString)=> {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
console.log(value, item);
}
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () =>{
// this.setState({
// data:data
// })
}
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
this.setState({ fname: value });
}
getPanelHeight = () => {
// //计算表格高度
// var box1=document.getElementById("dailyTrain-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91;
// }
return 300
};
SearchChange = (value) => {
alert(value)
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
render() {
let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state;
return (
<div className="dailyTrain-bottom-right" id="dailyTrain-bottom-right">
<div className="dailyTrain-bottom-right-content">
<div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
);
}
}
DailyTrainRight.propTypes = {
};
export default DailyTrainRight;
src/view/monitor/dailyTrain/DailyTrainLeft.js → src/view/monitor/duty/dailyTrain/DailyTrainLeft.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts'; import { Select } from 'amos-framework';
import { Table } from 'amos-antd'; import { Input } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd'; import { DatePicker } from 'amos-antd';
import moment from 'moment'; import AmosGridTable from './../safetyManage/AmosGridTable';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option; const Option = Select.Option;
const Search = Input.Search; const Search = Input.Search;
...@@ -22,45 +12,44 @@ const columns = [ ...@@ -22,45 +12,44 @@ const columns = [
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
width: '10%', width: '10%',
align: 'center', // 设置文本居中的属性 align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '换流站名称', title: '换流站名称',
width: '20%', width: '20%',
dataIndex: 'name', dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>, render: val => <span style={{ color: 'yellow' }}>{val}</span>
}, },
{ {
title: '科目数', title: '科目数',
width: '10%', width: '10%',
dataIndex: 'kemu', dataIndex: 'kemu',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '次数', title: '次数',
width: '10%', width: '10%',
dataIndex: 'cishu', dataIndex: 'cishu',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '参加人员', title: '参加人员',
width: '10%', width: '10%',
dataIndex: 'cjry', dataIndex: 'cjry',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '人员达标率', title: '人员达标率',
width: '20%', width: '20%',
dataIndex: 'rydbl', dataIndex: 'rydbl',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '最近培训时间', title: '最近培训时间',
width: '20%', width: '20%',
dataIndex: 'date', dataIndex: 'date',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
} }
]; ];
const data = [ const data = [
...@@ -68,267 +57,266 @@ const data = [ ...@@ -68,267 +57,266 @@ const data = [
key: '1', key: '1',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '2', key: '2',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '3', key: '3',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '4', key: '4',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '5', key: '5',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '6', key: '6',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '7', key: '7',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '8', key: '8',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '9', key: '9',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '10', key: '10',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '11', key: '11',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '12', key: '12',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '13', key: '13',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '14', key: '14',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '15', key: '15',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '16', key: '16',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '17', key: '17',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '18', key: '18',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '19', key: '19',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '20', key: '20',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '21', key: '21',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '22', key: '22',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '23', key: '23',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '225', key: '225',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '25', key: '25',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '26', key: '26',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '27', key: '27',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '28', key: '28',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '29', key: '29',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
} }
]; ];
const selectdata = [ const selectdata = [
{ id: 0, name: '消防理论知识培训' }, { id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' }, { id: 1, name: '消防技能培训' },
...@@ -338,18 +326,12 @@ const selectdata = [ ...@@ -338,18 +326,12 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' }, { id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' } { id: 5, name: '用火用电管理' }
]; ];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/** /**
* 日常训练左侧 * 日常训练左侧
*/ */
class DailyTrainyLeft extends Component { class DailyTrainyLeft extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = { this.pageConfig = {
...@@ -359,65 +341,54 @@ class DailyTrainyLeft extends Component { ...@@ -359,65 +341,54 @@ class DailyTrainyLeft extends Component {
this.state = { this.state = {
data: [], data: [],
loading: false, loading: false,
equimentId:null, equimentId: null,
pagination: true, pagination: true,
isChecked: false, isChecked: false,
selectedRows: [], selectedRows: [],
selectedRowKeys: [], selectedRowKeys: [],
dataList: [], dataList: [],
newDataList:[], newDataList: [],
totalCount:0, totalCount: 0,
searchParam:'', searchParam: '',
fname:'', fname: '',
current: 1, current: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
tableHeight:450 tableHeight: 450
}; };
} }
componentDidMount() { componentDidMount() {}
}
onRequestTable = (callback) => { onRequestTable = callback => {
this.setState({ this.setState({
data:data, data: data,
totalCount:data.length totalCount: data.length
}); });
callback && callback(data); callback && callback(data);
// electricFireListAction(current, pageSize, searchName).then(d => { // electricFireListAction(current, pageSize, searchName).then(d => {
// const { dataList, total } = d || {}; // const { dataList, total } = d || {};
// }); // });
} };
onChange = (value, item) =>{ onChange = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
onTimeChange= (value, dateString)=> { onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value); console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString); console.log('Formatted Selected Time: ', dateString);
} };
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{ onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
reload = r => { reload = r => {
this.setState( this.setState(
...@@ -431,12 +402,11 @@ class DailyTrainyLeft extends Component { ...@@ -431,12 +402,11 @@ class DailyTrainyLeft extends Component {
); );
}; };
getAcitonData = () => {
getAcitonData = () =>{ this.setState({
this.setState({ data: data
data:data });
}) };
}
/** /**
* 分页设置参数 * 分页设置参数
...@@ -449,7 +419,7 @@ class DailyTrainyLeft extends Component { ...@@ -449,7 +419,7 @@ class DailyTrainyLeft extends Component {
this.pageConfig.pageNumber = current; this.pageConfig.pageNumber = current;
} }
}; };
/** /**
* 获取表格所选则的行数据 * 获取表格所选则的行数据
*/ */
getSelectedRows = (selectedRows, selectedRowKeys) => { getSelectedRows = (selectedRows, selectedRowKeys) => {
...@@ -458,123 +428,89 @@ class DailyTrainyLeft extends Component { ...@@ -458,123 +428,89 @@ class DailyTrainyLeft extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId); // callBack(selectedRowKeys,riskSourceId,equipmentId);
}; };
searchData =()=>{ searchData = () => {
let name = this.state.fname; let name = this.state.fname;
alert(name) alert(name);
} };
onChange = (e,value) =>{ onChange = (e, value) => {
this.setState({ fname: value }); this.setState({ fname: value });
} };
getPanelHeight = () => { getPanelHeight = () => {
//计算表格高度 //计算表格高度
var box1=document.getElementById("dailyTrain-bottom-left"); var box1 = document.getElementById('dailyTrain-bottom-left');
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取 if (box1) {
return box1.offsetHeight * 0.91 //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91;
} }
}; };
SearchChange = (value) => { SearchChange = value => {
alert(value) alert(value);
} };
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() { render() {
let defaultPageConfig = this.pageConfig; let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state; const { current, pageSize, total } = this.state;
const {onEditClick} =this.props; const { onEditClick } = this.props;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state; let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return ( return (
<div className="dailyTrain-bottom-left" id="dailyTrain-bottom-left"> <div className="dailyTrain-bottom-left" id="dailyTrain-bottom-left">
<div className="dailyTrain-bottom-left-content"> <div className="dailyTrain-bottom-left-content">
<div className="one-div" id="one-div"> <div className="one-div" id="one-div">
<div className="search-one"> <div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */} {/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input"> <div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} /> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
</div>
<div className="search-two" >
<Select className="search-select-style"
data={selectdata}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
defaultOption={<Option>请选择</Option>}
onChange={this.onChangeSelect}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
</div>
</div> </div>
<div className="two-div"> <div className="search-two">
<Select
className="search-select-style"
data={selectdata}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
<AmosGridTable defaultOption={<Option>请选择</Option>}
columns={columns} onChange={this.onChangeSelect}
dataList={data} />
isPageable={pagination} </div>
totals={totalCount} <div className="search-three">
callBack={this.reload} <span className="three-font">日期:&nbsp;&nbsp;</span>
selectedRowKeys={selectedRowKeys} <DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
getSelectedRows={this.getSelectedRows} {/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
getTableDataAction={this.getAcitonData} &nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
isChecked={isChecked} <DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={(record) => onEditClick(record)}
/>
</div> </div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={record => onEditClick(record)}
/>
</div>
</div> </div>
</div> </div>
); );
} }
} }
DailyTrainyLeft.propTypes = {};
DailyTrainyLeft.propTypes = {
};
export default DailyTrainyLeft; export default DailyTrainyLeft;
src/view/monitor/duty/dailyTrain/DailyTrainRight.js 0 → 100644
View file @ 4d1ac2ff
import React, { Component } from 'react';
import AmosGridTable from './../safetyManage/AmosGridTable';
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '训练科目',
width: '15%',
dataIndex: 'xlkm',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '训练内容',
width: '15%',
dataIndex: 'xlnr',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '训练时间',
width: '20%',
dataIndex: 'xlsj',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '参加人数',
width: '10%',
dataIndex: 'cjrs',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '达标条件',
width: '20%',
dataIndex: 'dbtj',
render: val => <span style={{ color: 'green' }}>{val}</span>
},
{
title: '达标率%',
width: '20%',
dataIndex: 'dbl',
render: val => <span style={{ color: 'white' }}>{val}</span>
}
];
const data = [
{
key: '1',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '2',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '3',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '4',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '5',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '6',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '7',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '8',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '9',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '10',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '11',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '12',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '13',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '14',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '15',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '16',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '17',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '18',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '19',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '20',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '21',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '22',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '23',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '225',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '25',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '26',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '27',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '28',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
},
{
key: '29',
xlkm: '消防技能培训',
xlnr: '1500米长跑',
xlsj: '2019-01-01',
cjrs: 4,
dbtj: '队列整齐',
dbl: '60%'
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
/**
* 日常训练右侧
*/
class DailyTrainRight extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 10
};
this.state = {
data: [],
loading: false,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight: 450
};
}
componentDidMount() {}
onEdit = id => {
// this.type = 'edit';
// electricFireDetailsAction(id).then(d => {
// this.setState({
// form: d,
// title: d.name
// })
// })
console.log('id:' + id);
this.setState({
data: data,
totalCount: data.length
});
};
onChange = (value, item) => {
console.log(value, item);
};
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
};
onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item);
};
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () => {
// this.setState({
// data:data
// })
};
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData = () => {
let name = this.state.fname;
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
};
getPanelHeight = () => {
// //计算表格高度
// var box1=document.getElementById("dailyTrain-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91;
// }
return 300;
};
SearchChange = value => {
alert(value);
};
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() {
let defaultPageConfig = this.pageConfig;
let { pagination, isChecked, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="dailyTrain-bottom-right" id="dailyTrain-bottom-right">
<div className="dailyTrain-bottom-right-content">
<div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
);
}
}
DailyTrainRight.propTypes = {};
export default DailyTrainRight;
src/view/monitor/dailyTrain/index.js → src/view/monitor/duty/dailyTrain/index.js
View file @ 4d1ac2ff
...@@ -2,12 +2,10 @@ import React, { Component } from 'react'; ...@@ -2,12 +2,10 @@ import React, { Component } from 'react';
import DailyTrainyLeft from './DailyTrainLeft'; import DailyTrainyLeft from './DailyTrainLeft';
import DailyTrainRight from './DailyTrainRight'; import DailyTrainRight from './DailyTrainRight';
/** /**
* 日常训练模块 * 日常训练模块
*/ */
export default class DailyTrain extends Component { export default class DailyTrain extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -15,27 +13,25 @@ export default class DailyTrain extends Component { ...@@ -15,27 +13,25 @@ export default class DailyTrain extends Component {
}; };
} }
componentDidMount(){ componentDidMount() {
//右侧窗口默认显示第一个数据查询的列表 //右侧窗口默认显示第一个数据查询的列表
this.list && this.list.onRequestTable((list) => this.onEditClick(list[0])) this.list && this.list.onRequestTable(list => this.onEditClick(list[0]));
} }
onEditClick = (record) => { onEditClick = record => {
this.listTwo.onEdit(record.key) this.listTwo.onEdit(record.key);
} };
render() { render() {
return ( return (
<div className="dailyTrain-safety"> <div className="dailyTrain-safety">
<div className="dailyTrain-safty-content"> <div className="dailyTrain-safty-content">
<div className="dailyTrain-top"></div> <div className="dailyTrain-top" />
<div className="dailyTrain-bottom"> <div className="dailyTrain-bottom">
<DailyTrainyLeft ref={node => this.list = node} onEditClick={this.onEditClick}/> <DailyTrainyLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<DailyTrainRight ref={node => this.listTwo = node}/> <DailyTrainRight ref={node => (this.listTwo = node)} />
</div> </div>
</div> </div>
</div> </div>
); );
} }
......
src/view/monitor/duty/equipmentMaintain/EquipmentMaintainLeft.js 0 → 100644
View file @ 4d1ac2ff
import React, { Component } from 'react';
import { Input } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable';
const Search = Input.Search;
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
align: 'center', // 设置文本居中的属性
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '换流站名称',
width: '20%',
dataIndex: 'name',
render: val => <span style={{ color: 'yellow' }}>{val}</span>
},
{
title: '装备类型',
width: '10%',
dataIndex: 'zblx',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '累计保养',
width: '10%',
dataIndex: 'ljby',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '保养中',
width: '10%',
dataIndex: 'byz',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: <div className="safe-table-title-font-red">逾期保养</div>,
width: '20%',
dataIndex: 'yqby',
render: val => <span style={{ color: 'red' }}>{val}</span>
},
{
title: <div className="safe-table-title-font-red">逾期占比</div>,
width: '20%',
dataIndex: 'yqzb',
render: val => <span style={{ color: 'red' }}>{val}</span>
}
];
const data = [
{
key: '1',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '2',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '3',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '4',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '5',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '6',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '7',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '8',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '9',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '10',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '11',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '12',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '13',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '14',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '15',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '16',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '17',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '18',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '19',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '20',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '21',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '22',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '23',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '225',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '25',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '26',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '27',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '28',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
},
{
key: '29',
name: '复龙换流站',
zblx: 9,
ljby: 170,
byz: 100,
yqby: 20,
yqzb: '16.7%'
}
];
/**
* 器材保养左侧
*/
class EquipmentMaintainLeft extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 14
};
this.state = {
data: [],
loading: false,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight: 450
};
}
componentDidMount() {
const { pagination } = this.state;
var box1 = document.getElementById('equipmentMaintain-bottom-left');
var box2 = document.getElementById('one-div');
if (box1 && box2) {
//此处在加一层判断，更加严密，如果box存在的情况下获取
console.log(box1.offsetHeight);
console.log(box2.offsetHeight);
this.setState({
tableHeight: box1.offsetHeight - box2.offsetHeight
});
}
}
onRequestTable = callback => {
this.setState({
data: data,
totalCount: data.length
});
callback && callback(data);
};
onChange = (value, item) => {
console.log(value, item);
};
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
};
onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item);
};
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () => {
this.setState({
data: data
});
};
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData = () => {
let name = this.state.fname;
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
};
getPanelHeight = () => {
//计算表格高度
var box1 = document.getElementById('equipmentMaintain-bottom-left');
if (box1) {
//此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91;
}
};
SearchChange = value => {
alert(value);
};
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() {
let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state;
const { onEditClick } = this.props;
let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="equipmentMaintain-bottom-left" id="equipmentMaintain-bottom-left">
<div className="equipmentMaintain-bottom-left-content">
<div className="one-div" id="one-div">
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={record => onEditClick(record)}
/>
</div>
</div>
</div>
);
}
}
EquipmentMaintainLeft.propTypes = {};
export default EquipmentMaintainLeft;
src/view/monitor/equipmentMaintain/EquipmentMaintainRight.js → src/view/monitor/duty/equipmentMaintain/EquipmentMaintainRight.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable'; import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;
const columns = [ const columns = [
{ {
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
width: '10%', width: '10%',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '装备名称', title: '装备名称',
width: '20%', width: '20%',
dataIndex: 'zbmc', dataIndex: 'zbmc',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '装备分类', title: '装备分类',
width: '20%', width: '20%',
dataIndex: 'zbfl', dataIndex: 'zbfl',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '计量单位', title: '计量单位',
width: '20%', width: '20%',
dataIndex: 'jldw', dataIndex: 'jldw',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '保养周期', title: '保养周期',
width: '20%', width: '20%',
dataIndex: 'byzq', dataIndex: 'byzq',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: <div className='safe-table-title-font-red-right'>逾期数量</div>, title: <div className="safe-table-title-font-red-right">逾期数量</div>,
width: '10%', width: '10%',
dataIndex: 'dbtj', dataIndex: 'dbtj',
render: val => <span style={{color:"red"}}>{val}</span>, render: val => <span style={{ color: 'red' }}>{val}</span>
} }
]; ];
const data = [ const data = [
{ {
key: '1', key: '1',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '2', key: '2',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '3', key: '3',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '4', key: '4',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '5', key: '5',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '6', key: '6',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '7', key: '7',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '8', key: '8',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '9', key: '9',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '10', key: '10',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '11', key: '11',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '12', key: '12',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '13', key: '13',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '14', key: '14',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '15', key: '15',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '16', key: '16',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '17', key: '17',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '18', key: '18',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '19', key: '19',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '20', key: '20',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '21', key: '21',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '22', key: '22',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '23', key: '23',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '225', key: '225',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '25', key: '25',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '26', key: '26',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '27', key: '27',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '28', key: '28',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
}, },
{ {
key: '29', key: '29',
zbmc: '灭火防护服', zbmc: '灭火防护服',
zbfl: "个人防护类", zbfl: '个人防护类',
jldw:'个', jldw: '个',
byzq: '6月', byzq: '6月',
dbtj:12, dbtj: 12
} }
]; ];
const selectdata = [ const selectdata = [
{ id: 0, name: '消防理论知识培训' }, { id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' }, { id: 1, name: '消防技能培训' },
...@@ -303,22 +284,16 @@ const selectdata = [ ...@@ -303,22 +284,16 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' }, { id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' } { id: 5, name: '用火用电管理' }
]; ];
//偏移 //偏移
const offsetHeight = 110; const offsetHeight = 110;
const defaultHeight = 450; const defaultHeight = 450;
/** /**
* 器材保养右侧 * 器材保养右侧
*/ */
class EquipmentMaintainRight extends Component { class EquipmentMaintainRight extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = { this.pageConfig = {
...@@ -328,39 +303,38 @@ class EquipmentMaintainRight extends Component { ...@@ -328,39 +303,38 @@ class EquipmentMaintainRight extends Component {
this.state = { this.state = {
data: [], data: [],
loading: false, loading: false,
equimentId:null, equimentId: null,
pagination: true, pagination: true,
isChecked: false, isChecked: false,
selectedRows: [], selectedRows: [],
selectedRowKeys: [], selectedRowKeys: [],
dataList: [], dataList: [],
newDataList:[], newDataList: [],
totalCount:0, totalCount: 0,
searchParam:'', searchParam: '',
fname:'', fname: '',
current: 1, current: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
tableHeight:450 tableHeight: 450
}; };
} }
componentDidMount() { componentDidMount() {
const { pagination } = this.state; const { pagination } = this.state;
var box1=document.getElementById("equipmentMaintain-bottom-left"); var box1 = document.getElementById('equipmentMaintain-bottom-left');
var box2=document.getElementById("one-div"); var box2 = document.getElementById('one-div');
if(box1 && box2){ //此处在加一层判断，更加严密，如果box存在的情况下获取 if (box1 && box2) {
console.log(box1.offsetHeight); //此处在加一层判断，更加严密，如果box存在的情况下获取
console.log(box2.offsetHeight); console.log(box1.offsetHeight);
this.setState({ console.log(box2.offsetHeight);
tableHeight:(box1.offsetHeight-box2.offsetHeight) this.setState({
}) tableHeight: box1.offsetHeight - box2.offsetHeight
});
} }
} }
onEdit = (id) => { onEdit = id => {
// this.type = 'edit'; // this.type = 'edit';
// electricFireDetailsAction(id).then(d => { // electricFireDetailsAction(id).then(d => {
// this.setState({ // this.setState({
...@@ -368,37 +342,29 @@ class EquipmentMaintainRight extends Component { ...@@ -368,37 +342,29 @@ class EquipmentMaintainRight extends Component {
// title: d.name // title: d.name
// }) // })
// }) // })
console.log("id:" + id) console.log('id:' + id);
this.setState({ this.setState({
data:data, data: data,
totalCount:data.length totalCount: data.length
}) });
} };
onChange = (value, item) =>{
onChange = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
onTimeChange= (value, dateString)=> { onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value); console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString); console.log('Formatted Selected Time: ', dateString);
} };
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{ onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
reload = r => { reload = r => {
this.setState( this.setState(
...@@ -412,12 +378,11 @@ class EquipmentMaintainRight extends Component { ...@@ -412,12 +378,11 @@ class EquipmentMaintainRight extends Component {
); );
}; };
getAcitonData = () => {
getAcitonData = () =>{ // this.setState({
// this.setState({ // data:data
// data:data // })
// }) };
}
/** /**
* 分页设置参数 * 分页设置参数
...@@ -430,7 +395,7 @@ class EquipmentMaintainRight extends Component { ...@@ -430,7 +395,7 @@ class EquipmentMaintainRight extends Component {
this.pageConfig.pageNumber = current; this.pageConfig.pageNumber = current;
} }
}; };
/** /**
* 获取表格所选则的行数据 * 获取表格所选则的行数据
*/ */
getSelectedRows = (selectedRows, selectedRowKeys) => { getSelectedRows = (selectedRows, selectedRowKeys) => {
...@@ -439,87 +404,68 @@ class EquipmentMaintainRight extends Component { ...@@ -439,87 +404,68 @@ class EquipmentMaintainRight extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId); // callBack(selectedRowKeys,riskSourceId,equipmentId);
}; };
searchData =()=>{ searchData = () => {
let name = this.state.fname; let name = this.state.fname;
alert(name) alert(name);
} };
onChange = (e,value) =>{ onChange = (e, value) => {
this.setState({ fname: value }); this.setState({ fname: value });
} };
getPanelHeight = () => { getPanelHeight = () => {
// //计算表格高度 // //计算表格高度
// var box1=document.getElementById("equipmentMaintain-bottom-right"); // var box1=document.getElementById("equipmentMaintain-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取 // if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91; // return box1.offsetHeight * 0.91;
// } // }
return 300 return 300;
}; };
SearchChange = (value) => { SearchChange = value => {
alert(value) alert(value);
} };
rowClassName = (record, index) => { rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02'; let className = index % 2 ? 'back-01' : 'back-02';
return className return className;
} };
render() { render() {
let defaultPageConfig = this.pageConfig; let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state; const { current, pageSize, total } = this.state;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state; let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return ( return (
<div className="equipmentMaintain-bottom-right" id="equipmentMaintain-bottom-right"> <div className="equipmentMaintain-bottom-right" id="equipmentMaintain-bottom-right">
<div className="equipmentMaintain-bottom-right-content"> <div className="equipmentMaintain-bottom-right-content">
<div className="one-div"> <div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
<div className=" content-font-wenzi"> 中州换流站</div> </div>
<div className="two-div">
<AmosGridTable
columns={columns}
</div> dataList={data}
<div className="two-div"> isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
<AmosGridTable getTableDataAction={this.getAcitonData}
columns={columns} isChecked={isChecked}
dataList={data} setPageConfig={this.setPageConfig}
isPageable={pagination} defaultPageConfig={defaultPageConfig}
totals={totalCount} getPanelHeight={this.getPanelHeight}
callBack={this.reload} rowClassName={this.rowClassName}
selectedRowKeys={selectedRowKeys} />
getSelectedRows={this.getSelectedRows} </div>
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div> </div>
</div> </div>
); );
} }
} }
EquipmentMaintainRight.propTypes = {};
EquipmentMaintainRight.propTypes = {
};
export default EquipmentMaintainRight; export default EquipmentMaintainRight;
src/view/monitor/equipmentMaintain/index.js → src/view/monitor/duty/equipmentMaintain/index.js
View file @ 4d1ac2ff
...@@ -2,12 +2,10 @@ import React, { Component } from 'react'; ...@@ -2,12 +2,10 @@ import React, { Component } from 'react';
import EquipmentMaintainLeft from './EquipmentMaintainLeft'; import EquipmentMaintainLeft from './EquipmentMaintainLeft';
import EquipmentMaintainRight from './EquipmentMaintainRight'; import EquipmentMaintainRight from './EquipmentMaintainRight';
/** /**
* 器材保养模块 * 器材保养模块
*/ */
export default class EquipmentMaintainTrain extends Component { export default class EquipmentMaintainTrain extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -15,27 +13,25 @@ export default class EquipmentMaintainTrain extends Component { ...@@ -15,27 +13,25 @@ export default class EquipmentMaintainTrain extends Component {
}; };
} }
componentDidMount(){ componentDidMount() {
//右侧窗口默认显示第一个数据查询的列表 //右侧窗口默认显示第一个数据查询的列表
this.list && this.list.onRequestTable((list) => this.onEditClick(list[0])) this.list && this.list.onRequestTable(list => this.onEditClick(list[0]));
} }
onEditClick = (record) => { onEditClick = record => {
this.listTwo.onEdit(record.key) this.listTwo.onEdit(record.key);
} };
render() { render() {
return ( return (
<div className="equipmentMaintain-safety"> <div className="equipmentMaintain-safety">
<div className="equipmentMaintain-safty-content"> <div className="equipmentMaintain-safty-content">
<div className="equipmentMaintain-top"></div> <div className="equipmentMaintain-top"></div>
<div className="equipmentMaintain-bottom"> <div className="equipmentMaintain-bottom">
<EquipmentMaintainLeft ref={node => this.list = node} onEditClick={this.onEditClick}/> <EquipmentMaintainLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<EquipmentMaintainRight ref={node => this.listTwo = node}/> <EquipmentMaintainRight ref={node => (this.listTwo = node)} />
</div> </div>
</div> </div>
</div> </div>
); );
} }
......
src/view/monitor/firestrength/FireStrengthDetail.js → src/view/monitor/duty/firestrength/FireStrengthDetail.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Tabs } from 'amos-antd'; import { Tabs } from 'amos-antd';
const { TabPane} = Tabs;
const { TabPane } = Tabs;
/** /**
* 消防实力统计详情 * 消防实力统计详情
*/ */
class FireStrengthDetail extends Component { class FireStrengthDetail extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -17,34 +14,27 @@ class FireStrengthDetail extends Component { ...@@ -17,34 +14,27 @@ class FireStrengthDetail extends Component {
}; };
} }
componentDidMount() { componentDidMount() {}
}
render() { render() {
return ( return (
<div className="fire-strength-detail"> <div className="fire-strength-detail">
<Tabs defaultactivekey="1" type="card"> <Tabs defaultactivekey="1" type="card">
<TabPane tab="Tab 1" key="1"> <TabPane tab="Tab 1" key="1">
Content of Tab Pane 1 Content of Tab Pane 1
</TabPane> </TabPane>
<TabPane tab="Tab 2" key="2"> <TabPane tab="Tab 2" key="2">
Content of Tab Pane 2 Content of Tab Pane 2
</TabPane> </TabPane>
<TabPane tab="Tab 3" key="3"> <TabPane tab="Tab 3" key="3">
Content of Tab Pane 3 Content of Tab Pane 3
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
); );
} }
} }
FireStrengthDetail.propTypes = { FireStrengthDetail.propTypes = {};
};
export default FireStrengthDetail; export default FireStrengthDetail;
src/view/monitor/duty/index.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import loadScripts from 'dt2react/lib/utils/loadScripts';
import { outMap } from './../../../consts/urlConsts';
import CenterLevelLeft from './statistical/indexLeft';
import CenterLevelRight from './statistical/indexRight';
/** /**
* duty * duty
...@@ -11,32 +14,63 @@ class Duty extends Component { ...@@ -11,32 +14,63 @@ class Duty extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
loadAmap: false,
BasicMap: null,
flag: false
}; };
} }
componentWillMount() { componentWillMount() {}
componentDidMount() {
this.initMap();
} }
componentDidMount() { componentWillUnmount() {}
} initMap() {
if (outMap) {
let script = null;
let mainUI = null;
componentWillUnmount() { script = {
key: 'amapscripts',
url: `/extra/amap/js/outamap.1.4.6.js?rnd= ${Math.random()}`
};
mainUI = {
key: 'mainUI',
url: '/extra/amap/js/outmain.1.4.6.js'
};
loadScripts.asyncLoadScript(script, () => {
loadScripts.asyncLoadScript(mainUI, () => {
setTimeout(() => {
this.setState({
loadAmap: true,
BasicMap: require('./mapScreen/BasicMap')
});
}, 2000);
});
});
} else {
this.setState({
loadAmap: true,
BasicMap: require('./mapScreen/BasicMap')
});
}
} }
render() { render() {
let BasicMap = this.state.BasicMap;
return ( return (
<div className="duty-root"> <div className="duty-root">
{this.state.loadAmap && <BasicMap />}
<CenterLevelLeft />
<CenterLevelRight />
</div> </div>
); );
} }
} }
Duty.propTypes = { Duty.propTypes = {};
};
export default Duty; export default Duty;
src/view/monitor/mapScreen/BasicMap.js → src/view/monitor/duty/mapScreen/BasicMap.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import { BaseMap, Marker, Polyline } from 'amos-amap';
import classNames from 'classnames'; import { _picURI, _mapCenter,outMap } from './../../../../consts/urlConsts';
import { BaseMap, Marker, Polyline, Circle } from 'amos-amap'; import imgStatic from './../../../../consts/imgStatic';
import { _picURI, _mapCenter } from './../../../consts/urlConsts'; import mapData from './../../../../_mock/mapData';
import imgStatic from './../../../consts/imgStatic';
import mapData from './../../../_mock/mapData';
import { getIcon } from './conf'; import { getIcon } from './conf';
import { up } from './conf'; import { up } from './conf';
import { utils } from 'amos-tool';
import { outMap } from './../../../consts/urlConsts';
const mapIcon = imgStatic.mapIcon; const mapIcon = imgStatic.mapIcon;
const showZoom = 5; const showZoom = 5;
...@@ -16,7 +13,6 @@ const mapConfig = { ...@@ -16,7 +13,6 @@ const mapConfig = {
zoom: showZoom, zoom: showZoom,
resizeEnable: true, resizeEnable: true,
zoomEnable: true, zoomEnable: true,
// plugins: ['Scale', 'MapType', 'OverView', 'ControlBar'],
plugins: ['Scale'], plugins: ['Scale'],
zooms: [showZoom, showZoom], zooms: [showZoom, showZoom],
expandZoomRange: true, expandZoomRange: true,
...@@ -36,7 +32,6 @@ const layers = [ ...@@ -36,7 +32,6 @@ const layers = [
const statusEnum = { '2': '告警', '3': '高风险' }; const statusEnum = { '2': '告警', '3': '高风险' };
/** /**
* 地图首页 * 地图首页
* *
...@@ -55,14 +50,14 @@ class BasicMap extends Component { ...@@ -55,14 +50,14 @@ class BasicMap extends Component {
}; };
} }
componentDidMount(){ componentDidMount() {
this.initData(); this.initData();
} }
initData = () => { initData = () => {
let temp = []; let temp = [];
mapData.map(item => { mapData.map(item => {
if (item.status !== 1){ if (item.status !== 1) {
temp.push(item); temp.push(item);
} }
}); });
...@@ -70,23 +65,23 @@ class BasicMap extends Component { ...@@ -70,23 +65,23 @@ class BasicMap extends Component {
this.setState({ this.setState({
alarmList: temp alarmList: temp
}); });
} };
initMap = () => { initMap = () => {
window.map.on('click', function(e) { window.map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat() document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
}); });
}; };
onClick = (e) =>{ onClick = e => {
let visibleList = e.aliasName; let visibleList = e.aliasName;
let num = 0; let num = 0;
let temp = {}; let temp = {};
mapData.map(item => { mapData.map(item => {
if (visibleList.includes(item.name)){ if (visibleList.includes(item.name)) {
num = num + 1; num = num + 1;
item.title = true; item.title = true;
if (num === 1 ){ if (num === 1) {
temp = item; temp = item;
} }
} else { } else {
...@@ -97,39 +92,39 @@ class BasicMap extends Component { ...@@ -97,39 +92,39 @@ class BasicMap extends Component {
visible: true, visible: true,
selectData: temp selectData: temp
}); });
setTimeout(()=>{ setTimeout(() => {
this.setState({ this.setState({
visible: false visible: false
}); });
},500); }, 500);
} };
renderAliasLine = (e) => { renderAliasLine = e => {
let { selectData } = this.state; let { selectData } = this.state;
let divStyle = { let divStyle = {
marginTop: '-11px', marginTop: '-11px',
transform: `rotate(${selectData.gradient}deg)` transform: `rotate(${selectData.gradient}deg)`
}; };
if (selectData.gradient <= 0){ if (selectData.gradient <= 0) {
divStyle.marginTop = '-50px'; divStyle.marginTop = '-50px';
} }
if (selectData.position === 'right'){ if (selectData.position === 'right') {
divStyle.right = '0px'; divStyle.right = '0px';
} }
if (selectData.pathName){ if (selectData.pathName) {
return ( return (
<Marker key={selectData.id} zIndex={1} position={{ longitude: selectData.lng, latitude: selectData.lat }}> <Marker key={selectData.id} zIndex={1} position={{ longitude: selectData.lng, latitude: selectData.lat }}>
<div className={`content-alias`} style={divStyle}> <div className={`content-alias`} style={divStyle}>
<img src={mapIcon.alias_line} style={{ width: `${selectData.width}px`, height: `${selectData.height}px` }}></img> <img src={mapIcon.alias_line} style={{ width: `${selectData.width}px`, height: `${selectData.height}px` }} />
<img src={mapIcon.alias_title} className='alias-title'></img> <img src={mapIcon.alias_title} className="alias-title" />
<span style={{ width: `${selectData.width}px` }}>{selectData.pathName}</span> <span style={{ width: `${selectData.width}px` }}>{selectData.pathName}</span>
</div> </div>
</Marker> </Marker>
); );
} }
} };
/** /**
* 设置末端marker * 设置末端marker
...@@ -137,28 +132,33 @@ class BasicMap extends Component { ...@@ -137,28 +132,33 @@ class BasicMap extends Component {
* @memberof BasicMap * @memberof BasicMap
*/ */
setBodyMarker = () => { setBodyMarker = () => {
let { aliasName } = this.state;
return (mapData || []).map((item, index) => { return (mapData || []).map((item, index) => {
if (item.type === 'center') { if (item.type === 'center') {
return (<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}> return (
<div className={`marker-center`}> <Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
<div className='title'> <div className={`marker-center`}>
<span>{item.name}</span> <div className="title">
<img src={mapIcon.endmost_title_2} /> <span>{item.name}</span>
<img src={mapIcon.endmost_title_2} />
</div>
<img src={getIcon(item.type, item.status)}></img>
</div> </div>
<img src={getIcon(item.type, item.status)}></img> </Marker>
</div> );
</Marker>);
} else { } else {
return (<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}> return (
<div className={`marker-icon`}> <Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
{ item.title && <div className='title'> <div className={`marker-icon`}>
<span>{item.name}</span> {item.title && (
<img src={getIcon(item.type, 'title_' + item.status)} /> <div className="title">
</div>} <span>{item.name}</span>
<img src={getIcon(item.type, item.status)} onClick={() => this.onClick(item)}></img> <img src={getIcon(item.type, 'title_' + item.status)} />
</div> </div>
</Marker>); )}
<img src={getIcon(item.type, item.status)} onClick={() => this.onClick(item)}></img>
</div>
</Marker>
);
} }
}); });
}; };
...@@ -172,13 +172,7 @@ class BasicMap extends Component { ...@@ -172,13 +172,7 @@ class BasicMap extends Component {
let { lineStyle } = this.state; let { lineStyle } = this.state;
return (mapData || []).map((item, index) => { return (mapData || []).map((item, index) => {
if (item) { if (item) {
return ( <Polyline return <Polyline key={item.id} zIndex={11} path={item.path} style={lineStyle} extData={item} />;
key={item.id}
zIndex={11}
path={item.path}
style={lineStyle}
extData={item}
/>);
} }
}); });
}; };
...@@ -187,37 +181,38 @@ class BasicMap extends Component { ...@@ -187,37 +181,38 @@ class BasicMap extends Component {
let { alarmList } = this.state; let { alarmList } = this.state;
return (alarmList || []).map((item, index) => { return (alarmList || []).map((item, index) => {
if (item) { if (item) {
return (<div className={`row-${item.status}`} key={index}> return (
<span>{item.name}</span> <div className={`row-${item.status}`} key={index}>
<span className='right'>{statusEnum[item.status]}</span> <span>{item.name}</span>
</div>); <span className="right">{statusEnum[item.status]}</span>
</div>
);
} }
}); });
} };
buildExplain = () => { buildExplain = () => {
return ( return (
<div className='content-explain'> <div className="content-explain">
<div className='row'> <div className="row">
<div className='fault'></div> <div className="fault"></div>
<span>高风险</span> <span>高风险</span>
</div> </div>
<div className='row'> <div className="row">
<div className='alarm'></div> <div className="alarm"></div>
<span>告警</span> <span>告警</span>
</div> </div>
<div className='row'> <div className="row">
<div className='normal'></div> <div className="normal"></div>
<span>安全</span> <span>安全</span>
</div> </div>
</div> </div>
); );
} };
setInstanceToGlobal = inst => { setInstanceToGlobal = inst => {
this.map = inst; this.map = inst;
window.map = inst; window.map = inst;
//this.initMap();
}; };
render() { render() {
...@@ -231,20 +226,15 @@ class BasicMap extends Component { ...@@ -231,20 +226,15 @@ class BasicMap extends Component {
let { mapCenter, visible } = this.state; let { mapCenter, visible } = this.state;
return ( return (
<div className="map-root"> <div className="map-root">
<div className='content-alarm'> <div className="content-alarm">{this.buildAlarm()}</div>
{this.buildAlarm()} {visible && (
</div> <div className="loading">
{visible && <div className='loading'> <img src={mapIcon.loading}></img>
<img src={mapIcon.loading}></img> <span>数据更新完毕！</span>
<span>数据更新完毕！</span> </div>
</div>} )}
<div className='map'> <div className="map">
<BaseMap events={events} <BaseMap events={events} useAMapUI center={mapCenter} {...mapConfig} dragEnable={false}>
useAMapUI
center={mapCenter}
{...mapConfig}
dragEnable={false}
>
{this.setBodyMarker()} {this.setBodyMarker()}
{this.setBodyLine()} {this.setBodyLine()}
{this.renderAliasLine()} {this.renderAliasLine()}
...@@ -261,7 +251,6 @@ class BasicMap extends Component { ...@@ -261,7 +251,6 @@ class BasicMap extends Component {
} }
} }
BasicMap.propTypes = { BasicMap.propTypes = {};
};
export default BasicMap; export default BasicMap;
src/view/monitor/mapScreen/conf.js → src/view/monitor/duty/mapScreen/conf.js
View file @ 4d1ac2ff
import imgStatic from './../../../consts/imgStatic'; import imgStatic from './../../../../consts/imgStatic';
const mapIcon = imgStatic.mapIcon;
const mapIcon = imgStatic.mapIcon;
export const up = (x,y) => { export const up = (x,y) => {
return y.status - x.status; return y.status - x.status;
}; };
export const getIcon = (type, status) => { export const getIcon = (type, status) => {
return mapIcon[`${type}_${status}`]; return mapIcon[`${type}_${status}`];
}; };
src/view/monitor/safetyInspection/SafetyInspectionLeft.js → src/view/monitor/duty/safetyInspection/SafetyInspectionLeft.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts'; import { Input } from 'amos-antd';
import { Table } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable'; import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search; const Search = Input.Search;
const columns = [ const columns = [
...@@ -22,45 +9,44 @@ const columns = [ ...@@ -22,45 +9,44 @@ const columns = [
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
width: '10%', width: '10%',
align: 'center', // 设置文本居中的属性 align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '换流站名称', title: '换流站名称',
width: '20%', width: '20%',
dataIndex: 'name', dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>, render: val => <span style={{ color: 'yellow' }}>{val}</span>
}, },
{ {
title: <div className = "safe-table-title-font-grey">日巡检计划</div>, title: <div className="safe-table-title-font-grey">日巡检计划</div>,
width: '15%', width: '15%',
dataIndex: 'rxjjh', dataIndex: 'rxjjh',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: <div className = "safe-table-title-font-grey">月巡检计划</div>, title: <div className="safe-table-title-font-grey">月巡检计划</div>,
width: '15%', width: '15%',
dataIndex: 'yxjjh', dataIndex: 'yxjjh',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: <div className = "safe-table-title-font-grey">季度巡检计划</div>, title: <div className="safe-table-title-font-grey">季度巡检计划</div>,
width: '15%', width: '15%',
dataIndex: 'jdxjjh', dataIndex: 'jdxjjh',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '发现隐患数', title: '发现隐患数',
width: '10%', width: '10%',
dataIndex: 'fxyhs', dataIndex: 'fxyhs',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '处理隐患数', title: '处理隐患数',
width: '15%', width: '15%',
dataIndex: 'clyhs', dataIndex: 'clyhs',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
} }
]; ];
const data = [ const data = [
...@@ -68,289 +54,269 @@ const data = [ ...@@ -68,289 +54,269 @@ const data = [
key: '1', key: '1',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '2', key: '2',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '3', key: '3',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '4', key: '4',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '5', key: '5',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '6', key: '6',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '7', key: '7',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '8', key: '8',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '9', key: '9',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '10', key: '10',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '11', key: '11',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '12', key: '12',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '13', key: '13',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '14', key: '14',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '15', key: '15',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '16', key: '16',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '17', key: '17',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '18', key: '18',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '19', key: '19',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '20', key: '20',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '21', key: '21',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '22', key: '22',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '23', key: '23',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '225', key: '225',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '25', key: '25',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '26', key: '26',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '27', key: '27',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '28', key: '28',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
}, },
{ {
key: '29', key: '29',
name: '复龙换流站', name: '复龙换流站',
rxjjh: 170, rxjjh: 170,
yxjjh:100, yxjjh: 100,
jdxjjh:270, jdxjjh: 270,
fxyhs: 3, fxyhs: 3,
clyhs:7, clyhs: 7
} }
]; ];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/** /**
* 安全巡检 * 安全巡检
*/ */
class SafetyInspectionLeft extends Component { class SafetyInspectionLeft extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = { this.pageConfig = {
...@@ -360,53 +326,41 @@ class SafetyInspectionLeft extends Component { ...@@ -360,53 +326,41 @@ class SafetyInspectionLeft extends Component {
this.state = { this.state = {
data: [], data: [],
loading: false, loading: false,
equimentId:null, equimentId: null,
pagination: true, pagination: true,
isChecked: false, isChecked: false,
selectedRows: [], selectedRows: [],
selectedRowKeys: [], selectedRowKeys: [],
dataList: [], dataList: [],
newDataList:[], newDataList: [],
totalCount:0, totalCount: 0,
searchParam:'', searchParam: '',
fname:'', fname: '',
current: 1, current: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
tableHeight:450 tableHeight: 450
}; };
} }
componentDidMount() { componentDidMount() {}
}
onChange = (value, item) =>{
onChange = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
onTimeChange= (value, dateString)=> { onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value); console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString); console.log('Formatted Selected Time: ', dateString);
} };
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{ onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
reload = r => { reload = r => {
this.setState( this.setState(
...@@ -420,12 +374,11 @@ class SafetyInspectionLeft extends Component { ...@@ -420,12 +374,11 @@ class SafetyInspectionLeft extends Component {
); );
}; };
getAcitonData = () => {
getAcitonData = () =>{ this.setState({
this.setState({ data: data
data:data });
}) };
}
/** /**
* 分页设置参数 * 分页设置参数
...@@ -438,7 +391,7 @@ class SafetyInspectionLeft extends Component { ...@@ -438,7 +391,7 @@ class SafetyInspectionLeft extends Component {
this.pageConfig.pageNumber = current; this.pageConfig.pageNumber = current;
} }
}; };
/** /**
* 获取表格所选则的行数据 * 获取表格所选则的行数据
*/ */
getSelectedRows = (selectedRows, selectedRowKeys) => { getSelectedRows = (selectedRows, selectedRowKeys) => {
...@@ -447,89 +400,71 @@ class SafetyInspectionLeft extends Component { ...@@ -447,89 +400,71 @@ class SafetyInspectionLeft extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId); // callBack(selectedRowKeys,riskSourceId,equipmentId);
}; };
searchData =()=>{ searchData = () => {
let name = this.state.fname; let name = this.state.fname;
alert(name) alert(name);
} };
onChange = (e,value) =>{ onChange = (e, value) => {
this.setState({ fname: value }); this.setState({ fname: value });
} };
getPanelHeight = () => { getPanelHeight = () => {
//计算表格高度 //计算表格高度
var box1=document.getElementById("safetyInspection-bottom-left"); var box1 = document.getElementById('safetyInspection-bottom-left');
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取 if (box1) {
return box1.offsetHeight * 0.91 //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91;
} }
}; };
SearchChange = (value) => { SearchChange = value => {
alert(value) alert(value);
} };
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() { render() {
let defaultPageConfig = this.pageConfig; let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state; const { current, pageSize, total } = this.state;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state; let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return ( return (
<div className="safetyInspection-bottom-left" id="safetyInspection-bottom-left"> <div className="safetyInspection-bottom-left" id="safetyInspection-bottom-left">
<div className="safetyInspection-bottom-left-content"> <div className="safetyInspection-bottom-left-content">
<div className="one-div" id="one-div"> <div className="one-div" id="one-div">
<div className="search-one"> <div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */} {/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input"> <div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} /> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div> </div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div> </div>
</div> </div>
); );
} }
} }
SafetyInspectionLeft.propTypes = {};
SafetyInspectionLeft.propTypes = {
};
export default SafetyInspectionLeft; export default SafetyInspectionLeft;
src/view/monitor/safetyInspection/index.js → src/view/monitor/duty/safetyInspection/index.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import SafetyInspectionLeft from './SafetyInspectionLeft'; import SafetyInspectionLeft from './SafetyInspectionLeft';
/** /**
* 安全巡检模块 * 安全巡检模块
*/ */
export default class SafetyInspection extends Component { export default class SafetyInspection extends Component {
render() { render() {
return ( return (
<div className="safetyInspection-safety"> <div className="safetyInspection-safety">
<div className="safetyInspection-safty-content"> <div className="safetyInspection-safty-content">
<div className="safetyInspection-top"></div> <div className="safetyInspection-top"></div>
<div className="safetyInspection-bottom"> <div className="safetyInspection-bottom">
<SafetyInspectionLeft /> <SafetyInspectionLeft />
</div>
</div> </div>
</div>
</div> </div>
); );
} }
......
src/view/monitor/safetyManage/AmosGridTable.js → src/view/monitor/duty/safetyManage/AmosGridTable.js
View file @ 4d1ac2ff
...@@ -3,9 +3,6 @@ import PropTypes from 'prop-types'; ...@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
import { Table } from 'amos-antd'; import { Table } from 'amos-antd';
import { Log } from 'amos-tool'; import { Log } from 'amos-tool';
/** /**
* 基础信息表格组件 * 基础信息表格组件
* @class AmosGridTable * @class AmosGridTable
...@@ -15,15 +12,15 @@ class AmosGridTable extends Component { ...@@ -15,15 +12,15 @@ class AmosGridTable extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
selectedRowKeys: [],//表格选择的行key值集合 selectedRowKeys: [], //表格选择的行key值集合
selectedRows: [],//表格选择的行数据集合 selectedRows: [], //表格选择的行数据集合
loading: false,//页面是否加载中,默认false loading: false, //页面是否加载中,默认false
dataList: [],//表格数据集合 dataList: [], //表格数据集合
size: 'middle',//表格大小 size: 'middle', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0 current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量 pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10, //当前页数据量
filter: {},//表格过滤条件 filter: {}, //表格过滤条件
totals: 1,//所有数据总和 totals: 1, //所有数据总和
showFilter: true, showFilter: true,
otherFilter: props.otherFilter, otherFilter: props.otherFilter,
maxHeight: 450 maxHeight: 450
...@@ -40,10 +37,10 @@ class AmosGridTable extends Component { ...@@ -40,10 +37,10 @@ class AmosGridTable extends Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url){ if (nextProps.url !== this.props.url) {
this.reload(); this.reload();
} }
if (nextProps.otherFilter && nextProps.otherFilter !== this.props.otherFilter){ if (nextProps.otherFilter && nextProps.otherFilter !== this.props.otherFilter) {
this.setState({ otherFilter: nextProps.otherFilter }, this.reload); this.setState({ otherFilter: nextProps.otherFilter }, this.reload);
} }
} }
...@@ -52,104 +49,111 @@ class AmosGridTable extends Component { ...@@ -52,104 +49,111 @@ class AmosGridTable extends Component {
window.removeEventListener('resize', this.onWindowResize); window.removeEventListener('resize', this.onWindowResize);
} }
onWindowResize = (e) => { onWindowResize = e => {
this.getHeightOffset(); this.getHeightOffset();
} };
/** /**
* 获取复选框选择的数据，并进行回调 * 获取复选框选择的数据，并进行回调
*/ */
onSelectChange = (selectedRowKeys,selectedRows) => { onSelectChange = (selectedRowKeys, selectedRows) => {
this.setState({ this.setState(
selectedRowKeys, {
selectedRows selectedRowKeys,
},this.props.getSelectedRows(selectedRows,selectedRowKeys)); selectedRows
} },
this.props.getSelectedRows(selectedRows, selectedRowKeys)
);
};
/** /**
* 设置页面数据大小事件 * 设置页面数据大小事件
*/ */
onSizeChange = (current, pageSize) => { onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props; let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize }); setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload); this.setState({ current, pageSize }, this.reload);
} };
/** /**
* 设置当前页事件 * 设置当前页事件
*/ */
onPaginationChange = (current) => { onPaginationChange = current => {
let { setPageConfig } = this.props; let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current }); setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload); this.setState({ current }, this.reload);
} };
/** /**
* 获取表格所有的外部按钮封装成数组 * 获取表格所有的外部按钮封装成数组
*/ */
getbtns = () => { getbtns = () => {
let btns = []; let btns = [];
return <div key={`btntool`} className='amos-grid-oper-btn'>{this.props.operBtns}</div>; return (
} <div key={`btntool`} className="amos-grid-oper-btn">
{this.props.operBtns}
</div>
);
};
/** /**
* 获取表格数据的筛选条件，通过回调获得的，并通过该条件进行表格刷新获取 * 获取表格数据的筛选条件，通过回调获得的，并通过该条件进行表格刷新获取
*/ */
changeFilters = (obj) => { changeFilters = obj => {
let newobj = obj; let newobj = obj;
let res = {}; let res = {};
let list = Object.keys(newobj); let list = Object.keys(newobj);
list.map(e=>{ list.map(e => {
let varName = newobj[e]; let varName = newobj[e];
if (varName && varName !== ''){ if (varName && varName !== '') {
res[e] = varName; res[e] = varName;
if (e === 'enabled'){ if (e === 'enabled') {
res[e] = varName === '启用'; res[e] = varName === '启用';
} }
} }
}); });
this.setState({ filter: res },this.reload); this.setState({ filter: res }, this.reload);
} };
openFilter = () => { openFilter = () => {
let showFilter = this.state.showFilter; let showFilter = this.state.showFilter;
this.setState({ showFilter: !showFilter }); this.setState({ showFilter: !showFilter });
} };
/** /**
* 获取表格数据（刷新） * 获取表格数据（刷新）
*/ */
reload = () => { reload = () => {
let { current,pageSize,filter,otherFilter } = this.state; let { current, pageSize, filter, otherFilter } = this.state;
this.props.getTableDataAction({ current: current - 1, pageSize },JSON.stringify(filter),otherFilter); this.props.getTableDataAction({ current: current - 1, pageSize }, JSON.stringify(filter), otherFilter);
this.getHeightOffset(); this.getHeightOffset();
} };
/** /**
* 获取表格内部按钮 * 获取表格内部按钮
*/ */
addOperateCol =(text,record) =>{ addOperateCol = (text, record) => {
const { operateCol } = this.props; const { operateCol } = this.props;
let operBtns = operateCol(text,record); let operBtns = operateCol(text, record);
return (<div className='operation-buttons'>{operBtns}</div>); return <div className="operation-buttons">{operBtns}</div>;
} };
showTotal = (total) => { showTotal = total => {
return `共 ${total} 条`; return `共 ${total} 条`;
} };
generateRowkey = (record, index) => { generateRowkey = (record, index) => {
// return record.id ? record.id : UUID.uuidFast(); // 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 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; // return index + (this.state.current - 1) * this.state.pageSize;
} };
getHeightOffset = () => { getHeightOffset = () => {
let { getPanelHeight } = this.props; let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? 450 : getPanelHeight(); let height = getPanelHeight === undefined ? 450 : getPanelHeight();
height && this.setState({ maxHeight: height }); height && this.setState({ maxHeight: height });
} };
isVisableSearch(columns){ isVisableSearch(columns) {
let list = columns; let list = columns;
let res = false; let res = false;
list.map((e)=>{ list.map(e => {
if (e.query){ if (e.query) {
res = true; res = true;
return true; return true;
} }
...@@ -158,8 +162,8 @@ class AmosGridTable extends Component { ...@@ -158,8 +162,8 @@ class AmosGridTable extends Component {
} }
render() { render() {
const { loading, selectedRowKeys,size,maxHeight } = this.state; const { loading, selectedRowKeys, size, maxHeight } = this.state;
let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals,rowClassName, onRowClick, onRowDoubleClick } = this.props; let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals, rowClassName, onRowClick, onRowDoubleClick } = this.props;
//设置复选框参数 //设置复选框参数
let rowSelection = { let rowSelection = {
...@@ -169,75 +173,75 @@ class AmosGridTable extends Component { ...@@ -169,75 +173,75 @@ class AmosGridTable extends Component {
//设置是否添加复选框 //设置是否添加复选框
rowSelection = isChecked ? rowSelection : undefined; rowSelection = isChecked ? rowSelection : undefined;
//如果表格各行存在内部按钮，将各个按钮添加到表格列模型中 //如果表格各行存在内部按钮，将各个按钮添加到表格列模型中
if (operateCol){ if (operateCol) {
columns[columns.length - 1].render = (text,record) => this.addOperateCol(text,record); columns[columns.length - 1].render = (text, record) => this.addOperateCol(text, record);
} }
let tepmPage = Object.assign({ let tepmPage = Object.assign(
size: 'small', {
total: totals, size: 'small',
current: this.state.current, total: totals,
pageSize: this.state.pageSize, current: this.state.current,
onShowSizeChange: this.onSizeChange, pageSize: this.state.pageSize,
onChange: this.onPaginationChange, onShowSizeChange: this.onSizeChange,
showSizeChanger: true, onChange: this.onPaginationChange,
showTotal: this.showTotal showSizeChanger: true,
}, pagination); showTotal: this.showTotal
let _tempPagination = isPageable === false ? false :tepmPage; },
pagination
);
let _tempPagination = isPageable === false ? false : tepmPage;
let bordered = true; let bordered = true;
// 当为true 或 undefined时则分页 // 当为true 或 undefined时则分页
let _pagination = isPageable === false ? false : _tempPagination; let _pagination = isPageable === false ? false : _tempPagination;
let divStyle = this.state.showFilter ? 'other-table-bar' : 'table-bar'; let divStyle = this.state.showFilter ? 'other-table-bar' : 'table-bar';
let display = this.state.showFilter ? 'block' : 'none'; let display = this.state.showFilter ? 'block' : 'none';
let searchStyle = { display }; let searchStyle = { display };
return ( return (
<div className="table-styles">
<div className="table-styles"> {onRowClick ? (
{ onRowClick ? <Table
<Table rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowKey={isTreeTable ? 'key' : this.generateRowkey} rowSelection={rowSelection}
loading={loading} columns={columns}
rowSelection={rowSelection} dataSource={dataList}
columns={columns} pagination={_pagination}
dataSource={dataList} size={size}
pagination={_pagination} bordered={bordered}
size={size} scroll={{ y: maxHeight }}
bordered={bordered} rowClassName={rowClassName}
scroll={{ y: maxHeight }} onRowClick={onRowClick}
rowClassName={rowClassName} />
onRowClick={onRowClick} ) : (
/> : <Table
<Table rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowKey={isTreeTable ? 'key' : this.generateRowkey} rowSelection={rowSelection}
loading={loading} columns={columns}
rowSelection={rowSelection} dataSource={dataList}
columns={columns} pagination={_pagination}
dataSource={dataList} size={size}
pagination={_pagination} bordered={bordered}
size={size} scroll={{ y: maxHeight }}
bordered={bordered} rowClassName={rowClassName}
scroll={{ y: maxHeight }} onRowDoubleClick={onRowDoubleClick}
rowClassName={rowClassName} />
onRowDoubleClick={onRowDoubleClick} )}
/>
}
</div> </div>
); );
} }
} }
AmosGridTable.propTypes = { AmosGridTable.propTypes = {
url: PropTypes.string,//请求表格数据的url不带参数的 url: PropTypes.string, //请求表格数据的url不带参数的
columns: PropTypes.array,//表格列模型 columns: PropTypes.array, //表格列模型
getSelectedRows: PropTypes.func,//获取选择的行数据，用于各个具体的表格回调获取数据。 getSelectedRows: PropTypes.func, //获取选择的行数据，用于各个具体的表格回调获取数据。
operBtns: PropTypes.array,//表格外部操作按钮，如'新增'，'编辑'等 operBtns: PropTypes.array, //表格外部操作按钮，如'新增'，'编辑'等
isChecked: PropTypes.bool,//表格是否包含复选框 isChecked: PropTypes.bool, //表格是否包含复选框
operateCol: PropTypes.func,//表格内部操作按钮，如'查看详情'等 operateCol: PropTypes.func, //表格内部操作按钮，如'查看详情'等
callBack: PropTypes.func,//获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。 callBack: PropTypes.func, //获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
otherFilter: PropTypes.string,//其他查询条件 otherFilter: PropTypes.string, //其他查询条件
dataList: PropTypes.array, dataList: PropTypes.array,
getTableDataAction: PropTypes.func, getTableDataAction: PropTypes.func,
selectedRowKeys: PropTypes.array, selectedRowKeys: PropTypes.array,
......
src/view/monitor/safetyManage/SafteyLeft.js → src/view/monitor/duty/safetyManage/SafteyLeft.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd'; import { DatePicker } from 'amos-antd';
import moment from 'moment'; import { Input } from 'amos-antd';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework'; import { Select } from 'amos-framework';
import AmosGridTable from './AmosGridTable';
const Option = Select.Option; const Option = Select.Option;
const Search = Input.Search; const Search = Input.Search;
...@@ -22,45 +12,44 @@ const columns = [ ...@@ -22,45 +12,44 @@ const columns = [
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
width: '10%', width: '10%',
align: 'center', // 设置文本居中的属性 align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '换流站名称', title: '换流站名称',
width: '20%', width: '20%',
dataIndex: 'name', dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>, render: val => <span style={{ color: 'yellow' }}>{val}</span>
}, },
{ {
title: '科目数', title: '科目数',
width: '10%', width: '10%',
dataIndex: 'kemu', dataIndex: 'kemu',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '次数', title: '次数',
width: '10%', width: '10%',
dataIndex: 'cishu', dataIndex: 'cishu',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '参加人员', title: '参加人员',
width: '10%', width: '10%',
dataIndex: 'cjry', dataIndex: 'cjry',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '人员达标率', title: '人员达标率',
width: '20%', width: '20%',
dataIndex: 'rydbl', dataIndex: 'rydbl',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
}, },
{ {
title: '最近培训时间', title: '最近培训时间',
width: '20%', width: '20%',
dataIndex: 'date', dataIndex: 'date',
render: val => <span style={{color:"white"}}>{val}</span>, render: val => <span style={{ color: 'white' }}>{val}</span>
} }
]; ];
const data = [ const data = [
...@@ -68,267 +57,266 @@ const data = [ ...@@ -68,267 +57,266 @@ const data = [
key: '1', key: '1',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '2', key: '2',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '3', key: '3',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '4', key: '4',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '5', key: '5',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '6', key: '6',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '7', key: '7',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '8', key: '8',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '9', key: '9',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '10', key: '10',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '11', key: '11',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '12', key: '12',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '13', key: '13',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '14', key: '14',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '15', key: '15',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '16', key: '16',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '17', key: '17',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '18', key: '18',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '19', key: '19',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '20', key: '20',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '21', key: '21',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '22', key: '22',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '23', key: '23',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '225', key: '225',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '25', key: '25',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '26', key: '26',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '27', key: '27',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '28', key: '28',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
}, },
{ {
key: '29', key: '29',
name: '复龙换流站', name: '复龙换流站',
kemu: 3, kemu: 3,
cishu:4, cishu: 4,
cjry: 5, cjry: 5,
rydbl:'50%', rydbl: '50%',
date:"2019-01-01" date: '2019-01-01'
} }
]; ];
const selectdata = [ const selectdata = [
{ id: 0, name: '消防理论知识培训' }, { id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' }, { id: 1, name: '消防技能培训' },
...@@ -338,18 +326,12 @@ const selectdata = [ ...@@ -338,18 +326,12 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' }, { id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' } { id: 5, name: '用火用电管理' }
]; ];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/** /**
* 安全培训左侧 * 安全培训左侧
*/ */
class SafteyLeft extends Component { class SafteyLeft extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.pageConfig = { this.pageConfig = {
...@@ -359,67 +341,49 @@ class SafteyLeft extends Component { ...@@ -359,67 +341,49 @@ class SafteyLeft extends Component {
this.state = { this.state = {
data: [], data: [],
loading: false, loading: false,
equimentId:null, equimentId: null,
pagination: true, pagination: true,
isChecked: false, isChecked: false,
selectedRows: [], selectedRows: [],
selectedRowKeys: [], selectedRowKeys: [],
dataList: [], dataList: [],
newDataList:[], newDataList: [],
totalCount:0, totalCount: 0,
searchParam:'', searchParam: '',
fname:'', fname: '',
current: 1, current: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
tableHeight:450 tableHeight: 450
}; };
} }
componentDidMount() { componentDidMount() {}
}
onRequestTable = (callback) => { onRequestTable = callback => {
this.setState({ this.setState({
data:data, data: data,
totalCount:data.length totalCount: data.length
}); });
callback && callback(data); callback && callback(data);
};
// electricFireListAction(current, pageSize, searchName).then(d => { onChange = (value, item) => {
// const { dataList, total } = d || {};
// });
}
onChange = (value, item) =>{
console.log(value, item); console.log(value, item);
};
}
onTimeChange= (value, dateString)=> { onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value); console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString); console.log('Formatted Selected Time: ', dateString);
} };
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{ onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item); console.log(value, item);
};
}
reload = r => { reload = r => {
this.setState( this.setState(
...@@ -433,12 +397,11 @@ class SafteyLeft extends Component { ...@@ -433,12 +397,11 @@ class SafteyLeft extends Component {
); );
}; };
getAcitonData = () => {
getAcitonData = () =>{ this.setState({
this.setState({ data: data
data:data });
}) };
}
/** /**
* 分页设置参数 * 分页设置参数
...@@ -451,132 +414,91 @@ class SafteyLeft extends Component { ...@@ -451,132 +414,91 @@ class SafteyLeft extends Component {
this.pageConfig.pageNumber = current; this.pageConfig.pageNumber = current;
} }
}; };
/** /**
* 获取表格所选则的行数据 * 获取表格所选则的行数据
*/ */
getSelectedRows = (selectedRows, selectedRowKeys) => { getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys }); this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
}; };
searchData =()=>{ searchData = () => {
let name = this.state.fname; let name = this.state.fname;
alert(name) };
}
onChange = (e,value) =>{ onChange = (e, value) => {
this.setState({ fname: value }); this.setState({ fname: value });
} };
getPanelHeight = () => { getPanelHeight = () => {
//计算表格高度 //计算表格高度
var box1=document.getElementById("fire-bottom-left"); var box1 = document.getElementById('fire-bottom-left');
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取 if (box1) {
return box1.offsetHeight * 0.91 //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91;
} }
}; };
SearchChange = (value) => { SearchChange = value => {
alert(value) alert(value);
} };
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() { render() {
let defaultPageConfig = this.pageConfig; let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state; let { pagination, isChecked, data, totalCount, selectedRowKeys } = this.state;
const {onEditClick} =this.props;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state;
return ( return (
<div className="fire-bottom-left" id="fire-bottom-left"> <div className="fire-bottom-left" id="fire-bottom-left">
<div className="fire-bottom-left-content"> <div className="fire-bottom-left-content">
<div className="one-div" id="one-div"> <div className="one-div" id="one-div">
<div className="search-one"> <div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */} <div className="search-one-input">
<div className="search-one-input"> <Search placeholder="搜索" onSearch={this.SearchChange} />
<Search placeholder="搜索" onSearch={this.SearchChange} /> </div>
</div>
</div>
<div className="search-two" >
<Select className="search-select-style"
data={selectdata}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
defaultOption={<Option>请选择</Option>}
onChange={this.onChangeSelect}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
</div>
</div> </div>
<div className="two-div"> <div className="search-two">
<Select
className="search-select-style"
data={selectdata}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
<AmosGridTable defaultOption={<Option>请选择</Option>}
columns={columns} onChange={this.onChangeSelect}
dataList={data} />
isPageable={pagination} </div>
totals={totalCount} <div className="search-three">
callBack={this.reload} <span className="three-font">日期:&nbsp;&nbsp;</span>
selectedRowKeys={selectedRowKeys} <DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
getSelectedRows={this.getSelectedRows} &nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
getTableDataAction={this.getAcitonData} <DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={(record) => onEditClick(record)}
/>
</div> </div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={record => onEditClick(record)}
/>
</div>
</div> </div>
</div> </div>
); );
} }
} }
SafteyLeft.propTypes = {};
SafteyLeft.propTypes = {
};
export default SafteyLeft; export default SafteyLeft;
src/view/monitor/duty/safetyManage/SafteyRight.js 0 → 100644
View file @ 4d1ac2ff
import React, { Component } from 'react';
import AmosGridTable from './AmosGridTable';
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '科目名称',
width: '15%',
dataIndex: 'kmmc',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '培训时间',
width: '15%',
dataIndex: 'pxsj',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '参加人数',
width: '10%',
dataIndex: 'cjrs',
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: <div className="safe-table-title-font-red-right">0-60</div>,
width: '10%',
dataIndex: '0-60',
render: val => <span style={{ color: 'red' }}>{val}</span>
},
{
title: <div className="safe-table-title-font-yellow">61-85</div>,
width: '10%',
dataIndex: '61-85',
render: val => <span style={{ color: 'yellow' }}>{val}</span>
},
{
title: (
<div className="safe-table-title-font-green" style={{ paddingTop: '5% !important' }}>
86-100
</div>
),
width: '10%',
dataIndex: '86-100',
render: val => <span style={{ color: 'green' }}>{val}</span>
},
{
title: '达标率%',
width: '10%',
dataIndex: 'dbl',
render: val => <span style={{ color: 'white' }}>{val}</span>
}
];
const data = [
{
key: '1',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '2',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '3',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '4',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '5',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '6',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '7',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '8',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '9',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '10',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '11',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '12',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '13',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '14',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '15',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '16',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '17',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '18',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '19',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '20',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '21',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '22',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '23',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '225',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '25',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '26',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '27',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '28',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
},
{
key: '29',
kmmc: '消防技能培训',
pxsj: '2019-01-01',
cjrs: 10,
'0-60': 4,
'61-85': '3',
'86-100': '3',
dbl: '60%'
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 安全培训右侧
*/
class SafteyRight extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 10
};
this.state = {
data: [],
loading: false,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight: 450
};
}
componentDidMount() {
const { pagination } = this.state;
var box1 = document.getElementById('fire-bottom-left');
var box2 = document.getElementById('one-div');
if (box1 && box2) {
//此处在加一层判断，更加严密，如果box存在的情况下获取
console.log(box1.offsetHeight);
console.log(box2.offsetHeight);
this.setState({
tableHeight: box1.offsetHeight - box2.offsetHeight
});
}
}
onEdit = id => {
// this.type = 'edit';
// electricFireDetailsAction(id).then(d => {
// this.setState({
// form: d,
// title: d.name
// })
// })
console.log('id:' + id);
this.setState({
data: data,
totalCount: data.length
});
};
onChange = (value, item) => {
console.log(value, item);
};
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
};
onOk = value => {
console.log('onOk: ', value);
};
onChangeSelect = (value, item) => {
console.log(value, item);
};
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () => {
// this.setState({
// data:data
// })
};
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData = () => {
let name = this.state.fname;
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
};
getPanelHeight = () => {
// //计算表格高度
// var box1=document.getElementById("fire-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91;
// }
return 300;
};
SearchChange = value => {
alert(value);
};
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01' : 'back-02';
return className;
};
render() {
let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state;
let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="fire-bottom-right" id="fire-bottom-right">
<div className="fire-bottom-right-content">
<div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
);
}
}
SafteyRight.propTypes = {};
export default SafteyRight;
src/view/monitor/safetyManage/index.js → src/view/monitor/duty/safetyManage/index.js
View file @ 4d1ac2ff
...@@ -2,7 +2,6 @@ import React, { Component } from 'react'; ...@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import SafteyLeft from './SafteyLeft'; import SafteyLeft from './SafteyLeft';
import SafteyRight from './SafteyRight'; import SafteyRight from './SafteyRight';
/** /**
* 安全培训 * 安全培训
*/ */
...@@ -14,26 +13,25 @@ export default class Safety extends Component { ...@@ -14,26 +13,25 @@ export default class Safety extends Component {
}; };
} }
componentDidMount(){ componentDidMount() {
//右侧窗口默认显示第一个数据查询的列表 //右侧窗口默认显示第一个数据查询的列表
this.list && this.list.onRequestTable((list) => this.onEditClick(list[0])) this.list && this.list.onRequestTable(list => this.onEditClick(list[0]));
} }
onEditClick = (record) => { onEditClick = record => {
this.listTwo.onEdit(record.key);
this.listTwo.onEdit(record.key) };
}
render() { render() {
return ( return (
<div className="fire-safety"> <div className="fire-safety">
<div className="fire-safty-content"> <div className="fire-safty-content">
<div className="fire-top"></div> <div className="fire-top"></div>
<div className="fire-bottom"> <div className="fire-bottom">
<SafteyLeft ref={node => this.list = node} onEditClick={this.onEditClick}/> <SafteyLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<SafteyRight ref={node => this.listTwo = node}/> <SafteyRight ref={node => (this.listTwo = node)} />
</div> </div>
</div> </div>
</div> </div>
); );
} }
......
src/view/monitor/statistical/AlarmControl.js → src/view/monitor/duty/statistical/AlarmControl.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import CommonCard from '../../common/commonCard/CommonCard'; import { Modal } from 'amos-framework';
import AlarmControlTable from './AlarmControlTable';
import CommonCard from '../../../common/commonCard/CommonCard';
/** /**
* 告警管控 * 告警管控
*/ */
export default class AlarmControl extends Component { export default class AlarmControl extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
seriesData:[], seriesData: [],
hj:0, hj: 0,
gz:0, gz: 0,
xj:0 xj: 0,
visible: false
}; };
} }
componentDidMount(){ componentDidMount() {
let dates = [
{ value: 3, name: '火警告警' },
{ value: 31, name: '故障告警' },
{ value: 10, name: '巡检告警' }
];
let dates=[ if (dates) {
{value:3, name:'火警告警'}, this.setState({ seriesData: dates, hj: dates[0].value, gz: dates[1].value, xj: dates[2].value });
{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 = () => { getOptionsx = () => {
const { seriesData } = this.state; const { seriesData } = this.state;
return {
color:['rgba(243, 12, 12, 1)','rgba(219, 121, 23, 1)','rgba(209, 209, 52, 1)'], return {
color: ['rgba(243, 12, 12, 1)', 'rgba(219, 121, 23, 1)', 'rgba(209, 209, 52, 1)'],
series: [ series: [
{ {
name: "", name: '',
type: "pie", type: 'pie',
radius: ["0%", "55%"], radius: ['0%', '55%'],
center: ["50%", "50%"], center: ['50%', '50%'],
label: { label: {
show: false show: false
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(24,219,159,0.1)' color: 'rgba(24,219,159,0.1)'
}, }
}, },
hoverAnimation: false, hoverAnimation: false,
data: [100] data: [100]
}, },
{ {
name:'检查点', name: '检查点',
type:'pie', type: 'pie',
radius: ['60%', '72%'], radius: ['60%', '72%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function(param) { formatter: function(param) {
let total = 0; let total = 0;
seriesData.forEach(e => { seriesData.forEach(e => {
total += e.value; total += e.value;
}) });
var view = '{val|' +total + '}\n{name|' + '告警总数' + '}'; var view = '{val|' + total + '}\n{name|' + '告警总数' + '}';
return view; 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: { textStyle: {
normal: { rich: {
show: false 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)'
} }
}, }
data:seriesData }
} }
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}
] ]
}; };
} };
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
render() { render() {
const { hj,gz,xj } = this.state; const { hj, gz, xj, visible } = this.state;
return ( return (
<div className="AlarmControl"> <div className="AlarmControl">
{/* <div className="AlarmControl_1"> <CommonCard title="告警管控情况">
<div className="AlarmControl_1_1"><span>告警管控情况</span></div> <div className="AlarmControl_2">
</div> */} <div className="AlarmControl_2_1" onClick={()=>this.open()}>...</div>
<CommonCard title="告警管控情况"> <Modal
<div className="AlarmControl_2"> header="告警管控情况"
<div className="AlarmControl_2_1" onClick={this.ondetails}>...</div> visible={visible}
<div className="AlarmControl_2_2"> className="risk-model-model99"
<div className="AlarmControl_2_2_1"> width={'50%'}
dragable
noDefaultFooter
content={<AlarmControlTable />}
onCancel={this.cancel}
destroyOnClose
/>
<div className="AlarmControl_2_2">
<div className="AlarmControl_2_2_1">
<div className="AlarmControl8"> <div className="AlarmControl8">
<div className="AlarmControl2"> <div className="AlarmControl2">
<div className="AlarmControl2_1"> <div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 火警告警：</div>
<div className="AlarmControl2_12"> 火警告警：</div> <div className="AlarmControl2_13">{hj}</div>
<div className="AlarmControl2_13">{hj}</div> </div>
</div> <div className="AlarmControl2_2" />
<div className="AlarmControl2_2"></div> </div>
</div> <div className="AlarmControl2">
<div className="AlarmControl2"> <div className="AlarmControl2_1">
<div className="AlarmControl2_1"> <div className="AlarmControl2_12">故障告警：</div>
<div className="AlarmControl2_13">{gz}</div>
<div className="AlarmControl2_12">故障告警：</div> </div>
<div className="AlarmControl2_13">{gz}</div> <div className="AlarmControl2_3" />
</div> </div>
<div className="AlarmControl2_3"></div> <div className="AlarmControl2">
</div> <div className="AlarmControl2_1">
<div className="AlarmControl2"> <div className="AlarmControl2_12">巡检告警：</div>
<div className="AlarmControl2_1" > <div className="AlarmControl2_13">{xj}</div>
</div>
<div className="AlarmControl2_12">巡检告警：</div> <div className="AlarmControl2_4" />
<div className="AlarmControl2_13">{xj}</div> </div>
</div> </div>
<div className="AlarmControl2_4"></div> </div>
</div>
</div> <div className="AlarmControl_2_2_2">
</div> <ReactEcharts option={this.getOptionsx()} />
</div>
<div className="AlarmControl_2_2_2"> </div>
</div>
<ReactEcharts option = { this.getOptionsx() } /> </CommonCard>
</div>
</div>
</div>
</CommonCard>
</div> </div>
); );
} }
} }
src/view/monitor/statistical/AlarmControlTable.js → src/view/monitor/duty/statistical/AlarmControlTable.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form, Select, Radio,StdForm ,Icon,AmosAlert} from 'amos-framework'; import { Form, Select, Radio, StdForm, Icon, AmosAlert } from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd'; import { TreeSelect, DatePicker } from 'amos-antd';
import { Input } from 'amos-antd'; import { Input } from 'amos-antd';
import moment from 'moment'; import moment from 'moment';
...@@ -12,114 +9,105 @@ import { SingleTable } from 'amos-pro'; ...@@ -12,114 +9,105 @@ import { SingleTable } from 'amos-pro';
const FormItem = Form.Item; const FormItem = Form.Item;
const Search = Input.Search; const Search = Input.Search;
const tableList1 = [ const tableList1 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站2', 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: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站4', 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: '复龙换流站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' } , { 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 = [ const tableList2 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站2', 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: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站4', 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: '复龙换流站5', sex: '10', age: 10, age1: 30, address: '10' }
]; ];
const data = [ const data = [
{ id: 0, name: '失控' }, { id: 0, name: '失控' },
{ id: 1, name: '受控' } { id: 1, name: '受控' }
]; ];
const checkInputColumns = (_this) => { const checkInputColumns = _this => {
return [ return [
{ {
title: '换流站', title: '换流站',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '20%', width: '20%',
query: true, query: true
},
}, {
{ title: <div style={{ color: '#0055FF' }}>火警告警</div>,
title: <div style={{"color":"#0055FF"}}>火警告警</div>, dataIndex: 'sex',
dataIndex: 'sex', key: 'sex',
key: 'sex', width: '15%',
width: '15%', query: true,
query: true, required: true //是否是默认显示的
required: true, //是否是默认显示的 // render: (text,record) => {
// render: (text,record) => { // return <p className="yi">{text}</p> ;
// return <p className="yi">{text}</p> ;
// }
// } },
{
title: <div style={{ color: '#F1F10C' }}>火警告警</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: <div style={{ color: '#FF8000' }}>巡检告警</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
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: '20%'
}
];
};
},
{
title: <div style={{"color":"#F1F10C"}}>火警告警</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: <div style={{"color":"#FF8000"}}>巡检告警</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
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: '20%'
}
];
};
/** /**
* 风险管控详情 * 风险管控详情
*/ */
...@@ -128,40 +116,35 @@ class AlarmControlTable extends Component { ...@@ -128,40 +116,35 @@ class AlarmControlTable extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
dataList: [], //表格数据集合 dataList: [], //表格数据集合
size: 'small', //表格大小 size: 'small', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0 current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量 pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
totals: 0, //所有数据总和 totals: 0, //所有数据总和
reload() {}, reload() {},
maxHeight: 650, maxHeight: 650,
name:"", name: '',
startTime: moment().format('YYYY-MM-DD'), startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'), endTime: moment()
.add(1, 'years')
}; .format('YYYY-MM-DD')
};
} }
componentWillMount = () => { componentWillMount = () => {
this.setState({ dataList: tableList1 });
this.setState({ dataList:tableList1}); this.setState({ totals: 13 });
this.setState({ totals:13});
}; };
componentDidMount = () => { componentDidMount = () => {};
};
componentWillReceiveProps = (nextProps) => { componentWillReceiveProps = nextProps => {};
}
SearchChange = (value) => {
alert(value)
}
SearchChange = value => {
alert(value);
};
/** /**
* 获取表格刷新方法 * 获取表格刷新方法
*/ */
reload = r => { reload = r => {
...@@ -174,109 +157,89 @@ class AlarmControlTable extends Component { ...@@ -174,109 +157,89 @@ class AlarmControlTable extends Component {
r() r()
); );
}; };
//搜索 //搜索
onIconClick1 = () => { onIconClick1 = () => {
this.setState({ dataList: tableList2 });
this.setState({ totals: 5 });
};
this.setState({ dataList:tableList2}); componentWillReceiveProps = nextProps => {
this.setState({ totals:5}); if (nextProps.refresh) {
} this.setState({ name: '' });
componentWillReceiveProps = (nextProps) => {
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({ startTime: moment().format('YYYY-MM-DD') });
fillCheckInputTable = param => { this.setState({
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD')
});
}
}; };
onChange1 = (e, value) => {
this.setState({ name:value });
} fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name: value });
};
onChange = (key, value) => { onChange = (key, value) => {
if (key === 'name') {
if(key==='name'){ this.setState({ name: value });
this.setState({ name:value }); } else if (key === 'startTime') {
}else if(key==='startTime'){ this.setState({ startTime: moment(value).format('YYYY-MM-DD') });
this.setState({ startTime: moment(value).format('YYYY-MM-DD')}); } else {
}else{ this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
} }
};
}
render() { render() {
const { dataList, totals, name, endTime, startTime } = this.state;
const { dataList,totals ,name,endTime,startTime} = this.state;
return ( return (
<div className="souh" > <div className="souh">
<div className="sou"> <div className="sou">
<div className="search-one-alarm"> <div className="search-one-alarm">
{/* <div className="search-one-button" onClick={this.searchData} /> */} {/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input"> <div className="search-one-input">
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */} {/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
<Search placeholder="搜索" onSearch={this.SearchChange} /> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
</div>
<div className="search-three-alarm">
<span className="three-font">&nbsp;&nbsp;日期:&nbsp;&nbsp;</span>
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
format="YYYY-MM-DD"
value={moment(endTime)}
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</div>
</div> </div>
<div className="inputxqtable"> <div className="search-three-alarm">
<span className="three-font">&nbsp;&nbsp;日期:&nbsp;&nbsp;</span>
<InputTable <DatePicker
columns={checkInputColumns(this)} format="YYYY-MM-DD"
callBack={this.reload} value={moment(startTime)}
dataSource={dataList} className="input_item_select"
totals={totals} onChange={value2 => {
getTableDataAction={this.fillCheckInputTable} this.onChange('startTime', value2);
}}
/> allowClear={false}
</div> />
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
<DatePicker
format="YYYY-MM-DD"
value={moment(endTime)}
className="input_item_select"
onChange={value3 => {
this.onChange('endTime', value3);
}}
allowClear={false}
/>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div> </div>
); );
} }
} }
export default AlarmControlTable; export default AlarmControlTable;
src/view/monitor/statistical/AllSafety.js → src/view/monitor/duty/statistical/AllSafety.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts'; import CommonCard from '../../../common/commonCard/CommonCard';
import CommonCard from '../../common/commonCard/CommonCard';
//import { AllSafetyAction } from './../../../services/centerLevelService';
/** /**
* 总体消防安全情况 * 总体消防安全情况
*/ */
const option = { const option = {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: '{a} <br/>{b}: {c} ({d}%)'
}, },
// color: ['#00CACE', '#F70D0E'],
color: ['#F70D0E', '#00CACE'], color: ['#F70D0E', '#00CACE'],
graphic: [{ //环形图中间添加文字 graphic: [
type: 'text', //通过不同top值可以设置上下显示 {
left: 'center', //环形图中间添加文字
top: '30%', type: 'text', //通过不同top值可以设置上下显示
style: { left: 'center',
text: '80', //'80' + '\n' + '总数' top: '30%',
textAlign: 'center', style: {
fill: "rgba(255,255,255,1)", //文字的颜色 text: '80', //'80' + '\n' + '总数'
width: 30, textAlign: 'center',
height: 30, fill: 'rgba(255,255,255,1)', //文字的颜色
fontSize: 25, width: 30,
fontFamily: "Microsoft YaHei", height: 30,
fontWeight:"bold" fontSize: 25,
fontFamily: 'Microsoft YaHei',
} fontWeight: 'bold'
}, }
{ //环形图中间添加文字 },
type: 'text', //通过不同top值可以设置上下显示 {
left: 'center', //环形图中间添加文字
top: '45%', type: 'text', //通过不同top值可以设置上下显示
style: { left: 'center',
text: '站点', top: '45%',
textAlign: 'center', style: {
fill: "rgba(255,255,255,1)", //文字的颜色 text: '站点',
width: 24, textAlign: 'center',
height: 16, fill: 'rgba(255,255,255,1)', //文字的颜色
fontSize: 12, width: 24,
fontFamily: "Microsoft YaHei", height: 16,
fontWeight:400 fontSize: 12,
fontFamily: 'Microsoft YaHei',
fontWeight: 400
}
} }
}], ],
series: [ series: [
{ {
name: '总体消防安全情况', name: '总体消防安全情况',
type: 'pie', type: 'pie',
...@@ -68,30 +63,26 @@ const option = { ...@@ -68,30 +63,26 @@ const option = {
data: [ data: [
{ {
value: 40, value: 40,
name: "不合格", name: '不合格'
}, },
{ {
value: 60, value: 60,
name: '正常', name: '正常'
} }
] ]
}, },
{ {
name: "中间的背景", name: '中间的背景',
type: "pie", type: 'pie',
radius: ["0%", "60%"], radius: ['0%', '60%'],
center: ["50%", "40%"], center: ['50%', '40%'],
label: { label: {
show: false show: false
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(24,219,159,0.1)' color: 'rgba(24,219,159,0.1)'
}, }
}, },
//隐藏多余文字提示 //隐藏多余文字提示
label: { label: {
...@@ -103,16 +94,14 @@ const option = { ...@@ -103,16 +94,14 @@ const option = {
tooltip: { tooltip: {
show: false show: false
}, },
// hoverAnimation: false, // hoverAnimation: false,
data: [100] data: [100]
} }
] ]
}; };
class AllSafety extends Component { class AllSafety extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -120,62 +109,48 @@ class AllSafety extends Component { ...@@ -120,62 +109,48 @@ class AllSafety extends Component {
}; };
} }
componentDidMount() { componentDidMount() {}
}
getOptionsx = () => { getOptionsx = () => {
return option; return option;
} };
render() { render() {
return ( return (
<div className="AllSafety"> <div className="AllSafety">
<div className="all-safety-content"> <div className="all-safety-content">
{/* <div className="all-safety-font">总体消防安全情况</div> */}
<CommonCard title="总体消防安全情况"> <CommonCard title="总体消防安全情况">
<div className="content-detail"> <div className="content-detail">
<div className="all-safety-left"> <div className="all-safety-left">
<ReactEcharts option={this.getOptionsx()} className="div-echars" /> <ReactEcharts option={this.getOptionsx()} className="div-echars" />
</div> </div>
<div className="all-safety-right"> <div className="all-safety-right">
<div className="all-safety-right-one"> <div className="all-safety-right-one">
<div className="right-one-font">1个</div> <div className="right-one-font">1个</div>
</div> </div>
<div className="all-safety-right-two"> <div className="all-safety-right-two">
<div className="right-two-font"><span className="jiantou">&darr;</span>-1</div> <div className="right-two-font">
</div> <span className="jiantou">&darr;</span>-1
<div className="all-safety-right-three"> </div>
<div className="right-three-font">1个</div> </div>
</div> <div className="all-safety-right-three">
<div className="all-safety-right-four"> <div className="right-three-font">1个</div>
<div className="right-four-font"><span className="jiantou">&uarr;</span>+1</div> </div>
</div> <div className="all-safety-right-four">
<div className="right-four-font">
<span className="jiantou">&uarr;</span>+1
</div>
</div>
</div> </div>
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
{/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */} {/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */}
</div> </div>
); );
} }
} }
AllSafety.propTypes = {};
AllSafety.propTypes = {
};
export default AllSafety; export default AllSafety;
src/view/monitor/statistical/DangerControl.js → src/view/monitor/duty/statistical/DangerControl.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic'; import { Modal } from 'amos-framework';
import CommonCard from '../../common/commonCard/CommonCard';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
const centerLevelIcon = imgStatic.centerLevelIcon; import DangerControlTable from './DangerControlTable';
import CommonCard from '../../../common/commonCard/CommonCard';
/** /**
* 隐患管控 * 隐患管控
*/ */
export default class DangerControl extends Component { export default class DangerControl extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
seriesData: [], seriesData: [],
yq:0, yq: 0,
sw:0, sw: 0,
zl:0, zl: 0,
jd:'0%' jd: '0%',
visible: false
}; };
} }
componentDidMount(){ componentDidMount() {
let dates = {
let dates={jd:'20%', jd: '20%',
seriesData: [ seriesData: [
{value:35, name:'逾期未治理'}, { value: 35, name: '逾期未治理' },
{value:10, name:'尚未治理'}, { value: 10, name: '尚未治理' },
{value:4, 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});
}
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 = () => { getOptionsx = () => {
const { seriesData } = this.state;
const { seriesData} = this.state;
return { return {
color: ['rgba(254, 0, 0, 1)', 'rgba(255, 214, 0, 1)', 'rgba(0, 255, 238, 1)'],
color:['rgba(254, 0, 0, 1)','rgba(255, 214, 0, 1)','rgba(0, 255, 238, 1)'],
series: [ series: [
{ {
name: "", name: '',
type: "pie", type: 'pie',
radius: ["0%", "55%"], radius: ['0%', '55%'],
center: ["50%", "50%"], center: ['50%', '50%'],
label: { label: {
show: false show: false
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(24,219,159,0.1)' color: 'rgba(24,219,159,0.1)'
}, }
}, },
hoverAnimation: false, hoverAnimation: false,
data: [100] data: [100]
}, },
{ {
name:'检查点', name: '检查点',
type:'pie', type: 'pie',
radius: ['60%', '72%'], radius: ['60%', '72%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function(param) { formatter: function(param) {
let total = 0; let total = 0;
seriesData.forEach(e => { seriesData.forEach(e => {
total += e.value; total += e.value;
}) });
var view = '{val|' +total + '}\n{name|' + '隐患总数' + '}'; var view = '{val|' + total + '}\n{name|' + '隐患总数' + '}';
return view; 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: { textStyle: {
normal: { rich: {
show: false 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)'
} }
}, }
data:seriesData }
} }
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}
] ]
}; };
} };
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
render() { render() {
const { yq,sw,zl,jd} = this.state; const { yq, sw, zl, jd, visible } = this.state;
return ( return (
<div className='DangerControl'> <div className="DangerControl">
{/* <div className="DangerControl_1"> <CommonCard title="隐患管控情况">
<div className="DangerControl_1_1"><span>隐患管控情况</span></div> <div className="DangerControl_2">
</div> */} <div className="DangerControl_2_1" onClick={this.open}>...</div>
<CommonCard title="隐患管控情况"> <Modal
<div className="DangerControl_2"> header="隐患管控情况"
<div className="DangerControl_2_1" onClick={this.ondetails}>...</div> visible={visible}
<div className="DangerControl_2_2"> className="risk-model-model99"
<div className="DangerControl_2_2_1"> width={'50%'}
<div className="AlarmControl8"> dragable
<div className="AlarmControl2"> noDefaultFooter
<div className="AlarmControl2_1"> content={<DangerControlTable refresh />}
onCancel={this.cancel}
<div className="AlarmControl2_12"> 逾期未治理：</div> destroyOnClose
<div className="AlarmControl2_13">{yq}</div> />
</div> <div className="DangerControl_2_2">
<div className="AlarmControl2_2"></div> <div className="DangerControl_2_2_1">
</div> <div className="AlarmControl8">
<div className="AlarmControl2"> <div className="AlarmControl2">
<div className="AlarmControl2_1"> <div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 逾期未治理：</div>
<div className="AlarmControl2_12">尚未治理：</div> <div className="AlarmControl2_13">{yq}</div>
<div className="AlarmControl2_13">{sw}</div> </div>
</div> <div className="AlarmControl2_2"></div>
<div className="AlarmControl2_3"></div> </div>
</div> <div className="AlarmControl2">
<div className="AlarmControl2"> <div className="AlarmControl2_1">
<div className="AlarmControl2_1"> <div className="AlarmControl2_12">尚未治理：</div>
<div className="AlarmControl2_13">{sw}</div>
<div className="AlarmControl2_12">治理验收：</div> </div>
<div className="AlarmControl2_13">{zl}</div> <div className="AlarmControl2_3"></div>
</div> </div>
<div className="AlarmControl2_4"></div> <div className="AlarmControl2">
</div> <div className="AlarmControl2_1">
<div className="AlarmControl2"> <div className="AlarmControl2_12">治理验收：</div>
<div className="AlarmControl2_1"> <div className="AlarmControl2_13">{zl}</div>
</div>
<div className="AlarmControl2_12">治理进度：</div> <div className="AlarmControl2_4"></div>
<div className="AlarmControl2_13">{jd}</div> </div>
</div> <div className="AlarmControl2">
<div className="AlarmControl2_6"></div> <div className="AlarmControl2_1">
</div> <div className="AlarmControl2_12">治理进度：</div>
</div> <div className="AlarmControl2_13">{jd}</div>
</div>
<div className="AlarmControl2_6"></div>
</div>
</div>
</div> </div>
<div className="DangerControl_2_2_2"> <div className="DangerControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } /> <ReactEcharts option={this.getOptionsx()} />
</div> </div>
</div> </div>
</div> </div>
</CommonCard> </CommonCard>
</div> </div>
); );
} }
......
src/view/monitor/statistical/DangerControlTable.js → src/view/monitor/duty/statistical/DangerControlTable.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form, Select, Radio,StdForm ,Icon,AmosAlert} from 'amos-framework'; import { Form, Select, Radio, StdForm, Icon, AmosAlert } from 'amos-framework';
import { Input } from 'amos-antd'; import { Input } from 'amos-antd';
import { TreeSelect, DatePicker } from 'amos-antd'; import { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment'; import moment from 'moment';
...@@ -10,116 +10,105 @@ const FormItem = Form.Item; ...@@ -10,116 +10,105 @@ const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const Search = Input.Search; const Search = Input.Search;
const tableList1 = [ const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { 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: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '1', name: '复龙换流站3', 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: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '1', name: '复龙换流站5', 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' } , { 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 = [ const tableList2 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { 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: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '1', name: '复龙换流站3', 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: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '1', name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } , { id: '1', name: '复龙换流站5', sex: '10', age: 10, age1: 30, address: '10' }
]; ];
const data = [ const data = [
{ id: 1, name: '严重' }, { id: 1, name: '严重' },
{ id: 2, name: '一般' } { id: 2, name: '一般' }
]; ];
const checkInputColumns = (_this) => { const checkInputColumns = _this => {
return [ return [
{ {
title: '换流站', title: '换流站',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: '20%', width: '20%',
query: true, query: true
},
}, {
{ title: '已治理',
title: '已治理', dataIndex: 'sex',
dataIndex: 'sex', key: 'sex',
key: 'sex', width: '15%',
width: '15%', query: true,
query: true, required: true //是否是默认显示的
required: true, //是否是默认显示的 // render: (text,record) => {
// render: (text,record) => { // return <p className="yi">{text}</p> ;
// return <p className="yi">{text}</p> ;
// }
// } },
{
title: '未治理',
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: '逾期未治理',
dataIndex: 'address',
key: 'address',
width: '15%',
query: true,
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
// }
},
{
title: '治理验收',
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '15%'
// render: (text,record) => {
// return <p className="si">{text}</p> ;
// }
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '20%'
}
];
};
},
{
title: '未治理',
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: '逾期未治理',
dataIndex: 'address',
key: 'address',
width: '15%',
query: true,
required: true, //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
// }
},
{
title: '治理验收',
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '15%',
// render: (text,record) => {
// return <p className="si">{text}</p> ;
// }
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '20%'
}
];
};
/** /**
* 风险管控详情 * 风险管控详情
*/ */
...@@ -128,37 +117,32 @@ class DangerControlTable extends Component { ...@@ -128,37 +117,32 @@ class DangerControlTable extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
dataList: [], //表格数据集合 dataList: [], //表格数据集合
size: 'small', //表格大小 size: 'small', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0 current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量 pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
totals: 0, //所有数据总和 totals: 0, //所有数据总和
reload() {}, reload() {},
maxHeight: 650, maxHeight: 650,
name:"", name: '',
startTime: moment().format('YYYY-MM-DD'), startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'), endTime: moment()
grade:"" .add(1, 'years')
.format('YYYY-MM-DD'),
}; grade: ''
};
} }
componentWillMount = () => { componentWillMount = () => {
this.setState({ dataList: tableList1 });
this.setState({ dataList:tableList1}); this.setState({ totals: 13 });
this.setState({ totals:13});
}; };
componentDidMount = () => { componentDidMount = () => {};
};
componentWillReceiveProps = (nextProps) => {
}
componentWillReceiveProps = nextProps => {};
/** /**
* 获取表格刷新方法 * 获取表格刷新方法
*/ */
reload = r => { reload = r => {
...@@ -172,127 +156,107 @@ class DangerControlTable extends Component { ...@@ -172,127 +156,107 @@ class DangerControlTable extends Component {
); );
}; };
SearchChange = (value) => { SearchChange = value => {
alert(value) alert(value);
} };
//搜索 //搜索
onIconClick1 = () => { onIconClick1 = () => {
this.setState({ dataList: tableList2 });
this.setState({ totals: 5 });
};
this.setState({ dataList:tableList2}); componentWillReceiveProps = nextProps => {
this.setState({ totals:5}); debugger;
} if (nextProps.refresh) {
this.setState({ name: '' });
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: "" });
}
}
this.setState({ startTime: moment().format('YYYY-MM-DD') });
fillCheckInputTable = param => { this.setState({
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD')
});
this.setState({ grade: '' });
}
}; };
onChange1 = (e, value) => {
this.setState({ name:value });
} fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name: value });
};
onChange = (key, value) => { onChange = (key, value) => {
if (key === 'name') {
if(key==='name'){ this.setState({ name: value });
this.setState({ name:value }); } else if (key === 'startTime') {
}else if(key==='startTime'){ this.setState({ startTime: moment(value).format('YYYY-MM-DD') });
this.setState({ startTime: moment(value).format('YYYY-MM-DD')}); } else if (key === 'endTime') {
}else if(key==='endTime'){ this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
this.setState({ endTime: moment(value).format('YYYY-MM-DD') }); } else {
}else{ this.setState({ grade: value });
this.setState({ grade: value });
} }
};
}
render() { render() {
const { dataList, totals, name, grade, endTime, startTime } = this.state;
const { dataList,totals ,name,grade,endTime,startTime} = this.state;
return ( return (
<div className="souh" > <div className="souh">
<div className="sou"> <div className="sou">
<div className="search-one"> <div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */} {/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input"> <div className="search-one-input">
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */} {/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
<Search placeholder="搜索" onSearch={this.SearchChange} /> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
</div>
<div className="search-two" >
<Select className="search-select-style"
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</div>
</div> </div>
<div className="inputxqtable"> <div className="search-two">
<Select
<InputTable className="search-select-style"
columns={checkInputColumns(this)} data={data}
callBack={this.reload} value={grade}
dataSource={dataList} renderOption={item => <Option value={item.id}>{item.name}</Option>}
totals={totals} onChange={value4 => {
getTableDataAction={this.fillCheckInputTable} this.onChange('grade', value4);
}}
/> />
</div> </div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={value2 => {
this.onChange('startTime', value2);
}}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={value3 => {
this.onChange('endTime', value3);
}}
allowClear={false}
/>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div> </div>
); );
} }
} }
export default DangerControlTable; export default DangerControlTable;
src/view/monitor/statistical/FireSafety.js → src/view/monitor/duty/statistical/FireSafety.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import { sessionConsts } from './../../../consts/storageConsts'; import { sessionConsts } from './../../../../consts/storageConsts';
import { browerSupport, consts, Store, LocationParam } from 'amos-tool'; import { browerSupport, consts, Store, LocationParam } from 'amos-tool';
import CommonCard from '../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
const lsTool = Store.lsTool; const lsTool = Store.lsTool;
...@@ -14,7 +14,6 @@ const lsTool = Store.lsTool; ...@@ -14,7 +14,6 @@ const lsTool = Store.lsTool;
* 消防安全管理 * 消防安全管理
*/ */
class FireSafety extends Component { class FireSafety extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -22,40 +21,22 @@ class FireSafety extends Component { ...@@ -22,40 +21,22 @@ class FireSafety extends Component {
}; };
} }
componentDidMount() { componentDidMount() {}
}
onClick = () =>{ onClick = () => {
let sbm = null let sbm = null;
let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || []; let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || [];
systemMenu.map(e =>{ systemMenu.map(e => {
if(e.permissionName && e.permissionName==="消防安全管理" ){ if (e.permissionName && e.permissionName === '消防安全管理') {
sbm = e; sbm = e;
} }
}) });
if(sbm!==null){ if (sbm !== null) {
window.localStorage.setItem('submenu',JSON.stringify(sbm.children)); window.localStorage.setItem('submenu', JSON.stringify(sbm.children));
} }
} };
// handleData = (data) => {
// let map = new Map();
// if (data && data.length > 0) {
// data.map(item => {
// map.set(item.name, item.value);
// })
// }
// return map;
// }
render() { render() {
return ( return (
<div className="FireSafety"> <div className="FireSafety">
<CommonCard title="消防安全管理(累计)"> <CommonCard title="消防安全管理(累计)">
...@@ -122,9 +103,6 @@ class FireSafety extends Component { ...@@ -122,9 +103,6 @@ class FireSafety extends Component {
} }
} }
FireSafety.propTypes = {};
FireSafety.propTypes = {
};
export default FireSafety; export default FireSafety;
src/view/monitor/statistical/FireStrength.js → src/view/monitor/duty/statistical/FireStrength.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Modal } from 'amos-framework'; import { Modal } from 'amos-framework';
import FireStrengthDetail from'./../firestrength/FireStrengthDetail'; import { Store } from 'amos-tool';
import { sessionConsts } from './../../../consts/storageConsts'; import FireStrengthDetail from './../firestrength/FireStrengthDetail';
import {Store, } from 'amos-tool'; import { sessionConsts } from './../../../../consts/storageConsts';
import CommonCard from '../../common/commonCard/CommonCard'; import CommonCard from '../../../common/commonCard/CommonCard';
const lsTool = Store.lsTool; const lsTool = Store.lsTool;
/** /**
* 消防实力统计 * 消防实力统计
*/ */
class FireStrength extends Component { class FireStrength extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -20,115 +18,79 @@ class FireStrength extends Component { ...@@ -20,115 +18,79 @@ class FireStrength extends Component {
}; };
} }
componentDidMount() { componentDidMount() {}
}
onClick = () =>{ onClick = () => {
let sbm = null let sbm = null;
let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || []; let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || [];
systemMenu.map(e =>{ systemMenu.map(e => {
if(e.permissionName && e.permissionName==="消防实力情况" ){ if (e.permissionName && e.permissionName === '消防实力情况') {
sbm = e; sbm = e;
} }
}) });
if(sbm!==null){ if (sbm !== null) {
window.localStorage.setItem('submenu',JSON.stringify(sbm.children)); window.localStorage.setItem('submenu', JSON.stringify(sbm.children));
} }
} };
render() { render() {
return ( return (
<div className="FireStrength"> <div className="FireStrength">
{/* <FireStrengthDetail /> */} <div className="strength-safety-content">
<CommonCard title="消防实力情况(累计)"> <CommonCard title="消防实力情况(累计)">
<div className="strength-safety-content"> <div className="strength-safety-tongji">
{/* <div className="strength-safety-font">消防实力情况(累计) </div> */} <div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className="titleIcon-zzxfd"></span>
{/* <div className="item" style={{marginTop:"0%"}} onClick={this.onClick} > </div>
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='/src/assets/homePage/xfsl/zzxfd.png'/></div><span>驻站消防队:</span><span className="item-value">18支</span> </div> <span className="strength-safety-wenzi">驻站消防队</span>
</div> <span className="right-font">100套</span>
<div className="item">
<div className="item-content"> <div className="item-img-div"><img className="item-img"src='/src/assets/homePage/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='/src/assets/homePage/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='/src/assets/homePage/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='/src/assets/homePage/xfsl/xfqc.png'/></div><span>消防器材:</span><span className="item-value">20000件</span> </div>
</div> */}
<div className="strength-safety-tongji" >
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-zzxfd'></span>
</div> </div>
<span className='strength-safety-wenzi'>驻站消防队</span>
<span className="right-font">100套</span>
</div> </div>
</div> <div className="strength-safety-tongji">
<div className="strength-safety-tongji"> <div className="content-tongji" onClick={this.onClick}>
<div className="content-tongji" onClick={this.onClick}> <div className="left-div">
<div className="left-div"> <span className="titleIcon-zzxfy"></span>
<span className='titleIcon-zzxfy' ></span> </div>
<span className="strength-safety-wenzi">驻站消防员</span>
<span className="right-font">123次</span>
</div> </div>
<span className='strength-safety-wenzi'>驻站消防员</span>
<span className="right-font">123次</span>
</div> </div>
<div className="strength-safety-tongji">
</div> <div className="content-tongji" onClick={this.onClick}>
<div className="strength-safety-tongji"> <div className="left-div">
<div className="content-tongji" onClick={this.onClick}> <span className="titleIcon-znzs"></span>
<div className="left-div"> </div>
<span className='titleIcon-znzs' ></span> <span className="strength-safety-wenzi">站内值守</span>
<span className="right-font">100次</span>
</div> </div>
<span className='strength-safety-wenzi'>站内值守</span>
<span className="right-font">100次</span>
</div> </div>
<div className="strength-safety-tongji">
</div> <div className="content-tongji" onClick={this.onClick}>
<div className="strength-safety-tongji"> <div className="left-div">
<span className="titleIcon-xfc"></span>
<div className="content-tongji" onClick={this.onClick}> </div>
<div className="left-div"> <span className="strength-safety-wenzi">消防车</span>
<span className='titleIcon-xfc'></span> <span className="right-font">14445件</span>
</div> </div>
<span className='strength-safety-wenzi'>消防车</span>
<span className="right-font">14445件</span>
</div> </div>
<div className="strength-safety-tongji">
</div> <div className="content-tongji">
<div className="strength-safety-tongji"> <div className="left-div">
<span className="titleIcon-xfqc"></span>
<div className="content-tongji"> </div>
<div className="left-div"> <span className="strength-safety-wenzi">消防器材</span>
<span className='titleIcon-xfqc' ></span> <span className="right-font">800次</span>
</div> </div>
<span className='strength-safety-wenzi'>消防器材</span>
<span className="right-font">800次</span>
</div> </div>
</CommonCard>
</div>
</div> </div>
</CommonCard> <Modal width={1000} height={1000} content={<FireStrengthDetail />} visible={false} />
<Modal
width={1000}
height={1000}
content={<FireStrengthDetail/>}
visible={false}
></Modal>
</div> </div>
); );
} }
} }
FireStrength.propTypes = { FireStrength.propTypes = {};
};
export default FireStrength; export default FireStrength;
src/view/monitor/statistical/InputTable.js → src/view/monitor/duty/statistical/InputTable.js
View file @ 4d1ac2ff
...@@ -13,12 +13,12 @@ class InputTable extends Component { ...@@ -13,12 +13,12 @@ class InputTable extends Component {
pageSize: props.outterPageConfig ? props.outterPageConfig.pageSize : 10 pageSize: props.outterPageConfig ? props.outterPageConfig.pageSize : 10
}; };
this.state = { this.state = {
loading: false,//页面是否加载中,默认false loading: false, //页面是否加载中,默认false
dataList: [],//表格数据集合 dataList: [], //表格数据集合
size: 'middle',//表格大小 size: 'middle', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0 current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量 pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10, //当前页数据量
totals: 1,//所有数据总和 totals: 1, //所有数据总和
maxHeight: 250 maxHeight: 250
}; };
} }
...@@ -36,9 +36,9 @@ class InputTable extends Component { ...@@ -36,9 +36,9 @@ class InputTable extends Component {
window.removeEventListener('resize', this.onWindowResize); window.removeEventListener('resize', this.onWindowResize);
} }
onWindowResize = (e) => { onWindowResize = e => {
this.getHeightOffset(); this.getHeightOffset();
} };
/** /**
* 设置页面数据大小事件 * 设置页面数据大小事件
...@@ -46,65 +46,66 @@ class InputTable extends Component { ...@@ -46,65 +46,66 @@ class InputTable extends Component {
onSizeChange = (current, pageSize) => { onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props; let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize }); setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload); this.setState({ current, pageSize }, this.reload);
} };
/** /**
* 设置当前页事件 * 设置当前页事件
*/ */
onPaginationChange = (current) => { onPaginationChange = current => {
let { setPageConfig } = this.props; let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current }); setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload); this.setState({ current }, this.reload);
} };
setPageConfig = ({ pageSize,current }) => { setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) { if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize; this.pageConfig.pageSize = pageSize;
} }
if (current !== undefined) { if (current !== undefined) {
this.pageConfig.current = current; this.pageConfig.current = current;
} }
} };
/** /**
* 获取表格数据（刷新） * 获取表格数据（刷新）
*/ */
reload = () => { reload = () => {
let { current,pageSize } = this.state;
// this.props.getTableDataAction({ current: current - 1, pageSize });
// this.getHeightOffset();
}
showTotal = (total) => { };
showTotal = total => {
return `共 ${total} 条`; return `共 ${total} 条`;
} };
generateRowkey = (record, index) => { generateRowkey = (record, index) => {
return record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize; return record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
} };
getHeightOffset = () => { getHeightOffset = () => {
let { getPanelHeight } = this.props; let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? '850' : getPanelHeight(); let height = getPanelHeight === undefined ? '850' : getPanelHeight();
height && this.setState({ maxHeight: height }); height && this.setState({ maxHeight: height });
} };
render() { render() {
let { size, loading, maxHeight } = this.state; let { size, loading, maxHeight } = this.state;
let { columns, dataSource, totals, pagination } = this.props; let { columns, dataSource, totals, pagination } = this.props;
let defaultPageConfig = this.pageConfig; let defaultPageConfig = this.pageConfig;
let rowKey = this.generateRowkey; let rowKey = this.generateRowkey;
let _tempPagination = pagination === false ? false : pagination || { let _tempPagination =
size: 'small', pagination === false
total: totals, ? false
current: this.state.current, : pagination || {
pageSize: this.state.pageSize, size: 'small',
onShowSizeChange: this.onSizeChange, total: totals,
onChange: this.onPaginationChange, current: this.state.current,
showSizeChanger: true, pageSize: this.state.pageSize,
showTotal: this.showTotal onShowSizeChange: this.onSizeChange,
}; onChange: this.onPaginationChange,
showSizeChanger: true,
showTotal: this.showTotal
};
let bordered = true; let bordered = true;
// 当为true 或 undefined时则分页 // 当为true 或 undefined时则分页
let _pagination = _tempPagination; let _pagination = _tempPagination;
......
src/view/monitor/statistical/ModelContent.js → src/view/monitor/duty/statistical/ModelContent.js
View file @ 4d1ac2ff
...@@ -3,9 +3,7 @@ import { RiskControlDetailAction } from './../../../services/centerLevelService' ...@@ -3,9 +3,7 @@ import { RiskControlDetailAction } from './../../../services/centerLevelService'
import moment from 'moment'; import moment from 'moment';
const format = 'YYYY-MM-dd'; const format = 'YYYY-MM-dd';
export default class ModelContent extends Component { export default class ModelContent extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -13,25 +11,25 @@ export default class ModelContent extends Component { ...@@ -13,25 +11,25 @@ export default class ModelContent extends Component {
}; };
} }
componentDidMount(){ componentDidMount() {
let { type } = this.props; let { type } = this.props;
this.RiskControlDetail(type); this.RiskControlDetail(type);
} }
RiskControlDetail = (type) => { RiskControlDetail = type => {
RiskControlDetailAction(type).then(data => { RiskControlDetailAction(type).then(data => {
this.setState({ this.setState({
alarmData: data alarmData: data
}); });
}); });
} };
/** /**
* 获取标题 * 获取标题
* *
* @memberof ModelContent * @memberof ModelContent
*/ */
getTitle = (v) => { getTitle = v => {
const titleParams = { const titleParams = {
1: '一级风险点', //一级风险点 1: '一级风险点', //一级风险点
2: '二级风险点', //二级风险点 2: '二级风险点', //二级风险点
...@@ -39,39 +37,39 @@ export default class ModelContent extends Component { ...@@ -39,39 +37,39 @@ export default class ModelContent extends Component {
4: '四级风险点' //四级风险点 4: '四级风险点' //四级风险点
}; };
return titleParams[v]; return titleParams[v];
} };
formatData = (str) => { formatData = str => {
let date = str.split(' ')[0]; let date = str.split(' ')[0];
return date; return date;
} };
renderContent = (content) =>{ renderContent = content => {
return ( return (
<div className='rows'> <div className="rows">
{(content || []).map(itemA => { {(content || []).map(itemA => {
return ( return (
<div className='row'> <div className="row">
<span>{itemA.name}</span> <span>{itemA.name}</span>
<span className='date'>{this.formatData(itemA.changeDate)}</span> <span className="date">{this.formatData(itemA.changeDate)}</span>
</div> </div>
); );
})} })}
</div> </div>
); );
} };
render() { render() {
let { alarmData } = this.state; let { alarmData } = this.state;
let { type } = this.props; let { type } = this.props;
return ( return (
<div className='model-content'> <div className="model-content">
{(alarmData || []).map(item => { {(alarmData || []).map(item => {
return ( return (
<div className='content-div'> <div className="content-div">
<div className='title'> <div className="title">
<span>|</span> <span>|</span>
<span className='next-title'>{ type === 'risk' ? this.getTitle(item.typeCode) : item.typeName }</span> <span className="next-title">{type === 'risk' ? this.getTitle(item.typeCode) : item.typeName}</span>
</div> </div>
{this.renderContent(item.content)} {this.renderContent(item.content)}
</div> </div>
......
src/view/monitor/statistical/RiskControl.js → src/view/monitor/duty/statistical/RiskControl.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts'; import ReactEcharts from 'amos-viz/lib/echarts';
import CommonCard from '../../common/commonCard/CommonCard'; import { Modal } from 'amos-framework';
import RiskControlTable from './RiskControlTable';
import CommonCard from '../../../common/commonCard/CommonCard';
/** /**
* 风险管控 * 风险管控
*/ */
export default class RiskControl extends Component { export default class RiskControl extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
seriesData:[], seriesData: [],
shikong:0, shikong: 0,
shoukongx:'0%', shoukongx: '0%',
shikongx:'0%', shikongx: '0%',
shoukong:0, shoukong: 0,
yiji:0, yiji: 0,
erji:0, erji: 0,
sanji:0, sanji: 0,
siji:0 siji: 0,
visible: false
}; };
} }
componentDidMount() { componentDidMount() {
let dates = {
let dates={ seriesData: [
seriesData:[ { value: 3, name: '受控' },
{value:3, name:'受控'}, { value: 7, name: '失控' }
{value:7, name:'失控'}, ],
], yiji: 10,
yiji:10, erji: 20,
erji:20, sanji: 30,
sanji:30, siji: 40,
siji:40, shoukongx: '30%',
shoukongx:'30%', shikongx: '70%'
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});
}
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 = () => { getOptionsx = () => {
const { seriesData } = this.state; const { seriesData } = this.state;
return { return {
color: ['rgba(0, 202, 206, 1)', 'rgba(254, 0, 0, 1)'],
color:['rgba(0, 202, 206, 1)','rgba(254, 0, 0, 1)'],
series: [ series: [
{ {
name: "", name: '',
type: "pie", type: 'pie',
radius: ["0%", "65%"], radius: ['0%', '65%'],
center: ["50%", "50%"], center: ['50%', '50%'],
label: { label: {
show: false show: false
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(24,219,159,0.1)' color: 'rgba(24,219,159,0.1)'
}, }
}, },
hoverAnimation: false, hoverAnimation: false,
data: [100] data: [100]
}, },
{ {
name:'检查点', name: '检查点',
type:'pie', type: 'pie',
radius: ['70%', '85%'], radius: ['70%', '85%'],
center: ['50%', '50%'], center: ['50%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: true, show: true,
position: 'center', position: 'center',
formatter: function(param) { formatter: function(param) {
let total = 0; let total = 0;
seriesData.forEach(e => { seriesData.forEach(e => {
total += e.value; total += e.value;
}) });
var view = '{val|' +total + '}\n{name|' + '风险总数' + '}'; var view = '{val|' + total + '}\n{name|' + '风险总数' + '}';
return view; 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: { textStyle: {
normal: { rich: {
show: false 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)'
} }
}, }
data:seriesData }
} }
},
labelLine: {
normal: {
show: false
}
},
data: seriesData
}
] ]
}; };
} };
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
render() { render() {
const { shikong,shoukong,shikongx,shoukongx,yiji,erji,sanji,siji} = this.state; const { shikong, shoukong, shikongx, shoukongx, yiji, erji, sanji, siji, visible } = this.state;
return ( return (
<div className="RiskControl"> <div className="RiskControl">
{/* <div className="RiskControl_1"> <CommonCard title="风险管控情况">
<div className="RiskControl_1_1"><span>风险管控情况</span></div> <div className="RiskControl_2">
</div> */} <div className="RiskControl_2_1" onClick={() => this.open()}>...</div>
<CommonCard title="风险管控情况"> <Modal
<div className="RiskControl_2"> header="风险管控情况"
<div className="RiskControl_2_1" onClick={this.ondetails}>...</div> visible={visible}
<div className="RiskControl_2_2"> dragable
<div className="RiskControl_2_2_1"> className="risk-model-model99"
width={'50%'}
<div className="RiskControl_2_2_19"> noDefaultFooter
<div className="RiskControl_2_2_191 shi">{shikongx}</div> content={<RiskControlTable refresh />}
<div className="RiskControl_2_2_192 shi1">失控：{shikong}</div> onCancel={this.cancel}
</div> destroyOnClose
<div className="RiskControl_2_2_19"> />
<div className="RiskControl_2_2_191 shou">{shoukongx}</div> <div className="RiskControl_2_2">
<div className="RiskControl_2_2_192 shou1">受控：{shoukong}</div> <div className="RiskControl_2_2_1">
</div> <div className="RiskControl_2_2_19">
<div className="RiskControl_2_2_191 shi">{shikongx}</div>
</div> <div className="RiskControl_2_2_192 shi1">失控：{shikong}</div>
<div className="RiskControl_2_2_2"> </div>
<div className="RiskControl_2_2_19">
<ReactEcharts option = { this.getOptionsx() } /> <div className="RiskControl_2_2_191 shou">{shoukongx}</div>
<div className="RiskControl_2_2_192 shou1">受控：{shoukong}</div>
</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 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>
<div className="RiskControl_3_1_3" />
</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>
<div className="RiskControl_3"> <div className="RiskControl_3_1_4" />
<div className="RiskControl_3_1"> </div>
<div className="RiskControl_3_1_1"> <div className="RiskControl_3_1">
<div className="RiskControl_3_1_8">二级：</div> <div className="RiskControl_3_1_17">
<div className="RiskControl_3_1_8">{erji}</div> <div className="RiskControl_3_1_8">三级：</div>
</div> <div className="RiskControl_3_1_8">{sanji}</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>
</CommonCard> <div className="RiskControl_3_1_5" />
</div>
</div>
</CommonCard>
</div> </div>
); );
} }
......
src/view/monitor/duty/statistical/RiskControlTable.js 0 → 100644
View file @ 4d1ac2ff
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Select, Radio, StdForm, Icon, AmosAlert } from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import { Input, Button } 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 Search = Input.Search;
const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '2', name: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '3', name: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '4', name: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '5', name: '复龙换流站5', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '6', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '7', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '8', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '9', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '10', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '11', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '12', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '13', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '14', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '15', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '16', name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' }
];
const tableList2 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '2', name: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '3', name: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '4', name: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ id: '5', 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: '20%',
query: true
},
{
title: <div style={{ color: '#48E0FF' }}>一级</div>,
dataIndex: 'sex',
key: 'sex',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text, record) => {
return <p className="yi">{text}</p>;
}
},
{
title: <div style={{ color: '#F1F10C' }}>二级</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text, record) => {
return <p className="er">{text}</p>;
}
},
{
title: <div style={{ color: '#FF8000' }}>三级</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text, record) => {
return <p className="san">{text}</p>;
}
},
{
title: <div style={{ color: '#FC2F1E' }}>四级</div>,
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '15%',
render: (text, record) => {
return <p className="si">{text}</p>;
}
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '20%'
}
];
};
/**
* 风险管控详情
*/
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 => {
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 });
};
onOk = value => {
console.log('onOk: ', value);
};
fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name: value });
};
onChange = (key, value) => {
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 });
}
};
SearchChange = value => {
alert(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;
return (
<div className="souh">
<div className="sou">
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
<div className="search-two">
<Select
className="search-select-style"
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={value4 => {
this.onChange('grade', value4);
}}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
placeholder="年-月-日"
format="YYYY-MM-DD"
className="input_item_select"
value={moment(startTime)}
style={{ width: '37%' }}
onChange={e => this.onChange('startTime', e)}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
<DatePicker
placeholder="年-月-日"
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={e => this.onChange('endTime', e)}
style={{ width: '37%' }}
allowClear={false}
/>
</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/index.js → src/view/monitor/duty/statistical/index.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import AmosWebSocket from 'amos-websocket';
import AlarmControl from './AlarmControl'; import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl'; import DangerControl from './DangerControl';
import RiskControl from './RiskControl'; import RiskControl from './RiskControl';
import AllSafety from './AllSafety'; import AllSafety from './AllSafety';
import FireSafety from './FireSafety'; import FireSafety from './FireSafety';
import FireStrength from './FireStrength'; import FireStrength from './FireStrength';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts'; import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
import { Modal, Select } from 'amos-framework';
/** /**
* 中心级2侧模块 * 中心级2侧模块
*/ */
export default class Statistical extends Component { export default class Statistical extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible: true visible: true
}; };
} }
handleData = (data = {}) => { handleData = (data = {}) => {
...@@ -27,8 +23,7 @@ export default class Statistical extends Component { ...@@ -27,8 +23,7 @@ export default class Statistical extends Component {
data = JSON.parse(JSON.stringify(data)); data = JSON.parse(JSON.stringify(data));
console.log(data); console.log(data);
let refreshType = data.refreshType; let refreshType = data.refreshType;
let content = data.content; switch (refreshType) {
switch (refreshType){
case 'today_safety_index': case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~'); console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl(); this.RiskControl.getRiskControl();
...@@ -66,42 +61,32 @@ export default class Statistical extends Component { ...@@ -66,42 +61,32 @@ export default class Statistical extends Component {
this.FireStrength.FireStrengthData(); this.FireStrength.FireStrengthData();
break; break;
default: default:
console.log(refreshType,'：类型不支持'); console.log(refreshType, '：类型不支持');
} }
} };
cancel = () => { cancel = () => {
this.setState({ this.setState({
visible: false visible: false
}); });
};
}
render() { render() {
const { visible } = this.state;
const wsURL = completeToken(SysWsURL.viewIndexws); const wsURL = completeToken(SysWsURL.viewIndexws);
return ( return (
<div className="statistical"> <div className="statistical">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> <AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
<div className="statistical-left"> <div className="statistical-left">
<RiskControl ref={node => this.RiskControl = node} /> <RiskControl ref={node => (this.RiskControl = node)} />
<DangerControl ref={node => this.safetyExecute = node} /> <DangerControl ref={node => (this.safetyExecute = node)} />
<AlarmControl ref={node => this.equipStatus = node} /> <AlarmControl ref={node => (this.equipStatus = node)} />
</div> </div>
<div className="statistical-right"> <div className="statistical-right">
<AllSafety ref={node => this.AllSafety = node} /> <AllSafety ref={node => (this.AllSafety = node)} />
<FireSafety ref={node => this.FireSafety = node} /> <FireSafety ref={node => (this.FireSafety = node)} />
<FireStrength ref={node => this.FireStrength = node} /> <FireStrength ref={node => (this.FireStrength = node)} />
</div> </div>
</div> </div>
); );
} }
} }
src/view/monitor/statistical/indexLeft.js → src/view/monitor/duty/statistical/indexLeft.js
View file @ 4d1ac2ff
import React, { Component } from 'react'; import React, { Component } from 'react';
import AmosWebSocket from 'amos-websocket';
import AlarmControl from './AlarmControl'; import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl'; import DangerControl from './DangerControl';
import RiskControl from './RiskControl'; import RiskControl from './RiskControl';
import AmosWebSocket from 'amos-websocket'; import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
/** /**
* 全景监控统计 * 全景监控统计
...@@ -12,41 +11,20 @@ import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts'; ...@@ -12,41 +11,20 @@ import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
export default class StatisticalLeft extends Component { export default class StatisticalLeft extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
}; };
} }
ondetails = (type) => { componentWillMount() {
this.props.ondetails(type);
};
componentWillMount = () => {
};
componentWillReceiveProps = (nextProps) => {
}
}
handleData = (data = {}) => { handleData = (data = {}) => {
console.log('ws data:', data); console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data)); data = JSON.parse(JSON.stringify(data));
console.log(data); console.log(data);
let refreshType = data.refreshType; let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){ switch (refreshType){
case 'today_safety_index': case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~'); console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
...@@ -77,13 +55,12 @@ export default class StatisticalLeft extends Component { ...@@ -77,13 +55,12 @@ export default class StatisticalLeft extends Component {
render() { render() {
const wsURL = completeToken(SysWsURL.viewIndexws); const wsURL = completeToken(SysWsURL.viewIndexws);
const { flag } = this.state;
return ( return (
<div className="statistical-left"> <div className="statistical-left">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<RiskControl ondetails={this.ondetails} /> <RiskControl />
<DangerControl ondetails={this.ondetails} /> <DangerControl />
<AlarmControl ondetails={this.ondetails} /> <AlarmControl />
</div> </div>
); );
} }
......
src/view/monitor/statistical/indexRight.js → src/view/monitor/duty/statistical/indexRight.js
View file @ 4d1ac2ff
...@@ -4,20 +4,18 @@ import AllSafety from './AllSafety'; ...@@ -4,20 +4,18 @@ import AllSafety from './AllSafety';
import FireSafety from './FireSafety'; import FireSafety from './FireSafety';
import FireStrength from './FireStrength'; import FireStrength from './FireStrength';
import AmosWebSocket from 'amos-websocket'; import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from '../../../consts/wsUrlConsts'; import SysWsURL, { completeToken } from '../../../../consts/wsUrlConsts';
/** /**
* 全景监控统计 * 全景监控统计
*/ */
export default class StatisticalRight extends Component { export default class StatisticalRight extends Component {
handleData = (data = {}) => { handleData = (data = {}) => {
console.log('ws data:', data); console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data)); data = JSON.parse(JSON.stringify(data));
console.log(data); console.log(data);
let refreshType = data.refreshType; let refreshType = data.refreshType;
let content = data.content; switch (refreshType) {
switch (refreshType){
case 'error_status': case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~'); console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break; break;
...@@ -40,19 +38,18 @@ export default class StatisticalRight extends Component { ...@@ -40,19 +38,18 @@ export default class StatisticalRight extends Component {
this.FireStrength.FireStrengthData(); this.FireStrength.FireStrengthData();
break; break;
default: default:
console.log(refreshType,'：类型不支持'); console.log(refreshType, '：类型不支持');
} }
} };
render() { render() {
const wsURL = completeToken(SysWsURL.viewIndexws); const wsURL = completeToken(SysWsURL.viewIndexws);
return ( return (
<div className="statistical-right"> <div className="statistical-right">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> <AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
<AllSafety ref={node => this.AllSafety = node} /> <AllSafety ref={node => (this.AllSafety = node)} />
<FireSafety ref={node => this.FireSafety = node} /> <FireSafety ref={node => (this.FireSafety = node)} />
<FireStrength ref={node => this.FireStrength = node} /> <FireStrength ref={node => (this.FireStrength = node)} />
</div> </div>
); );
} }
......
src/view/monitor/equipmentMaintain/EquipmentMaintainLeft.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './../safetyManage/AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '换流站名称',
width: '20%',
dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>,
},
{
title: '装备类型',
width: '10%',
dataIndex: 'zblx',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '累计保养',
width: '10%',
dataIndex: 'ljby',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '保养中',
width: '10%',
dataIndex: 'byz',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: <div className='safe-table-title-font-red'>逾期保养</div>,
width: '20%',
dataIndex: 'yqby',
render: val => <span style={{color:"red"}}>{val}</span>,
},
{
title: <div className='safe-table-title-font-red'>逾期占比</div>,
width: '20%',
dataIndex: 'yqzb',
render: val => <span style={{color:"red"}}>{val}</span>,
}
];
const data = [
{
key: '1',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '2',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '3',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '4',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '5',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '6',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '7',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '8',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '9',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '10',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '11',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '12',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '13',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '14',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '15',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '16',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '17',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '18',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '19',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '20',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '21',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '22',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '23',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '225',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '25',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '26',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '27',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '28',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
},
{
key: '29',
name: '复龙换流站',
zblx: 9,
ljby:170,
byz: 100,
yqby:20,
yqzb:'16.7%'
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 器材保养左侧
*/
class EquipmentMaintainLeft extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 14
};
this.state = {
data: [],
loading: false,
equimentId:null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
};
}
componentDidMount() {
const { pagination } = this.state;
var box1=document.getElementById("equipmentMaintain-bottom-left");
var box2=document.getElementById("one-div");
if(box1 && box2){ //此处在加一层判断，更加严密，如果box存在的情况下获取
console.log(box1.offsetHeight);
console.log(box2.offsetHeight);
this.setState({
tableHeight:(box1.offsetHeight-box2.offsetHeight)
})
}
}
onRequestTable = (callback) => {
this.setState({
data:data,
totalCount:data.length
});
callback && callback(data);
// electricFireListAction(current, pageSize, searchName).then(d => {
// const { dataList, total } = d || {};
// });
}
onChange = (value, item) =>{
console.log(value, item);
}
onTimeChange= (value, dateString)=> {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
console.log(value, item);
}
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () =>{
this.setState({
data:data
})
}
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
this.setState({ fname: value });
}
getPanelHeight = () => {
//计算表格高度
var box1=document.getElementById("equipmentMaintain-bottom-left");
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91
}
};
SearchChange = (value) => {
alert(value)
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
render() {
let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state;
const {onEditClick} =this.props;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state;
return (
<div className="equipmentMaintain-bottom-left" id="equipmentMaintain-bottom-left">
<div className="equipmentMaintain-bottom-left-content">
<div className="one-div" id="one-div">
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={(record) => onEditClick(record)}
/>
</div>
</div>
</div>
);
}
}
EquipmentMaintainLeft.propTypes = {
};
export default EquipmentMaintainLeft;
src/view/monitor/index.js
View file @ 4d1ac2ff
...@@ -3,16 +3,6 @@ import PropTypes from 'prop-types'; ...@@ -3,16 +3,6 @@ import PropTypes from 'prop-types';
import { sessionConsts } from '../../consts/storageConsts'; import { sessionConsts } from '../../consts/storageConsts';
import { Store } from 'amos-tool'; import { Store } from 'amos-tool';
import Header from './../main/header'; import Header from './../main/header';
import loadScripts from 'dt2react/lib/utils/loadScripts';
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;
...@@ -27,13 +17,8 @@ class RootView extends Component { ...@@ -27,13 +17,8 @@ class RootView extends Component {
super(props); super(props);
this.state = { this.state = {
submenu: [], submenu: [],
extendSystem: [], extendSystem: []
loadAmap: false,
BasicMap: null,
visible1: false,
visible2: false,
visible3: false,
flag:false,
}; };
} }
...@@ -41,114 +26,23 @@ class RootView extends Component { ...@@ -41,114 +26,23 @@ class RootView extends Component {
let systemMenu = []; let systemMenu = [];
let systemMenus = JSON.parse(lsTool.read(sessionConsts.systemMenu)); let systemMenus = JSON.parse(lsTool.read(sessionConsts.systemMenu));
systemMenus.map(e =>{ systemMenus.map(e =>{
if(e.permissionName && e.permissionName !=="消防安全管理" && e.permissionName !=="消防实力情况" ){ if (e.permissionName && e.permissionName !== '消防安全管理' && e.permissionName !== '消防实力情况' ){
systemMenu.push(e) systemMenu.push(e);
} }
}) });
this.setState({ extendSystem: systemMenu }); this.setState({ extendSystem: systemMenu });
} }
componentDidMount() { componentDidMount() {
if (outMap) {
Object.keys(localStorage).map(e => {
if (e.indexOf('_AMap') === 0) {
localStorage.removeItem(e);
}
});
let script = null;
let mainUI = null;
script = {
key: 'amapscripts',
//url: `//172.16.3.121:8085/extra/amap/js/outamap.1.4.6.js?rnd= ${Math.random()}`
url: `/extra/amap/js/outamap.1.4.6.js?rnd= ${Math.random()}`
};
mainUI = {
key: 'mainUI',
//url: '//10.56.28.228/webapi.amap.com/ui/1.0/main.js'
url: '/extra/amap/js/outmain.1.4.6.js'
};
loadScripts.asyncLoadScript(script, () => {
loadScripts.asyncLoadScript(mainUI, () => {
setTimeout(() => {
this.setState({
loadAmap: true,
BasicMap: require('./mapScreen/BasicMap')
});
}, 2000);
});
});
} else {
this.setState({
loadAmap: true,
BasicMap: require('./mapScreen/BasicMap')
});
}
} }
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;
return ( return (
<div className="view-root"> <div className="view-root">
<div className="header"> <div className="header">
...@@ -156,51 +50,7 @@ class RootView extends Component { ...@@ -156,51 +50,7 @@ class RootView extends Component {
</div> </div>
<div className="content-body"> <div className="content-body">
{children} {children}
{ 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/mapScreen/index.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* MapScreen
* 地图
* @class MapScreen
* @extends {Component}
*/
class MapScreen extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div className="map-root">
</div>
);
}
}
MapScreen.propTypes = {
};
export default MapScreen;
src/view/monitor/regulate/index.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* regulate
*安全监管
* @class regulate
* @extends {Component}
*/
class Regulate extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
<div className="duty-root">
</div>
);
}
}
Regulate.propTypes = {
};
export default Regulate;
src/view/monitor/safetyManage/SafteyRight.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Table } from 'amos-antd';
import AmosGridTable from './AmosGridTable';
import { Input, Button } from 'amos-antd';
import { DatePicker } from 'amos-antd';
import moment from 'moment';
import dt2react from 'dt2react';
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
const monthFormat = 'YYYY/MM';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;
const columns = [
{
title: '序号',
dataIndex: 'key',
width: '10%',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '科目名称',
width: '15%',
dataIndex: 'kmmc',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '培训时间',
width: '15%',
dataIndex: 'pxsj',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '参加人数',
width: '10%',
dataIndex: 'cjrs',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: <div className = "safe-table-title-font-red-right">0-60</div>,
width: '10%',
dataIndex: '0-60',
render: val => <span style={{color:"red"}}>{val}</span>,
},
{
title:<div className = "safe-table-title-font-yellow">61-85</div>,
width: '10%',
dataIndex: '61-85',
render: val => <span style={{color:"yellow"}}>{val}</span>,
},
{
title: <div className = "safe-table-title-font-green" style ={{paddingTop:"5% !important"}}>86-100</div>,
width: '10%',
dataIndex: '86-100',
render: val => <span style={{color:"green"}}>{val}</span>,
}
,
{
title: '达标率%',
width: '10%',
dataIndex: 'dbl',
render: val => <span style={{color:"white"}}>{val}</span>,
}
];
const data = [
{
key: '1',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '2',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '3',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '4',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '5',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '6',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '7',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '8',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '9',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '10',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '11',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '12',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '13',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '14',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '15',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '16',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '17',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '18',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '19',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '20',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '21',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '22',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '23',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '225',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '25',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '26',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '27',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '28',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
},
{
key: '29',
kmmc: '消防技能培训',
pxsj: "2019-01-01",
cjrs:10,
"0-60": 4,
'61-85':'3',
'86-100':"3",
dbl:"60%"
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 安全培训右侧
*/
class SafteyRight extends Component {
constructor(props) {
super(props);
this.pageConfig = {
current: 1,
pageSize: 10
};
this.state = {
data: [],
loading: false,
equimentId:null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
};
}
componentDidMount() {
const { pagination } = this.state;
var box1=document.getElementById("fire-bottom-left");
var box2=document.getElementById("one-div");
if(box1 && box2){ //此处在加一层判断，更加严密，如果box存在的情况下获取
console.log(box1.offsetHeight);
console.log(box2.offsetHeight);
this.setState({
tableHeight:(box1.offsetHeight-box2.offsetHeight)
})
}
}
onEdit = (id) => {
// this.type = 'edit';
// electricFireDetailsAction(id).then(d => {
// this.setState({
// form: d,
// title: d.name
// })
// })
console.log("id:" + id)
this.setState({
data:data,
totalCount:data.length
})
}
onChange = (value, item) =>{
console.log(value, item);
}
onTimeChange= (value, dateString)=> {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
onOk=(value) =>{
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
console.log(value, item);
}
reload = r => {
this.setState(
{
reload: () => {
r();
this.setState({ selectedRows: [], selectedRowKeys: [] });
}
},
r()
);
};
getAcitonData = () =>{
// this.setState({
// data:data
// })
}
/**
* 分页设置参数
*/
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.pageNumber = current;
}
};
/**
* 获取表格所选则的行数据
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
this.setState({ fname: value });
}
getPanelHeight = () => {
// //计算表格高度
// var box1=document.getElementById("fire-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91;
// }
return 300
};
SearchChange = (value) => {
alert(value)
}
rowClassName = (record, index) => {
let className = index % 2 ? 'back-01': 'back-02';
return className
}
render() {
let defaultPageConfig = this.pageConfig;
const { current, pageSize, total } = this.state;
let { pagination, isChecked, fname,data,totalCount,selectedRowKeys } = this.state;
return (
<div className="fire-bottom-right" id="fire-bottom-right">
<div className="fire-bottom-right-content">
<div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
isPageable={pagination}
totals={totalCount}
callBack={this.reload}
selectedRowKeys={selectedRowKeys}
getSelectedRows={this.getSelectedRows}
getTableDataAction={this.getAcitonData}
isChecked={isChecked}
setPageConfig={this.setPageConfig}
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
);
}
}
SafteyRight.propTypes = {
};
export default SafteyRight;
src/view/monitor/statistical/RiskControlTable.js deleted 100644 → 0
View file @ df33df8f
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Select, Radio,StdForm ,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd';
import { Input, Button } 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 Search = Input.Search;
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: '20%',
query: true,
},
{
title: <div style={{"color":"#48E0FF"}}>一级</div>,
dataIndex: 'sex',
key: 'sex',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="yi">{text}</p> ;
}
},
{
title: <div style={{"color":"#F1F10C"}}>二级</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="er">{text}</p> ;
}
},
{
title: <div style={{"color":"#FF8000"}}>三级</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
query: true,
required: true, //是否是默认显示的
render: (text,record) => {
return <p className="san">{text}</p> ;
}
},
{
title: <div style={{"color":"#FC2F1E"}}>四级</div>,
dataIndex: 'id',
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '15%',
render: (text,record) => {
return <p className="si">{text}</p> ;
}
},
{
title: '小计',
dataIndex: 'age1',
key: 'age1',
query: true,
st: 'text', //搜索的类型
width: '20%'
}
];
};
/**
* 风险管控详情
*/
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) => {
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});
}
onOk=(value) =>{
console.log('onOk: ', value);
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
this.setState({ name:value });
}
onChange = (key, value) => {
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 });
}
}
SearchChange = (value) => {
alert(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;
return (
<div className="souh" >
<div className="sou">
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
<div className="search-two" >
<Select className="search-select-style"
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
placeholder="年-月-日"
format="YYYY-MM-DD"
className="input_item_select"
value={moment(startTime)}
style={{width:'37%'}}
onChange={ e => this.onChange('startTime', e) }
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
placeholder="年-月-日"
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={ e => this.onChange('endTime', e)}
style={{width:'37%'}}
allowClear={false}
/>
</div>
</div>
<div className="inputxqtable">
<InputTable
columns={checkInputColumns(this)}
callBack={this.reload}
dataSource={dataList}
totals={totals}
getTableDataAction={this.fillCheckInputTable}
/>
</div>
</div>
);
}
}
export default RiskControlTable;
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