Merge branch 'dev_upgrade' of http://172.16.10.76/station/amos-convertor-view into dev_upgrade

src/consts/urlConsts.js

@@ -77,6 +77,18 @@ export const FscSerUrl = {
   pointInfoUrl: completePrefix(patrolURI, 'api/spc/queryPointById/{pointId}'), // 获取巡检点详情
 
   //*******************************************************************************
+  // 全景监控
+  //*******************************************************************************
+  safetyIndexUrl: completePrefix(patrolURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
+  safetyIndexDetailUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
+  safetyExecuteListUrl: completePrefix(patrolURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
+  equipStatusListUrl: completePrefix(patrolURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
+  safetyIndexWeekUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
+  statisticsCheckUrl: completePrefix(patrolURI, 'api/view3d/statistics/check'),//今日巡检统计接口
+  statisticsDutyUrl: completePrefix(patrolURI, 'api/view3d/statistics/duty'), //今日值班统计
+
+
+  //*******************************************************************************
   // 巡检业务
   //*******************************************************************************
   fetchCheckDetailById: completePrefix(patrolURI, 'api/spc/check-detail'), //根据ID查询巡检记录详情
@@ -247,6 +259,7 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择
   queryNodeDetailUrl: completePrefix(baseURI, 'api/Topography/detail/{id}'),//获取node节点详情
   saveNodeDetailUrl:completePrefix(baseURI, 'api/Topography/detail'),//保存nodeDetail详情
   deleteTopoUrl:completePrefix(baseURI, 'api/Topography/{type}/{id}'),//删除点/线
+  manageLevelEumListUrl: completePrefix(baseURI, 'api/riskLevel/manageLevel/list')//查询管控级别
 };
 
 

src/routes/view.js

@@ -58,7 +58,7 @@ import ModuleEdit from './../view/3dview/ModuleEdit'
 import PanoramicMonitor from './../view/panoramicMonitor';
 import LeaderStruct from './../view/planMgmt/view/leaderStruct';
 import Graph3DModel from 'amos-iot-3dgraph/lib/view/modelMgmt';
-import Panorama from './../view/Panorama';
+import Panoramic from './../view/panoramic';
 
 
 const Routes = {
@@ -112,7 +112,7 @@ const Routes = {
   // planDrill: PublishView,
   modelManage: Graph3DModel,
   leaderStruct: LeaderStruct,
-  panorama: Panorama,
+  panoramic: Panoramic,
 };
 
 const pageCompontent = key => {

src/services/panoramicService.js

+import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import * as helper from 'base-r3d/lib/utils/helper';
+import { FscSerUrl } from './../consts/urlConsts';
+import { commonGet, commonPost } from './../utils/request';
+
+/**
+ * 今日安全指数
+ */
+export const safetyIndexAction = () => {
+  return commonGet(FscSerUrl.safetyIndexUrl);
+}
+
+/**
+ * 今日安全指数详情
+ */
+export const safetyIndexDetailAction = ( type ) => {
+  return commonGet(formatUrl(FscSerUrl.safetyIndexDetailUrl,{ type }));
+}
+
+/**
+ * 告警列表最新5条
+ */
+export const safetyExecuteListAction = ( type ) => {
+  return commonGet(formatUrl(FscSerUrl.safetyExecuteListUrl,{ type }));
+}
+
+/**
+ * 设备状态消息最新5条
+ */
+export const equipStatusListAction = () => {
+  return commonGet(FscSerUrl.equipStatusListUrl);
+}
+
+/**
+ * 一周安全指数趋势查询
+ */
+export const safetyIndexWeekAction = () => {
+  return commonGet(FscSerUrl.safetyIndexWeekUrl);
+}
+
+/**
+ * 今日巡检统计接口
+ */
+export const statisticsCheckAction = () => {
+  return commonGet(FscSerUrl.statisticsCheckUrl);
+}
+
+/**
+ * 今日值班统计
+ */
+export const statisticsDutyAction = () => {
+  return commonGet(FscSerUrl.statisticsDutyUrl);
+}
\ No newline at end of file

src/services/preControlService.js

@@ -247,3 +247,10 @@ export const getTextPlanTreeAction = (appId) => {
 export const deleteTextPlanAction = (id) => {
   return commonDelete(formatUrl(FasSerUrl.deleteTextPlanUrl, { id }));
 };
+
+/**
+ * 查询管控级别
+ */
+export const getManageLevelEumListAction = () => {
+  return commonGet(FasSerUrl.manageLevelEumListUrl);
+};
\ No newline at end of file

src/styles/view/index.scss

@@ -4,3 +4,4 @@
 @import './region/index.scss';
 @import './common/index.scss';
 @import './planMgmt/index.scss';
+@import './panoramic/index.scss';

src/styles/view/panoramic/index.scss

+@import './statistical.scss';
+
+.sys-view-panoramic{
+    position: absolute;
+    top: 40px;
+    height: calc(100% - 40px);
+    width: 100%;
+    background: black;
+    color: white;
+}
\ No newline at end of file

src/view/bizview/preControl/paramSet/riskLevel/RiskLevelModel.js

 import React, { Component } from 'react';
 import { Form, AmosAlert, Input, Select, InputNumber } from 'amos-framework';
-import { riskLevelEditAction } from '../../../../../services/preControlService';
+import { riskLevelEditAction, getManageLevelEumListAction } from '../../../../../services/preControlService';
 
 const FormItem = Form.Item;
 const Option = Select.Option;
@@ -17,9 +17,11 @@ class RiskLevelModel extends Component {
     super(props);
     this.state = {
       searchParam: [],
+      manageLevelEum: [],
       form: {
         level: '',
         severity: '',
+        manageLevel: '',
         topLimit: 1,
         downLimit: 1
       },
@@ -27,7 +29,8 @@ class RiskLevelModel extends Component {
         level: [{ required: true, message: '风险级等级不能为空' }],
         severity: [{ required: true, message: '严重程度影响描述不能为空' }],
         topLimit: [{ required: true, message: '等级上限不能为空' }],
-        downLimit: [{ required: true, message: '等级下限不能为空' }]
+        downLimit: [{ required: true, message: '等级下限不能为空' }],
+        manageLevel: [{required: true,  message: '管理级别不能为空'}]
       }
     };
   }
@@ -39,7 +42,11 @@ class RiskLevelModel extends Component {
       Object.assign(form, selectRowData);
       this.setState({ form });
     }
-  };
+  }
+
+  componentDidMount = () => {
+    this.fetchManageLevelEumList();
+  }
 
   onSelectChange = (key, value) => {
     const { form } = this.state;
@@ -57,6 +64,12 @@ class RiskLevelModel extends Component {
     this.setState({ form });
   }
 
+  fetchManageLevelEumList = ()=>{
+    getManageLevelEumListAction().then(data => {
+      this.setState({manageLevelEum: data});
+    });
+  }
+
   handleSubmit = e => {
     this.form.validate((valid, dataValues) => {
       if (valid) {
@@ -81,7 +94,7 @@ class RiskLevelModel extends Component {
   }
 
   render() {
-    const { form, rules } = this.state;
+    const { form, rules, manageLevelEum } = this.state;
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -113,6 +126,15 @@ class RiskLevelModel extends Component {
           <FormItem label={<span>下限</span>} field="downLimit" {...formItemLayout}>
             <InputNumber defaultValue={1} max={1000} min={1} value={form.downLimit} onChange={value => this.onChange(value, 'downLimit')} />
           </FormItem>
+          <FormItem label={<span>管控级别</span>} field="manageLevel" {...formItemLayout}>
+            <Select
+              className="risk_factor_select"
+              data={manageLevelEum}
+              renderOption={item => <Option value={item.key}>{item.label}</Option>}
+              value={form.manageLevel}
+              onChange={(value)=> this.onSelectChange('manageLevel', value)}
+            />
+          </FormItem>
           <FormItem label={<span>严重程度影响描述</span>} field="severity" {...formItemLayout}>
             <TextArea className="risk_lever_input"  value={form.severity} onChange={e => this.onSelectChange('severity', e.target.value)} />
           </FormItem>

src/view/bizview/preControl/paramSet/riskLevel/index.js

@@ -25,7 +25,14 @@ const getColumns = () => {
       title: '严重度影响描述',
       dataIndex: 'severity',
       key: 'severity',
-      width: '30%',
+      width: '10%',
+      className: 'uant-table-thead'
+    },
+    {
+      title: '管控级别',
+      dataIndex: 'manageLevelName',
+      key: 'manageLevelName',
+      width: '10%',
       className: 'uant-table-thead'
     },
     {
@@ -39,14 +46,14 @@ const getColumns = () => {
       title: 'RPN上限',
       dataIndex: 'topLimit',
       key: 'topLimit',
-      width: '5%',
+      width: '10%',
       className: 'uant-table-thead'
     },
     {
       title: 'RPN下限',
       dataIndex: 'downLimit',
       key: 'downLimit',
-      width: '5%',
+      width: '10%',
       className: 'uant-table-thead'
     },
     {

src/view/panoramic/index.js

+import React, { Component } from 'react';
+import Statistical from './statistical'
+
+/**
+ * 全景监控
+ */
+export default class Panoramic extends Component {
+
+  render() {
+    return (
+      <div className="sys-view-panoramic">
+        <Statistical/>
+      </div>
+    );
+  }
+}

src/view/panoramic/statistical/EquipStatusList.js

+import React, { Component } from 'react';
+
+/**
+ * 设备状态消息
+ */
+export default class EquipStatusList extends Component {
+
+
+  render() {
+    console.log('EquipStatusList')
+    return (
+      <div className="equipStatusList">
+        EquipStatusList
+      </div>
+    );
+  }
+  
+}

src/view/Panorama/index.js → src/view/panoramic/statistical/SafetyExecuteList.js

 import React, { Component } from 'react';
 
 /**
- * 全景监控
+ * 告警列表
  */
-export default class Panorama extends Component {
+export default class SafetyExecuteList extends Component {
+
+
   render() {
-    return <div>111</div>;
+    console.log('SafetyExecuteList')
+    return <div className="safetyExecuteList">SafetyExecuteList</div>;
   }
 }

src/view/panoramic/statistical/SafetyIndex.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { safetyIndexAction } from './../../../services/panoramicService'
+
+/**
+ * 今日安全指数
+ */
+export default class SafetyIndex extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      safetyIndexData:{}
+    };
+  }
+
+  componentDidMount() {
+    this.getSafetyIndex();
+  }
+
+  getSafetyIndex = () => {
+    safetyIndexAction().then(safetyIndexData => {
+      this.setState({safetyIndexData})});
+  }
+
+  getOption = () => {
+    const { safetyIndexData } = this.state;
+    return {
+      tooltip: {
+          show:false
+      },
+      toolbox: {
+          show:false,
+          feature: {
+              mark: {show: false},
+              restore: {show: false},
+              saveAsImage: {show: false}
+          }
+      },
+      series: [
+          {
+            name: '今日安全指数',
+            type: 'gauge',
+            center: ['10%', '48%'],    // 默认全局居中
+            radius: '60%',
+            min: 0,
+            max: 100,
+            endAngle: 90,
+            startAngle:-90,
+            splitNumber: 3,
+            axisLine: {            // 坐标轴线
+                show:false,
+                lineStyle: { // 属性lineStyle控制线条样式
+                  color: [
+                      [0.5, 'red'],
+                      [0.9, 'Orange'],
+                      [0.95, 'Gold'],
+                      [1, '#00C3FF']
+                  ],
+                  width: 0,
+                  opacity : 0
+              }
+            },
+            axisLabel: {         // 坐标轴小标记
+                show:false
+            },
+            axisTick: {            // 坐标轴小标记
+                show:false
+            },
+            splitLine: {           // 分隔线
+                show:false
+            },
+            pointer: {
+                width: 5
+            },
+            title: {
+                show:false
+            },
+            detail: {
+                show:false
+            },
+          data: [{value: safetyIndexData.safetyIndex, name: '今日安全指数'}]
+        }
+      ]
+    }
+  }
+
+  render() {
+    console.log('SafetyIndex')
+    const { safetyIndexData } = this.state;
+    return (
+      <div className="safetyIndex">
+        <div className="safetyIndex-icon">
+          <img className="safetyIndex-safetyrate" src="/src/assets/panoramic/statistical/main_icon_safetyrate.png" alt="safetyrate" />
+        </div>
+        <div className='safetyIndex-content'>
+          <div>今日安全指数 </div>
+          <div className='safetyIndex-content-row'>
+              <div className='number-large'>{safetyIndexData.safetyIndex}</div>
+              <span className='number-unit'>&nbsp;分&nbsp;
+                <img src="/src/assets/panoramic/statistical/main_icon_up.png" className="row-up" alt="up" />
+              </span>
+          </div>
+          {
+            [{name:'风险值上升',num:safetyIndexData.riskExceptionNum},
+            {name:'巡检不合格',num:safetyIndexData.checkExceptionNum},
+            {name:'火灾报警',num:safetyIndexData.fireExceptionNum}].map((item,index)=>
+              <div className="content-item">{item.name} {item.num}</div>
+            )
+          }
+          </div>
+          <ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
+      </div>
+    );
+  }
+}

src/view/panoramic/statistical/SafetyIndexWeek.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import echarts from 'echarts/lib/echarts';
+import { safetyIndexWeekAction } from './../../../services/panoramicService';
+
+/**
+ * 一周安全指数
+ */
+
+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"
+
+
+      },
+    }
+
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { show: false },//去除网格线
+    axisLine: {
+      lineStyle: {
+        color: '#2A5D75',
+      }
+    },
+    //  改变y轴字体颜色和大小  
+    axisLabel: {
+      textStyle: {
+        color: 'rgba(255,255,255,1)',
+        fontSize: '14',
+        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+
+
+      },
+    },
+
+  },
+
+  series: [{
+    data: [0, 40, 80, 100, 85, 70, 85, 80],
+    type: 'line',
+    smooth: true,  //这个是把线变成
+    itemStyle: {
+      normal: {
+        color: "#FF7400", //折线点的颜色
+        lineStyle: {
+          width: 3,//折线宽度
+          color: "#DDBF28"//折线颜色
+        }
+      }
+    },
+    areaStyle: {
+      normal: {
+        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+
+          offset: 0,
+          color: '#00ADFF'
+        }, {
+          offset: 0.5,
+          color: '#DDBF28'
+        }, {
+          offset: 1,
+          color: '#FF7400'
+        }])
+
+      }
+
+    }
+  }]
+};
+
+
+class SafetyIndexWeek extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+
+    };
+  }
+
+  componentDidMount() {
+    safetyIndexWeekAction().then(data => {
+      this.setState({
+        data: data
+      })
+    })
+  }
+
+  getOptionsx = (map) => {
+    return {
+      xAxis: {
+        type: 'category',
+
+        boundaryGap: false,
+        data: map.get("dates"),
+        axisLabel: {
+          interval: 0,//横轴信息全部显示
+          // rotate:40,
+          textStyle: {
+            color: 'rgba(255,255,255,1)',
+            fontSize: '12',
+            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+
+
+          },
+          margin: 15,//刻度标签与轴线之间的距离。
+        }
+
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: { show: false },//去除网格线
+        axisLine: {
+          lineStyle: {
+            color: '#2A5D75',
+          }
+        },
+        //  改变y轴字体颜色和大小  
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,1)',
+            fontSize: '12',
+            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+
+
+          },
+          margin: 15,//刻度标签与轴线之间的距离。
+        },
+
+      },
+
+      series: [{
+        data: map.get("values"),
+        type: 'line',
+        symbol: 'circle',//折线点设置为实心点
+        smooth: true,  //这个是把线变成
+        itemStyle: {
+          normal: {
+            color: "#E1B623", //折线点的颜色
+            lineStyle: {
+              width: 3,//折线宽度
+              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+
+                offset: 0,
+                color: '#FF0000'
+              }, {
+                offset: 0.2,
+                color: '#DDBF28'
+              }, {
+                offset: 0.4,
+                color: '#FF7400'
+              }, {
+                offset: 0.5,
+                color: '#00ADFF'
+              }, {
+                offset: 0.6,
+                color: '#DDBF28'
+              }])
+            }
+          }
+        },
+        areaStyle: {
+          normal: {
+            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上#766016 transparent
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+
+              offset: 0,
+              color: '#00ADFF'
+            }, {
+              offset: 0.1,
+              color: '#6e6a26'
+            }, {
+              offset: 0.2,
+              color: '#766016'
+            }, {
+              offset: 0.5,
+              color: '#4b2006'
+            },{
+              offset: 0.6,
+              color: '#280d07'
+            }])
+
+          }
+
+        }
+      }]
+    };
+  }
+
+  handleData = (data) => {
+    let map = new Map();
+    let dates = [];
+    let values = [];
+    if (data && data.length > 0) {
+      data.map(item => {
+        let time2 = item.date.substring(5);
+        dates.push(time2)
+        values.push(item.value)
+      })
+    }
+
+    map.set("dates", dates);
+    map.set("values", values);
+    return map;
+  }
+
+
+  render() {
+    let { data } = this.state;
+    let map = this.handleData(data);
+    return (
+      <div className="safetyIndexWeek">
+
+
+        <div className="content-week-font-style">
+          <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span>一周安全趋势</div>
+        {/* <img src="/src/assets/panoramic/statistical/main_icon_textleft.png" ></img> */}
+
+
+
+        <ReactEcharts option={this.getOptionsx(map)} className='echart-week' />
+
+      </div>
+    );
+  }
+}
+
+
+SafetyIndexWeek.propTypes = {
+
+};
+
+export default SafetyIndexWeek;

