合并全景监控模块

amos.config.js

@@ -11,7 +11,7 @@
       objModelURI: '/a3dres',
       // 根url
       // baseURI: 'http://172.16.11.30:9008/',
-      baseURI: '/baseURI/',
+      baseURI: 'http://172.16.3.122:8083/',
       convertorURI: 'http://172.16.11.36:10005/',
       rulesConfigURI: 'http://172.16.10.91:8080/',
       // plugin URI
@@ -23,7 +23,8 @@
       pluginURI: 'ws://172.16.11.40:10600/',
       studioURI: 'ws://172.16.11.40:10600/',
       convertorView3dURI: 'ws://172.16.10.91:8080/',//换流站websocket
-      securityBaseURI: 'ws://172.16.10.91:10600/'
+      securityBaseURI: 'ws://172.16.10.91:10600/',
+      baseURI: 'ws://172.16.10.91:10600/'
     },
     // 外部链接地址
     outterURI: {
@@ -48,7 +49,7 @@
       }
     }
   };
-  
+
 
   // 配置日志系统
   var LogConfig = {

example/entry.js

@@ -18,12 +18,15 @@ const mockData = {
 };
 
 class App extends Component {
+
   render() {
     const Photo = getSketchCompnents('photo');
     const ConvertorView3DRoot = getSketchCompnents('convertorView3DRoot');
+    const Panoramic = getSketchCompnents('panoramic');
     return (
       <div>
-        <ConvertorView3DRoot/>
+        {/*<ConvertorView3DRoot />*/}
+        <Panoramic />
       </div>
     );
   }

mods/components/panoramic/consts/imgStatic.js

+export default {
+  panoramicIcon: {
+    safetyrate: require('./../assets/panoramic/main_icon_safetyrate.png'),
+    safetyup: require('./../assets/panoramic/main_icon_up.png'),
+    safetyexecute: require('./../assets/panoramic/main_icon_safetyexecute.png'),
+    select_warn: require('./../assets/panoramic/main_icon_select_warntitle.png'),
+    select_fire: require('./../assets/panoramic/main_icon_select_fire.png'),
+    select_risk: require('./../assets/panoramic/main_icon_select_risk.png'),
+    select_check: require('./../assets/panoramic/main_icon_select_check.png'),
+    unselect_warn: require('./../assets/panoramic/main_icon_unselect_warntitle.png'),
+    unselect_fire: require('./../assets/panoramic/main_icon_unselect_fire.png'),
+    unselect_risk: require('./../assets/panoramic/main_icon_unselect_risk.png'),
+    unselect_check: require('./../assets/panoramic/main_icon_unselect_check.png'),
+    arrow_warn: require('./../assets/panoramic/main_icon_left_arrow.png'),
+    unfold: require('./../assets/panoramic/main_icon_left_unfold.png'),
+    model_fire: require('./../assets/panoramic/main_icon_model_fire.png'),
+    model_risk: require('./../assets/panoramic/main_icon_model_risk.png'),
+    model_patrol: require('./../assets/panoramic/main_icon_model_patrol.png'),
+    model_close: require('./../assets/panoramic/main_icon_model_close.png'),
+    textleft: require('./../assets/panoramic/main_icon_textleft.png'),
+    check_buhege: require('./../assets/panoramic/main_icon_tag_buhege.png'),
+    check_hege: require('./../assets/panoramic/main_icon_tag_hege.png'),
+    check_louyan: require('./../assets/panoramic/main_icon_tag_louyan.png'),
+    check_weizhixing: require('./../assets/panoramic/main_icon_tag_weizhixing.png')
+  }
+};

mods/components/panoramic/consts/urlConsts.js

+import * as endConf from 'amos-processor/lib/config/endconf';
+
+const completePrefix = endConf.completePrefix;
+
+const AmosConfig = endConf.AmosConfig;
+const baseURI = AmosConfig.httpURI.baseURI;
+
+export const FscSerUrl = {
+  //*******************************************************************************
+  // 全景监控
+  //*******************************************************************************
+  safetyIndexUrl: completePrefix(baseURI, 'api/view3d/statistics/safetyIndex'),//今日安全指数
+  safetyIndexDetailUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/detail/{type}'),//今日安全指数详情
+  safetyExecuteListUrl: completePrefix(baseURI, 'api/view3d/safetyExecute/list/{type}'),//告警列表最新5条
+  equipStatusListUrl: completePrefix(baseURI, 'api/view3d/equipStatus/list'),//设备状态消息最新5条
+  safetyIndexWeekUrl: completePrefix(baseURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
+  statisticsCheckUrl: completePrefix(baseURI, 'api/view3d/statistics/check'),//今日巡检统计接口
+  statisticsDutyUrl: completePrefix(baseURI, 'api/view3d/statistics/duty'), //今日值班统计
+  onlineDayUrl: completePrefix(baseURI, 'api/view3d/online/date') //消防安全执行天数
+};

mods/components/panoramic/consts/wsUrlConsts.js

+import * as endConf from 'amos-processor/lib/config/endconf';
+import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import { Store } from 'amos-tool';
+import SysConsts from 'amos-processor/lib/config/consts';
+const lsTool = Store.lsTool;
+const completePrefix = endConf.completePrefix;
+
+const AmosConfig = endConf.AmosConfig;
+const baseURI = AmosConfig.wsURI.baseURI;
+const view3dURI = AmosConfig.wsURI.view3dURI;
+const getToken = () => {
+  return lsTool.read(SysConsts.token);
+};
+
+
+export default {
+  rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
+  view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
+  viewIndexws: completePrefix(baseURI, '3dViewMessage')
+};
+
+export const completeToken = (url) => {
+  const token = getToken();
+  const result = formatUrl(url, { token });
+  return result;
+};

mods/components/panoramic/index.js

+import panoramic from './view/panoramic';
+
+
+export default {
+  key: 'panoramic',
+  component: panoramic
+};

mods/components/panoramic/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 }));
+};
+
+/**
+ * 消防安全执行天数
+ */
+export const onlineDayAction = ( ) => {
+  return commonGet(formatUrl(FscSerUrl.onlineDayUrl));
+};
+
+/**
+ * 告警列表最新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);
+};

mods/components/panoramic/styles/index.js

+import './view/index.scss';

mods/components/panoramic/styles/view/index.scss

+@import './panoramic/index.scss';

mods/components/panoramic/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;
+}

mods/components/panoramic/utils/payload.js

+export default function(data, delRequest){
+  window.setLoading && window.setLoading(false);
+  return new Promise((resolve, reject) => {
+    if (data) {
+      if (data.dataList || data.dataList === null){
+        if(data.result==='SUCCESS'){
+          resolve(data.dataList);
+        }else{
+          resolve(data.result);
+        }
+
+      } else if (data.result || data.result === null){
+        resolve(data.result);
+      }else{
+        resolve(data);
+      }
+    } else {
+      if (data) {
+        reject(data.message);
+      } else {
+        reject(data);
+      }
+    }
+  });
+}

mods/components/panoramic/utils/request.js

+import amosRequest, { singleFetch } from 'amos-processor/lib/fetch/amosRequest';
+import { utils, Store } from 'amos-tool';
+import { message } from 'amos-framework';
+import formatUrl from 'amos-processor/lib/utils/urlFormat';
+import SysConsts from 'amos-processor/lib/config/consts';
+import imgStatic from './../consts/imgStatic';
+const panoramicIcon = imgStatic.panoramicIcon;
+import payload from './payload';
+
+const lsTool = Store.lsTool;
+
+const defaultPageable = {
+  page: 0,
+  size: 10
+};
+
+const defaultHeaders = {
+  appKey: 'CONVERTER_STATION',
+  product: 'CONVERTER_STATION_WEB',
+  channelType: '3dpage'
+};
+
+const compleHeaders = () => {
+  return {
+    ...defaultHeaders,
+    token: getToken(),
+  };
+};
+
+/**
+ * 获取 token
+ */
+const getToken = () => {
+  return lsTool.read(SysConsts.token);
+}
+
+/**
+ * 删除全局变量requests中的地址
+ * @param {*} url
+ * @param {*} method
+ */
+const delRequest = (url, method) => {
+  if (window.requests && window.requests.length > 0) {
+    window.requests = window.requests.filter(e => e.url !== url && e.method !== method);
+  }
+};
+
+/**
+ * 构建分页
+ */
+const buildPageable = (url, pageable = defaultPageable) => {
+  let { page, size } = pageable;
+  return `${url}?page=${page}&size=${size}`;
+};
+
+/**
+ * 转换指定值为 JSON
+ * @param {array} dataList
+ * @param {string} key
+ */
+const convertDatalist = (dataList = [], key = 'content') => {
+  const newDL = dataList.map(d => {
+    if (!utils.isNil(d[key]) && utils.isString(d[key])) {
+      d[key] = JSON.parse(d[key]);
+    }
+    return d;
+  });
+  return newDL;
+};
+
+export function commonGet(url) {
+  window.setLoading && window.setLoading(true);
+  return amosRequest(url, {
+    timeout: 10000000 ,
+    method: 'GET',
+    headers: compleHeaders(),
+    reject(error){
+      window.setLoading && window.setLoading(false);
+      delRequest(url, 'GET');
+      //message.danger(error.message || '请求失败，服务器错误！');
+    }
+  }).then(data => payload(data));
+}
+
+export function commonPost(url, data, params) {
+  window.setLoading && window.setLoading(true);
+  return amosRequest(url, {
+    timeout: 10000000,
+    method: 'POST',
+    headers: compleHeaders(),
+    body: data,
+    reject(error){
+      delRequest(url, 'POST');
+      window.setLoading && window.setLoading(false);
+      //message.danger(error.message || '请求失败，服务器错误！');
+    }
+  }).then(data => payload(data));
+}
+
+export function commonPut(url, data, params) {
+  window.setLoading && window.setLoading(true);
+  return amosRequest(url, {
+    timeout: 10000000,
+    method: 'PUT',
+    headers: compleHeaders(),
+    body: data,
+    reject(error){
+      delRequest(url, 'PUT');
+      window.setLoading && window.setLoading(false);
+      //message.danger(error.message || '请求失败，服务器错误！');
+    }
+  }).then(data => payload(data));
+}
+
+export function commonDelete(url, data, params) {
+  window.setLoading && window.setLoading(true);
+  return amosRequest(url, {
+    timeout: 10000000 ,
+    method: 'DELETE',
+    headers: compleHeaders(),
+    body: data,
+    reject(error){
+      window.setLoading && window.setLoading(false);
+      //message.danger(error.message || '请求失败，服务器错误！');
+    }
+  }).then(data => payload(data));
+}
+
+export const getWithCookie = (url) => {
+  return commonGet(url, {
+    hasCookie: true
+  });
+};
+
+export const getIcon = (alarmType) => {
+  return panoramicIcon[`${alarmType}`];
+};
+
+export { amosRequest, singleFetch, convertDatalist, buildPageable, formatUrl };

