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 @@
}
.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 {
height: 100%;
width: 30%;
......@@ -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 @@
import React, { Component } from 'react';
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 { Input } from 'amos-antd';
import moment from 'moment';
import InputTable from './InputTable';
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' } ,
......@@ -54,7 +56,7 @@ const data = [
},
{
title: '火警告警',
title: <div style={{"color":"#0055FF"}}>火警告警</div>,
dataIndex: 'sex',
key: 'sex',
width: '15%',
......@@ -69,7 +71,7 @@ const data = [
},
{
title: '故障报警',
title: <div style={{"color":"#F1F10C"}}>火警告警</div>,
dataIndex: 'age',
key: 'age',
width: '15%',
......@@ -82,7 +84,7 @@ const data = [
},
{
title: '巡检告警',
title: <div style={{"color":"#FF8000"}}>巡检告警</div>,
dataIndex: 'address',
key: 'address',
width: '15%',
......@@ -154,6 +156,10 @@ class AlarmControlTable extends Component {
}
SearchChange = (value) => {
alert(value)
}
/**
* 获取表格刷新方法
......@@ -178,7 +184,7 @@ class AlarmControlTable extends Component {
componentWillReceiveProps = (nextProps) => {
debugger
if (nextProps.refresh){
this.setState({ name:"" });
......@@ -204,7 +210,7 @@ class AlarmControlTable extends Component {
}
onChange = (key, value) => {
debugger
if(key==='name'){
this.setState({ name:value });
}else if(key==='startTime'){
......@@ -222,36 +228,36 @@ class AlarmControlTable extends Component {
return (
<div className="souh" >
<div className="sou">
<div className="inputxq3">
<StdForm >
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} />
</StdForm>
</div>
<div className="inputxq">
<StdForm label="日期">
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="至">
<DatePicker
format="YYYY-MM-DD"
value={moment(endTime)}
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</StdForm>
</div>
<div className="search-one-alarm">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
{/* <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>
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
format="YYYY-MM-DD"
value={moment(endTime)}
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</div>
</div>
......
src/view/monitor/statistical/DangerControlTable.js
View file @ 09387d48
import React, { Component } from 'react';
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 moment from 'moment';
import InputTable from './InputTable';
import { SingleTable } from 'amos-pro';
const FormItem = Form.Item;
const Option = Select.Option;
const Search = Input.Search;
const tableList1 = [
{ id: '1', name: '复龙换流站1', sex: '10', age: 10,age1: 30, address: '10' } ,
{ id: '1', name: '复龙换流站2', sex: '10', age: 10,age1: 30, address: '10' } ,
......@@ -169,6 +171,10 @@ class DangerControlTable extends Component {
r()
);
};
SearchChange = (value) => {
alert(value)
}
//搜索
onIconClick1 = () => {
......@@ -225,44 +231,48 @@ class DangerControlTable extends Component {
return (
<div className="souh" >
<div className="sou">
<div className="inputxq1">
<StdForm>
<Search value={name} className="input_item_select" icon={<Icon icon='search' onClick={ this.onIconClick1} />} onChange={ this.onChange1} />
</StdForm>
</div>
<div className="inputxq">
<StdForm >
<Select
data={data}
value={grade}
renderOption={item => <Option value={item.id}>{item.name}</Option>}
onChange={(value4) => { this.onChange('grade', value4); }}
<div className="search-one">
{/* <div className="search-one-button" onClick={this.searchData} /> */}
<div className="search-one-input">
{/* <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"
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="日期">
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
</StdForm>
</div>
<div className="inputxq">
<StdForm label="至">
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</StdForm>
</div>
</div>
<div className="search-three">
<span className="three-font">日期:&nbsp;&nbsp;</span>
<DatePicker
format="YYYY-MM-DD"
value={moment(startTime)}
className="input_item_select"
onChange={(value2) => { this.onChange('startTime', value2); }}
allowClear={false}
/>
{/* <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} /> */}
&nbsp;&nbsp;<font style={{color:'#5FFFFD'}}>一</font>&nbsp;&nbsp;
<DatePicker
value={moment(endTime)}
format="YYYY-MM-DD"
className="input_item_select"
onChange={(value3) => { this.onChange('endTime', value3); }}
allowClear={false}
/>
</div>
......
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