Skip to content

S
station-elec-manage-view
Commit f3086ef5 authored by 李成龙's avatar 李成龙
Browse files
Options

代码优化

parent 3dd53237
Show whitespace changes
Inline Side-by-side
Showing with 2960 additions and 3918 deletions
.prettierrc
View file @ f3086ef5
......@@ -4,7 +4,7 @@
"useTabs": false,
"semi": true,
"singleQuote": true,
"parser": "babylon",
"parser": "babel",
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
......
amos.config.js
View file @ f3086ef5
......@@ -13,6 +13,7 @@
securityBaseURI: 'http://172.16.10.72:10005/',
//基础平台
loginURI: 'http://172.16.10.72/',
//地图服务
picURI: 'http://172.16.3.121:8001/'
},
// websocket 地址
......
src/_mock/mock.json 0 → 100644
View file @ f3086ef5
{
"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 @ f3086ef5
......@@ -3,14 +3,13 @@ import RootView from '../view/monitor';
import Duty from '../view/monitor/duty';
import Situation from '../view/biz/duty/situation';
import SituationDetail from '../view/biz/duty/situationDetail';
import Regulate from '../view/monitor/regulate';
import Bills from '../view/biz/regulate/bills';
import RootBizView from './../view/biz/index';
import EmptyPage from './../view/common/emptyPage/EmptyPage';
import SafetyTraining from './../view/monitor/safetyManage/index';
import DaliyTraining from './../view/monitor/dailyTrain/index';
import EquipmentMaintain from './../view/monitor/equipmentMaintain/index';
import SafetyInspection from './../view/monitor/safetyInspection/index';
import SafetyManage from './../view/monitor/duty/safetyManage/index';
import DaliyTraining from './../view/monitor/duty/dailyTrain/index';
import EquipmentMaintain from './../view/monitor/duty/equipmentMaintain/index';
import SafetyInspection from './../view/monitor/duty/safetyInspection/index';
import FireMaterial from './../view/strength/fireMaterial/index';
import FireVehicle from './../view/strength/fireVehicle/index';
import StationFireMan from './../view/strength/stationFireMan/index';
......@@ -22,26 +21,28 @@ import EmergencyPlan from './../view/biz/emergency/plan';
const Routes = {
main: RootView,
//日常值守
duty: Duty,
situation: Situation,
situationDetail: SituationDetail,
regulate: Regulate,
bills: Bills,
//应急指挥
emergency: Duty,
disaster: Disaster,
history: History,
plan: EmergencyPlan,
safetyTraining: SafetyTraining,
safetyInspection: SafetyInspection,
dailyTrain: DaliyTraining,
equipmentMaintain: EquipmentMaintain,
safetyInspection: SafetyInspection,
safetyTraining: SafetyManage,
//安全监管
regulate: Duty,
bills: Bills,
fireMaterial: FireMaterial,
fireVehicle: FireVehicle,
stationFireMan: StationFireMan,
stationFireTeam: StationFireTeam,
stationDuty: StationDuty
stationDuty: StationDuty,
//应急指挥
emergency: Duty,
disaster: Disaster,
history: History,
plan: EmergencyPlan
};
export const businessRouts = [
......
src/services/mockServices.js 0 → 100644
View file @ f3086ef5
import { commonGet } from '../utils/request';
const mockFetch = (jsonUrl) => {
return commonGet(jsonUrl);
};
export const mockService = function() {
return mockFetch('/src/_mock/mock.json');
};
src/view/biz/regulate/bills/index.js
View file @ f3086ef5
......@@ -10,34 +10,20 @@ import PropTypes from 'prop-types';
class Bills extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
this.state = {};
}
componentDidMount() {
componentWillMount() {}
}
componentWillUnmount() {
componentDidMount() {}
}
componentWillUnmount() {}
render() {
return (
<div className="class-bills">
单据管理
</div>
);
return <div className="class-bills">单据管理</div>;
}
}
Bills.propTypes = {
};
Bills.propTypes = {};
export default Bills;
src/view/monitor/dailyTrain/DailyTrainRight.js deleted 100644 → 0
View file @ 3dd53237
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 @ f3086ef5
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 { Select } from 'amos-framework';
import { Input } 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 AmosGridTable from './../safetyManage/AmosGridTable';
import { Select } from 'amos-framework';
const Option = Select.Option;
const Search = Input.Search;
......@@ -23,44 +13,43 @@ const columns = [
dataIndex: 'key',
width: '10%',
align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '换流站名称',
width: '20%',
dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>,
render: val => <span style={{ color: 'yellow' }}>{val}</span>
},
{
title: '科目数',
width: '10%',
dataIndex: 'kemu',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '次数',
width: '10%',
dataIndex: 'cishu',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '参加人员',
width: '10%',
dataIndex: 'cjry',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '人员达标率',
width: '20%',
dataIndex: 'rydbl',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '最近培训时间',
width: '20%',
dataIndex: 'date',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
}
];
const data = [
......@@ -68,267 +57,266 @@ const data = [
key: '1',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '2',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '3',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '4',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '5',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '6',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '7',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '8',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '9',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '10',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '11',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '12',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '13',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '14',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '15',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '16',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '17',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '18',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '19',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '20',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '21',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '22',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '23',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '225',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '25',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '26',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '27',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '28',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '29',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
......@@ -338,18 +326,12 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 日常训练左侧
*/
class DailyTrainyLeft extends Component {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -359,65 +341,54 @@ class DailyTrainyLeft extends Component {
this.state = {
data: [],
loading: false,
equimentId:null,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
tableHeight: 450
};
}
componentDidMount() {
}
onRequestTable = (callback) => {
componentDidMount() {}
onRequestTable = callback => {
this.setState({
data:data,
totalCount:data.length
data: data,
totalCount: data.length
});
callback && callback(data);
// electricFireListAction(current, pageSize, searchName).then(d => {
// const { dataList, total } = d || {};
// });
}
};
onChange = (value, item) =>{
onChange = (value, item) => {
console.log(value, item);
};
}
onTimeChange= (value, dateString)=> {
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
};
onOk=(value) =>{
onOk = value => {
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
};
onChangeSelect = (value, item) => {
console.log(value, item);
}
};
reload = r => {
this.setState(
......@@ -431,12 +402,11 @@ class DailyTrainyLeft extends Component {
);
};
getAcitonData = () =>{
getAcitonData = () => {
this.setState({
data:data
})
}
data: data
});
};
/**
* 分页设置参数
......@@ -458,42 +428,38 @@ class DailyTrainyLeft extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
searchData = () => {
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
}
};
getPanelHeight = () => {
//计算表格高度
var box1=document.getElementById("dailyTrain-bottom-left");
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91
var box1 = document.getElementById('dailyTrain-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
}
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;
const { onEditClick } = this.props;
let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="dailyTrain-bottom-left" id="dailyTrain-bottom-left">
<div className="dailyTrain-bottom-left-content">
......@@ -503,46 +469,25 @@ rowClassName = (record, index) => {
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
<div className="search-two" >
<Select className="search-select-style"
<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 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} />
&nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
<DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
......@@ -557,24 +502,15 @@ rowClassName = (record, index) => {
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={(record) => onEditClick(record)}
onRowClick={record => onEditClick(record)}
/>
</div>
</div>
</div>
);
}
}
DailyTrainyLeft.propTypes = {
};
DailyTrainyLeft.propTypes = {};
export default DailyTrainyLeft;
src/view/monitor/duty/dailyTrain/DailyTrainRight.js 0 → 100644
View file @ f3086ef5
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 @ f3086ef5
......@@ -2,12 +2,10 @@ import React, { Component } from 'react';
import DailyTrainyLeft from './DailyTrainLeft';
import DailyTrainRight from './DailyTrainRight';
/**
* 日常训练模块
*/
export default class DailyTrain extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -15,25 +13,23 @@ export default class DailyTrain extends Component {
};
}
componentDidMount(){
componentDidMount() {
//右侧窗口默认显示第一个数据查询的列表
this.list && this.list.onRequestTable((list) => this.onEditClick(list[0]))
}
onEditClick = (record) => {
this.listTwo.onEdit(record.key)
this.list && this.list.onRequestTable(list => this.onEditClick(list[0]));
}
onEditClick = record => {
this.listTwo.onEdit(record.key);
};
render() {
return (
<div className="dailyTrain-safety">
<div className="dailyTrain-safty-content">
<div className="dailyTrain-top"></div>
<div className="dailyTrain-top" />
<div className="dailyTrain-bottom">
<DailyTrainyLeft ref={node => this.list = node} onEditClick={this.onEditClick}/>
<DailyTrainRight ref={node => this.listTwo = node}/>
<DailyTrainyLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<DailyTrainRight ref={node => (this.listTwo = node)} />
</div>
</div>
</div>
......
src/view/monitor/duty/equipmentMaintain/EquipmentMaintainLeft.js 0 → 100644
View file @ f3086ef5
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 @ f3086ef5
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>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '装备名称',
width: '20%',
dataIndex: 'zbmc',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '装备分类',
width: '20%',
dataIndex: 'zbfl',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '计量单位',
width: '20%',
dataIndex: 'jldw',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '保养周期',
width: '20%',
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%',
dataIndex: 'dbtj',
render: val => <span style={{color:"red"}}>{val}</span>,
render: val => <span style={{ color: 'red' }}>{val}</span>
}
];
const data = [
{
key: '1',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '2',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '3',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '4',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '5',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '6',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '7',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '8',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '9',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '10',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '11',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '12',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '13',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '14',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '15',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '16',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '17',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '18',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '19',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '20',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '21',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '22',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '23',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '225',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '25',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '26',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '27',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '28',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
},
{
key: '29',
zbmc: '灭火防护服',
zbfl: "个人防护类",
jldw:'个',
zbfl: '个人防护类',
jldw: '个',
byzq: '6月',
dbtj:12,
dbtj: 12
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
......@@ -303,22 +284,16 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 器材保养右侧
*/
class EquipmentMaintainRight extends Component {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -328,39 +303,38 @@ class EquipmentMaintainRight extends Component {
this.state = {
data: [],
loading: false,
equimentId:null,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
tableHeight: 450
};
}
componentDidMount() {
const { pagination } = this.state;
var box1=document.getElementById("equipmentMaintain-bottom-left");
var box2=document.getElementById("one-div");
if(box1 && box2){ //此处在加一层判断，更加严密，如果box存在的情况下获取
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)
})
tableHeight: box1.offsetHeight - box2.offsetHeight
});
}
}
onEdit = (id) => {
onEdit = id => {
// this.type = 'edit';
// electricFireDetailsAction(id).then(d => {
// this.setState({
......@@ -368,37 +342,29 @@ class EquipmentMaintainRight extends Component {
// title: d.name
// })
// })
console.log("id:" + id)
console.log('id:' + id);
this.setState({
data:data,
totalCount:data.length
})
}
onChange = (value, item) =>{
data: data,
totalCount: data.length
});
};
onChange = (value, item) => {
console.log(value, item);
};
}
onTimeChange= (value, dateString)=> {
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
};
onOk=(value) =>{
onOk = value => {
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
};
onChangeSelect = (value, item) => {
console.log(value, item);
}
};
reload = r => {
this.setState(
......@@ -412,12 +378,11 @@ class EquipmentMaintainRight extends Component {
);
};
getAcitonData = () =>{
getAcitonData = () => {
// this.setState({
// data:data
// })
}
};
/**
* 分页设置参数
......@@ -439,58 +404,46 @@ class EquipmentMaintainRight extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
searchData = () => {
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
}
};
getPanelHeight = () => {
// //计算表格高度
// var box1=document.getElementById("equipmentMaintain-bottom-right");
// if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
// return box1.offsetHeight * 0.91;
// }
return 300
return 300;
};
SearchChange = (value) => {
alert(value)
}
SearchChange = 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() {
let defaultPageConfig = this.pageConfig;
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 (
<div className="equipmentMaintain-bottom-right" id="equipmentMaintain-bottom-right">
<div className="equipmentMaintain-bottom-right-content">
<div className="one-div">
<div className=" content-font-wenzi"> 中州换流站</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
......@@ -506,10 +459,6 @@ rowClassName = (record, index) => {
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
......@@ -517,9 +466,6 @@ rowClassName = (record, index) => {
}
}
EquipmentMaintainRight.propTypes = {
};
EquipmentMaintainRight.propTypes = {};
export default EquipmentMaintainRight;
src/view/monitor/equipmentMaintain/index.js → src/view/monitor/duty/equipmentMaintain/index.js
View file @ f3086ef5
......@@ -2,12 +2,10 @@ import React, { Component } from 'react';
import EquipmentMaintainLeft from './EquipmentMaintainLeft';
import EquipmentMaintainRight from './EquipmentMaintainRight';
/**
* 器材保养模块
*/
export default class EquipmentMaintainTrain extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -15,16 +13,14 @@ export default class EquipmentMaintainTrain extends Component {
};
}
componentDidMount(){
componentDidMount() {
//右侧窗口默认显示第一个数据查询的列表
this.list && this.list.onRequestTable((list) => this.onEditClick(list[0]))
}
onEditClick = (record) => {
this.listTwo.onEdit(record.key)
this.list && this.list.onRequestTable(list => this.onEditClick(list[0]));
}
onEditClick = record => {
this.listTwo.onEdit(record.key);
};
render() {
return (
......@@ -32,8 +28,8 @@ export default class EquipmentMaintainTrain extends Component {
<div className="equipmentMaintain-safty-content">
<div className="equipmentMaintain-top"></div>
<div className="equipmentMaintain-bottom">
<EquipmentMaintainLeft ref={node => this.list = node} onEditClick={this.onEditClick}/>
<EquipmentMaintainRight ref={node => this.listTwo = node}/>
<EquipmentMaintainLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<EquipmentMaintainRight ref={node => (this.listTwo = node)} />
</div>
</div>
</div>
......
src/view/monitor/duty/index.js
View file @ f3086ef5
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 './../../monitor/statistical/indexLeft';
import CenterLevelRight from './../../monitor/statistical/indexRight';
/**
* duty
......@@ -11,32 +14,63 @@ class Duty extends Component {
constructor(props) {
super(props);
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() {
let BasicMap = this.state.BasicMap;
return (
<div className="duty-root">
{this.state.loadAmap && <BasicMap />}
<CenterLevelLeft />
<CenterLevelRight />
</div>
);
}
}
Duty.propTypes = {
};
Duty.propTypes = {};
export default Duty;
src/view/monitor/mapScreen/BasicMap.js → src/view/monitor/duty/mapScreen/BasicMap.js
View file @ f3086ef5
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { BaseMap, Marker, Polyline, Circle } from 'amos-amap';
import { _picURI, _mapCenter } from './../../../consts/urlConsts';
import imgStatic from './../../../consts/imgStatic';
import mapData from './../../../_mock/mapData';
import { BaseMap, Marker, Polyline } from 'amos-amap';
import { _picURI, _mapCenter,outMap } from './../../../../consts/urlConsts';
import imgStatic from './../../../../consts/imgStatic';
import mapData from './../../../../_mock/mapData';
import { getIcon } from './conf';
import { up } from './conf';
import { utils } from 'amos-tool';
import { outMap } from './../../../consts/urlConsts';
const mapIcon = imgStatic.mapIcon;
const showZoom = 5;
......@@ -16,7 +13,6 @@ const mapConfig = {
zoom: showZoom,
resizeEnable: true,
zoomEnable: true,
// plugins: ['Scale', 'MapType', 'OverView', 'ControlBar'],
plugins: ['Scale'],
zooms: [showZoom, showZoom],
expandZoomRange: true,
......@@ -36,7 +32,6 @@ const layers = [
const statusEnum = { '2': '告警', '3': '高风险' };
/**
* 地图首页
*
......@@ -55,14 +50,14 @@ class BasicMap extends Component {
};
}
componentDidMount(){
componentDidMount() {
this.initData();
}
initData = () => {
let temp = [];
mapData.map(item => {
if (item.status !== 1){
if (item.status !== 1) {
temp.push(item);
}
});
......@@ -70,23 +65,23 @@ class BasicMap extends Component {
this.setState({
alarmList: temp
});
}
};
initMap = () => {
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 num = 0;
let temp = {};
mapData.map(item => {
if (visibleList.includes(item.name)){
if (visibleList.includes(item.name)) {
num = num + 1;
item.title = true;
if (num === 1 ){
if (num === 1) {
temp = item;
}
} else {
......@@ -97,39 +92,39 @@ class BasicMap extends Component {
visible: true,
selectData: temp
});
setTimeout(()=>{
setTimeout(() => {
this.setState({
visible: false
});
},500);
}
}, 500);
};
renderAliasLine = (e) => {
renderAliasLine = e => {
let { selectData } = this.state;
let divStyle = {
marginTop: '-11px',
transform: `rotate(${selectData.gradient}deg)`
};
if (selectData.gradient <= 0){
if (selectData.gradient <= 0) {
divStyle.marginTop = '-50px';
}
if (selectData.position === 'right'){
if (selectData.position === 'right') {
divStyle.right = '0px';
}
if (selectData.pathName){
if (selectData.pathName) {
return (
<Marker key={selectData.id} zIndex={1} position={{ longitude: selectData.lng, latitude: selectData.lat }}>
<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_title} className='alias-title'></img>
<img src={mapIcon.alias_line} style={{ width: `${selectData.width}px`, height: `${selectData.height}px` }} />
<img src={mapIcon.alias_title} className="alias-title" />
<span style={{ width: `${selectData.width}px` }}>{selectData.pathName}</span>
</div>
</Marker>
);
}
}
};
/**
* 设置末端marker
......@@ -137,28 +132,33 @@ class BasicMap extends Component {
* @memberof BasicMap
*/
setBodyMarker = () => {
let { aliasName } = this.state;
return (mapData || []).map((item, index) => {
if (item.type === 'center') {
return (<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
return (
<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
<div className={`marker-center`}>
<div className='title'>
<div className="title">
<span>{item.name}</span>
<img src={mapIcon.endmost_title_2} />
</div>
<img src={getIcon(item.type, item.status)}></img>
</div>
</Marker>);
</Marker>
);
} else {
return (<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
return (
<Marker key={item.id} zIndex={1} position={{ longitude: item.lng, latitude: item.lat }}>
<div className={`marker-icon`}>
{ item.title && <div className='title'>
{item.title && (
<div className="title">
<span>{item.name}</span>
<img src={getIcon(item.type, 'title_' + item.status)} />
</div>}
</div>
)}
<img src={getIcon(item.type, item.status)} onClick={() => this.onClick(item)}></img>
</div>
</Marker>);
</Marker>
);
}
});
};
......@@ -172,13 +172,7 @@ class BasicMap extends Component {
let { lineStyle } = this.state;
return (mapData || []).map((item, index) => {
if (item) {
return ( <Polyline
key={item.id}
zIndex={11}
path={item.path}
style={lineStyle}
extData={item}
/>);
return <Polyline key={item.id} zIndex={11} path={item.path} style={lineStyle} extData={item} />;
}
});
};
......@@ -187,37 +181,38 @@ class BasicMap extends Component {
let { alarmList } = this.state;
return (alarmList || []).map((item, index) => {
if (item) {
return (<div className={`row-${item.status}`} key={index}>
return (
<div className={`row-${item.status}`} key={index}>
<span>{item.name}</span>
<span className='right'>{statusEnum[item.status]}</span>
</div>);
<span className="right">{statusEnum[item.status]}</span>
</div>
);
}
});
}
};
buildExplain = () => {
return (
<div className='content-explain'>
<div className='row'>
<div className='fault'></div>
<div className="content-explain">
<div className="row">
<div className="fault"></div>
<span>高风险</span>
</div>
<div className='row'>
<div className='alarm'></div>
<div className="row">
<div className="alarm"></div>
<span>告警</span>
</div>
<div className='row'>
<div className='normal'></div>
<div className="row">
<div className="normal"></div>
<span>安全</span>
</div>
</div>
);
}
};
setInstanceToGlobal = inst => {
this.map = inst;
window.map = inst;
//this.initMap();
};
render() {
......@@ -231,20 +226,15 @@ class BasicMap extends Component {
let { mapCenter, visible } = this.state;
return (
<div className="map-root">
<div className='content-alarm'>
{this.buildAlarm()}
</div>
{visible && <div className='loading'>
<div className="content-alarm">{this.buildAlarm()}</div>
{visible && (
<div className="loading">
<img src={mapIcon.loading}></img>
<span>数据更新完毕！</span>
</div>}
<div className='map'>
<BaseMap events={events}
useAMapUI
center={mapCenter}
{...mapConfig}
dragEnable={false}
>
</div>
)}
<div className="map">
<BaseMap events={events} useAMapUI center={mapCenter} {...mapConfig} dragEnable={false}>
{this.setBodyMarker()}
{this.setBodyLine()}
{this.renderAliasLine()}
......@@ -261,7 +251,6 @@ class BasicMap extends Component {
}
}
BasicMap.propTypes = {
};
BasicMap.propTypes = {};
export default BasicMap;
src/view/monitor/mapScreen/conf.js → src/view/monitor/duty/mapScreen/conf.js
View file @ f3086ef5
import imgStatic from './../../../consts/imgStatic';
const mapIcon = imgStatic.mapIcon;
import imgStatic from './../../../../consts/imgStatic';
const mapIcon = imgStatic.mapIcon;
export const up = (x,y) => {
return y.status - x.status;
};
export const getIcon = (type, status) => {
return mapIcon[`${type}_${status}`];
};
src/view/monitor/safetyInspection/SafetyInspectionLeft.js → src/view/monitor/duty/safetyInspection/SafetyInspectionLeft.js
View file @ f3086ef5
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
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 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 = [
......@@ -23,44 +10,43 @@ const columns = [
dataIndex: 'key',
width: '10%',
align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '换流站名称',
width: '20%',
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%',
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%',
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%',
dataIndex: 'jdxjjh',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '发现隐患数',
width: '10%',
dataIndex: 'fxyhs',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '处理隐患数',
width: '15%',
dataIndex: 'clyhs',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
}
];
const data = [
......@@ -68,289 +54,269 @@ const data = [
key: '1',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '2',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '3',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '4',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '5',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '6',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '7',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '8',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '9',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '10',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '11',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '12',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '13',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '14',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '15',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '16',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '17',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '18',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '19',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '20',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '21',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '22',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '23',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '225',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '25',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '26',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '27',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '28',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
fxyhs: 3,
clyhs:7,
clyhs: 7
},
{
key: '29',
name: '复龙换流站',
rxjjh: 170,
yxjjh:100,
jdxjjh:270,
yxjjh: 100,
jdxjjh: 270,
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 {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -360,53 +326,41 @@ class SafetyInspectionLeft extends Component {
this.state = {
data: [],
loading: false,
equimentId:null,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
tableHeight: 450
};
}
componentDidMount() {
}
onChange = (value, item) =>{
componentDidMount() {}
onChange = (value, item) => {
console.log(value, item);
};
}
onTimeChange= (value, dateString)=> {
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
};
onOk=(value) =>{
onOk = value => {
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
};
onChangeSelect = (value, item) => {
console.log(value, item);
}
};
reload = r => {
this.setState(
......@@ -420,12 +374,11 @@ class SafetyInspectionLeft extends Component {
);
};
getAcitonData = () =>{
getAcitonData = () => {
this.setState({
data:data
})
}
data: data
});
};
/**
* 分页设置参数
......@@ -447,41 +400,37 @@ class SafetyInspectionLeft extends Component {
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
searchData = () => {
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
alert(name);
};
onChange = (e, value) => {
this.setState({ fname: value });
}
};
getPanelHeight = () => {
//计算表格高度
var box1=document.getElementById("safetyInspection-bottom-left");
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91
var box1 = document.getElementById('safetyInspection-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
}
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;
let { pagination, isChecked, fname, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="safetyInspection-bottom-left" id="safetyInspection-bottom-left">
<div className="safetyInspection-bottom-left-content">
......@@ -491,14 +440,9 @@ rowClassName = (record, index) => {
<div className="search-one-input">
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
......@@ -514,22 +458,13 @@ rowClassName = (record, index) => {
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
/>
</div>
</div>
</div>
);
}
}
SafetyInspectionLeft.propTypes = {
};
SafetyInspectionLeft.propTypes = {};
export default SafetyInspectionLeft;
src/view/monitor/safetyInspection/index.js → src/view/monitor/duty/safetyInspection/index.js
View file @ f3086ef5
import React, { Component } from 'react';
import SafetyInspectionLeft from './SafetyInspectionLeft';
/**
* 安全巡检模块
*/
export default class SafetyInspection extends Component {
render() {
return (
<div className="safetyInspection-safety">
......@@ -14,7 +12,6 @@ export default class SafetyInspection extends Component {
<div className="safetyInspection-top"></div>
<div className="safetyInspection-bottom">
<SafetyInspectionLeft />
</div>
</div>
</div>
......
src/view/monitor/safetyManage/AmosGridTable.js → src/view/monitor/duty/safetyManage/AmosGridTable.js
View file @ f3086ef5
......@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
import { Table } from 'amos-antd';
import { Log } from 'amos-tool';
/**
* 基础信息表格组件
* @class AmosGridTable
......@@ -15,15 +12,15 @@ class AmosGridTable extends Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],//表格选择的行key值集合
selectedRows: [],//表格选择的行数据集合
loading: false,//页面是否加载中,默认false
dataList: [],//表格数据集合
size: 'middle',//表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
filter: {},//表格过滤条件
totals: 1,//所有数据总和
selectedRowKeys: [], //表格选择的行key值集合
selectedRows: [], //表格选择的行数据集合
loading: false, //页面是否加载中,默认false
dataList: [], //表格数据集合
size: 'middle', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10, //当前页数据量
filter: {}, //表格过滤条件
totals: 1, //所有数据总和
showFilter: true,
otherFilter: props.otherFilter,
maxHeight: 450
......@@ -40,10 +37,10 @@ class AmosGridTable extends Component {
}
componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url){
if (nextProps.url !== this.props.url) {
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);
}
}
......@@ -52,104 +49,111 @@ class AmosGridTable extends Component {
window.removeEventListener('resize', this.onWindowResize);
}
onWindowResize = (e) => {
onWindowResize = e => {
this.getHeightOffset();
}
};
/**
* 获取复选框选择的数据，并进行回调
*/
onSelectChange = (selectedRowKeys,selectedRows) => {
this.setState({
onSelectChange = (selectedRowKeys, selectedRows) => {
this.setState(
{
selectedRowKeys,
selectedRows
},this.props.getSelectedRows(selectedRows,selectedRowKeys));
}
},
this.props.getSelectedRows(selectedRows, selectedRowKeys)
);
};
/**
* 设置页面数据大小事件
*/
onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload);
}
this.setState({ current, pageSize }, this.reload);
};
/**
* 设置当前页事件
*/
onPaginationChange = (current) => {
onPaginationChange = current => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload);
}
this.setState({ current }, this.reload);
};
/**
* 获取表格所有的外部按钮封装成数组
*/
getbtns = () => {
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 res = {};
let list = Object.keys(newobj);
list.map(e=>{
list.map(e => {
let varName = newobj[e];
if (varName && varName !== ''){
if (varName && varName !== '') {
res[e] = varName;
if (e === 'enabled'){
if (e === 'enabled') {
res[e] = varName === '启用';
}
}
});
this.setState({ filter: res },this.reload);
}
this.setState({ filter: res }, this.reload);
};
openFilter = () => {
let showFilter = this.state.showFilter;
this.setState({ showFilter: !showFilter });
}
};
/**
* 获取表格数据（刷新）
*/
reload = () => {
let { current,pageSize,filter,otherFilter } = this.state;
this.props.getTableDataAction({ current: current - 1, pageSize },JSON.stringify(filter),otherFilter);
let { current, pageSize, filter, otherFilter } = this.state;
this.props.getTableDataAction({ current: current - 1, pageSize }, JSON.stringify(filter), otherFilter);
this.getHeightOffset();
}
};
/**
* 获取表格内部按钮
*/
addOperateCol =(text,record) =>{
addOperateCol = (text, record) => {
const { operateCol } = this.props;
let operBtns = operateCol(text,record);
return (<div className='operation-buttons'>{operBtns}</div>);
}
let operBtns = operateCol(text, record);
return <div className="operation-buttons">{operBtns}</div>;
};
showTotal = (total) => {
showTotal = total => {
return `共 ${total} 条`;
}
};
generateRowkey = (record, index) => {
// return record.id ? record.id : UUID.uuidFast();
return record.key ? record.key : record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
// return index + (this.state.current - 1) * this.state.pageSize;
}
};
getHeightOffset = () => {
let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? 450 : getPanelHeight();
height && this.setState({ maxHeight: height });
}
};
isVisableSearch(columns){
isVisableSearch(columns) {
let list = columns;
let res = false;
list.map((e)=>{
if (e.query){
list.map(e => {
if (e.query) {
res = true;
return true;
}
......@@ -158,8 +162,8 @@ class AmosGridTable extends Component {
}
render() {
const { loading, selectedRowKeys,size,maxHeight } = this.state;
let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals,rowClassName, onRowClick, onRowDoubleClick } = this.props;
const { loading, selectedRowKeys, size, maxHeight } = this.state;
let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals, rowClassName, onRowClick, onRowDoubleClick } = this.props;
//设置复选框参数
let rowSelection = {
......@@ -169,10 +173,11 @@ class AmosGridTable extends Component {
//设置是否添加复选框
rowSelection = isChecked ? rowSelection : undefined;
//如果表格各行存在内部按钮，将各个按钮添加到表格列模型中
if (operateCol){
columns[columns.length - 1].render = (text,record) => this.addOperateCol(text,record);
if (operateCol) {
columns[columns.length - 1].render = (text, record) => this.addOperateCol(text, record);
}
let tepmPage = Object.assign({
let tepmPage = Object.assign(
{
size: 'small',
total: totals,
current: this.state.current,
......@@ -181,8 +186,10 @@ class AmosGridTable extends Component {
onChange: this.onPaginationChange,
showSizeChanger: true,
showTotal: this.showTotal
}, pagination);
let _tempPagination = isPageable === false ? false :tepmPage;
},
pagination
);
let _tempPagination = isPageable === false ? false : tepmPage;
let bordered = true;
// 当为true 或 undefined时则分页
let _pagination = isPageable === false ? false : _tempPagination;
......@@ -191,11 +198,9 @@ class AmosGridTable extends Component {
let searchStyle = { display };
return (
<div className="table-styles">
{ onRowClick ?
{onRowClick ? (
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
......@@ -207,9 +212,9 @@ class AmosGridTable extends Component {
scroll={{ y: maxHeight }}
rowClassName={rowClassName}
onRowClick={onRowClick}
/> :
/>
) : (
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
......@@ -222,22 +227,21 @@ class AmosGridTable extends Component {
rowClassName={rowClassName}
onRowDoubleClick={onRowDoubleClick}
/>
}
)}
</div>
);
}
}
AmosGridTable.propTypes = {
url: PropTypes.string,//请求表格数据的url不带参数的
columns: PropTypes.array,//表格列模型
getSelectedRows: PropTypes.func,//获取选择的行数据，用于各个具体的表格回调获取数据。
operBtns: PropTypes.array,//表格外部操作按钮，如'新增'，'编辑'等
isChecked: PropTypes.bool,//表格是否包含复选框
operateCol: PropTypes.func,//表格内部操作按钮，如'查看详情'等
callBack: PropTypes.func,//获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
otherFilter: PropTypes.string,//其他查询条件
url: PropTypes.string, //请求表格数据的url不带参数的
columns: PropTypes.array, //表格列模型
getSelectedRows: PropTypes.func, //获取选择的行数据，用于各个具体的表格回调获取数据。
operBtns: PropTypes.array, //表格外部操作按钮，如'新增'，'编辑'等
isChecked: PropTypes.bool, //表格是否包含复选框
operateCol: PropTypes.func, //表格内部操作按钮，如'查看详情'等
callBack: PropTypes.func, //获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
otherFilter: PropTypes.string, //其他查询条件
dataList: PropTypes.array,
getTableDataAction: PropTypes.func,
selectedRowKeys: PropTypes.array,
......
src/view/monitor/safetyManage/SafteyLeft.js → src/view/monitor/duty/safetyManage/SafteyLeft.js
View file @ f3086ef5
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 { Input } from 'amos-antd';
import { Select } from 'amos-framework';
import AmosGridTable from './AmosGridTable';
const Option = Select.Option;
const Search = Input.Search;
......@@ -23,44 +13,43 @@ const columns = [
dataIndex: 'key',
width: '10%',
align: 'center', // 设置文本居中的属性
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '换流站名称',
width: '20%',
dataIndex: 'name',
render: val => <span style={{color:"yellow"}}>{val}</span>,
render: val => <span style={{ color: 'yellow' }}>{val}</span>
},
{
title: '科目数',
width: '10%',
dataIndex: 'kemu',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '次数',
width: '10%',
dataIndex: 'cishu',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '参加人员',
width: '10%',
dataIndex: 'cjry',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '人员达标率',
width: '20%',
dataIndex: 'rydbl',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
},
{
title: '最近培训时间',
width: '20%',
dataIndex: 'date',
render: val => <span style={{color:"white"}}>{val}</span>,
render: val => <span style={{ color: 'white' }}>{val}</span>
}
];
const data = [
......@@ -68,267 +57,266 @@ const data = [
key: '1',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '2',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '3',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '4',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '5',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '6',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '7',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '8',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '9',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '10',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '11',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '12',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '13',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '14',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '15',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '16',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '17',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '18',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '19',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '20',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '21',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '22',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '23',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '225',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '25',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '26',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '27',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '28',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
},
{
key: '29',
name: '复龙换流站',
kemu: 3,
cishu:4,
cishu: 4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
rydbl: '50%',
date: '2019-01-01'
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
......@@ -338,18 +326,12 @@ const selectdata = [
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 安全培训左侧
*/
class SafteyLeft extends Component {
constructor(props) {
super(props);
this.pageConfig = {
......@@ -359,67 +341,49 @@ class SafteyLeft extends Component {
this.state = {
data: [],
loading: false,
equimentId:null,
equimentId: null,
pagination: true,
isChecked: false,
selectedRows: [],
selectedRowKeys: [],
dataList: [],
newDataList:[],
totalCount:0,
searchParam:'',
fname:'',
newDataList: [],
totalCount: 0,
searchParam: '',
fname: '',
current: 1,
pageSize: 10,
total: 0,
tableHeight:450
tableHeight: 450
};
}
componentDidMount() {
}
onRequestTable = (callback) => {
componentDidMount() {}
onRequestTable = callback => {
this.setState({
data:data,
totalCount:data.length
data: data,
totalCount: data.length
});
callback && callback(data);
};
// electricFireListAction(current, pageSize, searchName).then(d => {
// const { dataList, total } = d || {};
// });
}
onChange = (value, item) =>{
onChange = (value, item) => {
console.log(value, item);
};
}
onTimeChange= (value, dateString)=> {
onTimeChange = (value, dateString) => {
console.log('Selected Time: ', value);
console.log('Formatted Selected Time: ', dateString);
}
};
onOk=(value) =>{
onOk = value => {
console.log('onOk: ', value);
}
onChangeSelect = (value, item) =>{
};
onChangeSelect = (value, item) => {
console.log(value, item);
}
};
reload = r => {
this.setState(
......@@ -433,12 +397,11 @@ class SafteyLeft extends Component {
);
};
getAcitonData = () =>{
getAcitonData = () => {
this.setState({
data:data
})
}
data: data
});
};
/**
* 分页设置参数
......@@ -456,95 +419,63 @@ class SafteyLeft extends Component {
*/
getSelectedRows = (selectedRows, selectedRowKeys) => {
this.setState({ selectedRows, selectedRowKeys });
let { riskSourceId, equipmentId, callBack } = this.props;
// callBack(selectedRowKeys,riskSourceId,equipmentId);
};
searchData =()=>{
searchData = () => {
let name = this.state.fname;
alert(name)
}
onChange = (e,value) =>{
};
onChange = (e, value) => {
this.setState({ fname: value });
}
};
getPanelHeight = () => {
//计算表格高度
var box1=document.getElementById("fire-bottom-left");
if(box1){ //此处在加一层判断，更加严密，如果box存在的情况下获取
return box1.offsetHeight * 0.91
var box1 = document.getElementById('fire-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
}
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;
let { pagination, isChecked, data, totalCount, selectedRowKeys } = this.state;
return (
<div className="fire-bottom-left" id="fire-bottom-left">
<div className="fire-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 className="search-two" >
<Select className="search-select-style"
<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} />
<DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
&nbsp;&nbsp;<font style={{ color: '#5FFFFD' }}>一</font>&nbsp;&nbsp;
<DatePicker placeholder="年-月-日" showTime onChange={this.onTimeChange} style={{ width: '37%' }} onOk={this.onOk} />
</div>
</div>
<div className="two-div">
<AmosGridTable
columns={columns}
dataList={data}
......@@ -559,24 +490,15 @@ rowClassName = (record, index) => {
defaultPageConfig={defaultPageConfig}
getPanelHeight={this.getPanelHeight}
rowClassName={this.rowClassName}
onRowClick={(record) => onEditClick(record)}
onRowClick={record => onEditClick(record)}
/>
</div>
</div>
</div>
);
}
}
SafteyLeft.propTypes = {
};
SafteyLeft.propTypes = {};
export default SafteyLeft;
src/view/monitor/duty/safetyManage/SafteyRight.js 0 → 100644
View file @ f3086ef5
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 @ f3086ef5
......@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import SafteyLeft from './SafteyLeft';
import SafteyRight from './SafteyRight';
/**
* 安全培训
*/
......@@ -14,15 +13,14 @@ 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) => {
this.listTwo.onEdit(record.key)
}
onEditClick = record => {
this.listTwo.onEdit(record.key);
};
render() {
return (
......@@ -30,8 +28,8 @@ export default class Safety extends Component {
<div className="fire-safty-content">
<div className="fire-top"></div>
<div className="fire-bottom">
<SafteyLeft ref={node => this.list = node} onEditClick={this.onEditClick}/>
<SafteyRight ref={node => this.listTwo = node}/>
<SafteyLeft ref={node => (this.list = node)} onEditClick={this.onEditClick} />
<SafteyRight ref={node => (this.listTwo = node)} />
</div>
</div>
</div>
......
src/view/monitor/equipmentMaintain/EquipmentMaintainLeft.js deleted 100644 → 0
View file @ 3dd53237
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/firestrength/FireStrengthDetail.js
View file @ f3086ef5
import React, { Component } from 'react';
import { Tabs } from 'amos-antd';
const { TabPane} = Tabs;
const { TabPane } = Tabs;
/**
* 消防实力统计详情
*/
class FireStrengthDetail extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -17,14 +14,9 @@ class FireStrengthDetail extends Component {
};
}
componentDidMount() {
}
componentDidMount() {}
render() {
return (
<div className="fire-strength-detail">
<Tabs defaultactivekey="1" type="card">
......@@ -43,8 +35,6 @@ class FireStrengthDetail extends Component {
}
}
FireStrengthDetail.propTypes = {
};
FireStrengthDetail.propTypes = {};
export default FireStrengthDetail;
src/view/monitor/index.js
View file @ f3086ef5
......@@ -3,16 +3,6 @@ import PropTypes from 'prop-types';
import { sessionConsts } from '../../consts/storageConsts';
import { Store } from 'amos-tool';
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;
......@@ -27,13 +17,8 @@ class RootView extends Component {
super(props);
this.state = {
submenu: [],
extendSystem: [],
loadAmap: false,
BasicMap: null,
visible1: false,
visible2: false,
visible3: false,
flag:false,
extendSystem: []
};
}
......@@ -41,114 +26,23 @@ class RootView extends Component {
let systemMenu = [];
let systemMenus = JSON.parse(lsTool.read(sessionConsts.systemMenu));
systemMenus.map(e =>{
if(e.permissionName && e.permissionName !=="消防安全管理" && e.permissionName !=="消防实力情况" ){
systemMenu.push(e)
if (e.permissionName && e.permissionName !== '消防安全管理' && e.permissionName !== '消防实力情况' ){
systemMenu.push(e);
}
})
});
this.setState({ extendSystem: systemMenu });
}
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() {
}
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() {
const { visible1,visible2,visible3,flag } = this.state;
let type1="1";
let type2="2";
let type3="3";
const { children } = this.props;
let BasicMap = this.state.BasicMap;
return (
<div className="view-root">
<div className="header">
......@@ -156,51 +50,7 @@ class RootView extends Component {
</div>
<div className="content-body">
{children}
{ this.state.loadAmap && <BasicMap />}
</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>
);
}
......
src/view/monitor/mapScreen/index.js deleted 100644 → 0
View file @ 3dd53237
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 @ 3dd53237
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 @ 3dd53237
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/AlarmControl.js
View file @ f3086ef5
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Modal } from 'amos-framework';
import AlarmControlTable from './AlarmControlTable';
/**
* 告警管控
*/
export default class AlarmControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData:[],
hj:0,
gz:0,
xj:0
seriesData: [],
hj: 0,
gz: 0,
xj: 0,
visible: false
};
}
componentDidMount(){
let dates=[
{value:3, name:'火警告警'},
{value:31, name:'故障告警'},
{value:10, name:'巡检告警'},
];
if(dates){
this.setState({ seriesData: dates,hj:dates[0].value,gz:dates[1].value,xj:dates[2].value});
}
componentDidMount() {
let dates = [
{ value: 3, name: '火警告警' },
{ value: 31, name: '故障告警' },
{ value: 10, name: '巡检告警' }
];
if (dates) {
this.setState({ seriesData: dates, hj: dates[0].value, gz: dates[1].value, xj: dates[2].value });
}
}
ondetails = (type) => {
this.props.ondetails("3");
};
//获取告警管控数据
//获取告警管控数据
getOptionsx = () => {
const { seriesData } = this.state;
return {
color:['rgba(243, 12, 12, 1)','rgba(219, 121, 23, 1)','rgba(209, 209, 52, 1)'],
color: ['rgba(243, 12, 12, 1)', 'rgba(219, 121, 23, 1)', 'rgba(209, 209, 52, 1)'],
series: [
{
name: "",
type: "pie",
radius: ["0%", "55%"],
center: ["50%", "50%"],
name: '',
type: 'pie',
radius: ['0%', '55%'],
center: ['50%', '50%'],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
}
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
name: '检查点',
type: 'pie',
radius: ['60%', '72%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
......@@ -85,89 +67,98 @@ if(dates){
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '告警总数' + '}';
});
var view = '{val|' + total + '}\n{name|' + '告警总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(255,255,255,1)'
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(255,255,255,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(255,255,255,1)'
}
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
data: seriesData
}
]
};
}
};
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
render() {
const { hj,gz,xj } = this.state;
const { hj, gz, xj, visible } = this.state;
return (
<div className="AlarmControl">
<div className="AlarmControl_1">
<div className="AlarmControl_1_1"><span>告警管控情况</span></div>
<div className="AlarmControl_1_1">
<span>告警管控情况</span>
</div>
</div>
<div className="AlarmControl_2">
<div className="AlarmControl_2_1" onClick={this.ondetails}> </div>
<div className="AlarmControl_2_1" onClick={()=>this.open()} />
<Modal
header="告警管控情况"
visible={visible}
className="risk-model-model99"
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="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 火警告警：</div>
<div className="AlarmControl2_13">{hj}</div>
</div>
<div className="AlarmControl2_2"></div>
<div className="AlarmControl2_2" />
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">故障告警：</div>
<div className="AlarmControl2_13">{gz}</div>
</div>
<div className="AlarmControl2_3"></div>
<div className="AlarmControl2_3" />
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1" >
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">巡检告警：</div>
<div className="AlarmControl2_13">{xj}</div>
</div>
<div className="AlarmControl2_4"></div>
<div className="AlarmControl2_4" />
</div>
</div>
</div>
<div className="AlarmControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
<ReactEcharts option={this.getOptionsx()} />
</div>
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/AlarmControlTable.js
View file @ f3086ef5
import React, { Component } from 'react';
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 { Input } from 'amos-antd';
import moment from 'moment';
......@@ -12,84 +9,76 @@ import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const Search = Input.Search;
const tableList1 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站', sex: '10', age: 10,age1: 30, address: '10' }
{ name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站5', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站', sex: '10', age: 10, age1: 30, address: '10' }
];
const tableList2 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站3', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站4', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站5', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站1', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站2', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站3', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站4', sex: '10', age: 10, age1: 30, address: '10' },
{ name: '复龙换流站5', sex: '10', age: 10, age1: 30, address: '10' }
];
const data = [
{ id: 0, name: '失控' },
{ id: 1, name: '受控' }
];
const checkInputColumns = (_this) => {
const checkInputColumns = _this => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '20%',
query: true,
query: true
},
{
title: <div style={{"color":"#0055FF"}}>火警告警</div>,
title: <div style={{ color: '#0055FF' }}>火警告警</div>,
dataIndex: 'sex',
key: 'sex',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="yi">{text}</p> ;
// }
},
{
title: <div style={{"color":"#F1F10C"}}>火警告警</div>,
title: <div style={{ color: '#F1F10C' }}>火警告警</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: <div style={{"color":"#FF8000"}}>巡检告警</div>,
title: <div style={{ color: '#FF8000' }}>巡检告警</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
......@@ -116,9 +105,8 @@ const data = [
st: 'text', //搜索的类型
width: '20%'
}
];
};
};
/**
* 风险管控详情
......@@ -135,31 +123,26 @@ class AlarmControlTable extends Component {
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
name: '',
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 = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
};
componentDidMount = () => {
this.setState({ dataList: tableList1 });
this.setState({ totals: 13 });
};
componentWillReceiveProps = (nextProps) => {
componentDidMount = () => {};
}
SearchChange = (value) => {
alert(value)
}
componentWillReceiveProps = nextProps => {};
SearchChange = value => {
alert(value);
};
/**
* 获取表格刷新方法
......@@ -177,56 +160,42 @@ class AlarmControlTable extends Component {
//搜索
onIconClick1 = () => {
this.setState({ dataList: tableList2 });
this.setState({ totals: 5 });
};
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
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') });
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')
});
}
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
this.setState({ name:value });
}
fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name: value });
};
onChange = (key, value) => {
if(key==='name'){
this.setState({ name:value });
}else if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else{
if (key === 'name') {
this.setState({ name: value });
} else if (key === 'startTime') {
this.setState({ startTime: moment(value).format('YYYY-MM-DD') });
} else {
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
}
}
};
render() {
const { dataList,totals ,name,endTime,startTime} = this.state;
const { dataList, totals, name, endTime, startTime } = this.state;
return (
<div className="souh" >
<div className="souh">
<div className="sou">
<div className="search-one-alarm">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
......@@ -234,8 +203,6 @@ class AlarmControlTable extends Component {
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
<div className="search-three-alarm">
<span className="three-font">&nbsp;&nbsp;日期:&nbsp;&nbsp;</span>
......@@ -243,33 +210,31 @@ class AlarmControlTable extends Component {
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
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;
&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); }}
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>
......@@ -277,6 +242,4 @@ class AlarmControlTable extends Component {
}
}
export default AlarmControlTable;
src/view/monitor/statistical/AllSafety.js
View file @ f3086ef5
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import echarts from 'echarts/lib/echarts';
//import { AllSafetyAction } from './../../../services/centerLevelService';
/**
* 总体消防安全情况
*/
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// color: ['#00CACE', '#F70D0E'],
color: ['#F70D0E', '#00CACE'],
graphic: [{ //环形图中间添加文字
graphic: [
{
//环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '30%',
style: {
text: '80', //'80' + '\n' + '总数'
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
fill: 'rgba(255,255,255,1)', //文字的颜色
width: 30,
height: 30,
fontSize: 25,
fontFamily: "Microsoft YaHei",
fontWeight:"bold"
fontFamily: 'Microsoft YaHei',
fontWeight: 'bold'
}
},
{ //环形图中间添加文字
{
//环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '45%',
style: {
text: '站点',
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
fill: 'rgba(255,255,255,1)', //文字的颜色
width: 24,
height: 16,
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontWeight:400
fontFamily: 'Microsoft YaHei',
fontWeight: 400
}
}
}],
],
series: [
{
......@@ -67,30 +62,26 @@ const option = {
data: [
{
value: 40,
name: "不合格",
name: '不合格'
},
{
value: 60,
name: '正常',
name: '正常'
}
]
},
{
name: "中间的背景",
type: "pie",
radius: ["0%", "60%"],
center: ["50%", "40%"],
name: '中间的背景',
type: 'pie',
radius: ['0%', '60%'],
center: ['50%', '40%'],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
}
},
//隐藏多余文字提示
label: {
......@@ -109,9 +100,7 @@ const option = {
]
};
class AllSafety extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -119,25 +108,15 @@ class AllSafety extends Component {
};
}
componentDidMount() {
}
componentDidMount() {}
getOptionsx = () => {
return option;
}
};
render() {
return (
<div className="AllSafety">
<div className="all-safety-content">
<div className="all-safety-font">总体消防安全情况</div>
<div className="content-detail">
......@@ -149,31 +128,27 @@ class AllSafety extends Component {
<div className="right-one-font">1个</div>
</div>
<div className="all-safety-right-two">
<div className="right-two-font"><span className="jiantou">&darr;</span>-1</div>
<div className="right-two-font">
<span className="jiantou">&darr;</span>-1
</div>
</div>
<div className="all-safety-right-three">
<div className="right-three-font">1个</div>
</div>
<div className="all-safety-right-four">
<div className="right-four-font"><span className="jiantou">&uarr;</span>+1</div>
<div className="right-four-font">
<span className="jiantou">&uarr;</span>+1
</div>
</div>
</div>
</div>
</div>
{/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */}
</div>
);
}
}
AllSafety.propTypes = {
};
AllSafety.propTypes = {};
export default AllSafety;
src/view/monitor/statistical/DangerControl.js
View file @ f3086ef5
import React, { Component } from 'react';
import imgStatic from './../../../consts/imgStatic';
import { Modal } from 'amos-framework';
import ReactEcharts from 'amos-viz/lib/echarts';
const centerLevelIcon = imgStatic.centerLevelIcon;
import DangerControlTable from './DangerControlTable';
/**
* 隐患管控
*/
export default class DangerControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData: [],
yq:0,
sw:0,
zl:0,
jd:'0%'
yq: 0,
sw: 0,
zl: 0,
jd: '0%',
visible: false
};
}
componentDidMount(){
let dates={jd:'20%',
componentDidMount() {
let dates = {
jd: '20%',
seriesData: [
{value:35, name:'逾期未治理'},
{value:10, name:'尚未治理'},
{value:4, name:'治理验收'},
]};
{ value: 35, name: '逾期未治理' },
{ value: 10, name: '尚未治理' },
{ value: 4, name: '治理验收' }
]
};
if(dates){
this.setState({ seriesData: dates.seriesData,jd:dates.jd,yq:dates.seriesData[0].value,sw:dates.seriesData[1].value,zl:dates.seriesData[2].value});
if (dates) {
this.setState({
seriesData: dates.seriesData,
jd: dates.jd,
yq: dates.seriesData[0].value,
sw: dates.seriesData[1].value,
zl: dates.seriesData[2].value
});
}
}
ondetails = (type) => {
this.props.ondetails("2");
};
getOptionsx = () => {
const { seriesData} = this.state;
const { seriesData } = this.state;
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: [
{
name: "",
type: "pie",
radius: ["0%", "55%"],
center: ["50%", "50%"],
name: '',
type: 'pie',
radius: ['0%', '55%'],
center: ['50%', '50%'],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
}
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
name: '检查点',
type: 'pie',
radius: ['60%', '72%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
......@@ -82,59 +78,70 @@ export default class DangerControl extends Component {
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '隐患总数' + '}';
});
var view = '{val|' + total + '}\n{name|' + '隐患总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(255,255,255,1)'
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(255,255,255,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(255,255,255,1)'
}
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
data: seriesData
}
]
};
}
};
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
render() {
const { yq,sw,zl,jd} = this.state;
const { yq, sw, zl, jd, visible } = this.state;
return (
<div className='DangerControl'>
<div className="DangerControl">
<div className="DangerControl_1">
<div className="DangerControl_1_1"><span>隐患管控情况</span></div>
<div className="DangerControl_1_1">
<span>隐患管控情况</span>
</div>
</div>
<div className="DangerControl_2">
<div className="DangerControl_2_1" onClick={this.ondetails}></div>
<div className="DangerControl_2_1" onClick={this.open} />
<Modal
header="隐患管控情况"
visible={visible}
className="risk-model-model99"
width={'50%'}
dragable
noDefaultFooter
content={<DangerControlTable refresh />}
onCancel={this.cancel}
destroyOnClose
/>
<div className="DangerControl_2_2">
<div className="DangerControl_2_2_1">
<div className="AlarmControl8">
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12"> 逾期未治理：</div>
<div className="AlarmControl2_13">{yq}</div>
</div>
......@@ -142,7 +149,6 @@ export default class DangerControl extends Component {
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">尚未治理：</div>
<div className="AlarmControl2_13">{sw}</div>
</div>
......@@ -150,7 +156,6 @@ export default class DangerControl extends Component {
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">治理验收：</div>
<div className="AlarmControl2_13">{zl}</div>
</div>
......@@ -158,21 +163,18 @@ export default class DangerControl extends Component {
</div>
<div className="AlarmControl2">
<div className="AlarmControl2_1">
<div className="AlarmControl2_12">治理进度：</div>
<div className="AlarmControl2_13">{jd}</div>
</div>
<div className="AlarmControl2_6"></div>
</div>
</div>
</div>
<div className="DangerControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
<ReactEcharts option={this.getOptionsx()} />
</div>
</div>
</div>
</div>
);
}
......
src/view/monitor/statistical/DangerControlTable.js
View file @ f3086ef5
import React, { Component } from 'react';
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 { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment';
......@@ -10,50 +10,44 @@ 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' }
{ 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' } ,
{ 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) => {
const checkInputColumns = _this => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '20%',
query: true,
query: true
},
{
title: '已治理',
......@@ -61,14 +55,11 @@ const data = [
key: 'sex',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="yi">{text}</p> ;
// }
},
{
title: '未治理',
......@@ -76,12 +67,11 @@ const data = [
key: 'age',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="er">{text}</p> ;
// }
},
{
title: '逾期未治理',
......@@ -89,7 +79,7 @@ const data = [
key: 'address',
width: '15%',
query: true,
required: true, //是否是默认显示的
required: true //是否是默认显示的
// render: (text,record) => {
// return <p className="san">{text}</p> ;
......@@ -101,7 +91,7 @@ const data = [
key: 'id',
query: true,
required: true, //是否是默认显示的
width: '15%',
width: '15%'
// render: (text,record) => {
// return <p className="si">{text}</p> ;
......@@ -116,9 +106,8 @@ const data = [
st: 'text', //搜索的类型
width: '20%'
}
];
};
};
/**
* 风险管控详情
......@@ -135,28 +124,23 @@ class DangerControlTable extends Component {
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
name: '',
startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'),
grade:""
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD'),
grade: ''
};
}
componentWillMount = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
};
componentDidMount = () => {
this.setState({ dataList: tableList1 });
this.setState({ totals: 13 });
};
componentWillReceiveProps = (nextProps) => {
}
componentDidMount = () => {};
componentWillReceiveProps = nextProps => {};
/**
* 获取表格刷新方法
......@@ -172,64 +156,52 @@ class DangerControlTable extends Component {
);
};
SearchChange = (value) => {
alert(value)
}
SearchChange = value => {
alert(value);
};
//搜索
onIconClick1 = () => {
this.setState({ dataList: tableList2 });
this.setState({ totals: 5 });
};
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){
this.setState({ name:"" });
this.setState({ startTime: moment().format('YYYY-MM-DD')});
this.setState({ endTime:moment().add(1, "years").format('YYYY-MM-DD') });
this.setState({ grade: "" });
componentWillReceiveProps = nextProps => {
debugger;
if (nextProps.refresh) {
this.setState({ name: '' });
this.setState({ startTime: moment().format('YYYY-MM-DD') });
this.setState({
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD')
});
this.setState({ grade: '' });
}
}
fillCheckInputTable = param => {
};
onChange1 = (e, value) => {
this.setState({ name:value });
}
fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name: value });
};
onChange = (key, value) => {
if(key==='name'){
this.setState({ name:value });
}else if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else if(key==='endTime'){
if (key === 'name') {
this.setState({ name: value });
} else if (key === 'startTime') {
this.setState({ startTime: moment(value).format('YYYY-MM-DD') });
} else if (key === 'endTime') {
this.setState({ endTime: moment(value).format('YYYY-MM-DD') });
}else{
} else {
this.setState({ grade: value });
}
}
};
render() {
const { dataList,totals ,name,grade,endTime,startTime} = this.state;
const { dataList, totals, name, grade, endTime, startTime } = this.state;
return (
<div className="souh" >
<div className="souh">
<div className="sou">
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
......@@ -237,21 +209,17 @@ class DangerControlTable extends Component {
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
<Search placeholder="搜索" onSearch={this.SearchChange} />
</div>
</div>
<div className="search-two" >
<Select className="search-select-style"
<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); }}
onChange={value4 => {
this.onChange('grade', value4);
}}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
......@@ -259,33 +227,31 @@ class DangerControlTable extends Component {
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
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;
&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); }}
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>
......@@ -293,6 +259,4 @@ class DangerControlTable extends Component {
}
}
export default DangerControlTable;
src/view/monitor/statistical/FireSafety.js
View file @ f3086ef5
import React, { Component } from 'react';
import { Store } from 'amos-tool';
import { sessionConsts } from './../../../consts/storageConsts';
import { browerSupport, consts, Store, LocationParam } from 'amos-tool';
const lsTool = Store.lsTool;
const lsTool = Store.lsTool;
/**
* 消防安全管理
*/
class FireSafety extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -20,107 +14,77 @@ class FireSafety extends Component {
};
}
componentDidMount() {
componentDidMount() {}
}
onClick = () =>{
let sbm = null
onClick = () => {
let sbm = null;
let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || [];
systemMenu.map(e =>{
if(e.permissionName && e.permissionName==="消防安全管理" ){
systemMenu.map(e => {
if (e.permissionName && e.permissionName === '消防安全管理') {
sbm = e;
}
})
if(sbm!==null){
window.localStorage.setItem('submenu',JSON.stringify(sbm.children));
}
});
if (sbm !== null) {
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() {
return (
<div className="FireSafety">
<div className="fire-safety-content">
<div className="fire-safety-font">消防安全管理(累计)</div>
<div className="fire-safety-tongji" >
<div className="fire-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-yjya'></span>
<span className="titleIcon-yjya"></span>
</div>
<span className='fire-safety-wenzi'>应急预案</span>
<span className="fire-safety-wenzi">应急预案</span>
<span className="right-font">100套</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-aqpx' ></span>
<span className="titleIcon-aqpx"></span>
</div>
<span className='fire-safety-wenzi'>安全培训</span>
<span className="fire-safety-wenzi">安全培训</span>
<span className="right-font">123次</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-rcxl' ></span>
<span className="titleIcon-rcxl"></span>
</div>
<span className='fire-safety-wenzi'>日常训练</span>
<span className="fire-safety-wenzi">日常训练</span>
<span className="right-font">100次</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-qcby'></span>
<span className="titleIcon-qcby"></span>
</div>
<span className='fire-safety-wenzi'>器材保养</span>
<span className="fire-safety-wenzi">器材保养</span>
<span className="right-font">14445件</span>
</div>
</div>
<div className="fire-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-aqxj' ></span>
<span className="titleIcon-aqxj"></span>
</div>
<span className='fire-safety-wenzi'>安全巡检</span>
<span className="fire-safety-wenzi">安全巡检</span>
<span className="right-font">800次</span>
</div>
</div>
{/**分割线 */}
</div>
</div>
);
}
}
FireSafety.propTypes = {
};
FireSafety.propTypes = {};
export default FireSafety;
src/view/monitor/statistical/FireStrength.js
View file @ f3086ef5
import React, { Component } from 'react';
import { Modal } from 'amos-framework';
import FireStrengthDetail from'./../firestrength/FireStrengthDetail';
import { Store } from 'amos-tool';
import FireStrengthDetail from './../firestrength/FireStrengthDetail';
import { sessionConsts } from './../../../consts/storageConsts';
import {Store, } from 'amos-tool';
const lsTool = Store.lsTool;
/**
* 消防实力统计
*/
class FireStrength extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -18,113 +17,78 @@ class FireStrength extends Component {
};
}
componentDidMount() {
componentDidMount() {}
}
onClick = () =>{
let sbm = null
onClick = () => {
let sbm = null;
let systemMenu = JSON.parse(lsTool.read(sessionConsts.systemMenu)) || [];
systemMenu.map(e =>{
if(e.permissionName && e.permissionName==="消防实力情况" ){
systemMenu.map(e => {
if (e.permissionName && e.permissionName === '消防实力情况') {
sbm = e;
}
})
if(sbm!==null){
window.localStorage.setItem('submenu',JSON.stringify(sbm.children));
}
});
if (sbm !== null) {
window.localStorage.setItem('submenu', JSON.stringify(sbm.children));
}
};
render() {
return (
<div className="FireStrength">
{/* <FireStrengthDetail /> */}
<div className="strength-safety-content">
<div className="strength-safety-font">消防实力情况(累计) </div>
{/* <div className="item" style={{marginTop:"0%"}} onClick={this.onClick} >
<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>
</div>
<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="strength-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-zzxfd'></span>
<span className="titleIcon-zzxfd"></span>
</div>
<span className='strength-safety-wenzi'>驻站消防队</span>
<span className="strength-safety-wenzi">驻站消防队</span>
<span className="right-font">100套</span>
</div>
</div>
<div className="strength-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-zzxfy' ></span>
<span className="titleIcon-zzxfy"></span>
</div>
<span className='strength-safety-wenzi'>驻站消防员</span>
<span className="strength-safety-wenzi">驻站消防员</span>
<span className="right-font">123次</span>
</div>
</div>
<div className="strength-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-znzs' ></span>
<span className="titleIcon-znzs"></span>
</div>
<span className='strength-safety-wenzi'>站内值守</span>
<span className="strength-safety-wenzi">站内值守</span>
<span className="right-font">100次</span>
</div>
</div>
<div className="strength-safety-tongji">
<div className="content-tongji" onClick={this.onClick}>
<div className="left-div">
<span className='titleIcon-xfc'></span>
<span className="titleIcon-xfc"></span>
</div>
<span className='strength-safety-wenzi'>消防车</span>
<span className="strength-safety-wenzi">消防车</span>
<span className="right-font">14445件</span>
</div>
</div>
<div className="strength-safety-tongji">
<div className="content-tongji">
<div className="left-div">
<span className='titleIcon-xfqc' ></span>
<span className="titleIcon-xfqc"></span>
</div>
<span className='strength-safety-wenzi'>消防器材</span>
<span className="strength-safety-wenzi">消防器材</span>
<span className="right-font">800次</span>
</div>
</div>
</div>
<Modal
width={1000}
height={1000}
content={<FireStrengthDetail/>}
visible={false}
></Modal>
<Modal width={1000} height={1000} content={<FireStrengthDetail />} visible={false}></Modal>
</div>
);
}
}
FireStrength.propTypes = {
};
FireStrength.propTypes = {};
export default FireStrength;
src/view/monitor/statistical/InputTable.js
View file @ f3086ef5
......@@ -13,12 +13,12 @@ class InputTable extends Component {
pageSize: props.outterPageConfig ? props.outterPageConfig.pageSize : 10
};
this.state = {
loading: false,//页面是否加载中,默认false
dataList: [],//表格数据集合
size: 'middle',//表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
totals: 1,//所有数据总和
loading: false, //页面是否加载中,默认false
dataList: [], //表格数据集合
size: 'middle', //表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10, //当前页数据量
totals: 1, //所有数据总和
maxHeight: 250
};
}
......@@ -36,9 +36,9 @@ class InputTable extends Component {
window.removeEventListener('resize', this.onWindowResize);
}
onWindowResize = (e) => {
onWindowResize = e => {
this.getHeightOffset();
}
};
/**
* 设置页面数据大小事件
......@@ -46,56 +46,57 @@ class InputTable extends Component {
onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload);
}
this.setState({ current, pageSize }, this.reload);
};
/**
* 设置当前页事件
*/
onPaginationChange = (current) => {
onPaginationChange = current => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload);
}
this.setState({ current }, this.reload);
};
setPageConfig = ({ pageSize,current }) => {
setPageConfig = ({ pageSize, current }) => {
if (pageSize !== undefined) {
this.pageConfig.pageSize = pageSize;
}
if (current !== undefined) {
this.pageConfig.current = current;
}
}
};
/**
* 获取表格数据（刷新）
*/
reload = () => {
let { current,pageSize } = this.state;
// this.props.getTableDataAction({ current: current - 1, pageSize });
// this.getHeightOffset();
}
showTotal = (total) => {
};
showTotal = total => {
return `共 ${total} 条`;
}
};
generateRowkey = (record, index) => {
return record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
}
};
getHeightOffset = () => {
let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? '850' : getPanelHeight();
height && this.setState({ maxHeight: height });
}
};
render() {
let { size, loading, maxHeight } = this.state;
let { columns, dataSource, totals, pagination } = this.props;
let defaultPageConfig = this.pageConfig;
let rowKey = this.generateRowkey;
let _tempPagination = pagination === false ? false : pagination || {
let _tempPagination =
pagination === false
? false
: pagination || {
size: 'small',
total: totals,
current: this.state.current,
......
src/view/monitor/statistical/ModelContent.js
View file @ f3086ef5
......@@ -3,9 +3,7 @@ import { RiskControlDetailAction } from './../../../services/centerLevelService'
import moment from 'moment';
const format = 'YYYY-MM-dd';
export default class ModelContent extends Component {
constructor(props) {
super(props);
this.state = {
......@@ -13,25 +11,25 @@ export default class ModelContent extends Component {
};
}
componentDidMount(){
componentDidMount() {
let { type } = this.props;
this.RiskControlDetail(type);
}
RiskControlDetail = (type) => {
RiskControlDetail = type => {
RiskControlDetailAction(type).then(data => {
this.setState({
alarmData: data
});
});
}
};
/**
* 获取标题
*
* @memberof ModelContent
*/
getTitle = (v) => {
getTitle = v => {
const titleParams = {
1: '一级风险点', //一级风险点
2: '二级风险点', //二级风险点
......@@ -39,39 +37,39 @@ export default class ModelContent extends Component {
4: '四级风险点' //四级风险点
};
return titleParams[v];
}
};
formatData = (str) => {
formatData = str => {
let date = str.split(' ')[0];
return date;
}
};
renderContent = (content) =>{
renderContent = content => {
return (
<div className='rows'>
<div className="rows">
{(content || []).map(itemA => {
return (
<div className='row'>
<div className="row">
<span>{itemA.name}</span>
<span className='date'>{this.formatData(itemA.changeDate)}</span>
<span className="date">{this.formatData(itemA.changeDate)}</span>
</div>
);
})}
</div>
);
}
};
render() {
let { alarmData } = this.state;
let { type } = this.props;
return (
<div className='model-content'>
<div className="model-content">
{(alarmData || []).map(item => {
return (
<div className='content-div'>
<div className='title'>
<div className="content-div">
<div className="title">
<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>
{this.renderContent(item.content)}
</div>
......
src/view/monitor/statistical/RiskControl.js
View file @ f3086ef5
import React, { Component } from 'react';
import ReactEcharts from 'amos-viz/lib/echarts';
import { Modal } from 'amos-framework';
import RiskControlTable from './../../monitor/statistical/RiskControlTable';
/**
* 风险管控
*/
export default class RiskControl extends Component {
constructor(props) {
super(props);
this.state = {
seriesData:[],
shikong:0,
shoukongx:'0%',
shikongx:'0%',
shoukong:0,
yiji:0,
erji:0,
sanji:0,
siji:0
seriesData: [],
shikong: 0,
shoukongx: '0%',
shikongx: '0%',
shoukong: 0,
yiji: 0,
erji: 0,
sanji: 0,
siji: 0,
visible: false
};
}
componentDidMount() {
let dates={
seriesData:[
{value:3, name:'受控'},
{value:7, name:'失控'},
let dates = {
seriesData: [
{ value: 3, name: '受控' },
{ value: 7, name: '失控' }
],
yiji:10,
erji:20,
sanji:30,
siji:40,
shoukongx:'30%',
shikongx:'70%'
yiji: 10,
erji: 20,
sanji: 30,
siji: 40,
shoukongx: '30%',
shikongx: '70%'
};
if(dates){
this.setState({ seriesData: dates.seriesData,
yiji:dates.yiji,
erji:dates.erji,
sanji:dates.sanji,
siji:dates.siji,
shoukongx:dates.shoukongx,
shikongx:dates.shikongx,
shoukong:dates.seriesData[0].value,shikong:dates.seriesData[1].value});
if (dates) {
this.setState({
seriesData: dates.seriesData,
yiji: dates.yiji,
erji: dates.erji,
sanji: dates.sanji,
siji: dates.siji,
shoukongx: dates.shoukongx,
shikongx: dates.shikongx,
shoukong: dates.seriesData[0].value,
shikong: dates.seriesData[1].value
});
}
}
ondetails = (type) => {
this.props.ondetails("1");
};
getOptionsx = () => {
const { seriesData } = this.state;
return {
color:['rgba(0, 202, 206, 1)','rgba(254, 0, 0, 1)'],
color: ['rgba(0, 202, 206, 1)', 'rgba(254, 0, 0, 1)'],
series: [
{
name: "",
type: "pie",
radius: ["0%", "65%"],
center: ["50%", "50%"],
name: '',
type: 'pie',
radius: ['0%', '65%'],
center: ['50%', '50%'],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
}
},
hoverAnimation: false,
data: [100]
},
{
name:'检查点',
type:'pie',
name: '检查点',
type: 'pie',
radius: ['70%', '85%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
......@@ -99,52 +88,67 @@ export default class RiskControl extends Component {
let total = 0;
seriesData.forEach(e => {
total += e.value;
})
var view = '{val|' +total + '}\n{name|' + '风险总数' + '}';
});
var view = '{val|' + total + '}\n{name|' + '风险总数' + '}';
return view;
},
textStyle: {
rich: {
name: {
fontSize: 12,
fontFamily:'Microsoft YaHei',
color:'rgba(255,255,255,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(255,255,255,1)'
},
val: {
fontSize: 20,
fontWeight: 'bold',
fontFamily:'Microsoft YaHei',
color: 'rgba(0,255,238,1)',
fontFamily: 'Microsoft YaHei',
color: 'rgba(0,255,238,1)'
}
}
}
}
},
},
labelLine: {
normal: {
show: false
}
},
data:seriesData
data: seriesData
}
]
};
}
};
open = () => {
this.setState({ visible: true });
};
cancel = () => {
this.setState({ visible: false });
};
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 (
<div className="RiskControl">
<div className="RiskControl_1">
<div className="RiskControl_1_1"><span>风险管控情况</span></div>
<div className="RiskControl_1_1">
<span>风险管控情况</span>
</div>
</div>
<div className="RiskControl_2">
<div className="RiskControl_2_1" onClick={this.ondetails}></div>
<div className="RiskControl_2_1" onClick={() => this.open()} />
<Modal
header="风险管控情况"
visible={visible}
dragable
className="risk-model-model99"
width={'50%'}
noDefaultFooter
content={<RiskControlTable refresh />}
onCancel={this.cancel}
destroyOnClose
/>
<div className="RiskControl_2_2">
<div className="RiskControl_2_2_1">
<div className="RiskControl_2_2_19">
<div className="RiskControl_2_2_191 shi">{shikongx}</div>
<div className="RiskControl_2_2_192 shi1">失控：{shikong}</div>
......@@ -153,12 +157,9 @@ export default class RiskControl extends Component {
<div className="RiskControl_2_2_191 shou">{shoukongx}</div>
<div className="RiskControl_2_2_192 shou1">受控：{shoukong}</div>
</div>
</div>
<div className="RiskControl_2_2_2">
<ReactEcharts option = { this.getOptionsx() } />
<ReactEcharts option={this.getOptionsx()} />
</div>
</div>
</div>
......@@ -168,30 +169,28 @@ export default class RiskControl extends Component {
<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_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 className="RiskControl_3_1_3"></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 className="RiskControl_3_1_4"></div>
<div className="RiskControl_3_1_4" />
</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 className="RiskControl_3_1_5" />
</div>
</div>
</div>
......
src/view/monitor/statistical/RiskControlTable.js
View file @ f3086ef5
import React, { Component } from 'react';
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 { Input, Button } from 'amos-antd';
import moment from 'moment';
......@@ -14,101 +11,87 @@ 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' }
{ 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: '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: '复龙换流站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) => {
{ id: '1', name: '失控' },
{ id: '2', name: '受控' }
];
const checkInputColumns = _this => {
return [
{
title: '换流站',
dataIndex: 'name',
key: 'name',
width: '20%',
query: true,
query: true
},
{
title: <div style={{"color":"#48E0FF"}}>一级</div>,
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> ;
render: (text, record) => {
return <p className="yi">{text}</p>;
}
},
{
title: <div style={{"color":"#F1F10C"}}>二级</div>,
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> ;
render: (text, record) => {
return <p className="er">{text}</p>;
}
},
{
title: <div style={{"color":"#FF8000"}}>三级</div>,
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> ;
render: (text, record) => {
return <p className="san">{text}</p>;
}
},
{
title: <div style={{"color":"#FC2F1E"}}>四级</div>,
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> ;
render: (text, record) => {
return <p className="si">{text}</p>;
}
},
{
......@@ -120,9 +103,8 @@ const data = [
st: 'text', //搜索的类型
width: '20%'
}
];
};
};
/**
* 风险管控详情
......@@ -139,38 +121,37 @@ class RiskControlTable extends Component {
totals: 0, //所有数据总和
reload() {},
maxHeight: 650,
name:"",
name: '',
startTime: moment().format('YYYY-MM-DD'),
endTime: moment().add(1, "years").format('YYYY-MM-DD'),
grade:""
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD'),
grade: ''
};
}
componentWillMount = () => {
this.setState({ dataList:tableList1});
this.setState({ totals:13});
this.setState({ dataList: tableList1 });
this.setState({ totals: 13 });
};
componentDidMount = () => {
};
componentDidMount = () => {};
componentWillReceiveProps = (nextProps) => {
componentWillReceiveProps = nextProps => {
if (nextProps.refresh) {
this.setState({ name: '' });
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') });
this.setState({
endTime: moment()
.add(1, 'years')
.format('YYYY-MM-DD')
});
this.setState({ grade: '' });
}
}
};
/**
* 获取表格刷新方法
......@@ -188,125 +169,94 @@ class RiskControlTable extends Component {
//搜索
onIconClick1 = () => {
this.setState({ dataList: tableList2 });
this.setState({ totals: 5 });
};
this.setState({ dataList:tableList2});
this.setState({ totals:5});
}
onOk=(value) =>{
onOk = value => {
console.log('onOk: ', value);
}
fillCheckInputTable = param => {
};
fillCheckInputTable = param => {};
onChange1 = (e, value) => {
this.setState({ name:value });
}
this.setState({ name: value });
};
onChange = (key, value) => {
if(key==='startTime'){
this.setState({ startTime: moment(value).format('YYYY-MM-DD')});
}else if(key==='endTime'){
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{
} 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 ;
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;
const { dataList, totals, name, grade, endTime, startTime } = this.state;
return (
<div className="souh" >
<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"
<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); }}
onChange={value4 => {
this.onChange('grade', value4);
}}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
......@@ -315,37 +265,31 @@ class RiskControlTable extends Component {
format="YYYY-MM-DD"
className="input_item_select"
value={moment(startTime)}
style={{width:'37%'}}
onChange={ e => this.onChange('startTime', e) }
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;
&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%'}}
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>
......@@ -353,23 +297,4 @@ class RiskControlTable extends Component {
}
}
export default RiskControlTable;
src/view/monitor/statistical/index.js
View file @ f3086ef5
import React, { Component } from 'react';
import AmosWebSocket from 'amos-websocket';
import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl';
import RiskControl from './RiskControl';
import AllSafety from './AllSafety';
import FireSafety from './FireSafety';
import FireStrength from './FireStrength';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
import { Modal, Select } from 'amos-framework';
/**
* 中心级2侧模块
*/
export default class Statistical extends Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
handleData = (data = {}) => {
......@@ -27,8 +23,7 @@ export default class Statistical extends Component {
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
switch (refreshType) {
case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
this.RiskControl.getRiskControl();
......@@ -66,42 +61,32 @@ export default class Statistical extends Component {
this.FireStrength.FireStrengthData();
break;
default:
console.log(refreshType,'：类型不支持');
}
console.log(refreshType, '：类型不支持');
}
};
cancel = () => {
this.setState({
visible: false
});
}
};
render() {
const { visible } = this.state;
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
<div className="statistical-left">
<RiskControl ref={node => this.RiskControl = node} />
<DangerControl ref={node => this.safetyExecute = node} />
<AlarmControl ref={node => this.equipStatus = node} />
<RiskControl ref={node => (this.RiskControl = node)} />
<DangerControl ref={node => (this.safetyExecute = node)} />
<AlarmControl ref={node => (this.equipStatus = node)} />
</div>
<div className="statistical-right">
<AllSafety ref={node => this.AllSafety = node} />
<FireSafety ref={node => this.FireSafety = node} />
<FireStrength ref={node => this.FireStrength = node} />
<AllSafety ref={node => (this.AllSafety = node)} />
<FireSafety ref={node => (this.FireSafety = node)} />
<FireStrength ref={node => (this.FireStrength = node)} />
</div>
</div>
);
}
}
src/view/monitor/statistical/indexLeft.js
View file @ f3086ef5
import React, { Component } from 'react';
import AmosWebSocket from 'amos-websocket';
import AlarmControl from './AlarmControl';
import DangerControl from './DangerControl';
import RiskControl from './RiskControl';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
/**
......@@ -12,41 +11,20 @@ import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
export default class StatisticalLeft extends Component {
constructor(props) {
super(props);
this.state = {
};
}
ondetails = (type) => {
this.props.ondetails(type);
};
componentWillMount = () => {
};
componentWillReceiveProps = (nextProps) => {
}
componentWillMount() {
}
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
case 'today_safety_index':
console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
......@@ -77,13 +55,12 @@ export default class StatisticalLeft extends Component {
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
const { flag } = this.state;
return (
<div className="statistical-left">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<RiskControl ondetails={this.ondetails} />
<DangerControl ondetails={this.ondetails} />
<AlarmControl ondetails={this.ondetails} />
<RiskControl />
<DangerControl />
<AlarmControl />
</div>
);
}
......
src/view/monitor/statistical/indexRight.js
View file @ f3086ef5
......@@ -10,14 +10,12 @@ import SysWsURL, { completeToken } from '../../../consts/wsUrlConsts';
* 全景监控统计
*/
export default class StatisticalRight extends Component {
handleData = (data = {}) => {
console.log('ws data:', data);
data = JSON.parse(JSON.stringify(data));
console.log(data);
let refreshType = data.refreshType;
let content = data.content;
switch (refreshType){
switch (refreshType) {
case 'error_status':
console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
break;
......@@ -40,19 +38,18 @@ export default class StatisticalRight extends Component {
this.FireStrength.FireStrengthData();
break;
default:
console.log(refreshType,'：类型不支持');
}
console.log(refreshType, '：类型不支持');
}
};
render() {
const wsURL = completeToken(SysWsURL.viewIndexws);
return (
<div className="statistical-right">
<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
<AllSafety ref={node => this.AllSafety = node} />
<FireSafety ref={node => this.FireSafety = node} />
<FireStrength ref={node => this.FireStrength = node} />
<AmosWebSocket ref={node => (this.aws = node)} url={wsURL} onMessage={this.handleData} reconnect debug />
<AllSafety ref={node => (this.AllSafety = node)} />
<FireSafety ref={node => (this.FireSafety = node)} />
<FireStrength ref={node => (this.FireStrength = node)} />
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment