分析研判模块

src/consts/detailImages.js

@@ -6,6 +6,7 @@ export default {
     edit: require('../assets/detailImage/edit.png'),
     delete: require('../assets/detailImage/delete.png'),
     send: require('../assets/detailImage/send.png'),
-    operate: require('../assets/detailImage/operate.png')
+    operate: require('../assets/detailImage/operate.png'),
+    report: require('../assets/detailImage/report.png')
   }
 };

src/routes/view.js

@@ -19,7 +19,9 @@ import StationFireTeam from '../view/monitor/duty/strength/stationFireTeam/index
 import StationDuty from '../view/monitor/duty/strength/stationDuty/index';
 import Disaster from './../view/biz/emergency/disaster';
 import History from './../view/biz/emergency/history';
-import EmergencyPlan from './../view/biz/emergency/plan';
+import EmergencyPlan from './../view/biz/emergency/plan/';
+import Report from './../view/biz/analysis/report';
+import ReportQuery from './../view/biz/analysis/reportQuery';
 
 const Routes = {
   main: RootView,
@@ -31,6 +33,10 @@ const Routes = {
   dailyTrain: DaliyTraining,
   equipmentMaintain: EquipmentMaintain,
   safetyTraining: SafetyManage,
+  //分析研判
+  analysis: Duty,
+  report: Report,
+  reportQuery: ReportQuery,
 
   //安全监管
   regulate: Duty,
@@ -50,6 +56,8 @@ const Routes = {
 
 };
 export const businessRouts = [
+  { path: 'report',group: 'biz',component: Report, childRoutes: [] },
+  { path: 'reportQuery',group: 'biz',component: ReportQuery, childRoutes: [] },
   { path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
   { path: 'situationDetail',group: 'biz',component: SituationDetail, childRoutes: [] },
   { path: 'bills',group: 'biz',component: Bills, childRoutes: [] },

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

+import React, { Component }  from 'react';
+import { Input, Tree } from 'amos-antd';
+import CommonContainer from '../../../common/commonContainer';
+import './report.scss';
+import detaileImg from '../../../../consts/detailImages';
+
+const Search = Input.Search;
+const TreeNode = Tree.TreeNode;
+
+class Report extends Component {
+
+  state = {
+    treeData: [
+      {
+        title: '国家电网',
+        key: '1',
+        children: [
+          { title: '伊克昭换流站-1', key: '1-1' },
+          { title: '伊克昭换流站-2', key: '1-2' },
+          { title: '伊克昭换流站-3', key: '1-3' },
+          { title: '伊克昭换流站-4', key: '1-4' },
+          { title: '伊克昭换流站-5', key: '1-5' },
+          { title: '伊克昭换流站-6', key: '1-6' },
+          { title: '伊克昭换流站-7', key: '1-7' },
+          { title: '伊克昭换流站-8', key: '1-8' },
+          { title: '应急预案-1', key: '2-1' },
+          { title: '应急预案-2', key: '2-2' },
+          { title: '应急预案-3', key: '2-3' },
+          { title: '应急预案-4', key: '2-4' },
+          { title: '应急预案-5', key: '2-5' },
+          { title: '应急预案-6', key: '2-6' },
+          { title: '应急预案-7', key: '2-7' },
+          { title: '应急预案-8', key: '2-8' },
+          { title: '应急预案-1', key: '3-1' },
+          { title: '应急预案-2', key: '3-2' },
+          { title: '应急预案-3', key: '3-3' },
+          { title: '应急预案-4', key: '3-4' },
+          { title: '应急预案-5', key: '3-5' },
+          { title: '应急预案-6', key: '3-6' },
+          { title: '应急预案-7', key: '3-7' },
+          { title: '应急预案-8', key: '3-8' },
+          { title: '应急预案-1', key: '4-1' },
+          { title: '应急预案-2', key: '4-2' },
+          { title: '应急预案-3', key: '4-3' },
+          { title: '应急预案-4', key: '4-4' },
+          { title: '应急预案-5', key: '4-5' },
+          { title: '应急预案-6', key: '4-6' },
+          { title: '应急预案-7', key: '4-7' },
+          { title: '应急预案-8', key: '4-8' }
+        ]
+      }
+    ]
+  }
+
+  renderTreeNodes = (data) => {
+    return data.map((item) => {
+      if (item.children) {
+        return (
+          <TreeNode selectable={false} title={item.title} key={item.key}>
+            {this.renderTreeNodes(item.children)}
+          </TreeNode>
+        );
+      }
+      return <TreeNode title={item.title} key={item.key} />;
+    });
+  }
+
+  render() {
+    const { treeData } = this.state;
+    return (
+      <div className="report-container">
+        <div className="report-left">
+          <CommonContainer>
+            <div className="report-search">
+              <span className="search-text">搜索：</span>
+              <Search
+                onSearch={this.handleSearch}
+              />
+            </div>
+            <div className="report-tree">
+              <Tree showLine showIcon onSelect={this.onSelect}>
+                {this.renderTreeNodes(treeData)}
+              </Tree>
+            </div>
+          </CommonContainer>
+        </div>
+        <div className="report-right">
+          <CommonContainer>
+            <div className="right-content">
+              <div className="analysis-card">
+                <div className="card-detail">消防评估说明</div>
+                <div className="card-content">消防安全评估指的是以换流站为研究对象，对构成各类消防安全因素参照现行的消防法律、法规、规范，运用火灾安全工程学原理进行的定性或定量的评价分析，预测火灾等事故发生的可能性，使建设方、使用方和消防管理部门能够较为准确地认识其消防安全风险，进而有针对性地提出消防对策，降低火灾风险，保护人身和财产安全。根据规定，火灾高危单位应每年按要求对本单位消防安全情况进行一次评估，并在每年度12月10日前将评估报告报当地消防机构备案。</div>
+              </div>
+              <div className="analysis-card">
+                <div className="card-detail">消防评估依据</div>
+                <div className="card-content">评估依据：《消防安全评估防监督检查规定》（公安部令第120号）等消防法律法规及《建筑设计防火规范》、《火灾自动报警系统施工及验收规范》、《自动喷水灭火系统施工及验收规范》、《气体灭火系统施工及验收规范》、《泡沫灭火系统施工及验收规范》、《建筑工程消防验收规范》（DB50201-2004）等消防技术标准。</div>
+              </div>
+            </div>
+            <div className="content-bottom">
+              <div className="bottom-detail">
+                <img src={detaileImg.detaileImg.report} alt="" />
+                <div>生成报告</div>
+              </div>
+            </div>
+          </CommonContainer>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Report;

src/view/biz/analysis/report/report.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.report-container {
+  width: vw(1842);
+  margin: vh(40) auto;
+  display: flex;
+
+  .report-left {
+    width: vw(425);
+    height: vh(928);
+    color: white;
+
+    .report-search {
+      display: flex;
+      height: vh(70);
+      justify-content: center;
+      align-items: center;
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+
+      .search-text {
+        font-size: 0.2rem;
+      }
+
+      .ant-input-search {
+        width: vw(270);
+        height: vh(34);
+        .ant-input {
+          background-color: rgba(0,185,255,0.3);
+          border: 0;
+          color: white;
+          height: vh(34);
+        }
+      }
+    }
+    .report-tree {
+      height: vh(800);
+      padding: vh(22) vw(40);
+      overflow: auto;
+    }
+  }
+
+  .report-right {
+    margin-left: vw(38);
+    width: vw(1376);
+    height: vh(928);
+
+    .right-content {
+      width: vw(1160);
+      height: vh(564);
+      margin: 0 auto;
+      margin-top: vh(66);
+      display: flex;
+      justify-content: space-between;
+
+      .analysis-card {
+        width: vw(562);
+        height: 100%;
+        background: rgba(14,127,180,0.29);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+
+        .card-detail {
+          width: vw(233);
+          height: vh(39);
+          background: url('../../../../assets/images/title_bg.png');
+          background-size: cover;
+          margin: vh(35) auto;
+          text-align: center;
+          line-height: vh(39);
+          font-size: 0.3rem;
+          color: #04FCFD;
+        }
+        .card-content {
+          margin: 0 auto;
+          padding: vh(10) vw(87);
+          font-size: 0.2rem;
+          color: white;
+        }
+      }
+    }
+    .content-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: vh(110);
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+      display: flex;
+      justify-content: center;
+
+      .bottom-detail {
+        height: 100%;
+        width: vw(188);
+        background: rgba(82,237,242,0.1);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+        color: white;
+        text-align: center;
+        font-size: 0.2rem;
+        img {
+          width: vw(32);
+          height: auto;
+          margin: 0 auto;
+          margin-top: vh(20);
+          margin-bottom: vh(10);
+        }
+      }
+    }
+  }
+}

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 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 = {
+    disasterRecord: [
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-1', id: 1 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-2', id: 2 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-3', id: 3 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-4', id: 4 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-5', id: 5 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-6', id: 6 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-7', id: 7 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-8', id: 8 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-9', id: 9 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-10', id: 10 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-11', id: 11 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-12', id: 12 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-13', id: 13 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-14', id: 14 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-15', id: 15 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-16', id: 16 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-17', id: 117 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-18', id: 18 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-19', id: 19 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-20', id: 20 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-21', id: 21 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-22', id: 22 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-23', id: 23 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-24', id: 24 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-25', id: 25 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-26', id: 26 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-27', id: 27 },
+      { name: '伊克昭换流站换流变火灾', date: '2020-1-28', id: 28 }
+    ]
+  }
+
+
+  render() {
+    const { disasterRecord } = this.state;
+    return (
+      <div className="report-container">
+        <div className="report-left">
+          <CommonContainer>
+            <div className="reports-search">
+              <div className="report-date">
+                <span>日期：</span>
+                <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
+                &nbsp;-&nbsp;
+                <DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
+              </div>
+              <div className="saerch-detail">
+                <span className="search-text">搜索：</span>
+                <Search
+                  onSearch={this.handleSearch}
+                />
+              </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>
+                  );
+                })}
+            </div>
+          </CommonContainer>
+        </div>
+        <div className="report-right">
+          <CommonContainer>
+            <div className="right-contents">
+              <div className="report-title">火灾高度单位消防安全评估报告</div>
+              <div>内容</div>
+            </div>
+            <div className="content-bottom">
+              <div className="bottom-detail">
+                <img src={detaileImg.detaileImg.report} alt="" />
+                <div>生成报告</div>
+              </div>
+            </div>
+          </CommonContainer>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ReportQuery;

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

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.report-container {
+  width: vw(1842);
+  margin: vh(40) auto;
+  display: flex;
+
+  .report-left {
+    width: vw(425);
+    height: vh(928);
+    color: white;
+
+    .reports-search {
+      height: vh(110);
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+      padding: vh(16) vw(43);
+
+      .saerch-detail {
+        margin-top: vh(13);
+      }
+      .search-text {
+        font-size: 0.2rem;
+      }
+
+      .report-date {
+        font-size: 0.2rem;
+      }
+
+      .ant-calendar-picker {
+        width: vw(126.5);
+      }
+
+      .ant-calendar-picker-icon {
+        top: 58%;
+      }
+
+      .ant-calendar-picker-icon:after {
+        color: rgb(89,240,251);
+      }
+
+      .ant-input {
+        background-color: rgba(0,185,255,0.3);
+        border: 0;
+        color: white;
+        height: vh(34);
+      }
+
+      .ant-input-search {
+        width: vw(270);
+        height: vh(34);
+        .ant-input {
+          background-color: rgba(0,185,255,0.3);
+          border: 0;
+          color: white;
+          height: vh(34);
+        }
+      }
+    }
+    .report-list {
+      height: vh(800);
+      padding: vh(22) vw(11);
+      overflow: auto;
+      .items {
+        // width: vw(392);
+        height: vh(40);
+        background: rgba(82,237,242,0.05);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+        line-height: vh(40);
+        margin: 0 auto;
+        margin-top: 6px;
+        cursor: pointer;
+        font-size: 0.2rem;
+
+        img {
+          width: vw(10);
+          height: auto;
+          margin: vh(15) vw(10);
+        }
+
+      }
+      .items:nth-of-type(2n) {
+        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);
+      }
+    }
+  }
+
+  .report-right {
+    margin-left: vw(38);
+    width: vw(1376);
+    height: vh(928);
+
+    .right-contents {
+      width: vw(1160);
+      height: vh(564);
+      margin: 0 auto;
+      margin-top: vh(43);
+
+    }
+    .content-bottom {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: vh(110);
+      background: rgba(82,237,242,0.1);
+      box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+      display: flex;
+      justify-content: center;
+
+      .bottom-detail {
+        height: 100%;
+        width: vw(188);
+        background: rgba(82,237,242,0.1);
+        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+        color: white;
+        text-align: center;
+        font-size: 0.2rem;
+        img {
+          width: vw(32);
+          height: auto;
+          margin: 0 auto;
+          margin-top: vh(20);
+          margin-bottom: vh(10);
+        }
+      }
+    }
+  }
+}

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

@@ -76,12 +76,8 @@ class Bills extends Component {
     };
   }
 
-  componentWillMount() {}
-
   componentDidMount() {}
 
-  componentWillUnmount() {}
-
   getStartDate = (d) => {
     console.log(d);
     this.setState({ stratTime: d });

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 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 ContentModal from '../ContentModal';
 import '../bills/bills.scss';
 
@@ -76,14 +75,8 @@ class Firecontrol extends Component {
     };
   }
 
-  componentWillMount() {}
-
   componentDidMount() {}
 
-  componentWillUnmount() {}
-
-
-
   getStartDate = (d) => {
     console.log(d);
     this.setState({ stratTime: d });

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

@@ -183,19 +183,19 @@
 ::-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%);
+  background: linear-gradient(180deg,rgba(0,185,255,0.9) 0%,rgba(12,181,213,0.5) 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%);
+  background: linear-gradient(180deg,rgba(0,185,255,0.9) 0%,rgba(12,181,213,0.5) 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%);
+  background: linear-gradient(180deg,rgba(0,185,255,0.9) 0%,rgba(12,181,213,0.5) 100%);
 }