Skip to content

A
AmosBankView
Commit 87cf6437 authored by 吴俊凯's avatar 吴俊凯
Browse files
Options

警告查询增加查询条件、模型右侧功能栏消息修改

parent 3423fd55
Hide whitespace changes
Inline Side-by-side
Showing with 1056 additions and 26 deletions
src/view/bank/3dview/common/biz/FilterPane.js 0 → 100644
View file @ 87cf6437
import React from 'react';
import PropTypes from 'prop-types';
import { Button ,Icon } from 'amos-framework';
import classnames from 'classnames';
import './FilterPane.scss';
/**
* 公共列表页面-筛选面板容器
*
* @class FilterPane
* @extends {Component}
*/
function FilterPane(props) {
const { children, onSearch, show, className, style ,onReset } = props || {};
return (
<div className={classnames('eb-com-filter-pane', className)} style={{ display: show ? 'block' : 'none', ...style || {} }}>
<div className='eb-com-filter-pane-title'>
<span>筛选</span>
<a className="qq-client-open" onClick={onReset} >
<Icon size="1x" prefix="amosicon" icon="gengduo2" />
</a>
</div>
<div className='eb-com-filter-pane-content'>
{children}
</div>
<div className='eb-com-filter-pane-footer'>
{/* <Button className={classnames('eb-com-filter-pane-btn', 'eb-com-filter-pane-reset-btn')} onClick={onReset}>重置</Button> */}
<Button className={classnames('eb-com-filter-pane-btn', 'eb-com-filter-pane-search-btn')} onClick={onSearch}>查询</Button>
</div>
</div>
);
}
FilterPane.propTypes = {
style: PropTypes.object,
className: PropTypes.any,
children: PropTypes.any,
show: PropTypes.bool,
onReset: PropTypes.func,
onSearch: PropTypes.func,
onHide: PropTypes.func,
handleFilterShow: PropTypes.func
};
FilterPane.defaultProps = {
onReset(){
this.props.onSearch();
},
onSearch(){
this.props.onSearch();
}
};
export default FilterPane;
src/view/bank/3dview/common/biz/FilterPane.scss 0 → 100644
View file @ 87cf6437
@import './../index.scss';
.eb-com-filter-pane {
position: absolute;
right: 0%;
width: 300px;
height: 100%;
min-width: 200px;
overflow: auto;
top: 0px;
background: #ffffff;
.eb-com-filter-pane-title {
display: flex;
width: 100%;
padding: 8px 13px 3px 29px;
font-size: $frame-second-fontsize;
font-weight: normal;
letter-spacing: 1px;
color: $frame-fourth-color;
align-items: center;
font-stretch: normal;
span {
flex: 1;
}
img {
width: 16px;
height: 16px;
cursor: pointer;
}
}
.eb-com-filter-pane-footer {
display: flex;
width: 100%;
padding-top: 24px;
border-top: solid 1px $frame-main-bordercolor;
justify-content: center;
align-items: center;
.eb-com-filter-pane-btn {
height: auto;
padding: 6px 21px;
font-size: $frame-third-fontsize;
border-radius: 6px;
&.eb-com-filter-pane-reset-btn {
color: $frame-first-color;
background-color: white;
border: solid 1px $frame-main-bordercolor;
}
&.eb-com-filter-pane-search-btn {
margin-left: 16px;
color: white;
background-color: $frame-main-color;
border: solid 1px $frame-second-bordercolor;
}
}
}
}
src/view/bank/3dview/common/form/FormUtils.js 0 → 100644
View file @ 87cf6437
/* eslint-disable no-magic-numbers */
import classnames from 'classnames';
import {
// utils,
trim
} from 'amos-tool';
/**
* form表单布局样式设置方法
* @param {number} width 单项form（文本和控件）所占百分比1-100
* @param {number} label 单项form文本宽度（宽度设置的单位为rem）
* @param {*} other 单项form其他样式名称
* @example
* <FormItem className={itemLayout('100', '7')} label={<span>调度名称</span>} field="jobname">
* <Input value={form.jobname} />
* </FormItem>
*/
export const formLayout = (width, label, other) => {
return classnames(
`eb-com-form-item-${width}`,
`eb-com-form-item-label-${label}`,
other
);
};
export const formRules = {
longTextLength: 1000,
textLength: 255,
hundredLength: 100,
required: (msg) => ({ required: true, message: msg || '必填项' }),
name: (length = 32) => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
if (trim(value).length > length) {
callback(new Error(`字符长度不能大于${length}`));
}
}
callback();
} };
},
phone: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确的手机号`));
}
}
callback();
} };
},
tel: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^((0\d{2,3})-)(\d{7,8})((\d{3,}))?$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确的固定电话`));
}
}
callback();
} };
},
serviceTel: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /(^(400)-(\d{3})-(\d{4})(.)(\d{1,4})$)|(^(400)-(\d{3})-(\d{4}$))/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确的客服电话`));
}
}
callback();
} };
},
email: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确格式的邮箱地址`));
}
}
callback();
} };
},
website: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})www\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确格式的网址`));
}
}
callback();
} };
},
longitude: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确格式精度`));
}
}
callback();
} };
},
latitude: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正确格式精度`));
}
}
callback();
} };
},
clockScope: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入大于0的数`));
}
}
callback();
} };
},
positiveInteger: () => {
return { validator: (rules, value, callback) => {
if (value && trim(value)) {
const reg = /^[1-9]\d*$/;
if (!reg.test(trim(value))) {
callback(new Error(`请输入正整数`));
}
}
callback();
} };
}
};
/**
* 过滤对象中字符串的前后空格
* @param {*} form
*/
export const trimFormData = (form) => {
for (let key in form) {
if ((typeof form[key] === 'string') && form[key].constructor === String) {
form[key] = trim(form[key]);
}
}
return form;
};
src/view/bank/3dview/common/form/form.scss 0 → 100644
View file @ 87cf6437
@import './../index.scss';
@mixin eb-form-modal {
.eb-form-modal-content {
@content;
padding: 20px 0 12px;
}
.eb-form-content {
@content;
}
.eb-form-tablelist-filter-content {
@content;
padding: 11px 40px 11px 38px;
}
}
.amos-row {
@for $i from 1 through 100 {
&.eb-com-form-item-#{$i} {
display: inline-block;
width: 1% * $i;
vertical-align: top;// !important;
&.error {
margin-bottom: 0.5em;// !important;
}
&.required .amos-form-item-label {
position: relative;
&::before {
position: absolute;
left: 0;
display: inline-block;
font-size: 20px;
line-height: 1.3;
color: red;
content: '*';// !important;
}
label {
&::before {
display: none;
}
}
}
&.amos-form-item {
// margin-bottom: 21px;
font-size: $frame-second-fontsize;
}
}
&.eb-com-form-item-label-#{$i} {
.amos-form-item-label {
@if ($i==100) {
width: 100%;
margin-bottom: 10px;
}
@else {
width: 1em * $i;
margin-bottom: 0;
}
padding-left: 0.6em;
line-height: inherit;
color: $frame-fourth-color;
text-align: left;
.amos-form-item-field {
font-size: inherit;// !important;
&::after {
margin: 0 0.5em 0 0.1em;
}
}
}
.amos-form-item-control {
@if ($i==100) {
width: 100%;
}
@else {
width: calc(100% - #{1em * $i});
}
display: inline-block;
vertical-align: top;
}
}
&.eb-com-form-item-label-0 {
.amos-form-item-label {
display: none;// !important;
}
}
}
}
@include eb-form-modal {
input {
width: 100%;
height: 30px;
padding: 0 0.6em;
font-size: $frame-second-fontsize;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
outline: none;
opacity: 1;
&:not([disabled]):hover {
border-color: #27b3fe;
}
}
.amos-textarea {
width: 100%;
padding: 0.6em;
font-size: $frame-second-fontsize;
line-height: 1.5;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
}
.amos-select {
width: 100%;
height: 30px;
min-width: 5em;
font-size: $frame-second-fontsize;
line-height: 30px;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;// !important;
.amos-select-dropdown-icon {
margin-top: -14px;
}
}
.amos-switch {
height: 20px;
margin: 0;
&::after {
top: 0;
}
}
.select-scroll-wrapper {
width: 100%;
.ant-select {
.ant-select-selection {
width: 100%;
height: 30px;
font-size: $frame-second-fontsize;
line-height: 30px;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
.ant-select-selection__rendered {
padding-right: 0;
padding-left: 0;
line-height: 28px;
}
.ant-select-arrow {
right: 0.5em;
margin-top: 18px;
font-size: 16px;
color: $frame-main-color;
}
}
}
}
.amos-cascader-dropdown {
width: 100%;
min-height: 30px;
font-size: $frame-second-fontsize;
line-height: 30px;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
}
.amos-multi-select {
width: 100%;
min-height: 30px;
font-size: $frame-second-fontsize;
line-height: 30px;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
}
.eb-form-number-range {
display: flex;
width: 100%;
> span {
padding: 0 5px;
}
input {
flex: 1;
}
.amos-select {
width: 4.9em;
min-width: 0;
margin-left: 3px;// !important;
.amos-select-title {
padding-left: 7px;
}
.amos-select-dropdown-icon {
right: 4px;
}
}
}
.tree-select-scroll-wrapper {
width: 100%;
.ant-select {
.ant-select-selection {
width: 100%;
height: 30px;
font-size: $frame-second-fontsize;
line-height: 30px;
background: $frame-third-color;
border: 1px solid $frame-main-bordercolor;
border-radius: 6px;
&:active {
border-color: #27b3fe;
outline: none;
box-shadow: 0 0 0 1px rgba(39, 179, 254, 0.15);
}
.ant-select-selection__rendered {
padding: 0;
.ant-select-selection__placeholder {
top: 0;
width: 100%;
height: 28px;
margin: 0;
font-size: $frame-second-fontsize;
line-height: 28px;
}
}
.ant-select-arrow {
top: 50%;
right: 7px;
margin-top: -7px;
font-size: $frame-second-fontsize;
color: $frame-main-color;
}
}
&.ant-select-open {
.ant-select-selection {
box-shadow: none;
}
}
.ant-select-selection--multiple {
height: auto;
min-height: 30px;
}
}
.ant-select-dropdown {
overflow: auto;
}
}
.ant-calendar-picker {
width: 100%;
}
.com-corn-generator {
width: 100%;
}
.amos-divider-horizontal {
margin: 4px 0 15px;
}
.eb-form-input-button {
width: 100%;
height: 30px;
line-height: 30px;
input {
width: calc(100% - 35px);
margin-right: 5px;
vertical-align: top;
}
.eb-com-btn {
width: 30px;
height: 30px;
.eb-btn-conent {
width: 30px;
}
}
}
}
.amos-select-dropdown-popover {
.amos-popover-content {
border: 0;
border-radius: 6px;
opacity: 1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
.amos-select-options {
.amos-select-option {
&:hover {
background: $frame-select-color;
}
}
}
}
}
.amos-taglist li input {
padding: 0 4px;
&::-webkit-input-placeholder {
color: #bbb;
}
}
.eb-form-file-label {
.eb-form-file-label-title {
font-size: 14px;
}
.eb-form-file-label-tip {
font-size: 12px;
color: #999;
}
}
src/view/bank/3dview/common/form/widthFormModal.js 0 → 100644
View file @ 87cf6437
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { deepCopy } from 'amos-tool';
import ModalDialog from './../modal';
import { trimFormData } from './FormUtils';
import Tip from './../tip';
import './form.scss';
class Container extends Component {
static propTypes = {
onStart: PropTypes.func,
children: PropTypes.node
};
componentDidMount() {
this.props.onStart && this.props.onStart();
}
render() {
return (
<div className="eb-form-modal-content">
{ this.props.children }
</div>
);
}
}
/**
* 弹出框表单修饰器
* @class widthFormModal
* @extends {Component}
*/
const widthFormModal = function({ width, name, title, modalClass, noOverflow = false }){
return function(Target) {
// eslint-disable-next-line react/no-multi-comp
class FormMoal extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
type: 'add',
data: null,
loading: false
};
}
componentDidMount() {
const props = {
...this.props
};
const { formRef } = props;
//使用修饰器后组件ref不能用了替换成formRef
formRef && formRef(this.instance);
}
onOpen = (data, type) => {
if (data) {
this.setState({ visible: true, type: type || 'edit', data });
} else {
this.setState({ visible: true, type: type || 'add' });
}
}
onInit = () => {
const { data } = this.state;
this.targetInstance && this.targetInstance.onInit && this.targetInstance.onInit(data, this.state.type);
}
/**
* 获取表单form对象（目前只用于提交验证）
*
* @memberof Wrapper
*/
onFormInstance = (component) => {
//解决form表单中只有一个input项时，回车页面刷新问题
//在form节点上添加 onsubmit = 'return false;' 属性
if (component && component._reactInternalFiber && component._reactInternalFiber.child && component._reactInternalFiber.child.stateNode) {
component._reactInternalFiber.child.stateNode.setAttribute('onsubmit','return false;');
}
this.form = component;
}
onTargetInstance = (node) => {
if (node) {
this.targetInstance = node;
this.targetInstance.form = this.form;
}
}
/**
* 保存按钮事件
*/
onSave = (e) => {
this.targetInstance.onSubmit && this.targetInstance.onSubmit(this.onCancel);
}
/**
* 表单提交
*
* @memberof Wrapper
*/
onSubmit = ({ action, changeValues, form, onSuccess, onError, tip = '保存', showTip = true, showError = true, isClose = true }) => {
if (!form && !this.form) {
throw new Error('formSubmit方法form不能为空');
}
if (this.state.loading) {
return;
}
this.setState({ loading: true });
(form || this.form).validate((valid,dataValues) => {
let values = deepCopy(dataValues);
if (valid) {
let obj = null;
if (changeValues) {
obj = changeValues(values);
}
if (obj) {
values = obj;
}
if (action) {
action(trimFormData(values)).then(d => {
showTip && Tip.success(`${tip}成功`);
onSuccess && onSuccess(d, values);
this.props.reload && this.props.reload();
isClose && this.onCancel();
}).catch(msg => {
(showTip || showError) && Tip.error(msg || `${tip}失败`);
onError && onError(msg, values);
}).finally(() => {
this.setState({ loading: false });
});
} else {
onSuccess && onSuccess(values);
isClose && this.onCancel();
this.setState({ loading: false });
}
} else {
this.setState({ loading: false });
return false;
}
});
}
/**
* 关闭对话框
*/
onCancel = () => {
this.targetInstance.onDestroy && this.setState({
visible: false,
type: 'add',
data: null,
loading: false
}, this.targetInstance.onDestroy());
}
render() {
const { visible, type, data } = this.state;
const props = { ...this.props };
delete props.formRef;
if ('formInstance' in props) {
throw new Error('widthFormModal修饰器下的组件不能传入formInstance属性');
}
if ('formSubmit' in props) {
throw new Error('widthFormModal修饰器下的组件不能传入formSubmit属性');
}
if (this.props.title) {
title = this.props.title;
}
if (this.props.name) {
name = this.props.name;
}
return (
<ModalDialog
visible={visible}
width={width}
onCancel={this.onCancel}
noOverflow={noOverflow}
modalClass={`yeebt-form-modal ${modalClass || ''}`}
onOk={this.onSave}
title={title ? title : `${type === 'add' ? '添加' : '编辑'}${name}`}
floorNode={this.props.floorNode}
okText={this.props.okText}
cancelText={this.props.cancelText}
>
<Container onStart={this.onInit}>
<Target
{...this.props}
onCancel={this.onCancel}
ref={this.onTargetInstance}
editData={data}
pageType={type}
formInstance={this.onFormInstance}
formSubmit={this.onSubmit}
/>
</Container>
</ModalDialog>
);
}
}
FormMoal.propTypes = {
reload: PropTypes.func,
floorNode: PropTypes.any,
okText: PropTypes.string,
title: PropTypes.string,
name: PropTypes.string,
cancelText: PropTypes.string
};
return FormMoal;
};
};
export default widthFormModal;
src/view/bank/3dview/common/index.scss 0 → 100644
View file @ 87cf6437
//系统前缀名
$frame-main-bg: white; //系统主背景色
$frame-slave-bg: rgba(243, 243, 243, 1); //系统次级背景色
$frame-main-bordercolor:rgba(228, 228, 228, 1); //系统次级背景色
$frame-second-bordercolor: rgba(46, 83, 146, 1); //系统次级背景色
$frame-third-bordercolor: rgba(201, 201, 201, 1); //系统次级背景色
$frame-first-fontsize: 20px; //系统一级文本大小
$frame-second-fontsize: 15px; //系统二级文本大小
$frame-third-fontsize: 13px; //系统三级文本大小
$frame-fourth-fontsize: 12px; //系统四级文本大小
$frame-first-color: rgba(63, 63, 63, 1);//系统一级文本颜色
$frame-second-color: rgba(206, 206, 206, 1);//系统二级文本颜色
$frame-third-color: white;//系统三级文本颜色
$frame-fourth-color: rgba(51, 51, 51, 1);//系统四级文本颜色
$frame-main-color: rgba(52, 95, 166, 1);//系统主色
$frame-select-color: rgba(230, 247, 255, 1);//系统选中色
$frame-select-first-color: rgba(21, 146, 230, 1);//系统选中色
$frame-disabled-color: rgba(227, 227, 227, 1);//系统中禁用色
$from-disabled-color: #f4f4f4;//系统中rom表单控件禁用色
//系统特殊演示变量
//状态色
$special-state-color-error: red; //错误
$special-state-color-pass: rgba(13, 204, 57, 1); //通过
$special-state-color-unknown: rgba(255, 153, 0, 1); //未知
//对话框
$modal-header-bg: linear-gradient(360deg, rgba(246, 246, 246, 1) 0%, rgba(238, 238, 238, 1) 100%); //对话框顶部标题栏背景色
$modal-footer-bg: rgba(242, 242, 242, 1); //对话框底部背景色
$modal-colse-bg: linear-gradient(360deg, rgba(235, 4, 4, 1) 0%, rgba(255, 0, 87, 1) 100%); //对话框删除按钮色
//流程
$flow-bg: rgba(223, 223, 223, 1); //流程底色
src/view/bank/3dview/datapane/common/ListPaginate.js
View file @ 87cf6437
......@@ -46,7 +46,7 @@ class ListPaginate extends Component {
if (number === 0) {
data = content;
} else {
if (content.length > 0) {
if (content && content.length > 0) {
data.push(...content);
}
}
......@@ -56,7 +56,7 @@ class ListPaginate extends Component {
tip = undefined;
}
if (number === 0) {
this.scroll.scrollToTop();
this.scroll && this.scroll.scrollToTop();
}
this.setState({ tip, page: number });
parent.setState({ data });
......
src/view/bank/3dview/datapane/index.js
View file @ 87cf6437
......@@ -5,9 +5,9 @@ import Drawer from './Drawer';
const dataPanes = [
// { key: 'search', icon: 'sousuo', label: '检索', title: '信息检索' },
{ key: 'msg', icon: 'xiaoxi', label: '消息', title: '消息提醒' },
{ key: 'record', icon: 'xiaoxi', label: '消息', title: '消息提醒' },
// { key: 'trajectory', icon: 'trajectory', label: '轨迹', title: '巡检轨迹' },
{ key: 'record', icon: 'yuan1', label: '预案', title: '预案' },
{ key: 'msg', icon: 'yuan1', label: '预案', title: '预案' },
// { key: 'job', icon: 'job', label: '工单', title: '工单查看' },
// { key: 'broadcast', icon: 'buzhou7', label: '步骤', title: '步骤' },
// { key: 'statistics', icon: 'statistics', label: '统计', title: '统计信息' },
......
src/view/bank/situation/warn/Warnings.js
View file @ 87cf6437
import React, { Component } from 'react';
import { Table, Col, Row, Pagination } from 'amos-antd';
import { Search, Icon } from 'amos-framework';
import './../../../../styles/view/biz/situation/warn.scss';
import { Table, Col, Row,Pagination } from 'amos-antd';
import BizIcon from './../../../common/icon/BizIcon';
import { Icon,Button } from 'amos-framework';
import { getWarningsData, getWarningsByPageData, getWarningsExcelData } from 'SERVICES/situationService';
import AmosWebSocket from 'amos-websocket';
import SysWsURL, { completeToken } from 'CONSTS/wsUrlConsts';
import WarningsSearchFilter from './WarningsSearchFilter';
import './../../../../view/bank/3dview/common/biz/FilterPane.scss';
import './../../../../styles/view/biz/situation/warn.scss';
//页面列表
const columnss = () => [
{ title: '设备编号', dataIndex: 'sourceId', key: "sourceId", width: '6%' },
......@@ -111,10 +113,28 @@ class Warnings extends Component {
pageSize: 10,
total: 1
},
showFilter: false, //是否显示筛选面板
pageItem1: [
{
// name: 'alarmLevel',
name: 'sourceId',
name: 'alarmSourceName',
type: 'LIKE',
value: ''
},
{
name: 'alarmLevel',
value: ''
},
{
name: 'currentState',
value: ''
},
{
name: 'alarmSourceType',
type: 'LIKE',
value: ''
},
{
name: 'alarmSourceIp',
type: 'LIKE',
value: ''
}
......@@ -149,17 +169,16 @@ class Warnings extends Component {
current = arr - 1;
}
getWarningsByPageData(pageItem1, current, pageItem.pageSize).then((data) => {
if (data.content.length > 0) {
this.setState({
warnings: data.content,
pageItem: {
current: data.number,
pageSize: data.size,
total: data.totalElements
}
});
}
getWarningsByPageData(pageItem1, pageItem.current, pageItem.pageSize).then((data) => {
this.setState({
warnings: data.content,
pageItem: {
current: data.number,
pageSize: data.size,
total: data.totalElements
}
});
});
}
......@@ -210,14 +229,33 @@ class Warnings extends Component {
this.initData();
}
};
/**
* 点击过滤
*/
handleFilterShow = () => {
this.setState({ showFilter: !this.state.showFilter });
}
/**
* 筛选条件发生化
*/
handleFilterChange = (pageItem1) => {
this.setState({ pageItem1 });
}
render() {
let columns = columnss();
let { selectedRowKeys, warnings, pageItem } = this.state;
let { selectedRowKeys,warnings, pageItem,pageItem1, showFilter } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange
};
const filterProps = {
show: showFilter,
onFilterChange: this.handleFilterChange,
pageItem1,
onSearch: this.getWarningsByPage,
handleFilterShow: this.handleFilterShow
};
const wsURL = completeToken(SysWsURL.view3dws);
return (
<div className="amos-warn" style={{ overflow: 'auto', height: '100%' }}>
......@@ -225,13 +263,15 @@ class Warnings extends Component {
<div className="amos-warn-up">
<Row >
<Col span={24} className="amos-warn-top">
<Col span={17}></Col>
<Col span={5}>
<Search icon="search" style={{ color: '#345FA6' }} placeholder="请输入设备编号" onIconClick={this.onIconClick} />
<Col span={20} />
<Col span={1}>
<div className="amos-warn-top-btn" title="筛选" >
<Button title="筛选" icon={<BizIcon icon="shaixuan" />} onClick={() => { this.handleFilterShow();}} />
</div>
</Col>
<Col span={1}>
<div className="amos-warn-top-btn" title="导出" >
<Icon icon="download" style={{ color: '#345FA6' }} onClick={() => { this.onClickExport() }} />
<Icon icon="download" style={{ color: '#345FA6' }} onClick={() => { this.onClickExport();}} />
</div>
</Col>
</Col>
......@@ -244,6 +284,9 @@ class Warnings extends Component {
/>
</Col>
</Row>
<div>
<WarningsSearchFilter {...filterProps} />
</div>
</div>
<div className="data-list-pagination">
<Pagination
......
src/view/bank/situation/warn/WarningsSearchFilter.js 0 → 100644
View file @ 87cf6437
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input,Select } from 'amos-framework';
import FilterPane from './../../../bank/3dview/common/biz/FilterPane';
import { formLayout } from './../../../bank/3dview/common/form/FormUtils';
import './../../3dview/common/form/form.scss';
const FormItem = Form.Item;
const Option = Select.Option;
/**
* 生产厂家配置页面-筛选面板
*
* @class ManufacturerFilter
* @extends {Component}
*/
class WarningsSearchFilter extends Component {
static propTypes = {
pageItem1: PropTypes.object,
show: PropTypes.bool,
onFilterChange: PropTypes.func,
onSearch: PropTypes.func,
handleFilterShow: PropTypes.func
};
static defaultProps = {
regionList: [],
stateList: []
};
constructor(props) {
super(props);
this.state = {
regionList: [],
stateList: [],
alarmLevelData: [
{ name: '全部',value: null },
{ name: '警告告警',value: '警告告警' },
{ name: '次要告警',value: '次要告警' },
{ name: '重要告警',value: '重要告警' },
{ name: '紧急告警',value: '紧急告警' }
],
// alarmSourceTypeData: [
// { name: '全部',value: null },
// { name: '警告告警',value: '警告告警' },
// { name: '监测异常',value: '监测异常' },
// { name: 'IP设备告警',value: 'IP设备告警' },
// { name: '设备Ping不通',value: '设备Ping不通' },
// { name: '监测设备告警',value: '监测设备告警' }
// ],
currentStateData: [
{ name: '全部',value: null },
{ name: '清除',value: '清除' },
{ name: '告警',value: '告警' }
]
};
}
onChange = (varName, value) => {
const { onFilterChange, pageItem1 } = this.props;
for (let i = 0; i < pageItem1.length; i++){
if (pageItem1[i].name === varName){
pageItem1[i].value = value;
}
}
onFilterChange(pageItem1);
}
render() {
const { pageItem1, show, onSearch,handleFilterShow } = this.props;
const { alarmLevelData,currentStateData } = this.state;
console.log(this.props);
return (
<FilterPane show={show} onReset={handleFilterShow} onSearch={onSearch}>
<Form className="eb-form-tablelist-filter-content" ref={form => this.form = form} model={pageItem1}>
<FormItem className={formLayout('100', '100')} label={<span>告警源IP</span>} field="alarmSourceIp">
<Input onChange={(e) => this.onChange('alarmSourceIp', e.target.value)} />
</FormItem>
<FormItem className={formLayout('100', '100')} label={<span>告警源名称</span>} field="alarmSourceName">
<Input onChange={(e) => this.onChange('alarmSourceName', e.target.value)} />
</FormItem>
<FormItem className={formLayout('100', '100')} label={<span>严重度</span>}>
<Select onChange={(value)=> this.onChange('alarmLevel', value)}>
{alarmLevelData.map(item => {
return (
<Option key={item.value} value={item.value}>{item.name}</Option>
);
})}
</Select>
</FormItem>
<FormItem className={formLayout('100', '100')} label={<span>当前状态</span>} field="currentState">
<Select onChange={(value)=> this.onChange('currentState', value)}>
{currentStateData.map(item => {
return (
<Option key={item.value} value={item.value}>{item.name}</Option>
);
})}
</Select>
</FormItem>
<FormItem className={formLayout('100', '100')} label={<span>告警类别</span>} field="alarmSourceType">
<Input onChange={(e) => this.onChange('alarmSourceType', e.target.value)} />
</FormItem>
</Form>
</FilterPane>
);
}
}
export default WarningsSearchFilter;
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