样式优化

src/consts/detailImages.js

@@ -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

@@ -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

 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

 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

 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

@@ -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

@@ -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');