分析样式优化

src/view/biz/analysis/reportQuery/SafeReport.js

+import React, { Component }  from 'react';
+import { Checkbox } from 'amos-antd';
+import PropTypes from 'prop-types';
+
+class SafeReport extends Component {
+
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    const { visibleReport } = this.props;
+    return (
+      <div className="safe-report" style={{ display: visibleReport ? 'block' : 'none' }}>
+        <div className="safe-title">火灾高位单位消防安全评估报告</div>
+        <div className="safe-unit">被评估单位：国网±800KV伊克昭换流站</div>
+        <div className="safe-type">评估方式：自我评估</div>
+        <div className="safe-unit">评估人员：刘金华</div>
+        <div className="safe-type">评估日期：2020年5月</div>
+        <div className="safe-unit">一、被评估单位基本情况</div>
+        <div className="safe-type" />
+        <div className="safe-unit">二、评估要求</div>
+        <div className="safe-type">运用科学的评估方法， 对××单位（××建筑或场所） 消防行政许可、 消防安全制度等文件进行书面审查， 对场所消防安全状况进行现场检查， 对单位消防安全管理及运行机制进行全面分析。通过评估，发现消防安全存在的问题并提出解决的对策、 措施和建议。</div>
+        <div className="safe-unit">三、评估依据</div>
+        <div className="safe-type">本次评估的依据为《中华人民共和国消防法》、 《重庆市消防条例》、《建设工程消防监督管理规定》 （公安部令第 119 号）、《消防监督检查规定》 （公安部令第 120 号）等消防法律法规及《建筑设计防火规范》、《高层民用建筑设计防火规范》、 《火灾自动报警系统施工及验收规范》 、《自动喷水灭火系统施工及验收规范》、《气体灭火系统施工及验收规范》、《泡沫灭火系统 施 工 及 验 收 规 范 》 、 《 大 型 商 业 建 筑 设 计 防 火 规 范 》（DBJ50-054-2006 ）、《建筑工程消防验收规范》 （DB50201-2004）等消防技术标准。</div>
+        <div className="safe-unit">四、评估情况</div>
+        <table>
+          <tr>
+            <td>消防合法性情况</td>
+            <td>
+              <div>被评估单位建筑物名称:</div>
+              <div><Checkbox />1998年9月1日之前竣工建筑且此后未改建（含装修、用途变更） <Checkbox />依法通过消防验收</div>
+              <div><Checkbox />依法进行竣工验收消防备案  <Checkbox />其他情况</div>
+              <div><Checkbox>是</Checkbox><Checkbox>否</Checkbox>依法通过投入使用、营业前消防安全检查  <Checkbox>是</Checkbox><Checkbox>否</Checkbox>公共聚集场所</div>
+              <div>建筑物或者场所使用情况与消防验收或者竣工验收消防备案时的使用性质相符情况  <Checkbox>相符</Checkbox><Checkbox>不相符</Checkbox></div>
+              <div>检查人：张时代</div>
+            </td>
+          </tr>
+          <tr>
+            <td>消防安全管理</td>
+            <td>
+              <div><Checkbox>有</Checkbox><Checkbox>无</Checkbox> 消防安全制度及操作规程 <Checkbox>有</Checkbox><Checkbox>无</Checkbox> 灭火和应急疏散预案</div>
+              <div>制度及操作规程落实 <Checkbox>全部落实</Checkbox><Checkbox>部分落实</Checkbox><Checkbox>未落实</Checkbox></div>
+              <div>员工消防安全培训 <Checkbox>有记录</Checkbox><Checkbox>无记录</Checkbox><Checkbox>有，但不符合规定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>消防安全管理人 <Checkbox>确定</Checkbox><Checkbox>未确定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>专（兼）职消防管理员 <Checkbox>确定</Checkbox><Checkbox>未确定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>火灾隐患整改 <Checkbox>有记录</Checkbox><Checkbox>无记录</Checkbox><Checkbox>有，但不符合规定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>消防设施、器材、消防安全标志定期组织维修保养 <Checkbox>有记录</Checkbox><Checkbox>无记录</Checkbox><Checkbox>有，但不符合规定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>消防演练 <Checkbox>有记录</Checkbox><Checkbox>无记录</Checkbox><Checkbox>有，但不符合规定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>消防档案 <Checkbox>有记录</Checkbox><Checkbox>无记录</Checkbox><Checkbox>有，但不符合规定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>消防重点部位 <Checkbox>确定</Checkbox><Checkbox>未确定</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>专职消防队 <Checkbox>建立</Checkbox><Checkbox>未建立</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>兼职消防队 <Checkbox>建立</Checkbox><Checkbox>未建立</Checkbox></div>
+              <div><Checkbox>不涉及</Checkbox>承担灭火和组织疏散任务的人员 <Checkbox>建立</Checkbox><Checkbox>未建立</Checkbox></div>
+              <div>其他情况：</div>
+              <div>检查人：张就是</div>
+            </td>
+          </tr>
+        </table>
+      </div>
+    );
+  }
+}
+
+SafeReport.propTypes = {
+  visibleReport: PropTypes.bool
+};
+
+
+export default SafeReport;

