合并代码

src/routes/asyncView.js

@@ -9,6 +9,7 @@ const AsyncSituation = props => <AsyncLoader load={import('../view/biz/duty/situ
 const AsyncRegulate = props => <AsyncLoader load={import('../view/monitor/regulate')} componentProps={props} />;
 const AsyncBills = props => <AsyncLoader load={import('../view/biz/regulate/bills')} componentProps={props} />;
 const AsyncRootBizView = props => <AsyncLoader load={import('./../view/biz/index')} componentProps={props} />;
+const AsyncSafetyTraining = props => <AsyncLoader load={import('../view/monitor/safetyManage/index')} componentProps={props} />;
 // const AsyncRegionList = props => <AsyncLoader load={import('./../view/common/region/index')} componentProps={props} />;
 
 const Routes = {
@@ -16,10 +17,12 @@ const Routes = {
   duty: AsyncDuty,
   situation: AsyncSituation,
   regulate: AsyncRegulate,
-  bills: AsyncBills
+  bills: AsyncBills,
+  safetyTraining: AsyncSafetyTraining
 };
 export const businessRouts = [
   { path: 'situation',group: 'biz',component: AsyncSituation, childRoutes: [] },
+  { path: 'safetyTraining',group: 'biz',component: AsyncSafetyTraining, childRoutes: [] },
   { path: 'bills',group: 'biz',component: AsyncBills, childRoutes: [] }
 ];
 const pageCompontent = key => {

src/routes/view.js

@@ -7,16 +7,20 @@ import Bills from '../view/biz/regulate/bills';
 import RootBizView from './../view/biz/index';
 import EmptyPage from './../view/common/emptyPage/EmptyPage';
 
+import SafetyTraining from './../view/monitor/safetyManage/index';
+
 const Routes = {
   main: RootView,
   duty: Duty,
   situation: Situation,
   regulate: Regulate,
-  bills: Bills
+  bills: Bills,
+  safetyTraining:SafetyTraining
 };
 export const businessRouts = [
   { path: 'situation',group: 'biz',component: Situation, childRoutes: [] },
-  { path: 'bills',group: 'biz',component: Bills, childRoutes: [] }
+  { path: 'bills',group: 'biz',component: Bills, childRoutes: [] },
+  { path: 'safetyTraining',group: 'biz',component: SafetyTraining, childRoutes: [] }
 ];
 const pageCompontent = key => {
   return Routes[key] || EmptyPage;

src/styles/view/index.scss

@@ -10,3 +10,6 @@
 // 导入amos-pro
 @import '~amos-pro/dist/amospro.css';
 @import '~ray-progress/assets/progress.css';
+
+@import './monitor/safetyTrain.scss';
+@import './monitor/table.scss'

src/styles/view/monitor/table.scss

+.table-styles {
+  height: 100%;
+
+  .ant-table-content {
+    height: 100%;
+
+    .ant-table-body {
+      // max-height: 500px !important ;
+      overflow-y: auto !important; 
+      background:transparent!important;
+
+      table {
+        width: 300px;
+        border-color: transparent !important;
+
+        td {
+          border-color: transparent !important;
+
+        }
+      }
+    }
+  }
+
+  .ant-table {
+    background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
+    border-radius: 0px 0px 0 0;
+  }
+  .ant-pagination.mini .ant-pagination-total-text {
+    height: 20px;
+    line-height: 20px;
+ 
+  }
+
+  
+   //表格正文居中
+   .ant-table-content .ant-table-body table td {
+    border-color: transparent !important;
+    text-align: center;
+  }
+
+  .ant-table-fixed-header .ant-table-scroll .ant-table-header{
+    overflow: hidden;
+  }
+
+
+
+  .ant-pagination.mini .ant-pagination-total-text {
+    font-size:13px;
+    font-family:Microsoft YaHei UI;
+    font-weight:400;
+    line-height: 19px;
+    color:rgba(255,255,255,1);
+    float: right
+   }
+
+  
+       //修改表头文字、背景颜色  
+   .ant-table-thead > tr >th{
+        color: white;
+        background: #3d466b !important;
+        //background: #222b51 !important;
+        border-color: transparent !important;
+        text-align: center;
+  }
+
+   //鼠标悬浮行背景色修改
+   table tbody tr:hover>td { 
+    background-color:#00B9FF !important;
+  }
+  
+
+  .ant-table-content {
+
+    .ant-table-scroll .ant-table-header {
+      margin-bottom: 3px !important;
+      // padding-bottom: 0px !important;
+      margin-top: -2px !important;
+      margin-left: -2px !important;
+      margin-right: -2px !important
+      
+     
+    }
+
+   
+
+  
+    //背景色奇数和偶数
+     .back-02 {
+      background:transparent!important;
+      opacity:1;
+     }
+
+     .back-01 {
+      background:rgba(14,127,180,0.29);
+     
+     }
+  
+    
+
+   
+  }
+
+  .ant-pagination {
+    left: 39%;
+    position: absolute;
+    
+
+    .ant-pagination-options {
+      .select-scroll-wrapper {
+        margin: 0;
+      }
+    }
+
+    .ant-pagination-total-text {
+      color: white;
+    }
+
+    .ant-pagination-prev {
+      background: url('/src/assets/safetyManage/zuo.png') no-repeat;
+      a {
+        &::after {
+          color:rgba(0,185,255,0.3)
+        }
+      }
+    }
+
+    .ant-pagination-next {
+      background: url('/src/assets/safetyManage/you.png') no-repeat;
+      background-size: 100% 100%;
+      a {
+        &::after {
+          color:rgba(0,185,255,0.3)
+        }
+      }
+    }
+
+    //分页颜色调整
+    .ant-pagination-item-active {
+      background-color: #5FFFFD !important;
+      border-color: #5FFFFD !important;
+    }
+
+     .ant-pagination-item {
+      border: 0;
+      margin: 0;
+      min-width: 20px;
+      height: 20px;
+      line-height: 20px;
+      background-color: #00B9FF !important;
+  }
+
+    .ant-pagination-jump-next {
+      &::after {
+        color: white;
+      }
+    }
+ }
+
+ .ant-pagination.mini .ant-pagination-options {
+  margin-left: 8px;
+  display: none;
+}
+ //滚动条样式
+ .ant-table-body{
+  &::-webkit-scrollbar {
+    height: 5px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background-image: url('/src/assets/safetyManage/hengxian.png');
+    background-repeat: no-repeat;
+   
+    background-size: 100% 100%;
+  }
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: 0;
+    border-radius: 0;
+    background-image: url('/src/assets/safetyManage/gdt.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  &::-webkit-scrollbar-button {
+    background-image: url('/src/assets/safetyManage/shang.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+
+}

src/view/monitor/safetyManage/AmosGridTable.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'amos-antd';
+import { Log } from 'amos-tool';
+
+
+
+
+/**
+ * 基础信息表格组件
+ * @class AmosGridTable
+ * @extends {Component}
+ */
+class AmosGridTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedRowKeys: [],//表格选择的行key值集合
+      selectedRows: [],//表格选择的行数据集合
+      loading: false,//页面是否加载中,默认false
+      dataList: [],//表格数据集合
+      size: 'middle',//表格大小
+      current: props.defaultPageConfig ? props.defaultPageConfig.current : 1,//当前页初始索引0
+      pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 10,//当前页数据量
+      filter: {},//表格过滤条件
+      totals: 1,//所有数据总和
+      showFilter: true,
+      otherFilter: props.otherFilter,
+      maxHeight: 450
+    };
+  }
+
+  /**
+   * 初始获取表格数据
+   */
+  componentDidMount() {
+    this.props.callBack(this.reload);
+    this.getHeightOffset();
+    window.addEventListener('resize', this.onWindowResize);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.url !== this.props.url){
+      this.reload();
+    }
+    if (nextProps.otherFilter && nextProps.otherFilter !== this.props.otherFilter){
+      this.setState({ otherFilter: nextProps.otherFilter }, this.reload);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onWindowResize);
+  }
+
+  onWindowResize = (e) => {
+    this.getHeightOffset();
+  }
+
+  /**
+   * 获取复选框选择的数据，并进行回调
+   */
+  onSelectChange = (selectedRowKeys,selectedRows) => {
+    this.setState({
+      selectedRowKeys,
+      selectedRows
+    },this.props.getSelectedRows(selectedRows,selectedRowKeys));
+  }
+  /**
+   * 设置页面数据大小事件
+   */
+  onSizeChange = (current, pageSize) => {
+    let { setPageConfig } = this.props;
+    setPageConfig && setPageConfig({ current, pageSize });
+    this.setState({ current, pageSize },this.reload);
+  }
+  /**
+   * 设置当前页事件
+   */
+  onPaginationChange = (current) => {
+    let { setPageConfig } = this.props;
+    setPageConfig && setPageConfig({ current });
+    this.setState({ current },this.reload);
+  }
+  /**
+   * 获取表格所有的外部按钮封装成数组
+   */
+  getbtns = () => {
+    let btns = [];
+    return <div key={`btntool`} className='amos-grid-oper-btn'>{this.props.operBtns}</div>;
+  }
+  /**
+   * 获取表格数据的筛选条件，通过回调获得的，并通过该条件进行表格刷新获取
+   */
+  changeFilters = (obj) => {
+    let newobj = obj;
+    let res = {};
+    let list = Object.keys(newobj);
+    list.map(e=>{
+      let varName = newobj[e];
+      if (varName && varName !== ''){
+        res[e] = varName;
+        if (e === 'enabled'){
+          res[e] = varName === '启用';
+        }
+      }
+    });
+    this.setState({ filter: res },this.reload);
+  }
+
+  openFilter = () => {
+    let showFilter = this.state.showFilter;
+    this.setState({ showFilter: !showFilter });
+  }
+
+  /**
+   * 获取表格数据（刷新）
+   */
+  reload = () => {
+    let { current,pageSize,filter,otherFilter } = this.state;
+    this.props.getTableDataAction({ current: current - 1, pageSize },JSON.stringify(filter),otherFilter);
+    this.getHeightOffset();
+  }
+  /**
+   * 获取表格内部按钮
+   */
+  addOperateCol =(text,record) =>{
+    const { operateCol } = this.props;
+    let operBtns = operateCol(text,record);
+    return (<div className='operation-buttons'>{operBtns}</div>);
+  }
+
+  showTotal = (total) => {
+    return `共 ${total} 条`;
+  }
+
+  generateRowkey = (record, index) => {
+    // return record.id ? record.id : UUID.uuidFast();
+    return record.key ? record.key :  record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
+    // return index + (this.state.current - 1) * this.state.pageSize;
+  }
+
+  getHeightOffset = () => {
+    let { getPanelHeight } = this.props;
+    let height = getPanelHeight === undefined ? 450 : getPanelHeight();
+    height && this.setState({ maxHeight: height });
+  }
+
+  isVisableSearch(columns){
+    let list = columns;
+    let res = false;
+    list.map((e)=>{
+      if (e.query){
+        res = true;
+        return true;
+      }
+    });
+    return res;
+  }
+
+  render() {
+    const { loading, selectedRowKeys,size,maxHeight } = this.state;
+    let { columns, isChecked, operateCol, isTreeTable, isPageable, pagination, dataList, totals,rowClassName, onRowClick, onRowDoubleClick } = this.props;
+
+    //设置复选框参数
+    let rowSelection = {
+      selectedRowKeys: this.props.selectedRowKeys || selectedRowKeys,
+      onChange: this.onSelectChange
+    };
+    //设置是否添加复选框
+    rowSelection = isChecked ? rowSelection : undefined;
+    //如果表格各行存在内部按钮，将各个按钮添加到表格列模型中
+    if (operateCol){
+      columns[columns.length - 1].render = (text,record) => this.addOperateCol(text,record);
+    }
+    let tepmPage = Object.assign({
+      size: 'small',
+      total: totals,
+      current: this.state.current,
+      pageSize: this.state.pageSize,
+      onShowSizeChange: this.onSizeChange,
+      onChange: this.onPaginationChange,
+      showSizeChanger: true,
+      showTotal: this.showTotal
+    },  pagination);
+    let _tempPagination = isPageable === false ? false :tepmPage;
+    let bordered = true;
+    // 当为true 或 undefined时则分页
+    let _pagination = isPageable === false ?  false : _tempPagination;
+    let divStyle = this.state.showFilter ? 'other-table-bar' : 'table-bar';
+    let display = this.state.showFilter ? 'block' : 'none';
+    let searchStyle = { display };
+
+    return (
+    
+        <div className="table-styles">
+          { onRowClick ?
+            <Table
+            
+              rowKey={isTreeTable ? 'key' : this.generateRowkey}
+              loading={loading}
+              rowSelection={rowSelection}
+              columns={columns}
+              dataSource={dataList}
+              pagination={_pagination}
+              size={size}
+              bordered={bordered}
+              scroll={{ y: maxHeight }}
+              rowClassName={rowClassName}
+              onRowClick={onRowClick}
+            /> :
+            <Table
+             
+              rowKey={isTreeTable ? 'key' : this.generateRowkey}
+              loading={loading}
+              rowSelection={rowSelection}
+              columns={columns}
+              dataSource={dataList}
+              pagination={_pagination}
+              size={size}
+              bordered={bordered}
+              scroll={{ y: maxHeight }}
+              rowClassName={rowClassName}
+              onRowDoubleClick={onRowDoubleClick}
+            />
+          }
+       
+      </div>
+    );
+  }
+}
+
+AmosGridTable.propTypes = {
+  url: PropTypes.string,//请求表格数据的url不带参数的
+  columns: PropTypes.array,//表格列模型
+  getSelectedRows: PropTypes.func,//获取选择的行数据，用于各个具体的表格回调获取数据。
+  operBtns: PropTypes.array,//表格外部操作按钮，如'新增'，'编辑'等
+  isChecked: PropTypes.bool,//表格是否包含复选框
+  operateCol: PropTypes.func,//表格内部操作按钮，如'查看详情'等
+  callBack: PropTypes.func,//获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
+  otherFilter: PropTypes.string,//其他查询条件
+  dataList: PropTypes.array,
+  getTableDataAction: PropTypes.func,
+  selectedRowKeys: PropTypes.array,
+  totals: PropTypes.number,
+  pagination: PropTypes.any, // 分页props, false时无分页
+  isPageable: PropTypes.bool, // 是否分页: true 分页, false 不分页, 当为undefined时默认有分页
+  isTreeTable: PropTypes.bool, // 是否是treeTable 默认非
+  rowClassName: PropTypes.func,
+  setPageConfig: PropTypes.func, //把分页参数给父类
+  defaultPageConfig: PropTypes.object, //父类默认分页参数
+  getPanelHeight: PropTypes.func
+};
+
+AmosGridTable.defaultProps = {
+  operBtns: [],
+  dataList: [],
+  totals: 1,
+  columns: [],
+  isChecked: true,
+  isTreeTable: false,
+  otherFilter: ''
+};
+
+export default AmosGridTable;

src/view/monitor/safetyManage/index.js

+import React, { Component } from 'react';
+import SafteyLeft from './SafteyLeft';
+import SafteyRight from './SafteyRight';
+
+
+/**
+ * 中心级2侧模块
+ */
+export default class Safety extends Component {
+
+  render() {
+    return (
+      <div className="fire-safety">
+         <div className="fire-safty-content">
+             <div className="fire-top"></div>
+             <div className="fire-bottom">
+                 <SafteyLeft />
+                 <SafteyRight />
+             </div>
+         </div>
+      </div>
+    );
+  }
+}

src/view/monitor/statistical/AllSafety.js

 import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
 import echarts from 'echarts/lib/echarts';
+//import { AllSafetyAction } from './../../../services/centerLevelService';
 
 
 /**
  * 总体消防安全情况
  */
 
-const option = {
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20'],
-    axisLabel: {
 
-      textStyle: {
-        color: 'rgba(255,255,255,1)',
-        fontSize: '14',
-        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+const option = {
+  tooltip: {
+    trigger: 'item',
+    formatter: "{a} <br/>{b}: {c} ({d}%)"
+  },
 
+  // color: ['#00CACE', '#F70D0E'],
+  color: ['#F70D0E', '#00CACE'],
+  graphic: [{ //环形图中间添加文字
+    type: 'text', //通过不同top值可以设置上下显示
+    left: 'center',
+    top: '30%',
+    style: {
+      text: '80', //'80' + '\n' + '总数'
+      textAlign: 'center',
+      fill: "rgba(255,255,255,1)", //文字的颜色
+      width: 30,
+      height: 30,
+      fontSize: 25,
+      fontFamily: "Microsoft YaHei",
+      fontWeight:"bold"
       
+    }
   },
+  { //环形图中间添加文字
+    type: 'text', //通过不同top值可以设置上下显示
+    left: 'center',
+    top: '45%',
+    style: {
+      text: '站点',
+      textAlign: 'center',
+      fill: "rgba(255,255,255,1)", //文字的颜色
+      width: 24,
+      height: 16,
+      fontSize: 12,
+      fontFamily: "Microsoft YaHei",
+      fontWeight:400
+
     }
+  }],
+
+  series: [   
+    {
+      name: '总体消防安全情况',
+      type: 'pie',
+      radius: ['65%', '80%'],
+      center: ['50%', '40%'],
+      avoidLabelOverlap: false,
+      // hoverAnimation: false,  //是否突出
+
+      labelLine: {
+        normal: {
+          show: false
+        }
+      },
+      data: [
+        {
+          value: 40,
+          name: "不合格",
         
         },
-  yAxis: {
-    type: 'value',
-    splitLine: { show: false },//去除网格线
-    axisLine: {
-      lineStyle: {
-        color: '#2A5D75',
+        {
+          value: 60,
+          name: '正常',
+         
         }
-    },
-    //  改变y轴字体颜色和大小
-    axisLabel: {
-      textStyle: {
-        color: 'rgba(255,255,255,1)',
-        fontSize: '14',
-        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+      ]
     
       
     },
+    {
+      name: "中间的背景",
+      type: "pie",
+      radius: ["0%", "60%"],
+      center: ["50%", "40%"],
+      label: {
+          show: false
       },
-
-  },
-
-  series: [{
-    data: [0, 40, 80, 100, 85, 70, 85, 80],
-    type: 'line',
-    smooth: true,  //这个是把线变成
       itemStyle: {
           normal: {
-        color: "#FF7400", //折线点的颜色
-        lineStyle: {
-          width: 3,//折线宽度
-          color: "#DDBF28"//折线颜色
-        }
-      }
+              color: 'rgba(24,219,159,0.1)'
+          },
+      },
+      //隐藏多余文字提示
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      },
+      tooltip: {
+        show: false
       },
-    areaStyle: {
-      normal: {
-        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-
-          offset: 0,
-          color: '#00ADFF'
-        }, {
-          offset: 0.5,
-          color: '#DDBF28'
-        }, {
-          offset: 1,
-          color: '#FF7400'
-        }])
-
-      }
       
+      // hoverAnimation: false,
+      data: [100]
   }
-  }]
+  ]
 };
 
 
@@ -93,8 +124,12 @@ class AllSafety extends Component {
   }
 
 
+  getOptionsx = () => {
 
 
+    return option;
+  }
+
 
 
   render() {
@@ -105,6 +140,29 @@ class AllSafety extends Component {
 
         <div className="all-safety-content">
           <div className="all-safety-font">总体消防安全情况</div>
+          <div className="content-detail">
+            <div className="all-safety-left">
+              <ReactEcharts option={this.getOptionsx()} className="div-echars" />
+            </div>
+            <div className="all-safety-right">
+                  <div className="all-safety-right-one">
+                      <div className="right-one-font">1个</div>
+                  </div>
+                  <div className="all-safety-right-two">
+                      <div className="right-two-font"><span className="jiantou">&darr;</span>-1</div>
+                  </div>
+                  <div className="all-safety-right-three">
+                       <div className="right-three-font">1个</div>
+                  </div>
+                  <div className="all-safety-right-four">
+                      <div className="right-four-font"><span className="jiantou">&uarr;</span>+1</div>
+                  </div>
+
+            </div>
+          </div>
+
+
+
         </div>
         {/* <ReactEcharts option={this.getOptionsx(map)} className='echart-week' /> */}