Skip to content

S
station-elec-manage-view
Commit 4a1b97f7 authored by 王海涛's avatar 王海涛
Browse files
Options

样式优化

parent 2207aece
Show whitespace changes
Inline Side-by-side
Showing with 216 additions and 14 deletions
src/consts/detailImages.js
View file @ 4a1b97f7
......@@ -2,6 +2,10 @@ export default {
detaileImg: {
close: require('../assets/detailImage/close.png'),
save: require('../assets/detailImage/save.png'),
download: require('../assets/detailImage/download.png')
download: require('../assets/detailImage/download.png'),
edit: require('../assets/detailImage/edit.png'),
delete: require('../assets/detailImage/delete.png'),
send: require('../assets/detailImage/send.png'),
operate: require('../assets/detailImage/operate.png')
}
};
src/view/biz/regulate/bills/bills.scss
View file @ 4a1b97f7
......@@ -27,6 +27,11 @@
display: flex;
justify-content: space-between;
width: vw(400);
line-height: vw(34);
img {
width: vw(34);
height: auto;
}
}
.finish-date {
......@@ -38,6 +43,9 @@
.ant-calendar-picker {
width: vw(128);
.ant-calendar-picker-icon:after {
color: rgb(89,240,251);
}
}
}
......@@ -47,9 +55,15 @@
border: 0;
color: white;
font-size: 0.16rem;
.ant-select-arrow:before {
color: rgb(89,240,251);
}
}
.ant-input-search {
width: vw(290);
.anticon-search:before {
color: rgb(89,240,251);
}
}
.ant-input {
background-color: rgba(0, 185, 255, 0.3);
......@@ -72,6 +86,24 @@
}
}
}
.ant-table-tbody {
tr:nth-of-type(2n-1) {
background-color: rgba(14,36,74,0.29);
}
tr:nth-of-type(2n) {
background-color: rgba(14,127,180,0.29);
}
}
.ant-table-tbody > tr >td{
font-size: 0.2rem;
}
.ant-checkbox-inner {
background: rgba(0,0,0,0.1);
}
}
......
src/view/biz/regulate/bills/index.js
View file @ 4a1b97f7
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button, DatePicker } from 'amos-antd';
import { Input, Select, Table, Button, DatePicker, Pagination } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
import detaileImg from '../../../../consts/detailImages';
import './bills.scss';
const Search = Input.Search;
......@@ -19,6 +20,9 @@ class Bills extends Component {
constructor(props) {
super(props);
this.state = {
type: '',
stratTime: '',
endTime: '',
detailVisible: false,
alertData: [
{ number: '1', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
......@@ -88,6 +92,36 @@ class Bills extends Component {
this.setState({ detailVisible: false });
}
showTotal = (total) => {
return `共 ${total} 条`;
}
getStartDate = (d) => {
console.log(d);
this.setState({ stratTime: d });
}
getEndDate = (d) => {
console.log(d);
this.setState({ endTime: d });
}
handleSelected = (value) => {
console.log(value);
this.setState({ type: value });
}
handleSearch = (value) => {
const { type, stratTime, endTime } = this.state;
const payload = {
stratTime,
endTime,
type,
keyword: value
};
console.log(payload);
}
render() {
const { detailVisible } = this.state;
const columns = [
......@@ -205,6 +239,7 @@ class Bills extends Component {
<div className="top-search">
<Search
placeholder="搜索"
onSearch={this.handleSearch}
/>
<div className="finish-date">
<span>完成治理日期：</span>
......@@ -214,26 +249,28 @@ class Bills extends Component {
</div>
<div className="finish-date">
<span>状态：</span>
<Select defaultValue="0">
<Select defaultValue="0" onChange={this.handleSelected}>
<Option value="0">待下发</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</div>
<div className="manage-option">
<div>删除</div>
<div>修改</div>
<div>下发</div>
<div>关闭整改</div>
<div> <img src={detaileImg.detaileImg.delete} alt='' /> 删除</div>
<div> <img src={detaileImg.detaileImg.edit} alt='' /> 修改</div>
<div> <img src={detaileImg.detaileImg.send} alt='' /> 下发</div>
<div> <img src={detaileImg.detaileImg.operate} alt='' /> 关闭整改</div>
</div>
</div>
</div>
<div className="safety-table">
<Table
pagination={false}
rowSelection={rowSelection}
columns={columns}
dataSource={this.state.billData}
/>
<div className="page"><Pagination size="small" total={50} showTotal={this.showTotal} /></div>
</div>
</CommonContainer>
<DetailContent
......
src/view/biz/regulate/firecontrol/index.js
View file @ 4a1b97f7
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button, DatePicker } from 'amos-antd';
import { Input, Select, Table, Button, DatePicker, Pagination } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
......@@ -20,6 +20,8 @@ class Firecontrol extends Component {
constructor(props) {
super(props);
this.state = {
stratTime: '',
endTime: '',
detailVisible: false,
alertData: [
{ number: '1', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
......@@ -80,6 +82,17 @@ class Firecontrol extends Component {
componentWillUnmount() {}
getStartDate = (d) => {
console.log(d);
this.setState({ stratTime: d });
}
getEndDate = (d) => {
console.log(d);
this.setState({ endTime: d });
}
handleDetail = (text) => {
console.log(text);
this.setState({ detailVisible: true });
......@@ -89,6 +102,26 @@ class Firecontrol extends Component {
this.setState({ detailVisible: false });
}
showTotal = (total) => {
return `共 ${total} 条`;
}
handleSelected = (value) => {
console.log(value);
this.setState({ type: value });
}
handleSearch = (value) => {
const { type, stratTime, endTime } = this.state;
const payload = {
stratTime,
endTime,
type,
keyword: value
};
console.log(payload);
}
render() {
const { detailVisible } = this.state;
const columns = [
......@@ -199,6 +232,7 @@ class Firecontrol extends Component {
<div className="top-search">
<Search
placeholder="搜索"
onSearch={this.handleSearch}
/>
<div className="finish-date">
<span>完成治理日期：</span>
......@@ -208,7 +242,7 @@ class Firecontrol extends Component {
</div>
<div className="finish-date">
<span>状态：</span>
<Select defaultValue="0">
<Select defaultValue="0" onChange={this.handleSelected}>
<Option value="0">待下发</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
......@@ -218,9 +252,11 @@ class Firecontrol extends Component {
</div>
<div className="safety-table">
<Table
pagination={false}
columns={columns}
dataSource={this.state.billData}
/>
<div className="page"><Pagination size="small" total={50} showTotal={this.showTotal} /></div>
</div>
</CommonContainer>
<DetailContent
......
src/view/biz/regulate/supervise/index.js
View file @ 4a1b97f7
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button } from 'amos-antd';
import { Input, Select, Table, Button, Pagination } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
......@@ -19,6 +19,7 @@ class Supervise extends Component {
constructor(props) {
super(props);
this.state = {
type: '',
detailVisible: false,
safeData: [{
station: '复龙换流站',
......@@ -66,6 +67,27 @@ class Supervise extends Component {
this.setState({ detailVisible: false });
}
showTotal = (total) => {
return `共 ${total} 条`;
}
changePage = (page) => {
console.log(page);
}
handleSelected = (value) => {
console.log(value);
this.setState({ type: value });
}
handleSearch = (value) => {
const { type } = this.state;
const payload = {
type,
keyword: value
};
console.log(payload);
}
render() {
const { detailVisible } = this.state;
const columns = [
......@@ -236,14 +258,14 @@ class Supervise extends Component {
<CommonContainer>
<div className="search-bg">
<div className="search">
<Select defaultValue="0" style={{ width: 120 }}>
<Select defaultValue="0" style={{ width: 120 }} onChange={this.handleSelected}>
<Option value="0">全部</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Search
style={{ width: 200 }}
onSearch={value => console.log(value)}
onSearch={this.handleSearch}
/>
<span className="score">
<span>安全</span>：指数=90
......@@ -254,9 +276,19 @@ class Supervise extends Component {
</div>
<div className="safety-table">
<Table
pagination={false}
columns={columns}
dataSource={this.state.safeData}
/>
<div className="page">
<Pagination
pageSize={10}
size="small"
total={50}
showTotal={this.showTotal}
onChange={this.changePage}
/>
</div>
</div>
</CommonContainer>
<DetailContent
......@@ -327,7 +359,6 @@ class Supervise extends Component {
</CommonCard>
</div>
</DetailContent>
</div>
);
}
......
src/view/biz/regulate/supervise/supervise.scss
View file @ 4a1b97f7
......@@ -37,8 +37,14 @@
border: 0;
color: white;
font-size: 0.16rem;
}
.ant-select-arrow:before {
color: rgb(89,240,251);
}
}
.anticon-search:before {
color: rgb(89,240,251);
}
.ant-input {
background-color: rgba(0, 185, 255, 0.3);
border-top-right-radius: 16px;
......@@ -47,11 +53,38 @@
color: white;
border: 0;
line-height: 16px;
}
}
}
.safety-table {
.page {
width: vw(260);
margin: vh(20) auto;
.ant-pagination-total-text {
color: white;
}
.ant-pagination-prev, .ant-pagination-next {
background-color: rgba(0,185,255,0.3) !important;
a {
color: white;
}
}
.ant-pagination-item {
background-color: rgba(0,185,255,0.3);
a {
color: white;
}
}
.ant-pagination-item-active {
background-color: rgba(0,185,255,0.59);
}
}
.ant-table-thead {
tr {
th {
......@@ -61,6 +94,9 @@
}
}
}
.ant-table-tbody > tr >td{
font-size: 0.2rem;
}
}
.detail-card {
......@@ -138,3 +174,28 @@
}
::-webkit-scrollbar{
width: 5px;
height: 110px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background: linear-gradient(180deg,rgba(0,185,255,.38) 0%,rgba(12,181,213,0.1) 100%);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background: linear-gradient(180deg,rgba(0,185,255,.38) 0%,rgba(12,181,213,0.1) 100%);
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: linear-gradient(180deg,rgba(0,185,255,.38) 0%,rgba(12,181,213,0.1) 100%);
}
src/view/common/detailContent/index.scss
View file @ 4a1b97f7
......@@ -13,6 +13,7 @@
bottom: 0;
left: 0;
overflow: auto;
overflow-x: hidden;
outline: 0;
-webkit-overflow-scrolling: touch;
background: url('../../../assets/bg/biz-bg.png');
......
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