消防整改

amos.config.js

@@ -7,7 +7,7 @@
   Amos.config = {
     // 普通http
     httpURI: {
-      baseURI: 'http://172.16.10.98:10005/',
+      baseURI: 'http://127.0.0.1:10005/',
       //设计器数据绑定
       // dataBindUrl: 'http://172.16.10.91:8083/api/visual/common/dataBind'
     },

src/consts/urlConsts.js

@@ -273,7 +273,17 @@ export const ModuleEditUrl = {
   getPointTypeUrl:completePrefix(baseURI, 'api/view3d/point/type'),
   getPointListUrl:completePrefix(baseURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
   savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系
+ };
 
- }
+ /**
+  * 消防整改
+  */
+export const FireRectificationUrl = {
+  queryFiresAndCountUrl: completePrefix(baseURI, 'api/fireRectification/list?nameLike={nameLike}&sDate={sDate}&eDate={eDate}&states={states}&pageNum={pageNum}&pageSize={pageSize}'),
+  getOneByidUrl: completePrefix(baseURI, 'api/fireRectification/getMoreData?billNo={billNo}'),
+  downLoadFilesURL: completePrefix(baseURI, 'api/fireRectification/downLoad'),
+  fileUploadURL: completePrefix(baseURI, 'systemctl/v1/filestorage/batch'),
+  updateURL: completePrefix(baseURI, 'api/fireRectification/update')
+};
 
 export const securityKey = 'qianyue(xian),fsc,xunjianpassword';

src/routes/asyncView.js

@@ -64,6 +64,8 @@ const AsyncShareTextPlan = props => <AsyncLoader load={import('./../view/planMgm
 const AsyncPublishApp = props => <AsyncLoader load={import('amos-iot-3dgraph/lib/view/pubview')} componentProps={props} />;
 const AsyncModelEdit = props => <AsyncLoader load={import('amos-iot-3dgraph/lib/view/modelMgmt/edit/ModelEdit')} componentProps={props} />;
 const AsyncUserModel = props => <AsyncLoader load={import('../view/bizview/user')} componentProps={props} />;
+const AsyncFireRectification = props => <AsyncLoader load={import('../view/bizview/fireRectification')} componentProps={props} />;
+
 
 
 const Routes = {
@@ -114,7 +116,8 @@ const Routes = {
   vizlib: AsyncCusVizLib,
   modelManage: AsyncGraph3DModel,
   leaderStruct: AsyncLeaderStruct,
-  userModel: AsyncUserModel
+  userModel: AsyncUserModel,
+  fireRectification: AsyncFireRectification
 };
 
 const pageCompontent = key => {

src/routes/view.js

@@ -56,6 +56,7 @@ import PublishView from './../view/planMgmt/view';
 import PanoramicMonitor from './../view/panoramicMonitor';
 import LeaderStruct from './../view/planMgmt/view/leaderStruct';
 import UserModel from '../view/bizview/user';
+import FireRectification from '../view/bizview/fireRectification';
 
 const Routes = {
   // 添加 rules 路由
@@ -104,7 +105,8 @@ const Routes = {
   planDrill: PublishView,
   modelManage: Graph3DModel,
   leaderStruct: LeaderStruct,
-  userModel: UserModel
+  userModel: UserModel,
+  fireRectification: FireRectification
 };
 
 const pageCompontent = key => {

src/services/fireRectificationService.js

+import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import { commonGet, commonPost, commonPut, commonDelete,downLoadZIP } from './../utils/request';
+import { FireRectificationUrl } from './../consts/urlConsts';
+
+
+export const fireListAction = (nameLike,sDate,eDate,states,pageNum,pageSize)=>{
+  return commonGet(formatUrl(FireRectificationUrl.queryFiresAndCountUrl,{ nameLike,sDate,eDate,states,pageNum,pageSize }));
+};
+
+export const oneMoreDataAction = (billNo)=>{
+  return commonGet(formatUrl(FireRectificationUrl.getOneByidUrl,{ billNo }));
+};
+
+export const downLoadAction = (path,Name)=>{
+  return downLoadZIP({ url: FireRectificationUrl.downLoadFilesURL, data: [path],fileName: Name });
+};
+
+
+export const updateAction = (data)=>{
+  return commonPost(FireRectificationUrl.updateURL, data);
+};

src/styles/view/biz/fireRectification/ContentModal.scss

+
+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.conten-modal {
+  .safety-data {
+    color: #4c4b4b;
+  }
+}

src/styles/view/biz/fireRectification/commonCard.scss

+.common-card-emca {
+  width: 95%;
+  height: 95%;
+
+  .card-title {
+    display: flex;
+
+    .title-contain {
+      width: 188px;
+      text-align: center;
+      background: #f3f3f3;
+
+      .title-bg {
+        background-size: cover;
+        height: 31px;
+        width: 188px;
+        line-height: 31px;
+        color: rgba(255,255,255,1);
+        cursor: pointer;
+        border: 1px solid #2525254d;
+        border-right: 0;
+        border-top: 0;
+        border-bottom: 1px solid #2525254d;
+
+        .title-shape {
+          background-color: transparent;
+          border-right: 1px solid #2525254d;
+          border-top: 1px solid #2525254d;
+          height: 31px;
+          .title-text {
+            font-size: 13px;
+            color: #4c4b4b;
+          }
+        }
+      }
+    }
+  }
+
+  .card-emca-content {
+    margin-top: -1px;
+    height: 100%;
+    border: 1px solid #2525254d;
+
+    .card-contain {
+      position: relative;
+      height: 100%;
+
+      .card-corner {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 12px;
+        height: 12px;
+        border-right: 1px solid #2525254d;
+        border-bottom: 1px solid #2525254d;
+      }
+    }
+  }
+}
+
+.emca-center-title {
+  display: flex;
+  justify-content: center;
+}

src/styles/view/biz/fireRectification/detailContent.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.safe-detail {
+  position: relative;
+  top: -10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding-bottom: vh(20);
+  overflow: auto;
+  overflow-x: hidden;
+  color: #4c4b4b;
+  background-size: cover;
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+  filter: alpha(opacity=60);
+
+  .fire-resource-truck-detail-button {
+    .go-back {
+      float: left;
+      height: 2.5rem;
+      margin-top: 10px;
+      background: white;
+      border: 1px solid #ddddde;
+      opacity: 1;
+    }
+
+    .amos-btn-transparent:hover:enabled {
+      color: inherit;
+      background-color: transparent;
+      opacity: 0.85;
+    }
+
+    .fire-resource-commit-button {
+      float: right;
+      height: 2.5rem;
+      margin-top: 10px;
+      background: transparent;
+      border: 1px solid #ddddde;
+      opacity: 1;
+
+      i {
+        color: #345fa6;
+      }
+    }
+  }
+
+  .detail-title {
+    display: flex;
+    width: 100vw;
+    height: vh(42);
+    margin-top: vh(11);
+    justify-content: space-between;
+
+    .title-text {
+      width: vw(257);
+      height: vh(42);
+      margin-left: vw(23);
+      font-size: vh(20);
+      text-align: center;
+      transform: skewX(-20deg);
+
+      .title-border {
+        width: vw(180);
+        height: vh(42);
+        margin: 0 auto;
+        line-height: vh(42);
+        border-bottom: 2px solid #6a696e;
+        transform: skewX(20deg);
+      }
+    }
+
+    .states-Icon div {
+      float: left;
+      margin-top: vw(7);
+    }
+
+    .states-Icon {
+      margin-left: vw(375);
+
+      .states-text {
+        margin-left: vw(15);
+      }
+
+      .color-box {
+        width: vw(15);
+        height: vh(18);
+        margin-top: vw(12);
+        border-radius: 25%;
+      }
+    }
+
+    .detail-option {
+      display: flex;
+      width: vw(250);
+      height: vh(42);
+      font-size: 0.2rem;
+      line-height: vh(42);
+      text-align: center;
+      justify-content: space-between;
+      align-items: center;
+
+      .detail-item {
+        height: 100%;
+        padding: 2px;
+        cursor: pointer;
+      }
+
+      .colse {
+        margin-left: vw(452);
+      }
+    }
+  }
+}

src/styles/view/biz/fireRectification/fireRectification.scss

+@function vw($px) {
+  @return ($px/ 1920) * 100vw;
+}
+
+@function vh($px) {
+  @return ($px/ 1080) * 100vh;
+}
+
+.common-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: none;
+
+  .card-corner {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.sefety-bills {
+  width: vw(1860);
+  height: vh(977);
+  margin: vh(19) auto;
+  overflow: auto;
+  font-size: 0.2rem;
+
+  .conten-modal {
+    .bill-card {
+      max-height: 600px;
+      overflow: auto;
+    }
+  }
+  .search-bgc {
+    height: vh(89);
+    font-size: 0.2rem;
+    color: #4c4b4b;
+    background: #f3f3f3;
+
+    .top-search {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: vh(25);
+
+      .manage-option {
+        display: flex;
+        width: vw(400);
+        margin-left: vw(80);
+        justify-content: space-between;
+        line-height: vw(34);
+
+        div {
+          cursor: pointer;
+
+          img {
+            width: vw(34);
+            height: auto;
+          }
+        }
+      }
+
+
+      .finish-date {
+        margin-left: vw(40);
+
+        .ant-select-selection {
+          width: vw(120);
+        }
+
+        .ant-calendar-picker {
+          width: vw(128);
+
+          .ant-calendar-picker-icon::after {
+            color: rgb(35, 36, 36);
+          }
+        }
+      }
+
+      .ant-select-selection {
+        font-size: 0.16rem;
+        color: #4c4b4b;
+        background-color: #e6e2e2;
+        border: 0;
+        border-radius: 16px;
+        outline: 0;
+        box-shadow: none;
+
+        .ant-select-arrow::before {
+          color: #232424;
+        }
+
+        .ant-select-selection:focus,
+        .ant-select-selection:active {
+          outline: 0;
+          box-shadow: none;
+        }
+      }
+
+      .ant-input-search {
+        width: vw(290);
+        margin: 0 vw(20);
+
+        .anticon-search::before {
+          color: rgb(13, 13, 14);
+        }
+      }
+
+      .ant-input {
+        font-size: 0.16rem;
+        line-height: 16px;
+        color: #5a5959;
+        background-color: #e6e2e2;
+        border: 0;
+        border-radius: 16px;
+      }
+
+      .ant-input:focus {
+        outline: 0;
+        box-shadow: none;
+      }
+
+      .ant-input::-webkit-input-placeholder {
+        color: #777575;
+      }
+
+      .ant-input:-moz-placeholder {
+        color: #777575;
+      }
+
+      .ant-input::-moz-placeholder {
+        color: #777575;
+      }
+
+      .ant-input::-ms-input-placeholder {
+        color: #777575;
+      }
+    }
+  }
+
+  .ant-pagination {
+    float: right;
+  }
+
+  .safety-table {
+    max-height: 450px;
+    overflow: auto;
+
+    .ant-table-header {
+      position: relative;
+      top: 55px;
+      z-index: 5;
+      height: 8px;
+      background-color: #0e08080a;
+    }
+
+
+    .ant-table-thead {
+      tr {
+        height: vh(80);
+
+        th {
+          padding: vh(9) vw(10);
+          font-family: 'Microsoft YaHei';
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.85);
+          text-align: center;
+          background: #f3f3f3;
+          opacity: 1;
+
+          span {
+            font-size: vw(15);
+          }
+
+          .ant-checkbox-input {
+            border: solid 1px #5ffffd;
+          }
+        }
+      }
+    }
+
+    .ant-table-tbody {
+      tr:nth-of-type(2n-1) {
+        background-color: #f3f3f3;
+      }
+
+      tr:nth-of-type(2n) {
+        background-color: #f3f3f3;
+      }
+
+      .ant-table-row:hover > td {
+        background-color: #f3f3f3;
+      }
+    }
+
+    .ant-table-tbody > tr:first-child {
+    }
+
+    .ant-table-tbody > tr > td {
+      height: vh(53);
+      padding: vh(10) vw(12);
+      font-family: 'Microsoft YaHei';
+      font-size: vw(13);
+      font-weight: 400;
+      color: #4c4b4b;
+      text-align: center;
+    }
+
+    .ant-checkbox-inner {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+
+  .detail-card {
+    width: vw(1104);
+    padding-top: vh(30);
+    margin: 0 auto;
+
+
+    .safety-detail {
+      display: flex;
+      padding-top: vh(40);
+      margin: 0 vw(60);
+      justify-content: space-between;
+      font-size: 0.2rem;
+      flex-wrap: wrap;
+
+      .safety-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: vw(16);
+
+        .safety-name {
+          width: vw(120);
+          font-weight: bold;
+        }
+
+        .safety-data {
+          color: #4c4b4b;
+        }
+
+        .safety-data {
+          width: vw(264);
+          height: vh(47);
+          padding-left: vw(30);
+          margin-left: vw(43);
+          line-height: vh(47);
+          color: #4c4b4b;
+          box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
+        }
+      }
+    }
+
+    .table-style {
+      padding: vh(24) vw(60);
+
+      .ant-table-thead > tr > th {
+        font-size: 0.2rem;
+        font-weight: bold;
+      }
+
+      .ant-table-tbody > tr > td {
+        font-size: 0.2rem;
+        color: #4c4b4b;
+      }
+    }
+
+    .info-style {
+      display: flex;
+      padding: vh(37) vw(60);
+      font-size: 0.2rem;
+      font-weight: bold;
+
+      .info-left {
+        flex: 1;
+      }
+
+      .info-right {
+        flex: 4;
+        width: vw(739);
+        height: vh(299);
+        padding: vh(11) vw(30);
+        color: #4c4b4b;
+        border: solid 1px #2525254d;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
+
+        .ant-input:focus {
+          outline: 0;
+          box-shadow: none;
+       }
+
+        .ant-input::-webkit-input-placeholder {
+          color: #777575;
+        }
+
+        .ant-input:-moz-placeholder {
+          color: #777575;
+        }
+
+        .ant-input::-moz-placeholder {
+          color: #777575;
+        }
+
+        .ant-input::-ms-input-placeholder {
+          color: #777575;
+        }
+      }
+    }
+  }
+
+  .ant-table-row a {
+    color: #49a9ee;
+    cursor: pointer;
+  }
+
+  .table-style thead > tr > th {
+    border-bottom: solid 1px #2525254d;
+    color: #4c4b4b;
+    text-align: left;
+    background: rgba(82, 237, 242, 0.05);
+  }
+
+  .info-right textarea {
+    width: vw(800);
+    height: vh(500);
+    color: #4c4b4b;
+    background-color: rgba(82, 237, 242, 0.05);
+    border: 0;
+  }
+
+  .ant-table-placeholder {
+    color: #4c4b4b;
+    background: rgba(82, 237, 242, 0.05);
+  }
+
+  .states-Icon div {
+    float: left;
+    width: vw(70);
+  }
+
+  .states-Icon {
+    .color-box {
+      width: vw(15);
+      height: vh(18);
+      margin: vw(3) vh(3) 0 0;
+      border-radius: 25%;
+    }
+  }
+
+}
+
+
+.resultbackmodel {
+  .amos-modal-container {
+    width: vw(530);
+    height: vh(260);
+    background-color: #f5f5f5;
+    border: 2px solid #a297976b;
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.16);
+
+    .amos-modal-ghost-title {
+      color: #4c4b4b;
+    }
+
+    .amos-modal-ghost-content {
+      color: #4c4b4b;
+    }
+
+    .amos-modal-ghost-btns {
+      margin-top: vh(100);
+    }
+
+    .amos-modal-ghost-btns a:first-child {
+      color: #49a9ee;
+      cursor: pointer;
+    }
+
+    .amos-modal-ghost-btns a {
+      position: relative;
+      bottom: 15px;
+      margin: 0 10px;
+      color: #4c4b4b;
+      cursor: pointer;
+    }
+
+    .amos-modal-ghost-btns .text-one a {
+      position: relative;
+      bottom: 50px;
+
+    }
+
+    .amos-modal-ghost-content {
+      .ant-input:focus {
+        border-color: #ddd;
+        outline: 0;
+        box-shadow: none;
+      }
+
+      .ant-input:hover {
+        border-color: #ddd;
+        outline: 0;
+        box-shadow: none;
+      }
+
+      .ant-input::-webkit-input-placeholder {
+        color: #777575;
+      }
+
+      .ant-input:-moz-placeholder {
+        color: #777575;
+      }
+
+      .ant-input::-moz-placeholder {
+        color: #777575;
+      }
+
+      .ant-input::-ms-input-placeholder {
+        color: #777575;
+      }
+  }
+  }
+}

src/styles/view/biz/index.scss

@@ -14,6 +14,10 @@
 @import './situation/map.scss';
 @import './differentiate/differentiate.scss';
 @import './alarmVideoMonitor/alarmVideoMonitor.scss';
+@import './fireRectification/fireRectification.scss';
+@import './fireRectification/detailContent.scss';
+@import './fireRectification/ContentModal.scss';
+@import './fireRectification/commonCard.scss';
 
 .ant-calendar-picker-container {
   &.ant-calendar-picker-container-placement-bottomRight {

src/utils/request.js

 import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
 import { utils, Store } from 'amos-tool';
+import { AmosFetch } from 'amos-processor/lib/fetch';
 import { message } from 'amos-framework';
 import formatUrl from 'amos-processor/lib/utils/urlFormat';
 import SysConsts from 'amos-processor/lib/config/consts';
@@ -129,5 +130,34 @@ export const getWithCookie = (url) => {
     hasCookie: true
   });
 };
+export const downLoadZIP = ({ url, data, fileName, method = 'POST' }) => {
+  return AmosFetch[method.toLocaleLowerCase()](url,
+    {
+      params: {
+        headers: {
+          'Accept': 'application/json, */*',
+          ...compleHeaders()
+        },
+        ...method.toLocaleLowerCase() !== 'get' ? {
+          body: JSON.stringify(data || {})
+        } : {}
+      }
+    }
+  ).then((response) => {
+    if (response.ok) {
+      response.blob().then((blob) => {
+        const a = window.document.createElement('a');
+        const downUrl = window.URL.createObjectURL(blob);
+        a.href = downUrl;
+        a.download = fileName;
+        a.click();
+        window.URL.revokeObjectURL(downUrl);
+      });
+      return { state: 1 };
+    } else {
+      throw new Error('');
+    }
+  });
+};
 
 export { amosRequest, singleFetch, convertDatalist, buildPageable, formatUrl };

src/view/bizview/fireRectification/commonCard/CommonCard.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class CommonCard extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { title, children, position } = this.props;
+    return (
+      <div className="common-card-emca">
+        <div className={`card-title ${position === 'center' ? 'emca-center-title' : ''}`}>
+          <div className="title-contain">
+            <div className="title-bg">
+              <div className="title-shape">
+                <div className="title-text">{title}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="card-emca-content">
+          <div className="card-contain">
+            {children}
+            <div className="card-corner" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+CommonCard.propTypes = {
+  title: PropTypes.string,
+  position: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default CommonCard;

src/view/bizview/fireRectification/commonContainer/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+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/bizview/fireRectification/contentModal/ContentModal.js

+import React, { Component }  from 'react';
+import { Table, Input } from 'amos-antd';
+import PropTypes from 'prop-types';
+import CommonCard from '../commonCard/CommonCard';
+
+const { TextArea } = Input;
+
+class ContentModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      form: {}
+    };
+
+  }
+
+  /**
+   * 页面修改数据记录
+   * @param {*} varName
+   * @param {*} value
+   */
+  handleDataChange = (varName,value) =>{
+    const { form } = this.state;
+    form[varName] = value;
+    this.setState({ form },() => this.props.DataPack(this.state.form));
+
+
+  }
+
+  render() {
+    const { states , headerData = {}, alarmColumns = [], riskColumns = [], dangerColumns = [], alarmInfo = [],
+    riskInfo = [], dangerInfo = [] ,fires = {},backResult = '' } = this.props;
+    return (
+      <div className="bill-card">
+        <div className="detail-card">
+          <CommonCard title="1.消防安全登记单基本信息">
+            <div className="safety-detail">
+              <div className="safety-info" >
+                <div className="safety-name">隐患登记单号</div>
+                <div className="safety-data">{headerData.billno}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">换流站名称</div>
+                <div className="safety-data">{headerData.stationName}</div>
+              </div>
+              <div className="safety-info">
+                <div className="safety-name">整改下发人员</div>
+                <div className="safety-data">{headerData.disUser}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">登记时间</div>
+                <div className="safety-data">{headerData.disDate}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">换流站负责人</div>
+                <div className="safety-data">{headerData.stationUser}</div>
+              </div>
+              <div className="safety-info">
+                <div className="safety-name">联系电话</div>
+                <div className="safety-data">{headerData.stationUserTel}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">安全负责人</div>
+                <div className="safety-data">{headerData.safeUser}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">联系电话</div>
+                <div className="safety-data">{headerData.safeUserTel}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">要求完成时间</div>
+                <div className="safety-data">{headerData.reqDate}</div>
+              </div>
+              <div className="safety-info" >
+                <div className="safety-name">实际完成时间</div>
+                <div className="safety-data">{headerData.finishDate}</div>
+              </div>
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="2.告警信息">
+            <div className="table-style">
+              <Table
+                pagination={false}
+                columns={alarmColumns}
+                dataSource={alarmInfo}
+                rowKey={record =>  record.req}
+              />
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="3.风险信息">
+            <div className="table-style">
+              <Table
+                pagination={false}
+                columns={riskColumns}
+                dataSource={riskInfo}
+                rowKey={record =>  record.req}
+              />
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="4.隐患信息">
+            <div className="table-style">
+              <Table
+                pagination={false}
+                columns={dangerColumns}
+                dataSource={dangerInfo}
+                rowKey={record =>  record.req}
+              />
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="5.消防安全管理">
+            <div className="info-style">
+              <div className="info-left">消防安全管理</div>
+              <div className="info-right">
+                按照换流站消防管理要求，需具备消防应急预案{fires.fire1thr}套,实际{fires.fire1rel}套，
+                每年需完成消防安全教育培训{fires.fire2thr}次,实际{fires.fire2rel}次，
+                每年需完成消防日常训练{fires.fire3thr}次,实际{fires.fire3rel}次，
+                每年需完成站内消防器材保养{fires.fire4thr}次,实际{fires.fire4rel}次
+                {backResult}</div>
+            </div>
+            <div className="info-style">
+              <div className="info-left">整改结果</div>
+              {states === '2' && <div className="info-right">
+                {headerData.refResult}
+              </div>}
+              {states === '1' && <div className="info-right">
+                <TextArea
+                  autosize={{ minRows: 10, maxRows: 10 }}
+                  placeholder={headerData.refResult === null ? '请输入' : headerData.refResult}
+                  defaultValue={headerData.refResult}
+                  onChange={(e)=>this.handleDataChange('refResult',e.target.value)}
+                />
+              </div>}
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="6.治理建议及意见">
+            <div className="info-style">
+              <div className="info-left">意见及建议</div>
+              <div className="info-right">
+                {headerData.viewsAndSuggestions}
+              </div>
+            </div>
+          </CommonCard>
+        </div>
+        <div className="detail-card">
+          <CommonCard title="7.整改人反馈">
+            <div className="info-style">
+              <div className="info-left">反馈结果</div>
+              {states === '2' && <div className="info-right">
+                {headerData.backResult}
+              </div>}
+              {states === '1' && <div className="info-right">
+                <TextArea
+                  autosize={{ minRows: 10, maxRows: 10 }}
+                  placeholder={headerData.backResult === null ? '请输入' : headerData.backResult}
+                  defaultValue={headerData.backResult}
+                  onChange={(e)=>this.handleDataChange('backResult',e.target.value)}
+                />
+              </div>}
+            </div>
+          </CommonCard>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+ContentModal.propTypes = {
+  headerData: PropTypes.object,
+  alarmInfo: PropTypes.array,
+  riskInfo: PropTypes.array,
+  dangerInfo: PropTypes.array,
+  station: PropTypes.object,
+  alarmColumns: PropTypes.array,
+  riskColumns: PropTypes.array,
+  dangerColumns: PropTypes.array,
+  fires: PropTypes.object,
+  backResult: PropTypes.string,
+  types: PropTypes.bool,
+  states: PropTypes.string,
+  DataPack: PropTypes.func
+};
+
+export default ContentModal;

src/view/bizview/fireRectification/detailContent/index.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'amos-framework';
+import BizIcon from './../../../common/icon/BizIcon';
+
+
+class DetailContent extends Component {
+  constructor(props) {
+    super(props);
+  }
+  save = (e) =>{
+    this.props.savePack(e);
+  }
+
+  render() {
+    const colorStates = [
+      { color: '#ffaa00',name: '待下发' },
+      { color: '#0088ff',name: '未处理' },
+      { color: '#00ff11',name: '已完成' },
+      { color: '#9e9e9e',name: '已关闭' },
+      { color: '',name: '' }
+    ];
+    const { detailVisible, handleClose, children ,states } = this.props;
+    return (
+      <div className="safe-detail" style={{ display: !detailVisible ? 'none' : 'block' }}>
+        <div className="fire-resource-truck-detail-button">
+          <Button className="go-back" icon={<BizIcon icon="fanhui" />} transparent onClick={handleClose} />
+          <div className="fire-resource-commit-button">
+            {
+              <Button icon="ok"  onClick={() => this.save()} transparent>
+                提交
+              </Button>
+            }
+          </div>
+        </div>
+        <div className="detail-title">
+          <div className="states-Icon">
+            <div className="color-box" style={{ background: colorStates[states].color }}> </div>
+            <div className="states-text"> {colorStates[states].name}</div>
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+}
+
+DetailContent.propTypes = {
+  children: PropTypes.node,
+  detailVisible: PropTypes.bool,
+  handleClose: PropTypes.func,
+  savePack: PropTypes.func,
+  states: PropTypes.string,
+  types: PropTypes.bool
+};
+
+export default DetailContent;