Merge branch 'MqttView' into 'dev'

.umirc.js

@@ -99,7 +99,7 @@ export default {
       },
       {
         title: '通用',
-        children: ['ImageSelect', 'QuotaSelect'],
+        children: ['ImageSelect', 'QuotaSelect', 'MqttView'],
       },
       {
         title: '数据录入',

package.json

@@ -127,7 +127,9 @@
     }
   ],
   "dependencies": {
+    "@wisdom-components/Empty": "^1.0.1",
     "classnames": "^2.2.6",
-    "cross-spawn": "^7.0.3"
+    "cross-spawn": "^7.0.3",
+    "mqtt-client": "^1.0.11"
   }
 }

packages/MqttView/README.md

+# `@wisdom-components/MqttView`
+
+> TODO: description
+
+## Usage
+
+```
+const mqttView = require('@wisdom-components/MqttView');
+
+// TODO: DEMONSTRATE API
+```

packages/MqttView/__tests__/MqttView.test.js

+'use strict';
+
+const mqttView = require('..');
+
+describe('@wisdom-components/MqttView', () => {
+  it('needs tests');
+});

packages/MqttView/package.json

+{
+  "name": "@wisdom-components/mqttview",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/MqttView.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/MqttView/src/MqttView.md

+---
+title: MqttView - Mqtt连接
+nav:
+  title: 组件
+  path: /components
+group:
+  path: /
+---
+
+# PandaMqttView Mqtt 连接
+
+<code src="./demos/Base.js">
+
+## API
+
+| 参数        | 说明                | 类型                          | 默认值       |
+| ----------- | ------------------- | ----------------------------- | ------------ |
+| mqttIP      | Mqtt 连接 IP 和端口 | string                        | -            |
+| mqttPath    | Mqtt 连接路径       | string                        | /mqtt        |
+| mqttSsl     | 是否加密            | bool                          | false        |
+| siteCode    | 站点编码            | string                        | -            |
+| devices     | 设备编码集合        | array                         | []           |
+| callback    | 订阅的回调          | function(value,code,topic){ } | function(){} |
+| controlback | 控制的回调          | function(value,code,topic){ } | function(){} |
+
+## 方法
+
+| 名称 | 描述 |
+| --- | --- |
+| saveWaterMqtt() | Mqtt 连接并订阅数据 |
+| disSaveWaconnect() | Mqtt 连接断开 |
+| onSendWaMessageArrived(userName,password,callbackGuid,devicecode,tag,type,val,controlMode) | Mqtt 消息发送 |

packages/MqttView/src/demos/Base.js

+import React from 'react';
+import { Button } from 'antd';
+import PandaMqttView from '../index';
+
+class MqttDemo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      flag: true,
+    };
+    this.mqttView = new PandaMqttView({
+      mqttIP: 'emqttd10.panda-water.cn:443',
+      mqttPath: '/mqtt',
+      mqttSsl: true,
+      siteCode: 'site_shsys656',
+      devices: ['QSJZ00000001', 'SHBF00000001', 'SHJZ00000001'],
+      callback: () => {
+        this.setState({ flag: false });
+      },
+      controlback: () => {},
+    });
+  }
+  saveMqtt() {
+    this.mqttView.saveWaterMqtt();
+  }
+  destroyMqtt() {
+    this.mqttView.disSaveWaconnect();
+    this.setState({ flag: true });
+  }
+  render() {
+    return (
+      <>
+        <Button
+          type="primary"
+          key={'Button1'}
+          disabled={!this.state.flag}
+          onClick={this.saveMqtt.bind(this)}
+        >
+          Mqtt连接
+        </Button>
+        <Button
+          type="primary"
+          key={'Button2'}
+          disabled={this.state.flag}
+          onClick={this.destroyMqtt.bind(this)}
+          style={{ marginLeft: '10px' }}
+        >
+          Mqtt销毁
+        </Button>
+      </>
+    );
+  }
+}
+export default MqttDemo;

packages/MqttView/src/index.js

