安全监管

src/routes/view.js

@@ -4,6 +4,8 @@ import Duty from '../view/monitor/duty';
 import Situation from '../view/biz/duty/situation';
 import SituationDetail from '../view/biz/duty/situationDetail';
 import Bills from '../view/biz/regulate/bills';
+import Supervise from '../view/biz/regulate/supervise';
+import Firecontrol from '../view/biz/regulate/firecontrol';
 import RootBizView from './../view/biz/index';
 import EmptyPage from './../view/common/emptyPage/EmptyPage';
 import SafetyManage from './../view/monitor/duty/safetyManage/index';
@@ -33,6 +35,8 @@ const Routes = {
   //安全监管
   regulate: Duty,
   bills: Bills,
+  supervise: Supervise,
+  firecontrol: Firecontrol,
   fireMaterial: FireMaterial,
   fireVehicle: FireVehicle,
   stationFireMan: StationFireMan,
@@ -49,6 +53,8 @@ export const businessRouts = [
   { path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
   { path: 'situationDetail',group: 'biz',component: SituationDetail, childRoutes: [] },
   { path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
+  { path: 'supervise',group: 'biz',component: Supervise, childRoutes: [] },
+  { path: 'firecontrol',group: 'biz',component: Firecontrol, childRoutes: [] },
   { path: 'safetyTraining',group: 'biz',component: SafetyManage, childRoutes: [] },
   { path: 'dailyTrain',group: 'biz',component: DaliyTraining, childRoutes: [] },
   { path: 'equipmentMaintain',group: 'biz',component: EquipmentMaintain, childRoutes: [] },

src/styles/view/disaster/index.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
 .demo {
   text-align: center;
   background-image: url('../../../assets/images/index_bg.png');
@@ -8,7 +11,7 @@
     opacity:1;
     height: 100vh;
     width: 100vw;
-    padding-top: 12px;
+    padding-top: vw(40);
     color: white;
   }
 }
@@ -16,7 +19,7 @@
 .layout {
   display: flex;
   justify-content: center;
-  padding: 0 39px;
+  padding: 0 vw(39);
 
   .left {
     flex: 1;
@@ -30,7 +33,7 @@
       display: flex;
       align-items: center;
       padding: 0 9px 0 12px;
-      font-size: 0.2rem;
+      font-size: 20px;
       position: relative;
 
       .current {
@@ -42,7 +45,7 @@
       }
 
       .current-name {
-        margin-left: 4%;
+        margin-left: vw(18);
         height: 41px;
         line-height: 41px;
         text-align: left;
@@ -66,7 +69,7 @@
       padding: 0;
 
       .amos-tabs-tabitem:nth-of-type(2n) {
-        margin-left: 17px;
+        margin-left: vw(17);
       }
       .amos-tabs-tabitem-active {
         border: 1px solid rgba(95,255,253,1);
@@ -78,14 +81,14 @@
         }
       }
       .amos-tabs-tabitem {
-        width: 183px;
+        width: vw(183);
         height: 31px;
         .amos-tabs-tabitem-inner:hover {
           background-color: transparent;
         }
         .amos-tabs-tabitem-inner {
           height: 30px;
-          width: 181px;
+          width: vw(181);
           background-image: url('../../../assets/images/title_bg.png');
           background-size: cover;
 
@@ -133,15 +136,15 @@
         .text-bg {
           border: 0;
           background: rgba(0,0,0,0.57);
-          width: 188px;
+          width: vw(188);
           z-index: 999;
-          margin-right: 28px;
+          margin-right: vw(28);
           .title-bg {
             transform: skewX(2deg);
             background-image: url('../../../assets/images/title_bg.png');
             background-size: cover;
             height: 31px;
-            width: 188px;
+            width: vw(188);
             font-size: 20px;
             font-family: Microsoft YaHei;
             font-weight: 400;
@@ -159,7 +162,7 @@
         height: 36vh;
         border: 1px solid rgba(95,255,253,1);
         background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
-        padding: 27px 26px 29px 41px;
+        padding: 27px vw(26) 29px vw(41);
         font-size: 20px;
 
         .contact {
@@ -218,13 +221,13 @@
           }
 
           .device-name {
-            margin-left: 33px;
+            margin-left: vw(33);
           }
 
           .device-des {
             margin-right: 0;
             position: absolute;
-            right: 28px;
+            right: vw(28);
           }
 
         }
@@ -237,11 +240,11 @@
           display: flex;
           justify-content: space-between;
           align-items: center;
-          font-size: 20px;
+          font-size: 0.2rem;
           margin-bottom: 6px;
 
           .dec {
-            padding-left: 16px;
+            padding-left: vw(16);
             text-align: left;
             width: 65%;
             height: 35px;
@@ -251,7 +254,7 @@
           }
 
           .deco {
-            padding-left: 16px;
+            padding-left: vw(16);
             text-align: left;
             width: 65%;
             height: 35px;
@@ -288,16 +291,16 @@
       }
 
       .amos-tabs-tabitem {
-        width: 183px;
+        width: vw(183);
         height: 31px;
-        margin-right: 28px;
+        margin-right: vw(28);
 
         .amos-tabs-tabitem-inner:hover {
           background-color: transparent;
         }
         .amos-tabs-tabitem-inner {
           height: 30px;
-          width: 181px;
+          width: vw(181);
           background-image: url('../../../assets/images/title_bg.png');
           background-size: cover;
 
@@ -315,7 +318,7 @@
 
       .title-bg {
         transform: skewX(2deg);
-        margin-right: 28px;
+        margin-right: vw(28);
         background-image: url('../../../assets/images/title_bg.png');
         background-size: cover;
         height: 31px;
@@ -373,7 +376,7 @@
 
           .desc {
             padding-top: 17px;
-            font-size: 35px;
+            font-size: 0.35rem;
             font-family: Microsoft YaHei UI;
             font-weight: 400;
             line-height: 40px;
@@ -392,18 +395,23 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          height:110px;
+          height: 10vh;
           width: 100%;
           background:rgba(82,237,242,0.1);
           box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+          font-size: 0.2rem;
+
 
+          .bg-style {
+            background: rgba(0,185,255,0.59) !important;
+          }
           .to-left{
             position: absolute;
             left: 0;
             width: 60px;
-            height: 109px;
+            height: 10vh;
             background: rgba(82,237,242,0.1);
-            line-height: 109px;
+            line-height: 10vh;
             cursor: pointer;
           }
 
@@ -411,36 +419,49 @@
             position: absolute;
             right: 0;
             width: 60px;
-            height: 109px;
+            height: 10vh;
             background: rgba(82,237,242,0.1);
-            line-height: 109px;
+            line-height: 10vh;
             cursor: pointer;
           }
 
           .plan {
             background: rgba(82,237,242,0.1);
-            padding-top: 19px;
-            width: 188px;
-            height: 110px;
+            padding-top: 2vh;
+            width: vw(188);
+            height: 10vh;
             margin-left: 4px;
             cursor: pointer;
 
+            .img-style {
+              display: inline-block;
+              width: vw(40);
+              height: vw(40);
+
+            }
+
+            .img-styles {
+              display: inline-block;
+              width: vw(118);
+              height: 6vh;
+
+            }
+
             .plan-text {
-              margin-top: 9px;
-              font-size: 20px;
+              margin-top: 5px;
             }
           }
 
           .three {
             background:rgba(82,237,242,0.1);
-            padding-top: 19px;
-            width: 110px;
-            height: 110px;
+            padding-top: 1.5vh;
+            width: 10vh;
+            height: 10vh;
             margin-left: 4px;
             cursor: pointer;
 
             .plan-text {
-              margin-top: 9px;
+              margin-top: 5px;
             }
           }
         }
@@ -459,29 +480,7 @@
         height: 82.5vh;
       }
 
-      .slick-list {
-        height: 68vh;
-      }
-
-      .slick-dots {
-        height: 110px;
-        margin-bottom: -140px;
-        background:rgba(82,237,242,0.1);
-        box-shadow:0px 3px 6px rgba(0,0,0,0.16);
 
-        li {
-          button {
-            width:188px;
-            height:110px;
-            background:rgba(82,237,242,0.1);
-            box-shadow:0px 3px 6px rgba(0,0,0,0.16);
-            border-radius: 0;
-          }
-        }
-        .slick-active {
-          background:rgba(0,185,255,0.59);
-        }
-      }
 
       .history {
         margin: 0 auto;
@@ -489,7 +488,7 @@
 
         .desc {
           padding-top: 17px;
-          font-size: 35px;
+          font-size: 0.35rem;
           font-family: Microsoft YaHei UI;
           font-weight: 400;
           line-height: 40px;
@@ -497,73 +496,7 @@
         }
       }
 
-      .miao_bg {
-        background-image: url('../../../assets/images/miao_bg.png');
-        background-size: cover;
-        height: 66vh;
-      }
-      .right-bottom {
-        bottom: 0;
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height:110px;
-        width: 100%;
-        background:rgba(82,237,242,0.1);
-        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
-
-        .bg-style {
-          background: rgba(0,185,255,0.59) !important;
-        }
-
-        .to-left{
-          position: absolute;
-          left: 0;
-          width: 60px;
-          height: 109px;
-          background: rgba(82,237,242,0.1);
-          line-height: 109px;
-          cursor: pointer;
-        }
-
-        .to-right {
-          position: absolute;
-          right: 0;
-          width: 60px;
-          height: 109px;
-          background: rgba(82,237,242,0.1);
-          line-height: 109px;
-          cursor: pointer;
-        }
-
-        .plan {
-          background: rgba(82,237,242,0.1);
-          padding-top: 19px;
-          width: 188px;
-          height: 110px;
-          margin-left: 4px;
-          cursor: pointer;
-
-          .plan-text {
-            margin-top: 9px;
-            font-size: 20px;
-          }
-        }
-
-        .three {
-          background:rgba(82,237,242,0.1);
-          padding-top: 19px;
-          width: 110px;
-          height: 110px;
-          margin-left: 4px;
-          cursor: pointer;
 
-          .plan-text {
-            margin-top: 9px;
-          }
-        }
-      }
     }
   }
 }

src/view/biz/emergency/disaster/DisasterContents.js

@@ -24,7 +24,7 @@ class DisasterContents extends Component {
     const ImgSwitch = (props) => {
       return (
         <div className={`plan ${props.contentSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
-          <img src={props.imgSrc} alt="" height='40' width='40' />
+          <img className="img-style" src={props.imgSrc} alt="" />
           <div className="plan-text">{props.text}</div>
         </div>
       );
@@ -61,4 +61,4 @@ DisasterContents.propTypes = {
   handleChange: PropTypes.func
 };
 
-export default DisasterContents;
+export default DisasterContents;
\ No newline at end of file

src/view/biz/emergency/disaster/PaperContents.js

@@ -26,7 +26,7 @@ class PaperContents extends Component {
     const ImgSwitch = (props) => {
       return (
         <div className={`plan ${props.paperSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
-          <img src={props.imgSrc} alt="" height='65' width='118' />
+          <img className="img-styles" src={props.imgSrc} alt="" height='65' width='118' />
         </div>
       );
     };
@@ -66,4 +66,4 @@ PaperContents.propTypes = {
   handleToRight: PropTypes.func
 };
 
-export default PaperContents;
+export default PaperContents;
\ No newline at end of file

src/view/biz/emergency/disaster/index.js

@@ -10,7 +10,6 @@ import SwitchInfo from './SwitchInfo';
 import DisasterContents from './DisasterContents';
 import PaperContents from './PaperContents';
 import ModelContents from './ModelContents';
-import { disasterData, deviceData, contactData, detailData } from '../../../../../_mock/apps';
 
 
 const { TabList, Tab, TabPanel } = Tabs;
@@ -128,7 +127,6 @@ class DisasterSituation extends React.Component {
   }
 
   render() {
-    console.log(disasterData);
     const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
     return (
       <div className="demo">

src/view/biz/regulate/firecontrol/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * firecontrol
+ *消防整改
+ * @class Firecontrol
+ * @extends {Component}
+ */
+class Firecontrol extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentWillMount() {}
+
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+  render() {
+    return <div>消防整改</div>;
+  }
+}
+
+Firecontrol.propTypes = {};
+
+export default Firecontrol;

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 CommonContainer from './../../../common/commonContainer';
+
+import './supervise.scss';
+
+const Search = Input.Search;
+const Option = Select.Option;
+/**
+ * Supervise
+ *监督管理
+ * @class Supervise
+ * @extends {Component}
+ */
+class Supervise extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      detailVisible: false,
+      safeData: [{
+        station: '复龙换流站',
+        fireDisaster: '0',
+        fireDisaster1: '0',
+        fireDisaster2: '0',
+        fireDisaster3: '0',
+        fireDisaster4: '0',
+        fireDisaster5: '0',
+        fireDisaster6: '0',
+        fireDisaster7: '0',
+        fireDisaster8: '0',
+        fireDisaster9: '0',
+        fireDisaster10: '0',
+        fireDisaster11: '0',
+        fireDisaster12: '0',
+        fireDisaster13: '0',
+        fireDisaster14: '0',
+        fireDisaster15: '0',
+        fireDisaster16: '0'
+      }]
+    };
+  }
+
+  componentWillMount() {}
+
+  componentDidMount() {}
+
+  componentWillUnmount() {}
+
+
+  handleDetail = (text) => {
+    console.log(text);
+    this.setState({ detailVisible: true });
+  }
+
+  render() {
+    const { detailVisible } = this.state;
+    const columns = [
+      {
+        title: '换流站',
+        dataIndex: 'station',
+        key: 'station',
+        width: 200
+      },
+      {
+        title: '告警',
+        dataIndex: 'alert',
+        key: 'alert',
+        children: [
+          {
+            title: '火灾',
+            dataIndex: 'fireDisaster',
+            key: 'fireDisaster'
+          },
+          {
+            title: '故障',
+            dataIndex: 'fireDisaster1',
+            key: 'fireDisaster1'
+          },
+          {
+            title: '巡检',
+            dataIndex: 'fireDisaster2',
+            key: 'fireDisaster2'
+          },
+          {
+            title: '同比/环比',
+            dataIndex: 'fireDisaster3',
+            key: 'fireDisaster3'
+          }
+        ]
+      },
+      {
+        title: '风险',
+        dataIndex: 'alert',
+        key: 'alert',
+        children: [
+          {
+            title: '一级',
+            dataIndex: 'fireDisaster4',
+            key: 'fireDisaster4'
+          },
+          {
+            title: '二级',
+            dataIndex: 'fireDisaster5',
+            key: 'fireDisaster5'
+          },
+          {
+            title: '三级',
+            dataIndex: 'fireDisaster6',
+            key: 'fireDisaster6'
+          },
+          {
+            title: '四级',
+            dataIndex: 'fireDisaster7',
+            key: 'fireDisaster7'
+          },
+          {
+            title: '同比/环比',
+            dataIndex: 'fireDisaster8',
+            key: 'fireDisaster8'
+          }
+        ]
+      },
+      {
+        title: '隐患',
+        dataIndex: 'alert',
+        key: 'alert',
+        children: [
+          {
+            title: '发现',
+            dataIndex: 'fireDisaster9',
+            key: 'fireDisaster9'
+          },
+          {
+            title: '治理',
+            dataIndex: 'fireDisaster10',
+            key: 'fireDisaster10'
+          },
+          {
+            title: '未治理',
+            dataIndex: 'fireDisaster11',
+            key: 'fireDisaster11'
+          },
+          {
+            title: '同比/环比',
+            dataIndex: 'fireDisaster12',
+            key: 'fireDisaster12'
+          }
+        ]
+      },
+      {
+        title: '消防安全',
+        dataIndex: 'alert',
+        key: 'alert',
+        children: [
+          {
+            title: '培训',
+            dataIndex: 'fireDisaster13',
+            key: 'fireDisaster13'
+          },
+          {
+            title: '训练',
+            dataIndex: 'fireDisaster14',
+            key: 'fireDisaster14'
+          },
+          {
+            title: '器材保养',
+            dataIndex: 'fireDisaster15',
+            key: 'fireDisaster15'
+          },
+          {
+            title: '应急预案',
+            dataIndex: 'fireDisaster16',
+            key: 'fireDisaster16'
+          }
+        ]
+      },
+      {
+        title: '操作',
+        width: 135,
+        render: (text,record) => {
+          return <Button onClick={() => this.handleDetail(text)}>生成表单</Button>;
+        }
+      }
+    ];
+    return (
+      <div className="sefety-bg">
+        <CommonContainer>
+          <div className="search-bg">
+            <div className="search">
+              <Select defaultValue="0" style={{ width: 120 }}>
+                <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)}
+              />
+              <span className="score">
+                <span>安全</span>：指数=90
+                <span>风险</span>：60指数90
+                <span>高风险</span>：指数=60
+              </span>
+            </div>
+          </div>
+          <div className="safety-table">
+            <Table
+              columns={columns}
+              dataSource={this.state.safeData}
+            />
+          </div>
+        </CommonContainer>
+        <div className="safe-detail" style={{ display: !detailVisible ? 'none' : 'block' }}>
+          <div className="detail-title">
+            <div>安全隐患登记单</div>
+            <div>
+              <div>保存</div>
+              <div>关闭</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Supervise.propTypes = {};
+
+export default Supervise;

src/view/biz/regulate/supervise/supervise.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.sefety-bg {
+  width: vw(1860);
+  height: vh(977);
+  margin: vh(19) auto;
+  position: relative;
+
+  .search-bg {
+    height: vh(89);
+    background: rgba(0, 35, 51, 1);
+
+    .search {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: vh(25);
+
+      .score {
+        position: absolute;
+        right: vw(61);
+        color: white;
+        font-size: 0.18rem;
+      }
+
+      .ant-select-selection {
+        background-color: rgba(0, 185, 255, 0.3);
+        border-bottom-left-radius: 16px;
+        border-top-left-radius: 16px;
+        border: 0;
+        color: white;
+        font-size: 0.16rem;
+      }
+
+      .ant-input {
+        background-color: rgba(0, 185, 255, 0.3);
+        border-top-right-radius: 16px;
+        border-bottom-right-radius: 16px;
+        font-size: 0.16rem;
+        color: white;
+        border: 0;
+        line-height: 16px;
+      }
+    }
+  }
+
+  .safety-table {
+    .ant-table-thead {
+      tr {
+        th {
+          font-size: 0.2rem !important;
+          font-weight: bold;
+          background: rgba(0, 185, 255, 0.38);
+        }
+      }
+    }
+  }
+
+  .safe-detail {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    outline: 0;
+    -webkit-overflow-scrolling: touch;
+    background-color: white;
+    filter: alpha(opacity=60);
+    z-index: 9999;
+
+    .detail-title {
+      width: 100vw;
+      background-color: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
+      height: vh(42);
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+
+

src/view/common/commonContainer/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './index.scss';
+
+class CommonContainer extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+
+    return (
+      <div className="common-container">
+        {this.props.children}
+        <div className="card-corner" />
+      </div>
+    );
+  }
+}
+
+CommonContainer.propTypes = {
+  children: PropTypes.node
+};
+
+export default CommonContainer;

src/view/common/commonContainer/index.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.common-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba( 95, 255, 253, 1);
+  background: linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%);
+
+  .card-corner {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+    border-right: 2px solid rgba(0,255,229,1);
+    border-bottom: 2px solid rgba(0,255,229,1);
+  }
+}