mqtt

src/view/3dview/LayerPool.js

@@ -11,6 +11,7 @@ import TopView from './preControl/topNews/TopView';
 import MonitorView from './preControl/monitor/MonitorView';
 import Water from './preControl/water/Water';
 import { eventTopics } from './consts';
+import { withSubscribeMQTT } from 'amos-mqtt';
 
 const eventConnect = Connect.eventConnect;
 const AmosConfig = endConf.AmosConfig;
@@ -29,6 +30,12 @@ const sidepaneStyles = {
   }
 };
 
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/layerPool'
+})
 @eventConnect
 class LayerPool extends Component {
   constructor(props) {
@@ -67,8 +74,18 @@ class LayerPool extends Component {
     this._bindPubSubEvents();
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ planStarted: nextProps.planStarted });
+  // componentWillReceiveProps(nextProps) {
+  //   this.setState({ planStarted: nextProps.planStarted });
+  // }
+  /**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      this.setState({ planStarted: dataList.planStarted });
+    }
   }
 
   onCancal = () => {
@@ -98,7 +115,7 @@ class LayerPool extends Component {
     let wsURL = AmosConfig.wsURI.baseURI + 'plan';
     return (
       <div className="layer-pool">
-      <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
+      {/**<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> */}
         <SidePane
           className={displayDetail ? 'precontrol-sidePlan-detail-display' : 'precontrol-sidePlan-detail'}
           left={false}
@@ -132,6 +149,7 @@ class LayerPool extends Component {
   }
 }
 LayerPool.propTypes = {
+  data: PropTypes.array,
   planStart: PropTypes.func,
   animationProps: PropTypes.any,
   subscribe: PropTypes.func,

src/view/3dview/MaskContent.js

@@ -11,9 +11,17 @@ import globalMsg from './pagefactory/msgFactory';
 import { eventTopics, rulesDataFactory } from './consts';
 import LayerPool from './LayerPool';
 import TopMsg from './sideControl/TopMsg';
+import { withSubscribeMQTT } from 'amos-mqtt';
 
 const eventConnect = Connect.eventConnect;
 
+
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/maskContent'
+})
 @eventConnect
 class MaskContent extends Component {
 
@@ -22,11 +30,21 @@ class MaskContent extends Component {
   }
 
 
-  componentWillReceiveProps  = (nextProps) => {
-    this.setState({ planStarted: nextProps.planStarted });
-  }
+  // componentWillReceiveProps  = (nextProps) => {
+  //   this.setState({ planStarted: nextProps.planStarted });
+  // }
 
   /**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      this.setState({ planStarted: dataList.planStarted });
+    }
+  }
+  /**
    * 监控视图消息 (规则 ws)
    */
   handleData = data => {
@@ -73,7 +91,7 @@ class MaskContent extends Component {
     };
     return (
       <div className="mask-content">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
+        {/**<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> */}
         <SideControl multiple={multiple} onItemClick={onItemClick} layerConfig={layerConfig} animationProps={controlAnimation} />
         <DataPane animationProps={datapaneAnim} />
         <TopMsg alarmStart={alarmStart} />
@@ -86,6 +104,7 @@ class MaskContent extends Component {
 }
 
 MaskContent.propTypes = {
+  data: PropTypes.array,
   layerConfig: PropTypes.object,
   onItemClick: PropTypes.func,
   // 是否支持多选

src/view/3dview/index.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Connect, Modal } from 'amos-framework';
-import AmosWebSocket from 'amos-websocket';
+// import AmosWebSocket from 'amos-websocket';
 import * as endConf from 'amos-processor/lib/config/endconf';
 import PilotController from 'amos-viz/lib/board/PilotController';
 import SysWsURL, { completeToken } from './../../consts/wsUrlConsts';
 import ScreenSaverView from './screenSaver/ScreenSaverView';
+import { MQTTProvider } from 'amos-mqtt';
 
 // import Three3dView from './Three3dView';
 import Three3dView from './View3D';
@@ -13,6 +14,7 @@ import { eventTopics } from './consts';
 
 const eventConnect = Connect.eventConnect;
 const AmosConfig = endConf.AmosConfig;
+const wsurl = AmosConfig.wsURI.mqttURI;
 const enableScreenSaver = AmosConfig.screenSaverConf.enable;
 const delayTime = AmosConfig.screenSaverConf.delayTime;
 
@@ -87,13 +89,15 @@ class View3DRoot extends Component {
   };
 
   render() {
-    const wsURL = completeToken(SysWsURL.view3dws);
+    // const wsURL = completeToken(SysWsURL.view3dws);
     return (
-      <div className="sys-view-3d">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
-        <Three3dView onLoadCompleted={this.onLoadCompleted} hiddenScreenSaver={this.hiddenScreenSaver} />
-        {this.getScreenSaver()}
-      </div>
+      <MQTTProvider url={wsurl}>
+        <div className="sys-view-3d">
+          {/**<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> */}
+          <Three3dView onLoadCompleted={this.onLoadCompleted} hiddenScreenSaver={this.hiddenScreenSaver} />
+          {this.getScreenSaver()}
+        </div>
+      </MQTTProvider>
     );
   }
 }

src/view/bizview/situation/riskAssessment/IncidenceSeverityMatrix.js

@@ -2,7 +2,15 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import AmosEcharts from 'amos-viz/lib/echarts';
 import { queryRiskSourceMatrixAction } from './../../../../services/situationService';
+import { withSubscribeMQTT } from 'amos-mqtt';
 
+
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/incidenceSeverityMatrix'
+})
 /**
  * 发生率/严重度矩阵
  * @class IncidenceSeverityMatrix
@@ -22,6 +30,26 @@ class IncidenceSeverityMatrix extends Component {
   componentDidMount() {
     this.queryRiskSourceMatrix();
   }
+  /**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      dataList &&
+      dataList.map(e => {
+        this.classifyPoints(e);
+      });
+      let { dataAll, dangerPoints, safePoints, warnPoints } = this.state;
+      dataAll.push(dangerPoints);
+      dataAll.push(warnPoints);
+      dataAll.push(safePoints);
+      this.setState({
+        dataAll
+      });
+    }
+  }
 
   getOptions() {
     return {
@@ -200,7 +228,9 @@ class IncidenceSeverityMatrix extends Component {
   }
 }
 
-IncidenceSeverityMatrix.propTypes = {};
+IncidenceSeverityMatrix.propTypes = {
+  data: PropTypes.array
+};
 
 IncidenceSeverityMatrix.defaultProps = {
   data: {},

src/view/bizview/situation/riskAssessment/RiskDegreeHistogram.js

@@ -5,6 +5,7 @@ import AmosWebSocket from 'amos-websocket';
 import { Connect } from 'amos-framework';
 import { queryRiskSourceRpnCountAction } from './../../../../services/situationService';
 import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
+import { withSubscribeMQTT } from 'amos-mqtt';
 
 const eventConnect = Connect.eventConnect;
 const labelOption = {
@@ -18,6 +19,13 @@ const labelOption = {
   }
 };
 
+
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/riskDegreeHistogram'
+})
 /**
  * 风险度(RPN) TOP10
  *
@@ -38,10 +46,29 @@ class RiskDegreeHistogram extends Component {
   componentDidMount() {
     this.getBarViewContent();
   }
+/**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      let riskNameList = [];
+      let rpniData = [];
+      let rpnrData = [];
+      dataList && dataList.map(e => {
+        riskNameList.push(e.name);
+        rpniData.push(e.rpni);
+        rpnrData.push(e.rpn);
+      });
+      this.setState({
+        riskNameList: riskNameList.reverse(),
+        rpniData: rpniData.reverse(),
+        rpnrData: rpnrData.reverse()
+      });
+    }
 
-  componentWillReceiveProps() {
   }
-
   getBarViewContent() {
     queryRiskSourceRpnCountAction().then(
       data => {
@@ -129,17 +156,19 @@ class RiskDegreeHistogram extends Component {
 
   render() {
     const option = this.getOptions();
-    const wsURL = completeToken(SysWsURL.rulews);
+    // const wsURL = completeToken(SysWsURL.rulews);
     return (
       <div className="risk-degree-rpn-histogram">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
+        {/**<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> */}
         <AmosEcharts option={option} />
       </div>
     );
   }
 }
 
