今日安全指数组件

src/styles/view/panoramic/statistical.scss

@@ -18,6 +18,65 @@
 
         .safetyIndex{
             height: 33.3%;
+            display: flex;
+            margin-left: 37px;
+            padding-top: 65px;
+
+            .safetyIndex-icon{
+                width:36px;
+                height:36px;
+                border:1px solid;
+                border-radius: 50%;
+                border-color: #00C3FF;
+                padding: 5px 7px;
+
+                .safetyIndex-safetyrate{
+                    width: 20px;
+                    height: 25px;
+                }
+            }
+
+            .safetyIndex-content{
+                height: 100%;
+                margin-left: 30px;
+                margin-right: 20px;
+
+                .content-item{
+                    margin: 5px;
+                }
+
+                .safetyIndex-content-row{
+                    display: flex;
+                    align-items: flex-end;
+
+                    
+
+                    .number-large{
+                        font-size: 44px;
+                        color: #00C3FF;
+                    }
+
+                    .number-unit{
+                        font-size: 16px;
+                        margin-bottom: 10px;
+
+                        .row-up{
+                            margin-top: 3px;
+                            width: 15px;
+                            height: 19px;
+                        }
+                    }
+                }
+
+            }
+
+            .safetyIndex-content-chart{
+                background-image: url('/src/assets/panoramic/statistical/main_bg_dashboard.png') !important;
+                background-repeat:no-repeat !important;
+                margin-top: -25px !important;
+                width: 125px !important;
+                height: 220px !important;
+            }
         }
     }
 

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')
-    return <div className="safetyIndex">SafetyIndex</div>;
+    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>
+    );
   }
 }