消防执行模块

src/consts/imgStatic.js

@@ -159,6 +159,25 @@ export default {
     notice: require('./../assets/main/notice.png'),
     setting: require('./../assets/main/setting.png')
   },
+  panoramicIcon: {
+    safetyrate: require('./../assets/panoramic/statistical/main_icon_safetyrate.png'),
+    safetyup: require('./../assets/panoramic/statistical/main_icon_up.png'),
+    safetyexecute: require('./../assets/panoramic/statistical/main_icon_safetyexecute.png'),
+    select_warn: require('./../assets/panoramic/statistical/main_icon_select_warntitle.png'),
+    select_fire: require('./../assets/panoramic/statistical/main_icon_select_fire.png'),
+    select_risk: require('./../assets/panoramic/statistical/main_icon_select_risk.png'),
+    select_check: require('./../assets/panoramic/statistical/main_icon_select_check.png'),
+    unselect_warn: require('./../assets/panoramic/statistical/main_icon_unselect_warntitle.png'),
+    unselect_fire: require('./../assets/panoramic/statistical/main_icon_unselect_fire.png'),
+    unselect_risk: require('./../assets/panoramic/statistical/main_icon_unselect_risk.png'),
+    unselect_check: require('./../assets/panoramic/statistical/main_icon_unselect_check.png'),
+    arrow_warn: require('./../assets/panoramic/statistical/main_icon_left_arrow.png'),
+    unfold: require('./../assets/panoramic/statistical/main_icon_left_unfold.png'),
+    model_fire: require('./../assets/panoramic/statistical/main_icon_model_fire.png'),
+    model_risk: require('./../assets/panoramic/statistical/main_icon_model_risk.png'),
+    model_patrol: require('./../assets/panoramic/statistical/main_icon_model_patrol.png'),
+    model_close: require('./../assets/panoramic/statistical/main_icon_model_close.png')
+  }
 };
 
 export const marker3DIoncMapper = {

src/consts/urlConsts.js

@@ -86,6 +86,7 @@ export const FscSerUrl = {
   safetyIndexWeekUrl: completePrefix(patrolURI, 'api/view3d/safetyIndex/week'),//一周安全指数趋势查询
   statisticsCheckUrl: completePrefix(patrolURI, 'api/view3d/statistics/check'),//今日巡检统计接口
   statisticsDutyUrl: completePrefix(patrolURI, 'api/view3d/statistics/duty'), //今日值班统计
+  onlineDayUrl: completePrefix(patrolURI, 'api/view3d/online/date'), //消防安全执行天数
 
 
   //*******************************************************************************
@@ -263,14 +264,14 @@ selectedOrgInfoUrl: completePrefix(baseURI, 'api/region/current'),//获取选择
 };
 
 
-export const ModuleEditUrl = { 
+export const ModuleEditUrl = {
   getAreaTreeUrl:completePrefix(baseURI, 'api/view3d/region/tree'),//
   getPointTreeUrl:completePrefix(baseURI, 'api/view3d/point/tree'),
   saveAreaDataUrl:completePrefix(baseURI, 'api/view3d/region/bind'),//
   getPointTypeUrl:completePrefix(baseURI, 'api/view3d/point/type'),
   getPointListUrl:completePrefix(baseURI, 'api/view3d/init3dViewNode'),//获取初始三维点 type=impEquipment&riskSourceId=1
-  savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系 
-  
+  savePointListUrl:completePrefix(baseURI, 'api/view3d/point/bind'),//批量保存点绑定关系
+
  }
 
 export const securityKey = 'qianyue(xian),fsc,xunjianpassword';

src/consts/wsUrlConsts.js

@@ -16,7 +16,8 @@ const getToken = () => {
 
 export default {
   rulews: completePrefix(view3dURI, 'rule.ws?token={token}'),
-  view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}')
+  view3dws: completePrefix(view3dURI, 'view3d.ws?token={token}'),
+  viewIndexws: completePrefix(baseURI, '3dViewMessage')
 };
 
 export const completeToken = (url) => {

src/services/panoramicService.js

@@ -8,46 +8,53 @@ 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);
-}
\ No newline at end of file
+};

src/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() {
-    console.log('EquipStatusList')
+    let { equipStatusList } = this.state;
     return (
       <div className="equipStatusList">
-        EquipStatusList
+        {this.renderContent(equipStatusList)}
       </div>
     );
   }
-  
+
 }

src/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;
+    console.log(type);
+    this.safetyIndexDetail(type);
+  }
+
+  safetyIndexDetail = (type) => {
+    safetyIndexDetailAction(type).then(data => {
+      console.log(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) =>{
+    console.log(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>
+    );
+  }
+}

src/view/panoramic/statistical/SafetyExecuteList.js

 import React, { Component } from 'react';
+import imgStatic from './../../../consts/imgStatic';
+import { onlineDayAction, safetyExecuteListAction } from 'SERVICES/panoramicService';
+
+const panoramicIcon = imgStatic.panoramicIcon;
+import { warnTypes } from './conf';
+const getIcon = (alarmType) => {
+  return panoramicIcon[`${alarmType}`];
+};
+
 
 /**
  * 告警列表
  */
 export default class SafetyExecuteList extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      year: 0,
+      day: 0,
+      alarmData: [],
+      isVisable: false,
+      selectKey: 'fire',
+      selectValue: ''
+    };
+  }
+
+  componentDidMount(){
+    let { selectKey } = this.state;
+    this.onlineDayData();
+    this.safetyExecuteList(selectKey);
+  }
+
+  onlineDayData = () => {
+    onlineDayAction().then(data => {
+      this.setState({
+        year: data.year,
+        day: data.day
+      });
+    });
+  }
+
+  safetyExecuteList = (type) => {
+    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() {
-    console.log('SafetyExecuteList')
-    return <div className="safetyExecuteList">SafetyExecuteList</div>;
+    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>)
+    );
   }
 }

src/view/panoramic/statistical/SafetyIndex.js

 import React, { Component } from 'react';
 import ReactEcharts from 'amos-viz/lib/echarts';
-import { safetyIndexAction } from './../../../services/panoramicService'
+import { safetyIndexAction } from 'SERVICES/panoramicService';
+import imgStatic from './../../../consts/imgStatic';
+import ModelContent from './ModelContent';
+import { warnController } from './conf';
+
+const panoramicIcon = imgStatic.panoramicIcon;
+const getIcon = (alarmType) => {
+  return panoramicIcon[`${alarmType}`];
+};
 
 /**
  * 今日安全指数
@@ -10,7 +18,8 @@ export default class SafetyIndex extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      safetyIndexData:{}
+      safetyIndexData: {},
+      modelVisable: false
     };
   }
 
@@ -85,15 +94,41 @@ export default class SafetyIndex extends Component {
     }
   }
 
+  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() {
-    console.log('SafetyIndex')
-    const { safetyIndexData } = this.state;
+    const { safetyIndexData, modelVisable } = 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 className='safetyIndex-content' onClick={() => this.modelOpen(true)}>
           <div>今日安全指数 </div>
           <div className='safetyIndex-content-row'>
               <div className='number-large'>{safetyIndexData.safetyIndex}</div>
@@ -110,6 +145,7 @@ export default class SafetyIndex extends Component {
           }
           </div>
           <ReactEcharts className='safetyIndex-content-chart' option={this.getOption()}/>
+          { modelVisable && this.renderWarnContent()}
       </div>
     );
   }

src/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: '巡检异常' }
+];

src/view/panoramic/statistical/index.js

@@ -6,16 +6,25 @@ 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.stringify(data);
+  };
+
 
   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/>
           <SafetyExecuteList/>