-RiskDegreeHistogram.propTypes = {};
+RiskDegreeHistogram.propTypes = {
+  data: PropTypes.array
+};
 
 RiskDegreeHistogram.defaultProps = {
   data: {},

src/view/bizview/situation/riskAssessment/RiskDegreePie.js

@@ -5,9 +5,17 @@ import AmosWebSocket from 'amos-websocket';
 import { Connect } from 'amos-framework';
 import { getRiskRiseUprateAction } from './../../../../services/situationService';
 import SysWsURL, { completeToken } from './../../../../consts/wsUrlConsts';
+import { withSubscribeMQTT } from 'amos-mqtt';
 
 const eventConnect = Connect.eventConnect;
 
+
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/riskDegreePie'
+})
 /**
  * 巡检点统计
  * @class MonthlyInspection
@@ -26,7 +34,25 @@ class RiskDegreePie extends Component {
   componentWillMount() {
     this.getRiskRiseUprate();
   }
+/**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      let { monthData, seasonData, yearData } = this.state;
+      monthData = dataList.month;
+      seasonData = dataList.season;
+      yearData = dataList.year;
+      this.setState({
+        monthData,
+        seasonData,
+        yearData
+      });
+    }
 
+  }
   getRiskRiseUprate() {
     getRiskRiseUprateAction().then(
       data => {
@@ -253,13 +279,13 @@ class RiskDegreePie extends Component {
 
   render() {
     let { monthData, seasonData, yearData } = this.state;
-    const wsURL = completeToken(SysWsURL.rulews);
+    // const wsURL = completeToken(SysWsURL.rulews);
     let monthOption = this.getMonthOptions('month', monthData);
     let seasonOption = this.getSeasonOptions('season', seasonData);
     let yearOption = this.getYearOptions('year', yearData);
     return (
       <div className="risk-degree-pie">
-        <AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug />
+        {/**<AmosWebSocket ref={node => this.aws = node} url={wsURL} onMessage={this.handleData} reconnect debug /> */}
         <div className="risk-degree-pie1">
           <AmosEcharts option={monthOption} />
           <span>本月风险上升率 |  {monthData.type0Rate}   {monthData.countOfType0}个</span>
@@ -277,7 +303,9 @@ class RiskDegreePie extends Component {
   }
 }
 
-RiskDegreePie.propTypes = {};
+RiskDegreePie.propTypes = {
+  data: PropTypes.array
+};
 
 RiskDegreePie.defaultProps = {
   data: {},