mods/components/panoramic/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>
+    );
+  }
+}

mods/components/panoramic/view/panoramic/statistical/EquipStatusList.js

+import React, { Component } from 'react';
+import { equipStatusListAction } from './../../../services/panoramicService';
+
+
+/**
+ * 设备状态消息
+ */
+export default class EquipStatusList extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      equipStatusList: []
+    };
+  }
+
+  componentDidMount(){
+    this.equipStatusList();
+  }
+
+  equipStatusList = () => {
+    equipStatusListAction().then(data => {
+      this.setState({
+        equipStatusList: data
+      });
+    });
+  }
+
+  renderContent = (datas) => {
+    return (
+      datas.map((item, index) => {
+        return (
+          <div key={item.id} className="title-child">
+            <div className="title-date" >{item.changeDate}</div>
+            <div className="title-text" >{item.label}</div>
+          </div>
+        );
+      })
+    );
+  }
+
+  render() {
+    let { equipStatusList } = this.state;
+    return (
+      <div className="equipStatusList">
+        {this.renderContent(equipStatusList)}
+      </div>
+    );
+  }
+
+}

mods/components/panoramic/view/panoramic/statistical/ModelContent.js

+import React, { Component } from 'react';
+import { safetyIndexDetailAction } from './../../../services/panoramicService';
+import moment from 'moment';
+const format = 'YYYY-MM-dd';
+
+
+export default class ModelContent extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      alarmData: []
+    };
+  }
+
+  componentDidMount(){
+    let { type } = this.props;
+    this.safetyIndexDetail(type);
+  }
+
+  safetyIndexDetail = (type) => {
+    safetyIndexDetailAction(type).then(data => {
+      this.setState({
+        alarmData: data
+      });
+    });
+  }
+
+  /**
+   * 获取标题
+   *
+   * @memberof ModelContent
+   */
+  getTitle = (v) => {
+    const titleParams = {
+      1: '一级风险点', //一级风险点
+      2: '二级风险点', //二级风险点
+      3: '三级风险点', //三级风险点
+      4: '四级风险点' //四级风险点
+    };
+    return titleParams[v];
+  }
+
+  formatData = (str) => {
+    let date = str.split(' ')[0];
+    return date;
+  }
+
+  renderContent = (content) =>{
+    return (
+      <div className='rows'>
+        {(content || []).map(itemA => {
+          return (
+            <div className='row'>
+              <span>{itemA.name}</span>
+              <span className='date'>{this.formatData(itemA.changeDate)}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    let { alarmData } = this.state;
+    let { type } = this.props;
+    return (
+      <div className='model-content'>
+        {(alarmData || []).map(item => {
+          return (
+            <div className='content-div'>
+              <div className='title'>
+                <span>|</span>
+                <span className='next-title'>{ type === 'risk' ? this.getTitle(item.typeCode) : item.typeName }</span>
+              </div>
+              {this.renderContent(item.content)}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}

mods/components/panoramic/view/panoramic/statistical/SafetyExecuteList.js

+import React, { Component } from 'react';
+import imgStatic from './../../../consts/imgStatic';
+import { onlineDayAction, safetyExecuteListAction } from './../../../services/panoramicService';
+import { getIcon } from './../../../utils/request';
+import { warnTypes } from './conf';
+
+const panoramicIcon = imgStatic.panoramicIcon;
+
+/**
+ * 告警列表
+ */
+export default class SafetyExecuteList extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      year: 0,
+      day: 0,
+      alarmData: [],
+      isVisable: false,
+      selectKey: 'fire',
+      selectValue: ''
+    };
+  }
+
+  componentDidMount(){
+    this.onlineDayData();
+    this.safetyExecuteList();
+  }
+
+  onlineDayData = () => {
+    onlineDayAction().then(data => {
+      this.setState({
+        year: data.year,
+        day: data.day
+      });
+    });
+  }
+
+  safetyExecuteList = (type) => {
+    if (!type){
+      type = this.state.selectKey;
+    }
+    let value;
+    safetyExecuteListAction(type).then(data => {
+      warnTypes.some(e => {
+        if (e.type === type) {
+          value = e.label;
+          return true;
+        }
+      });
+      this.setState({
+        alarmData: data,
+        selectValue: value
+      });
+    });
+  }
+
+  /**
+   * 展开
+   *
+   * @memberof SafetyExecuteList
+   */
+  unfoldOnClick = (flag) =>{
+    this.setState({
+      isVisable: flag
+    });
+  }
+
+  onClickIcon = (e) => {
+    if (e.type !== 'warn'){
+      this.setState({
+        selectKey: e.key
+      });
+      this.safetyExecuteList(e.key);
+    }
+  }
+
+  renderContent = (datas) => {
+    return (
+      datas.map((item, index) => {
+        return (
+          <div key={item.id} className="title-child">
+            <span className="title-text" >{item.label}</span>
+          </div>
+        );
+      })
+    );
+  }
+
+  renderIcon = (datas) => {
+    let { selectKey } = this.state;
+    return (
+      datas.map((item, index) => {
+        return (
+          <div key={item.id} className="icon">
+            { selectKey === item.key ? <img src={getIcon(item.icon)} onClick={()=>this.onClickIcon(item)} /> : <img src={getIcon(item.unIcon)} onClick={()=>this.onClickIcon(item)} />}
+          </div>
+        );
+      })
+    );
+  }
+
+  render() {
+    let { year, day, alarmData, isVisable, selectValue } = this.state;
+    let dayNum ;
+    if (year > 0 ){
+      dayNum = year + ' 年 ' + day;
+    } else {
+      dayNum = ' ' + day;
+    }
+    return (
+      isVisable ?
+      (<div className='safetyExecuteList'>
+        <img src={panoramicIcon.unfold} onClick={() => this.unfoldOnClick(false)}></img>
+      </div>) :
+      (<div className="safetyExecuteList">
+        <div className='up'>
+          <div className='left'>
+            <img src={panoramicIcon.safetyexecute}></img>
+          </div>
+          <div className='right'>
+            <div className='common-title'>
+              <span>消防安全执行</span>
+            </div>
+            <div className='content'>
+              <span className='date'>{dayNum}</span>
+              <span className='day'>天</span>
+            </div>
+          </div>
+        </div>
+        <div className='down'>
+          <div className='title'>
+            {this.renderIcon(warnTypes)}
+            <span className='describe'>{selectValue}</span>
+            <img className='arrow' src={panoramicIcon.arrow_warn} onClick={() => this.unfoldOnClick(true)}></img>
+            <div className='bottom-line'></div>
+          </div>
+          <div className='content'>
+            {this.renderContent(alarmData)}
+          </div>
+        </div>
+      </div>)
+    );
+  }
+}

mods/components/panoramic/view/panoramic/statistical/SafetyIndex.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { safetyIndexAction } from './../../../services/panoramicService';
+import imgStatic from './../../../consts/imgStatic';
+import ModelContent from './ModelContent';
+import { warnController } from './conf';
+import { getIcon } from './../../../utils/request';
+
+const panoramicIcon = imgStatic.panoramicIcon;
+
+/**
+ * 今日安全指数
+ */
+export default class SafetyIndex extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      safetyIndexData: {},
+      modelVisable: false
+    };
+  }
+
+  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: '今日安全指数'}]
+        }
+      ]
+    }
+  }
+
+  modelOpen = (flag) =>{
+    this.setState({
+      modelVisable: flag
+    });
+  }
+
+  renderWarnContent = () =>{
+    return (
+      <div className='warnModal'>
+        <div className='close'>
+          <img src={panoramicIcon.model_close} onClick={() => this.modelOpen(false)}></img>
+        </div>
+        {warnController.map(item => {
+          return (
+            <div className='model-line'>
+              <div>
+                <img src={getIcon(item.icon)}></img>
+              </div>
+              <div className='model-title'>{item.label}</div>
+              <ModelContent type={item.type} />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    const { safetyIndexData, modelVisable } = this.state;
+    return (
+      <div className="safetyIndex">
+        <div className="safetyIndex-icon">
+          <img className="safetyIndex-safetyrate" src={panoramicIcon.safetyrate} alt="safetyrate" />
+        </div>
+        <div className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
+          <div>今日安全指数 </div>
+          <div className='safetyIndex-content-row'>
+              <div className='number-large'>{safetyIndexData.safetyIndex}</div>
+              <span className='number-unit'>&nbsp;分&nbsp;
+                <img src={panoramicIcon.safetyup} 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()}/>
+          { modelVisable && this.renderWarnContent()}
+      </div>
+    );
+  }
+}

mods/components/panoramic/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';
+import { getIcon } from './../../../utils/request';
+
+
+/**
+ * 一周安全指数
+ */
+
+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(${getIcon('textleft')}) 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;

mods/components/panoramic/view/panoramic/statistical/StatisticsCheck.js

+import React, { Component } from 'react';
+import ReactEcharts from 'amos-viz/lib/echarts';
+import { statisticsCheckAction } from './../../../services/panoramicService';
+import { getIcon } from './../../../utils/request';
+
+
+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;
+  }
+
+  rederStyle = (checkType) => {
+    const style = {
+      background: `url(${getIcon(checkType)}) no-repeat  center center/100% 100%`
+    };
+    return style;
+  }
+
+  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("漏检");
+    return (
+      <div className="statisticsCheck">
+        <div className="check-content">
+          <div className="content-xj-top">
+            <span className='titleIcon' style={this.rederStyle('textleft')}></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={this.rederStyle('check_buhege')}></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={this.rederStyle('check_hege')}></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={this.rederStyle('check_louyan')}></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={this.rederStyle('check_weizhixing')}></span><span className="content-week-font"> 不合格
+                  <span className="content-font-number"> {buhege}个</span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+
+StatisticsCheck.propTypes = {
+
+};
+
+export default StatisticsCheck;

mods/components/panoramic/view/panoramic/statistical/StatisticsDuty.js

+import React, { Component } from 'react';
+import { statisticsDutyAction } from './../../../services/panoramicService';
+import { getIcon } from './../../../utils/request';
+
+/**
+ * 今日值班统计
+ */
+
+
+class StatisticsDuty extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {}
+
+    };
+
+
+  }
+
+  componentDidMount() {
+    statisticsDutyAction().then(data => {
+      this.setState({
+        data: data
+      })
+    })
+  }
+
+  render() {
+    let { data } = this.state;
+    return (
+      <div className="statisticsDuty">
+        <div className="content-duty-font-style">
+          <span className='titleIcon' style={{ background: `url(${getIcon('textleft')}) 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;

mods/components/panoramic/view/panoramic/statistical/conf.js

+/**
+ * 告警控制
+ */
+export const warnController = [
+  { key: 'fire', icon: 'model_fire', type: 'fire', label: '火灾告警' },
+  { key: 'risk', icon: 'model_risk', type: 'risk', label: '风险异常' },
+  { key: 'check', icon: 'model_patrol', type: 'check', label: '巡检异常' }
+];
+
+/**
+ *  安全执行控制
+ */
+export const warnTypes = [
+  { key: 'warn', icon: 'select_warn', unIcon: 'unselect_warn', type: 'warn', label: '巡检异常' },
+  { key: 'fire', icon: 'select_fire', unIcon: 'unselect_fire', type: 'fire', label: '火灾告警' },
+  { key: 'risk', icon: 'select_risk', unIcon: 'unselect_risk', type: 'risk', label: '风险异常' },
+  { key: 'check', icon: 'select_check', unIcon: 'unselect_check', type: 'check', label: '巡检异常' }
+];

mods/components/panoramic/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';
+import AmosWebSocket from 'amos-websocket';
+import SysWsURL, { completeToken } from './../../../consts/wsUrlConsts';
+
+/**
+ * 全景监控统计
+ */
+export default class Statistical extends Component {
+
+  handleData = (data = {}) => {
+    console.log('ws data:', data);
+    data = JSON.parse(JSON.stringify(data));
+    console.log(data);
+    let refreshType = data.refreshType;
+    let content = data.content;
+    switch (refreshType){
+      case 'today_safety_index':
+        console.log('今日安全指数刷新~~~~~~~~~~~~~~~~~~~~');
+        this.safetyIndex.getSafetyIndex();
+        break;
+      case 'fire_safety':
+        console.log('消防安全执行刷新~~~~~~~~~~~~~~~~~~~~');
+        this.safetyExecute.safetyExecuteList();
+        break;
+      case 'monitor_data':
+        console.log('设备状态检测数据刷新~~~~~~~~~~~~~~~~~~~~');
+        this.equipStatus.equipStatusList();
+        break;
+      case 'error_status':
+        console.log('异常区域刷新~~~~~~~~~~~~~~~~~~~~');
+        break;
+      case 'week_safety_index':
+        console.log('一周安全指数趋势刷新~~~~~~~~~~~~~~~~~~~~');
+        break;
+      case 'today_check_status':
+        console.log('今日巡检情况刷新~~~~~~~~~~~~~~~~~~~~');
+        break;
+      case 'today_duty':
+        console.log('今日值班刷新~~~~~~~~~~~~~~~~~~~~');
+        break;
+      case 'all':
+        console.log('首页刷新~~~~~~~~~~~~~~~~~~~~');
+        this.safetyIndex.getSafetyIndex();
+        this.safetyExecute.safetyExecuteList();
+        this.equipStatus.equipStatusList();
+        break;
+      default:
+        console.log(refreshType,'：类型不支持');
+    }
+  }
+
+
+  render() {
+    const wsURL = completeToken(SysWsURL.viewIndexws);
+    return (
+      <div className="statistical">
+        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
+        <div className="statistical-left">
+          <SafetyIndex ref={node => this.safetyIndex = node} />
+          <SafetyExecuteList ref={node => this.safetyExecute = node} />
+          <EquipStatusList ref={node => this.equipStatus = node} />
+        </div>
+        <div className="statistical-right">
+          <SafetyIndexWeek />
+          <StatisticsCheck />
+          <StatisticsDuty />
+        </div>
+      </div>
+    );
+  }
+}