+import React, { useEffect } from 'react';
+import MqttClient from 'mqtt-client';
+import PropTypes from 'prop-types';
+class MqttView {
+  constructor(props) {
+    this.mqttIP = props.mqttIP;
+    this.mqttPath = props.mqttPath;
+    this.mqttSsl = props.mqttSsl;
+    this.siteCode = props.siteCode;
+    this.devices = props.devices;
+    this.callback = props.callback;
+    this.controlback = props.controlback;
+    this.flag = false;
+  }
+
+  //Mqtt第一步
+  saveWaterMqtt() {
+    const hostname = this.mqttIP.split(':')[0],
+      port = this.mqttIP.split(':')[1] * 1,
+      clientId = 'PandaWeb-' + this.createGuid(),
+      timeout = 50,
+      keepAlive = 60,
+      cleanSession = true,
+      ssl = this.mqttSsl,
+      path = this.mqttPath,
+      userName = 'admin',
+      password = 'public';
+    this.saveWaCount = 0;
+    this.saveWaClient = new MqttClient.Client(hostname, port, path, clientId);
+    this.saveWaOptions = {
+      invocationContext: {
+        host: hostname,
+        port: port,
+        path: path,
+        clientId: clientId,
+      },
+      timeout: timeout,
+      keepAliveInterval: keepAlive,
+      cleanSession: cleanSession,
+      useSSL: ssl,
+      userName: userName,
+      password: password,
+      onSuccess: this.onSaveWaConnect.bind(this),
+      onFailure: function (e) {
+        console.log(e);
+      },
+    };
+    //注册连接断开处理事件
+    this.saveWaClient.onConnectionLost = this.onSaveWaConnectionLost.bind(this);
+
+    //注册消息接收处理事件
+    this.saveWaClient.onMessageArrived = this.onSaveWaMessageArrived.bind(this);
+    this.saveWaClient.connect(this.saveWaOptions);
+  }
+
+  //消息接收方法
+  onSaveWaMessageArrived(message) {
+    this.onMessageArrived(message, 'saveWaType');
+  }
+
+  //主题建立连接
+  onSaveWaConnect() {
+    this.flag = true;
+    this.devices.forEach((item) => {
+      if (item) {
+        var saveWaTopic = this.siteCode + '/' + item.replace(/[#+]/g, '@');
+        this.saveWaClient.subscribe(saveWaTopic);
+      }
+    });
+    this.devices.forEach((item) => {
+      if (item) {
+        this.saveWaClient.subscribe(
+          'callback/control/' + this.siteCode + '/' + item.replace(/[#+]/g, '@') + '/#',
+        );
+      }
+    });
+  }
+
+  //主题断开连接
+  disSaveWaconnect() {
+    if (this.saveWaClient) {
+      this.flag = false;
+      // this.saveWaClient.disconnect();
+      if (this.saveWaClient.isConnected()) this.saveWaClient.disconnect();
+      if (this.saveWatester) {
+        clearInterval(this.saveWatester);
+        this.saveWatester = null;
+      }
+    }
+  }
+
+  //主题掉线重连接
+  onSaveWaConnectionLost() {
+    if (this.flag) this.saveWaClient.connect(this.saveWaOptions);
+    this.saveWatester = setInterval(() => {
+      if (this.saveWaClient.isConnected()) {
+        clearInterval(this.saveWatester);
+        this.saveWatester = null;
+      } else {
+        this.saveWaClient.connect(this.saveWaOptions);
+      }
+    }, 1000);
+  }
+
+  //消息接收
+  onMessageArrived(message, infoType) {
+    var topic = message.topic;
+    var code = topic.split('/')[topic.split('/').length - 1];
+    if (topic.indexOf('callback/control/' + this.siteCode) > -1) {
+      this.controlback(message.payloadString, code, topic);
+      return false;
+    }
+    this.callback(message.payloadString, code, topic);
+  }
+
+  //消息发送
+  onSendWaMessageArrived(
+    userName,
+    password,
+    callbackGuid,
+    devicecode,
+    tag,
+    type,
+    val,
+    controlMode,
+  ) {
+    var info = {
+      userName: userName,
+      password: password,
+      callbackGuid: callbackGuid,
+      type: '',
+      operateType: type,
+      controlValue: val || String(val) != '' ? val : '',
+      sitecode: this.siteCode,
+      devicecode: devicecode,
+      controlMode: controlMode ? controlMode : '',
+      tag: tag,
+    };
+    var message = new MqttView.Message(JSON.stringify(info));
+    message.destinationName = 'setdata/' + this.siteCode + '/' + devicecode;
+    this.saveWaClient.send(message);
+  }
+
+  //生成GUID
+  createGuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
+      .replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0,
+          v = c == 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      })
+      .toUpperCase();
+  }
+}
+
+MqttView.propTypes = {
+  mqttIP: PropTypes.string,
+  mqttPath: PropTypes.string,
+  mqttSsl: PropTypes.bool,
+  siteCode: PropTypes.string,
+  devices: PropTypes.array,
+  callback: PropTypes.func,
+  controlback: PropTypes.func,
+};
+
+MqttView.defaultProps = {
+  mqttIP: '',
+  mqttPath: '/mqtt',
+  mqttSsl: false,
+  siteCode: '',
+  devices: [],
+  callback: () => {},
+  controlback: () => {},
+};
+
+export default MqttView;