src/view/panoramic/statistical/StatisticsCheck.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { statisticsCheckAction } from './../../../services/panoramicService';
+
+
+const option = {
+  tooltip: {
+    trigger: 'item',
+    formatter: "{a} <br/>{b}: {c} ({d}%)"
+  },
+  legend: {
+    orient: 'vertical',
+    x: 'left',
+    data: []
+  },
+  //绿色  黄色  灰色 红色
+  //  color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
+  color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
+  series: [
+    {
+
+      type: 'pie',
+      radius: ['80%', '70%'],
+      center: ['35%', '40%'],    // 默认全局居中
+      avoidLabelOverlap: false,
+      label: {
+        normal: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            fontSize: '30',
+            fontWeight: 'bold'
+          }
+        }
+      },
+      labelLine: {
+        normal: {
+          show: false
+        }
+      },
+      data: [
+        { value: 335, name: '未执行' },
+        { value: 310, name: '漏检' },
+        { value: 234, name: '合格' },
+        { value: 135, name: '不合格' },
+
+      ]
+    }
+  ]
+};
+
+
+
+/**
+ * 今日巡检统计
+ */
+class StatisticsCheck extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: []
+
+    };
+
+  }
+
+  componentDidMount() {
+    statisticsCheckAction().then(data =>{
+         this.setState({
+          data:data
+         })  
+    })
+  }
+
+
+  getOptionsx = (data) => {
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: "{a} <br/>{b}: {c} ({d}%)"
+      },
+      legend: {
+        orient: 'vertical',
+        x: 'left',
+        data: []
+      },
+      //绿色  黄色  灰色 红色
+      // color: ['#C0C0C0', '#FF0000', '#00FF00', '#FFFF00'],
+      color: ['#C0C0C0', '#00FF00', '#FFFF00', '#FF0000'],
+      series: [
+        {
+    
+          type: 'pie',
+          radius: ['80%', '70%'],
+          center: ['35%', '40%'],    // 默认全局居中
+          avoidLabelOverlap: false,
+          label: {
+            normal: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              show: true,
+              textStyle: {
+                fontSize: '30',
+                fontWeight: 'bold'
+              }
+            }
+          },
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data:data
+        }
+      ]
+    };;
+  }
+
+
+  handleData = (data) =>{
+    let map = new Map();
+    if(data && data.length > 0){
+        data.map(item =>{
+          map.set(item.name,item.value);
+        })
+    }
+    return map;
+  }
+
+  render() {
+    let {data}  = this.state;
+    let map = this.handleData(data);
+    let weikaishi = map.get("未开始");
+    let hege = map.get("合格");
+    let buhege = map.get("不合格");
+    let loujian = map.get("漏检");
+    console.log('StatisticsCheck')
+    return (
+      <div className="statisticsCheck">
+        <div className="check-content">
+          <div className="content-xj-top">
+            <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span> 今日巡检
+
+          </div>
+
+
+          <div className="content-xj-middle">
+            <ReactEcharts option={this.getOptionsx(data)} eventpool={this.onclick} className="div-echars" />
+          </div>
+          <div className="content-xj-bottom" >
+            <div className="yellow-div">
+              <div className="yellow-div-content">
+                <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_buhege.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 合格
+                           <span className="content-font-number"> {hege}个</span>
+                </span>
+              </div>
+            </div>
+            <div className="green-div">
+              <div className="green-div-content">
+                <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_hege.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 未开始
+                         <span className="content-font-number">{weikaishi}个</span>
+                </span>
+              </div>
+
+            </div>
+            <div className="red-div">
+              <div className="red-div-content">
+                <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_louyan.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 漏检
+                         <span className="content-font-number"> {loujian}个</span>
+                </span>
+              </div>
+
+            </div>
+            <div className="grey-div">
+              <div className="grey-div-content">
+                <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_tag_weizhixing.png") no-repeat center center/100% 100%' }}></span><span className="content-week-font"> 不合格
+                         <span className="content-font-number"> {buhege}个</span>
+                </span>
+              </div>
+
+            </div>
+
+          </div>
+
+
+        </div>
+
+      </div>
+
+    )
+  }
+}
+
+
+StatisticsCheck.propTypes = {
+
+};
+
+export default StatisticsCheck;
\ No newline at end of file

