分析研判模块优化

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

 import React, { Component }  from 'react';
-import { Input, Tree, DatePicker } from 'amos-antd';
-import { Icon } from 'amos-framework';
+import { Input, DatePicker } from 'amos-antd';
 import CommonContainer from '../../../common/commonContainer';
 import './reportQuery.scss';
 import detaileImg from '../../../../consts/detailImages';
 
 const Search = Input.Search;
-const TreeNode = Tree.TreeNode;
 
 class ReportQuery extends Component {
 
   state = {
+    visibleReport: false,
     disasterRecord: [
       { name: '伊克昭换流站换流变火灾', date: '2020-1-1', id: 1 },
       { name: '伊克昭换流站换流变火灾', date: '2020-1-2', id: 2 },
@@ -43,9 +42,12 @@ class ReportQuery extends Component {
     ]
   }
 
+  handleReport = () => {
+    this.setState({ visibleReport: true });
+  }
 
   render() {
-    const { disasterRecord } = this.state;
+    const { disasterRecord, visibleReport } = this.state;
     return (
       <div className="report-container">
         <div className="report-left">
@@ -79,14 +81,45 @@ class ReportQuery extends Component {
           <CommonContainer>
             <div className="right-contents">
               <div className="report-title">火灾高度单位消防安全评估报告</div>
-              <div>内容</div>
+              <div className="report-detail">
+                <div className="safety-infos" >
+                  <div className="safety-names">被评估单位</div>
+                  <div className="safety-datas">国网±800KV伊克昭换流站</div>
+                </div>
+                <div className="safety-infos" >
+                  <div className="safety-names">评估方式</div>
+                  <div className="safety-datas">自我评估</div>
+                </div>
+                <div className="safety-infos" >
+                  <div className="safety-names">评估人员</div>
+                  <div className="safety-datas">刘向平</div>
+                </div>
+                <div className="safety-infos" >
+                  <div className="safety-names">评估日期</div>
+                  <div className="safety-datas">2020年3月24日</div>
+                </div>
+              </div>
             </div>
             <div className="content-bottom">
-              <div className="bottom-detail">
+              <div className="bottom-detail" onClick={this.handleReport}>
                 <img src={detaileImg.detaileImg.report} alt="" />
                 <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>
           </CommonContainer>
         </div>
       </div>

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

@@ -103,7 +103,45 @@
       margin: 0 auto;
       margin-top: vh(43);
 
+
+      .report-title {
+        font-size: 0.4rem;
+        color: #04FCFD;
+        text-align: center;
+      }
+      .report-detail {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.2rem;
+        flex-wrap: wrap;
+        padding-top: vh(89);
+        margin: 0 vw(60);
+
+        .safety-infos {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-bottom: vw(16);
+
+          .safety-names {
+            font-weight: bold;
+            width: vw(120);
+            color: white;
+          }
+          .safety-datas {
+            background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
+            box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+            width: vw(330);
+            height: vh(47);
+            line-height: vh(47);
+            margin-left: vw(43);
+            color: #00CACE;
+            padding-left: vw(26);
+          }
+        }
+      }
     }
+
     .content-bottom {
       position: absolute;
       bottom: 0;
@@ -131,5 +169,42 @@
         }
       }
     }
+
+    .safe-report {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: black;
+      overflow: auto;
+      padding-top: vh(25);
+      color: white;
+      font-size: 0.2rem;
+
+      .safe-title {
+        text-align: center;
+        font-weight: bold;
+        font-size: 0.24rem;
+        color: #04FCFD;
+        padding-bottom: vh(22);
+      }
+      .safe-unit {
+        width: vw(1332);
+        height: vh(46);
+        background:rgba(14,127,180,0.29);
+        line-height: vh(46);
+        margin: 0 auto;
+        padding-left: vw(40);
+        color: white;
+      }
+      .safe-type {
+        width: vw(1332);
+        min-height: vh(46);
+        line-height: vh(46);
+        margin: 0 auto;
+        padding-left: vw(40);
+      }
+    }
   }
 }