src/view/biz/analysis/reportQuery/index.js

@@ -3,6 +3,8 @@ import { Input, DatePicker } from 'amos-antd';
 import CommonContainer from '../../../common/commonContainer';
 import './reportQuery.scss';
 import detaileImg from '../../../../consts/detailImages';
+import SafeReport from './SafeReport';
+
 
 const Search = Input.Search;
 
@@ -67,13 +69,13 @@ class ReportQuery extends Component {
               </div>
             </div>
             <div className="report-list">
-                {disasterRecord.map((item) => {
-                  return (
-                    <div key={item.id} className="items" onClick={() => this.setState({ id: item.id })}>
-                      <img src={detaileImg.detaileImg.report} alt="" /> { item.name }
-                    </div>
-                  );
-                })}
+              {disasterRecord.map((item) => {
+                return (
+                  <div key={item.id} className="items" onClick={() => this.setState({ id: item.id })}>
+                    <img src={detaileImg.detaileImg.report} alt="" /> { item.name }
+                  </div>
+                );
+              })}
             </div>
           </CommonContainer>
         </div>
@@ -106,20 +108,7 @@ class ReportQuery extends Component {
                 <div>生成报告</div>
               </div>
             </div>
-            <div className="safe-report" style={{ display: visibleReport ? 'block' : 'none' }}>
-              <div className="safe-title">火灾高位单位消防安全评估报告</div>
-              <div className="safe-unit">被评估单位：国网±800KV伊克昭换流站</div>
-              <div className="safe-type">评估方式：自我评估</div>
-              <div className="safe-unit">评估人员：刘金华</div>
-              <div className="safe-type">评估日期：2020年5月</div>
-              <div className="safe-unit">一、被评估单位基本情况</div>
-              <div className="safe-type" />
-              <div className="safe-unit">二、评估要求</div>
-              <div className="safe-type">运用科学的评估方法， 对××单位（××建筑或场所） 消防行政许可、 消防安全制度等文件进行书面审查， 对场所消防安全状况进行现场检查， 对单位消防安全管理及运行机制进行全面分析。通过评估，发现消防安全存在的问题并提出解决的对策、 措施和建议。</div>
-              <div className="safe-unit">三、评估依据</div>
-              <div className="safe-type">本次评估的依据为《中华人民共和国消防法》、 《重庆市消防条例》、《建设工程消防监督管理规定》 （公安部令第 119 号）、《消防监督检查规定》 （公安部令第 120 号）等消防法律法规及《建筑设计防火规范》、《高层民用建筑设计防火规范》、 《火灾自动报警系统施工及验收规范》 、《自动喷水灭火系统施工及验收规范》、《气体灭火系统施工及验收规范》、《泡沫灭火系统 施 工 及 验 收 规 范 》 、 《 大 型 商 业 建 筑 设 计 防 火 规 范 》（DBJ50-054-2006 ）、《建筑工程消防验收规范》 （DB50201-2004）等消防技术标准。</div>
-              <div className="safe-unit">四、评估情况</div>
-            </div>
+            <SafeReport visibleReport={visibleReport}  />
           </CommonContainer>
         </div>
       </div>

src/view/biz/analysis/reportQuery/reportQuery.scss

@@ -189,6 +189,7 @@
         color: #04FCFD;
         padding-bottom: vh(22);
       }
+
       .safe-unit {
         width: vw(1332);
         height: vh(46);
@@ -198,6 +199,7 @@
         padding-left: vw(40);
         color: white;
       }
+
       .safe-type {
         width: vw(1332);
         min-height: vh(46);
@@ -205,6 +207,38 @@
         margin: 0 auto;
         padding-left: vw(40);
       }
+
+      table {
+        border-collapse: collapse;
+        margin: vh(20) auto;
+        margin-bottom: vh(75);
+
+        tr {
+          td {
+            border: 1px solid rgba(4,252,253,1);
+            font-size: 0.2rem;
+          }
+
+          td:nth-of-type(2n-1) {
+            padding: vh(65) vw(42);
+            width: vw(20)
+          }
+
+          td:nth-of-type(2n) {
+            padding: vh(29) vw(75);
+            line-height: 30px;
+
+            .ant-checkbox-inner {
+              background-color: transparent;
+              border: 1px solid #5FFFFD;
+            }
+            .ant-checkbox-wrapper {
+              color: #5FFFFD;
+              font-size: 0.2rem;
+            }
+          }
+        }
+      }
     }
   }
 }