风险评估页面样式

src/styles/view/biz/situation/riskassessment.scss

@@ -17,7 +17,6 @@
 
     .amos-layout-sider {
       padding-left: 20px;
-      flex: 0 0 27% !important;
       background: #f9f9f9;
 
       .amos-layout-sider-children {
@@ -63,7 +62,6 @@
           background: #f9f9f9;
 
           .amos-layout-sider {
-            flex: 0 0 55% !important;
             width: 50%;
             padding: 0;
             background: white;
@@ -135,9 +133,9 @@
     width:90% !important
   }
   .risk-assessment-view-content{
-    
+
     .amos-layout-content{
       width: 100px
     }
   }
-}
\ No newline at end of file
+}

src/view/bizview/situation/riskAssessment/index.js

 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { Layout } from 'amos-framework';
 import RiskDegreePie from './RiskDegreePie';
 import RiskDegreeHistogram from './RiskDegreeHistogram';
@@ -11,37 +10,44 @@ const { Header, Content, Sider } = Layout;
  * 风险评估
  */
 class RiskAssessment extends Component {
-
   render() {
+    const styles = {
+      rpnPercent: {
+        flexBasis: '55%'
+      },
+      rpnTop: {
+        flexBasis: '27%'
+      }
+    };
     return (
-        <div className="risk-assessment-view" style={{ width: '100%', height: '100%' }}>
+      <div className='risk-assessment-view' style={{ width: '100%', height: '100%' }}>
+        <Layout>
           <Layout>
-            <Layout>
-              <Header>
-                <div className="risk-assessment-view-situation">厂区风险态势图</div>
-                <div style={{ margin: '20px' }}>
-                  <SituationMap />
-                </div>
-              </Header>
-              <Content>
-                <Layout className="risk-assessment-view-content">
-                  <Sider>
-                    <div className="risk-assessment-view-situation">风险度(RPN)上升百分比</div>
-                    <RiskDegreePie />
-                  </Sider>
-                  <Content className='risk-assessment-view-situation-matrix' >
-                    <div className="risk-assessment-view-situation">发生率/严重度矩阵</div>
-                    <IncidenceSeverityMatrix />
-                  </Content>
-                </Layout>
-              </Content>
-            </Layout>
-            <Sider className='risk-assessment-view-situation-histogram' >
-              <div className="risk-assessment-view-situation">风险度(RPN) TOP10</div>
-              <RiskDegreeHistogram />
-            </Sider>
+            <Header>
+              <div className='risk-assessment-view-situation'>厂区风险态势图</div>
+              <div style={{ margin: '20px' }}>
+                <SituationMap />
+              </div>
+            </Header>
+            <Content>
+              <Layout className='risk-assessment-view-content'>
+                <Sider width='' style={styles.rpnPercent} >
+                  <div className='risk-assessment-view-situation'>风险度(RPN)上升百分比</div>
+                  <RiskDegreePie />
+                </Sider>
+                <Content className='risk-assessment-view-situation-matrix' >
+                  <div className='risk-assessment-view-situation'>发生率/严重度矩阵</div>
+                  <IncidenceSeverityMatrix />
+                </Content>
+              </Layout>
+            </Content>
           </Layout>
-        </div>
+          <Sider width='' style={styles.rpnTop} className='risk-assessment-view-situation-histogram' >
+            <div className='risk-assessment-view-situation'>风险度(RPN) TOP10</div>
+            <RiskDegreeHistogram />
+          </Sider>
+        </Layout>
+      </div>
     );
   }
 }