src/view/panoramic/statistical/StatisticsDuty.js

+import React, { Component } from 'react';
+import {statisticsDutyAction} from './../../../services/panoramicService';
+
+/**
+ * 今日值班统计
+ */
+
+
+class StatisticsDuty extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+    
+    };
+
+  
+}
+
+componentDidMount() {
+  statisticsDutyAction().then(data =>{
+       this.setState({
+        data:data
+       })  
+  })
+}
+
+  render() {
+    let {data}  = this.state;
+    console.log('StatisticsDuty')
+    return (
+      <div className="statisticsDuty">
+          <div className="content-duty-font-style"> 
+             <span className='titleIcon' style={{ background: 'url("/src/assets/panoramic/statistical/main_icon_textleft.png") no-repeat center center/100% 100%' }}></span> 今日值班
+      </div>
+
+      <div className="content-picture-div">
+
+          <div className="content-picture-left">
+                <div className="content-image"></div> 
+                    <div className="content-wenzi">
+                      <div className="wenzi-zhiban">值班</div>
+                      <div className="wenzi-number">{data.dutyPersonNumber}</div>  
+                 </div>  
+          </div>  
+
+          <div className="content-picture-middle">
+             <div className="content-image"></div> 
+                <div className="content-wenzi">
+                      <div className="wenzi-zhiban">消防</div>
+                      <div className="wenzi-number">{data.firePersonNumber}</div>  
+                </div>
+          </div>  
+
+          <div className="content-picture-right">
+               <div className="content-image"></div> 
+                <div className="content-wenzi">
+                      <div className="wenzi-zhiban">保安</div>
+                      <div className="wenzi-number">{data.securityPersonNumber}</div>  
+                </div>
+          </div>   
+      </div>
+             {/* <img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img>
+             <img src="/src/assets/panoramic/statistical/main_icon_baoan.png" ></img> */}
+
+      </div>
+    );
+  }
+}
+
+
+
+StatisticsDuty.propTypes = {
+
+};
+
+export default StatisticsDuty;
\ No newline at end of file

src/view/panoramic/statistical/index.js

+import React, { Component } from 'react';
+
+import EquipStatusList from './EquipStatusList';
+import SafetyExecuteList from './SafetyExecuteList';
+import SafetyIndex from './SafetyIndex';
+import SafetyIndexWeek from './SafetyIndexWeek';
+import StatisticsCheck from './StatisticsCheck';
+import StatisticsDuty from './StatisticsDuty';
+
+/**
+ * 全景监控统计
+ */
+export default class Statistical extends Component {
+
+
+  render() {
+    return (
+      <div className="statistical">
+        <div className="statistical-left">
+          <SafetyIndex/>
+          <SafetyExecuteList/>
+          <EquipStatusList/>
+        </div>
+        <div className="statistical-right">
+          <SafetyIndexWeek/>
+          <StatisticsCheck/>
+          <StatisticsDuty/>
+        </div>
+      </div>
+    );
+  }
+}