Skip to content

S
station-elec-manage-view
Commit fe9793bb authored by zhengjiangtao's avatar zhengjiangtao
Browse files
Options

合并代码

parent 5ee4c0b0
Hide whitespace changes
Inline Side-by-side
Showing with 2102 additions and 73 deletions
src/routes/asyncView.js
View file @ fe9793bb
......@@ -9,6 +9,7 @@ const AsyncSituation = props => <AsyncLoader load={import('../view/biz/duty/situ
const AsyncRegulate = props => <AsyncLoader load={import('../view/monitor/regulate')} componentProps={props} />;
const AsyncBills = props => <AsyncLoader load={import('../view/biz/regulate/bills')} componentProps={props} />;
const AsyncRootBizView = props => <AsyncLoader load={import('./../view/biz/index')} componentProps={props} />;
const AsyncSafetyTraining = props => <AsyncLoader load={import('../view/monitor/safetyManage/index')} componentProps={props} />;
// const AsyncRegionList = props => <AsyncLoader load={import('./../view/common/region/index')} componentProps={props} />;
const Routes = {
......@@ -16,10 +17,12 @@ const Routes = {
duty: AsyncDuty,
situation: AsyncSituation,
regulate: AsyncRegulate,
bills: AsyncBills
bills: AsyncBills,
safetyTraining: AsyncSafetyTraining
};
export const businessRouts = [
{ path: 'situation',group: 'biz',component: AsyncSituation, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: AsyncSafetyTraining, childRoutes: [] },
{ path: 'bills',group: 'biz',component: AsyncBills, childRoutes: [] }
];
const pageCompontent = key => {
......
src/routes/view.js
View file @ fe9793bb
......@@ -7,16 +7,20 @@ 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';
const Routes = {
main: RootView,
duty: Duty,
situation: Situation,
regulate: Regulate,
bills: Bills
bills: Bills,
safetyTraining:SafetyTraining
};
export const businessRouts = [
{ path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
{ path: 'bills',group: 'biz',component: Bills, childRoutes: [] }
{ path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
{ path: 'safetyTraining',group: 'biz',component: SafetyTraining, childRoutes: [] }
];
const pageCompontent = key => {
return Routes[key] || EmptyPage;
......
src/styles/view/index.scss
View file @ fe9793bb
......@@ -9,4 +9,7 @@
@import '~amos-framework/dist/amosframework.css';
// 导入amos-pro
@import '~amos-pro/dist/amospro.css';
@import '~ray-progress/assets/progress.css';
\ No newline at end of file
@import '~ray-progress/assets/progress.css';
@import './monitor/safetyTrain.scss';
@import './monitor/table.scss'
src/styles/view/monitor/safetyTrain.scss 0 → 100644
View file @ fe9793bb
.fire-safety{
position: absolute;
height: 100%;
width: 100%;
// background: url('/src/assets/bg/bg.png') no-repeat;
background-image: url('/src/assets/safetyManage/bjt.png');
background-repeat: no-repeat;
.fire-safty-content {
height: 100%;
.fire-top{
height: 2%;;
width: 100%;
}
.fire-bottom{
height: 93%;
width:100%;
position: relative;
.fire-bottom-left {
height: 98%;
width: 47%;
position: absolute;
left: 2.6%;
border:2px solid rgba(0,185,255,0.3);
.fire-bottom-left-content {
height: 100%;
.one-div {
height: 9%;
// border:2px solid blue;
width: 100%;
display: flex;
background: #222b51 !important;
.search-one {
height: 100%;
width: 30%;
position: relative;
text-align: center;
/* vertical-align: middle; */
top: 29%;
.search-one-button{
background-image: url('/src/assets/safetyManage/sousuo.png');
background-repeat: no-repeat !important;
right: 26%;
height: 20px;
position: relative;
width: 20px;
/* margin-top: 10%; */
margin-top: -1%;
float: right;
/* padding-left: 8%; */
top: 11%;
}
.search-one-input{
width: 100%;
.ant-input-affix-wrapper .ant-input-suffix{
position: absolute;
padding-right: 24px;
top: 50%;
transform: translateY(-50%);
line-height: 0;
color: rgba(0, 0, 0, 0.65);
}
.ant-input-affix-wrapper {
padding: 0;
margin: 0;
font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
list-style: none;
box-sizing: border-box;
position: relative;
display: inline-block;
width: 50;
padding-left: 24px;
padding-right: 24px;
}
.ant-input-search {
.anticon-search {
&::before {
position: relative;
display: inline-block;
background: url('/src/assets/safetyManage/sousuo.png') no-repeat;
width: 20px;
height: 20px;
background-size: 100% 100%;
top: 0px;
content: '' !important;
}
}
}
.ant-input {
// width: 10.7rem;
height: 30px;
// position: relative;
font-size:10px;
font-family:Microsoft YaHei;
font-weight:bold;
// line-height:50px;
color:rgba(225,231,232,1);
-webkit-text-stroke:1 rgba(0,0,0,0.00);
text-stroke:1 rgba(0,0,0,0.00);
opacity:1;
background: rgba(0,185,255,0.3) !important;
border-radius: 17px;
left: 34%;
.anticon:before {
margin-top: 1px;
}
border-color:rgba(0,185,255,0.3)
}
}
}
.search-two {
height: 100%;
width: 30%;
// border:2px solid red;
left: 2%;
position: relative;
top: 29%;
.amos-popover-trigger {
border-color:rgba(0,185,255,0.3);
font-size:10px;
font-family:Microsoft YaHei;
font-weight:bold;
// line-height:50px;
color:rgba(225,231,232,1);
-webkit-text-stroke:1 rgba(0,0,0,0.00);
text-stroke:1 rgba(0,0,0,0.00);
opacity:1;
width: 74%;
}
.aficon-down:before {
position: relative;
display: inline-block;
background: url('/src/assets/safetyManage/xiangxia.png') no-repeat;
width: 20px;
height: 20px;
background-size: 100% 100%;
top: 4px;
content: '' !important;
}
.search-select-style {
background:rgba(0,185,255,0.3);
opacity:1;
border-radius:17px;
background:rgba(0,185,255,0.3);
}
}
.search-three {
position: relative;
height: 100%;
width: 41%;
top: 29%;
margin-left: -3%;
.ant-calendar-picker-input{
background-color: rgba(0,185,255,0.3);
border-color:rgba(0,185,255,0.3)
}
.ant-input {
font-size:10px;
font-family:Microsoft YaHei;
font-weight:bold;
// line-height:50px;
color:rgba(225,231,232,1);
-webkit-text-stroke:1 rgba(0,0,0,0.00);
text-stroke:1 rgba(0,0,0,0.00);
border-radius: 17px;
width: 102%;
}
.ant-calendar-picker-icon:after {
position: relative;
display: inline-block;
background: url('/src/assets/safetyManage/rjd.png') no-repeat;
background-size: 100% 100%;
width: 18px;
height: 20px;
bottom: 4px;
right: -2px;
content: '' !important;
}
.three-font {
font-size:15px;
font-family:Microsoft YaHei;
font-weight:400;
line-height: 23px;
color:rgba(255,255,255,1);
}
.ant-calendar-picker-icon{
// background-image: url('/src/assets/safetyManage/sousuo.png');
// background-repeat: no-repeat !important;
border-color:rgba(0,185,255,0.3)
}
}
}
.two-div {
height: 91%;
// border:2px solid green;
}
}
}
.fire-bottom-right {
height: 98%;
width: 47%;
left: 51%;
border:2px solid rgba(0,185,255,0.3);
position: absolute;
.fire-bottom-right-content {
height: 100%;
.one-div {
height: 9%;
// border:2px solid blue;
width: 100%;
display: flex;
background: #222b51 !important;
.content-font-wenzi {
font-size:10px;
font-family:Microsoft YaHei;
font-weight:bold;
// line-height:50px;
color:rgba(225,231,232,1);
display: inline-block;
margin-top: 4%;
margin-left: 4%;
}
}
.two-div {
height: 91%;
// border:2px solid green;
.ant-table-content {
height: 100%;
//滚动条特殊调整
.ant-table-body {
// max-height: 500px !important ;
overflow-y: scroll !important;
background:transparent!important;
table {
width: 300px;
border-color: transparent !important;
td {
border-color: transparent !important;
}
}
}
}
}
}
}
}
}
}
\ No newline at end of file
src/styles/view/monitor/table.scss 0 → 100644
View file @ fe9793bb
.table-styles {
height: 100%;
.ant-table-content {
height: 100%;
.ant-table-body {
// max-height: 500px !important ;
overflow-y: auto !important;
background:transparent!important;
table {
width: 300px;
border-color: transparent !important;
td {
border-color: transparent !important;
}
}
}
}
.ant-table {
background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
border-radius: 0px 0px 0 0;
}
.ant-pagination.mini .ant-pagination-total-text {
height: 20px;
line-height: 20px;
}
//表格正文居中
.ant-table-content .ant-table-body table td {
border-color: transparent !important;
text-align: center;
}
.ant-table-fixed-header .ant-table-scroll .ant-table-header{
overflow: hidden;
}
.ant-pagination.mini .ant-pagination-total-text {
font-size:13px;
font-family:Microsoft YaHei UI;
font-weight:400;
line-height: 19px;
color:rgba(255,255,255,1);
float: right
}
//修改表头文字、背景颜色
.ant-table-thead > tr >th{
color: white;
background: #3d466b !important;
//background: #222b51 !important;
border-color: transparent !important;
text-align: center;
}
//鼠标悬浮行背景色修改
table tbody tr:hover>td {
background-color:#00B9FF !important;
}
.ant-table-content {
.ant-table-scroll .ant-table-header {
margin-bottom: 3px !important;
// padding-bottom: 0px !important;
margin-top: -2px !important;
margin-left: -2px !important;
margin-right: -2px !important
}
//背景色奇数和偶数
.back-02 {
background:transparent!important;
opacity:1;
}
.back-01 {
background:rgba(14,127,180,0.29);
}
}
.ant-pagination {
left: 39%;
position: absolute;
.ant-pagination-options {
.select-scroll-wrapper {
margin: 0;
}
}
.ant-pagination-total-text {
color: white;
}
.ant-pagination-prev {
background: url('/src/assets/safetyManage/zuo.png') no-repeat;
a {
&::after {
color:rgba(0,185,255,0.3)
}
}
}
.ant-pagination-next {
background: url('/src/assets/safetyManage/you.png') no-repeat;
background-size: 100% 100%;
a {
&::after {
color:rgba(0,185,255,0.3)
}
}
}
//分页颜色调整
.ant-pagination-item-active {
background-color: #5FFFFD !important;
border-color: #5FFFFD !important;
}
.ant-pagination-item {
border: 0;
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
background-color: #00B9FF !important;
}
.ant-pagination-jump-next {
&::after {
color: white;
}
}
}
.ant-pagination.mini .ant-pagination-options {
margin-left: 8px;
display: none;
}
//滚动条样式
.ant-table-body{
&::-webkit-scrollbar {
height: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background-image: url('/src/assets/safetyManage/hengxian.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: 0;
border-radius: 0;
background-image: url('/src/assets/safetyManage/gdt.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
&::-webkit-scrollbar-button {
background-image: url('/src/assets/safetyManage/shang.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
src/view/monitor/safetyManage/AmosGridTable.js 0 → 100644
View file @ fe9793bb
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table } from 'amos-antd';
import { Log } from 'amos-tool';
/**
* 基础信息表格组件
* @class AmosGridTable
* @extends {Component}
*/
class AmosGridTable extends Component {
constructor(props) {
super(props);
this.state = {
selectedRowKeys: [],//表格选择的行key值集合
selectedRows: [],//表格选择的行数据集合
loading: false,//页面是否加载中,默认false
dataList: [],//表格数据集合
size: 'middle',//表格大小
current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
filter: {},//表格过滤条件
totals: 1,//所有数据总和
showFilter: true,
otherFilter: props.otherFilter,
maxHeight: 450
};
}
/**
* 初始获取表格数据
*/
componentDidMount() {
this.props.callBack(this.reload);
this.getHeightOffset();
window.addEventListener('resize', this.onWindowResize);
}
componentWillReceiveProps(nextProps) {
if (nextProps.url !== this.props.url){
this.reload();
}
if (nextProps.otherFilter && nextProps.otherFilter !== this.props.otherFilter){
this.setState({ otherFilter: nextProps.otherFilter }, this.reload);
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.onWindowResize);
}
onWindowResize = (e) => {
this.getHeightOffset();
}
/**
* 获取复选框选择的数据，并进行回调
*/
onSelectChange = (selectedRowKeys,selectedRows) => {
this.setState({
selectedRowKeys,
selectedRows
},this.props.getSelectedRows(selectedRows,selectedRowKeys));
}
/**
* 设置页面数据大小事件
*/
onSizeChange = (current, pageSize) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current, pageSize });
this.setState({ current, pageSize },this.reload);
}
/**
* 设置当前页事件
*/
onPaginationChange = (current) => {
let { setPageConfig } = this.props;
setPageConfig && setPageConfig({ current });
this.setState({ current },this.reload);
}
/**
* 获取表格所有的外部按钮封装成数组
*/
getbtns = () => {
let btns = [];
return <div key={`btntool`} className='amos-grid-oper-btn'>{this.props.operBtns}</div>;
}
/**
* 获取表格数据的筛选条件，通过回调获得的，并通过该条件进行表格刷新获取
*/
changeFilters = (obj) => {
let newobj = obj;
let res = {};
let list = Object.keys(newobj);
list.map(e=>{
let varName = newobj[e];
if (varName && varName !== ''){
res[e] = varName;
if (e === 'enabled'){
res[e] = varName === '启用';
}
}
});
this.setState({ filter: res },this.reload);
}
openFilter = () => {
let showFilter = this.state.showFilter;
this.setState({ showFilter: !showFilter });
}
/**
* 获取表格数据（刷新）
*/
reload = () => {
let { current,pageSize,filter,otherFilter } = this.state;
this.props.getTableDataAction({ current: current - 1, pageSize },JSON.stringify(filter),otherFilter);
this.getHeightOffset();
}
/**
* 获取表格内部按钮
*/
addOperateCol =(text,record) =>{
const { operateCol } = this.props;
let operBtns = operateCol(text,record);
return (<div className='operation-buttons'>{operBtns}</div>);
}
showTotal = (total) => {
return `共 ${total} 条`;
}
generateRowkey = (record, index) => {
// return record.id ? record.id : UUID.uuidFast();
return record.key ? record.key : record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
// return index + (this.state.current - 1) * this.state.pageSize;
}
getHeightOffset = () => {
let { getPanelHeight } = this.props;
let height = getPanelHeight === undefined ? 450 : getPanelHeight();
height && this.setState({ maxHeight: height });
}
isVisableSearch(columns){
let list = columns;
let res = false;
list.map((e)=>{
if (e.query){
res = true;
return true;
}
});
return res;
}
render() {
const { loading, selectedRowKeys,size,maxHeight } = this.state;
let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals,rowClassName, onRowClick, onRowDoubleClick } = this.props;
//设置复选框参数
let rowSelection = {
selectedRowKeys: this.props.selectedRowKeys || selectedRowKeys,
onChange: this.onSelectChange
};
//设置是否添加复选框
rowSelection = isChecked ? rowSelection : undefined;
//如果表格各行存在内部按钮，将各个按钮添加到表格列模型中
if (operateCol){
columns[columns.length - 1].render = (text,record) => this.addOperateCol(text,record);
}
let tepmPage = Object.assign({
size: 'small',
total: totals,
current: this.state.current,
pageSize: this.state.pageSize,
onShowSizeChange: this.onSizeChange,
onChange: this.onPaginationChange,
showSizeChanger: true,
showTotal: this.showTotal
}, pagination);
let _tempPagination = isPageable === false ? false :tepmPage;
let bordered = true;
// 当为true 或 undefined时则分页
let _pagination = isPageable === false ? false : _tempPagination;
let divStyle = this.state.showFilter ? 'other-table-bar' : 'table-bar';
let display = this.state.showFilter ? 'block' : 'none';
let searchStyle = { display };
return (
<div className="table-styles">
{ onRowClick ?
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={dataList}
pagination={_pagination}
size={size}
bordered={bordered}
scroll={{ y: maxHeight }}
rowClassName={rowClassName}
onRowClick={onRowClick}
/> :
<Table
rowKey={isTreeTable ? 'key' : this.generateRowkey}
loading={loading}
rowSelection={rowSelection}
columns={columns}
dataSource={dataList}
pagination={_pagination}
size={size}
bordered={bordered}
scroll={{ y: maxHeight }}
rowClassName={rowClassName}
onRowDoubleClick={onRowDoubleClick}
/>
}
</div>
);
}
}
AmosGridTable.propTypes = {
url: PropTypes.string,//请求表格数据的url不带参数的
columns: PropTypes.array,//表格列模型
getSelectedRows: PropTypes.func,//获取选择的行数据，用于各个具体的表格回调获取数据。
operBtns: PropTypes.array,//表格外部操作按钮，如'新增'，'编辑'等
isChecked: PropTypes.bool,//表格是否包含复选框
operateCol: PropTypes.func,//表格内部操作按钮，如'查看详情'等
callBack: PropTypes.func,//获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
otherFilter: PropTypes.string,//其他查询条件
dataList: PropTypes.array,
getTableDataAction: PropTypes.func,
selectedRowKeys: PropTypes.array,
totals: PropTypes.number,
pagination: PropTypes.any, // 分页props, false时无分页
isPageable: PropTypes.bool, // 是否分页: true 分页, false 不分页, 当为undefined时默认有分页
isTreeTable: PropTypes.bool, // 是否是treeTable 默认非
rowClassName: PropTypes.func,
setPageConfig: PropTypes.func, //把分页参数给父类
defaultPageConfig: PropTypes.object, //父类默认分页参数
getPanelHeight: PropTypes.func
};
AmosGridTable.defaultProps = {
operBtns: [],
dataList: [],
totals: 1,
columns: [],
isChecked: true,
isTreeTable: false,
otherFilter: ''
};
export default AmosGridTable;
src/view/monitor/safetyManage/SafteyLeft.js 0 → 100644
View file @ fe9793bb
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%',
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: 'kemu',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '次数',
width: '10%',
dataIndex: 'cishu',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '参加人员',
width: '10%',
dataIndex: 'cjry',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '人员达标率',
width: '20%',
dataIndex: 'rydbl',
render: val => <span style={{color:"white"}}>{val}</span>,
},
{
title: '最近培训时间',
width: '20%',
dataIndex: 'date',
render: val => <span style={{color:"white"}}>{val}</span>,
}
];
const data = [
{
key: '1',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '2',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '3',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '4',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '5',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '6',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '7',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '8',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '9',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '10',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '11',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '12',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '13',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '14',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '15',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '16',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '17',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '18',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '19',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '20',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '21',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '22',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '23',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '225',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '25',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '26',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '27',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '28',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
},
{
key: '29',
name: '复龙换流站',
kemu: 3,
cishu:4,
cjry: 5,
rydbl:'50%',
date:"2019-01-01"
}
];
const selectdata = [
{ id: 0, name: '消防理论知识培训' },
{ id: 1, name: '消防技能培训' },
{ id: 3, name: '设备器材维护管理' },
{ id: 4, name: '火灾隐患管理' },
{ id: 5, name: '用火用电管理' }
];
//偏移
const offsetHeight = 110;
const defaultHeight = 450;
/**
* 安全培训左侧
*/
class SafteyLeft 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;
debugger
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)
})
}
}
onChange = (value, item) =>{
debugger
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-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;
let { pagination, isChecked, fname,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"
data={selectdata}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
defaultOption={<Option>请选择</Option>}
onChange={this.onChangeSelect}
/>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
placeholder="年-月-日"
showTime
onChange={this.onTimeChange}
style={{width:'37%'}}
onOk={this.onOk} />
</div>
</div>
<div 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>
);
}
}
SafteyLeft.propTypes = {
};
export default SafteyLeft;
src/view/monitor/safetyManage/SafteyRight.js 0 → 100644
View file @ fe9793bb
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: '0-60',
width: '10%',
dataIndex: '0-60',
render: val => <span style={{color:"red"}}>{val}</span>,
},
{
title: '61-85',
width: '10%',
dataIndex: '61-85',
render: val => <span style={{color:"yellow"}}>{val}</span>,
},
{
title: '86-100',
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;
debugger
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)
})
}
}
onChange = (value, item) =>{
debugger
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 0 → 100644
View file @ fe9793bb
import React, { Component } from 'react';
import SafteyLeft from './SafteyLeft';
import SafteyRight from './SafteyRight';
/**
* 中心级2侧模块
*/
export default class Safety extends Component {
render() {
return (
<div className="fire-safety">
<div className="fire-safty-content">
<div className="fire-top"></div>
<div className="fire-bottom">
<SafteyLeft />
<SafteyRight />
</div>
</div>
</div>
);
}
}
src/view/monitor/statistical/AllSafety.js
View file @ fe9793bb
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 = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20'],
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
const option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
},
// color: ['#00CACE', '#F70D0E'],
color: ['#F70D0E', '#00CACE'],
graphic: [{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '30%',
style: {
text: '80', //'80' + '\n' + '总数'
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
width: 30,
height: 30,
fontSize: 25,
fontFamily: "Microsoft YaHei",
fontWeight:"bold"
}
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
axisLine: {
lineStyle: {
color: '#2A5D75',
}
},
// 改变y轴字体颜色和大小
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: '14',
fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '45%',
style: {
text: '站点',
textAlign: 'center',
fill: "rgba(255,255,255,1)", //文字的颜色
width: 24,
height: 16,
fontSize: 12,
fontFamily: "Microsoft YaHei",
fontWeight:400
}
}],
series: [
{
name: '总体消防安全情况',
type: 'pie',
radius: ['65%', '80%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
// hoverAnimation: false, //是否突出
labelLine: {
normal: {
show: false
}
},
},
},
series: [{
data: [0, 40, 80, 100, 85, 70, 85, 80],
type: 'line',
smooth: true, //这个是把线变成
itemStyle: {
normal: {
color: "#FF7400", //折线点的颜色
lineStyle: {
width: 3,//折线宽度
color: "#DDBF28"//折线颜色
data: [
{
value: 40,
name: "不合格",
},
{
value: 60,
name: '正常',
}
}
]
},
areaStyle: {
normal: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ADFF'
}, {
offset: 0.5,
color: '#DDBF28'
}, {
offset: 1,
color: '#FF7400'
}])
}
}
}]
{
name: "中间的背景",
type: "pie",
radius: ["0%", "60%"],
center: ["50%", "40%"],
label: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(24,219,159,0.1)'
},
},
//隐藏多余文字提示
label: {
show: false
},
labelLine: {
show: false
},
tooltip: {
show: false
},
// hoverAnimation: false,
data: [100]
}
]
};
......@@ -89,22 +120,49 @@ class AllSafety extends Component {
}
componentDidMount() {
}
getOptionsx = () => {
return option;
}
render() {
return (
<div className="AllSafety">
<div className="all-safety-content">
<div className="all-safety-font">总体消防安全情况</div>
<div className="content-detail">
<div className="all-safety-left">
<ReactEcharts option={this.getOptionsx()} className="div-echars" />
</div>
<div className="all-safety-right">
<div className="all-safety-right-one">
<div className="right-one-font">1个</div>
</div>
<div className="all-safety-right-two">
<div className="right-two-font"><span className="jiantou">&darr;</span>-1</div>
</div>
<div className="all-safety-right-three">
<div className="right-three-font">1个</div>
</div>
<div className="all-safety-right-four">
<div className="right-four-font"><span className="jiantou">&uarr;</span>+1</div>
</div>
</div>
</div>
</div>
{/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */}
......
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