Skip to content

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

修改监控屏左侧弹出框样式

parent cad4514b
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 74 deletions
src/styles/view/monitor/homePage.scss
View file @ 09387d48
...@@ -258,6 +258,104 @@ ...@@ -258,6 +258,104 @@
} }
.search-one-alarm {
height: 100%;
width: 30%;
position: relative;
text-align: center;
/* vertical-align: middle; */
top: 29%;
margin-left: 12%;
.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 { .search-two {
height: 100%; height: 100%;
width: 30%; width: 30%;
...@@ -347,6 +445,61 @@ ...@@ -347,6 +445,61 @@
} }
} }
.search-three-alarm{
position: relative;
height: 100%;
width: 41%;
top: 29%;
.ant-calendar-picker {
width: 36% !important
}
.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)
}
}
} }
......
src/view/monitor/statistical/AlarmControlTable.js
View file @ 09387d48
...@@ -3,12 +3,14 @@ ...@@ -3,12 +3,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,Icon,AmosAlert} from 'amos-framework'; import { Form, Select, Radio,StdForm ,Icon,AmosAlert} from 'amos-framework';
import { TreeSelect, DatePicker } from 'amos-antd'; import { TreeSelect, DatePicker } from 'amos-antd';
import { Input } from 'amos-antd';
import moment from 'moment'; import moment from 'moment';
import InputTable from './InputTable'; import InputTable from './InputTable';
import { SingleTable } from 'amos-pro'; import { SingleTable } from 'amos-pro';
const FormItem = Form.Item; const FormItem = Form.Item;
const Search = Input.Search;
const tableList1 = [ const tableList1 = [
{ name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } , { name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
...@@ -54,7 +56,7 @@ const data = [ ...@@ -54,7 +56,7 @@ const data = [
}, },
{ {
title: '火警告警', title: <div style={{"color":"#0055FF"}}>火警告警</div>,
dataIndex: 'sex', dataIndex: 'sex',
key: 'sex', key: 'sex',
width: '15%', width: '15%',
...@@ -69,7 +71,7 @@ const data = [ ...@@ -69,7 +71,7 @@ const data = [
}, },
{ {
title: '故障报警', title: <div style={{"color":"#F1F10C"}}>火警告警</div>,
dataIndex: 'age', dataIndex: 'age',
key: 'age', key: 'age',
width: '15%', width: '15%',
...@@ -82,7 +84,7 @@ const data = [ ...@@ -82,7 +84,7 @@ const data = [
}, },
{ {
title: '巡检告警', title: <div style={{"color":"#FF8000"}}>巡检告警</div>,
dataIndex: 'address', dataIndex: 'address',
key: 'address', key: 'address',
width: '15%', width: '15%',
...@@ -154,6 +156,10 @@ class AlarmControlTable extends Component { ...@@ -154,6 +156,10 @@ class AlarmControlTable extends Component {
} }
SearchChange = (value) => {
alert(value)
}
/** /**
* 获取表格刷新方法 * 获取表格刷新方法
...@@ -178,7 +184,7 @@ class AlarmControlTable extends Component { ...@@ -178,7 +184,7 @@ class AlarmControlTable extends Component {
componentWillReceiveProps = (nextProps) => { componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){ if (nextProps.refresh){
this.setState({ name:"" }); this.setState({ name:"" });
...@@ -204,7 +210,7 @@ class AlarmControlTable extends Component { ...@@ -204,7 +210,7 @@ class AlarmControlTable extends Component {
} }
onChange = (key, value) => { onChange = (key, value) => {
debugger
if(key==='name'){ if(key==='name'){
this.setState({ name:value }); this.setState({ name:value });
}else if(key==='startTime'){ }else if(key==='startTime'){
...@@ -222,36 +228,36 @@ class AlarmControlTable extends Component { ...@@ -222,36 +228,36 @@ class AlarmControlTable extends Component {
return ( return (
<div className="souh" > <div className="souh" >
<div className="sou"> <div className="sou">
<div className="inputxq3"> <div className="search-one-alarm">
<StdForm > {/* <div className="search-one-button" onClick={this.searchData} /> */}
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> <div className="search-one-input">
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
</StdForm> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
<div className="inputxq">
<StdForm label="日期"> </div>
<DatePicker <div className="search-three-alarm">
format="YYYY-MM-DD" <span className="three-font">&nbsp;&nbsp;日期:&nbsp;&nbsp;</span>
value={moment(startTime)} <DatePicker
className="input_item_select" format="YYYY-MM-DD"
onChange={(value2) => { this.onChange('startTime', value2); }} value={moment(startTime)}
allowClear={false} className="input_item_select"
/> onChange={(value2) => { this.onChange('startTime', value2); }}
</StdForm> allowClear={false}
</div> />
<div className="inputxq">
<StdForm label="至"> {/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
<DatePicker &nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
format="YYYY-MM-DD" <DatePicker
value={moment(endTime)} format="YYYY-MM-DD"
className="input_item_select" value={moment(endTime)}
onChange={(value3) => { this.onChange('endTime', value3); }} className="input_item_select"
allowClear={false} onChange={(value3) => { this.onChange('endTime', value3); }}
/> allowClear={false}
</StdForm> />
</div> </div>
</div> </div>
......
src/view/monitor/statistical/DangerControlTable.js
View file @ 09387d48
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Form, Input, Select, Radio,StdForm ,Search,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 { TreeSelect, DatePicker } from 'amos-antd';
import moment from 'moment'; import moment from 'moment';
import InputTable from './InputTable'; import InputTable from './InputTable';
import { SingleTable } from 'amos-pro'; import { SingleTable } from 'amos-pro';
const FormItem = Form.Item; const FormItem = Form.Item;
const Option = Select.Option; const Option = Select.Option;
const Search = Input.Search;
const tableList1 = [ const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } , { id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } , { id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
...@@ -169,6 +171,10 @@ class DangerControlTable extends Component { ...@@ -169,6 +171,10 @@ class DangerControlTable extends Component {
r() r()
); );
}; };
SearchChange = (value) => {
alert(value)
}
//搜索 //搜索
onIconClick1 = () => { onIconClick1 = () => {
...@@ -225,44 +231,48 @@ class DangerControlTable extends Component { ...@@ -225,44 +231,48 @@ class DangerControlTable extends Component {
return ( return (
<div className="souh" > <div className="souh" >
<div className="sou"> <div className="sou">
<div className="inputxq1"> <div className="search-one">
<StdForm> {/* <div className="search-one-button" onClick={this.searchData} /> */}
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> <div className="search-one-input">
{/* <Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} /> */}
</StdForm> <Search placeholder="搜索" onSearch={this.SearchChange} />
</div> </div>
<div className="inputxq">
<StdForm >
<Select </div>
data={data} <div className="search-two" >
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }} <Select className="search-select-style"
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
/> />
</StdForm>
</div>
<div className="inputxq">
<StdForm label="日期"> </div>
<DatePicker <div className="search-three">
format="YYYY-MM-DD" <span className="three-font">日期:&nbsp;&nbsp;</span>
value={moment(startTime)} <DatePicker
className="input_item_select" format="YYYY-MM-DD"
onChange={(value2) => { this.onChange('startTime', value2); }} value={moment(startTime)}
allowClear={false} className="input_item_select"
/> onChange={(value2) => { this.onChange('startTime', value2); }}
</StdForm> allowClear={false}
</div> />
<div className="inputxq">
<StdForm label="至"> {/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
<DatePicker &nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
value={moment(endTime)} <DatePicker
format="YYYY-MM-DD" value={moment(endTime)}
className="input_item_select" format="YYYY-MM-DD"
onChange={(value3) => { this.onChange('endTime', value3); }} className="input_item_select"
allowClear={false} onChange={(value3) => { this.onChange('endTime', value3); }}
/> allowClear={false}
</StdForm> />
</div> </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