厂区风险态势图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,34 +18,36 @@ class RiskAssessment extends Component {
 
   render() {
     return (
-      <div className="risk-assessment-view" style={{ width: '100%', height: '100%' }}>
-        <Layout>
+      <MQTTProvider url={wsurl}>
+        <div className="risk-assessment-view" style={{ width: '100%', height: '100%' }}>
           <Layout>
-            <Header>
-              <div className="risk-assessment-view-situation">厂区风险态势图</div>
-              <div style={{ margin: '20px' }}>
-                <SituationMap />
-              </div>
-            </Header>
-            <Content>
-              <Layout className="risk-assessment-view-content">
-                <Sider>
-                  <div className="risk-assessment-view-situation">风险度(RPN)上升百分比</div>
-                  <RiskDegreePie />
-                </Sider>
-                <Content className='risk-assessment-view-situation-matrix' >
-                  <div className="risk-assessment-view-situation">发生率/严重度矩阵</div>
-                  <IncidenceSeverityMatrix />
-                </Content>
-              </Layout>
-            </Content>
+            <Layout>
+              <Header>
+                <div className="risk-assessment-view-situation">厂区风险态势图</div>
+                <div style={{ margin: '20px' }}>
+                  <SituationMap />
+                </div>
+              </Header>
+              <Content>
+                <Layout className="risk-assessment-view-content">
+                  <Sider>
+                    <div className="risk-assessment-view-situation">风险度(RPN)上升百分比</div>
+                    <RiskDegreePie />
+                  </Sider>
+                  <Content className='risk-assessment-view-situation-matrix' >
+                    <div className="risk-assessment-view-situation">发生率/严重度矩阵</div>
+                    <IncidenceSeverityMatrix />
+                  </Content>
+                </Layout>
+              </Content>
+            </Layout>
+            <Sider className='risk-assessment-view-situation-histogram' >
+              <div className="risk-assessment-view-situation">风险度(RPN) TOP10</div>
+              <RiskDegreeHistogram />
+            </Sider>
           </Layout>
-          <Sider className='risk-assessment-view-situation-histogram' >
-            <div className="risk-assessment-view-situation">风险度(RPN) TOP10</div>
-            <RiskDegreeHistogram />
-          </Sider>
-        </Layout>
-      </div>
+        </div>
+      </MQTTProvider>
     );
   }
 }