厂区风险态势图mqtt

amos.config.js

@@ -14,7 +14,8 @@
     // websocket 地址
     wsURI: {
       baseURI: 'ws://172.16.10.91:10600/',
-      ruleURI: 'ws://172.16.3.63:8083/'
+      ruleURI: 'ws://172.16.10.85:8083/',
+      mqttURI: 'ws://172.16.10.85:8083/mqtt'
     },
     // 外部链接地址
     outterURI: {

package.json

@@ -35,6 +35,7 @@
     "amos-dll": "^2.0.2",
     "amos-gojs": "^2.0.15",
     "amos-icon": "^1.0.3",
+    "amos-mqtt": "^1.0.1",
     "amos-pluggable": "^1.0.6",
     "amos-processor": "^2.x",
     "amos-richtext": "^1.0.1",

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

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import AmosWebSocket from 'amos-websocket';
 import { Connect } from 'amos-framework';
 import SvgToolkit from 'amos-viz/lib/svg/SvgToolkit';
 import * as endConf from 'amos-processor/lib/config/endconf';
+import { withSubscribeMQTT } from 'amos-mqtt';
 import ynSitMap from './datas/yn/sit-map';
 import ynInfo from './datas/yn/info';
 import ynText from './datas/yn/text';
@@ -140,6 +140,14 @@ switch (projectName) {
     imgUrl = imgStatic.biz.shmMap;
 }
 
+
+
+/**
+ * 订阅主题
+ */
+@withSubscribeMQTT({
+  topic: '/data/refresh/situationMap'
+})
 /**
  * 态势图
  * @desciption created by af sinppets
@@ -165,6 +173,35 @@ export default class SituationMap extends Component {
     this.getRegionAreaRpn();
   }
 
+  /**
+   * 获取订阅信息并修改
+   * @param {*} nextProps
+   */
+  componentWillReceiveProps({ data }) {
+    if (data) {
+      const { topic ,dataList } = data;
+      const riskName = this.state.riskName;
+      let changeValue = {};
+      let changeColor = {};
+      for (let k in riskSourceIdMap) {
+        changeValue[k] = 0;
+        changeColor[k] = colorEnum[0];
+        if (riskSourceIdMap[k] !== -1) {
+          dataList.forEach(d => {
+            if (riskSourceIdMap[k] === d.id) {
+              changeValue[k] = d.rpni;
+              changeColor[k] = colorEnum[d.level];
+              riskName[k] = d.name;
+            }
+          });
+        }
+      }
+      this.updateData(changeValue);
+      this.updateLevel(changeColor);
+      this.setState(riskName);
+    }
+  }
+
   onItemClick = (event) => {
     console.log(event.target);
   }
@@ -353,7 +390,7 @@ export default class SituationMap extends Component {
     const { pointedChildName } = this.state;
     return (
       <div style={{ position: 'relative' }}>
-        <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 /> */}
         <SvgToolkit
           ref={node => this.toolkitRef = node}
           className="situation-map"
@@ -373,5 +410,6 @@ export default class SituationMap extends Component {
 }
 
 SituationMap.propTypes = {
+  data: PropTypes.array,
   subscribe: PropTypes.func
 };

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

@@ -4,10 +4,13 @@ import { Layout } from 'amos-framework';
 import RiskDegreePie from './RiskDegreePie';
 import RiskDegreeHistogram from './RiskDegreeHistogram';
 import IncidenceSeverityMatrix from './IncidenceSeverityMatrix';
+import { MQTTProvider } from 'amos-mqtt';
 import SituationMap from './SituationMap';
+import * as endConf from 'amos-processor/lib/config/endconf';
 
 const { Header, Content, Sider } = Layout;
-
+const AmosConfig = endConf.AmosConfig;
+const wsurl = AmosConfig.wsURI.mqttURI;
 /**
  * 风险评估
  */
@@ -15,6 +18,7 @@ class RiskAssessment extends Component {
 
   render() {
     return (
+      <MQTTProvider url={wsurl}>
         <div className="risk-assessment-view" style={{ width: '100%', height: '100%' }}>
           <Layout>
             <Layout>
@@ -43,6 +47,7 @@ class RiskAssessment extends Component {
             </Sider>
           </Layout>
         </div>
+      </MQTTProvider>
     );
   }
 }