From 0a59ea9478f63f6386f84b865a820bbee0d5bac4 Mon Sep 17 00:00:00 2001 From: kerwincui <164770707@qq.com> Date: Fri, 13 May 2022 00:48:19 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=84=E5=88=99=E5=BC=95=E6=93=8E=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/views/index.vue | 12 +- vue/src/views/iot/clientDetails/index.vue | 2 +- vue/src/views/iot/device/mqtt-client.vue | 5 +- vue/src/views/iot/emqx/client.vue | 5 +- vue/src/views/iot/emqx/resource.vue | 31 +-- vue/src/views/iot/emqx/rule.vue | 273 +++++++++------------- 6 files changed, 139 insertions(+), 189 deletions(-) diff --git a/vue/src/views/index.vue b/vue/src/views/index.vue index 14d6b0de..831fe857 100644 --- a/vue/src/views/index.vue +++ b/vue/src/views/index.vue @@ -5,12 +5,12 @@
物美智能生活物联网平台
-
个人用户
-
可用于个人学习和使用，非商业用途。不提供移动端源码，后期可以通过两种方式使用移动端：1.免费托管设备到平台；2.使用移动端开放的接口连接自己搭建的系统。
+
个人用户：
+
可用于个人学习和使用，非商业用途。不提供移动端源码，后期可以通过两种方式使用移动端：1.免费托管设备到平台；2.使用移动端开放的接口连接自己搭建的系统。
-
企业用户
-
可用于商业用途，并提供移动端源码，通过赞助方式获取企业授权。但是不能低价或批量转售源码，不能随意分发源码。目前赞助费为1500元，项目不断完善后会对应增加费用。
+
企业用户：
+
可用于商业用途，并提供移动端源码，通过赞助方式获取企业授权。但是不能低价或批量转售源码，不能随意分发源码。目前赞助费为1500元，项目不断完善后会对应增加费用。
 @@ -22,13 +22,13 @@
微信扫一扫，查看小程序端
-
官方网站
+
官方网站
www.wumei.live
-
系统源码
+
系统源码
Gitee源码 Github源码 diff --git a/vue/src/views/iot/clientDetails/index.vue b/vue/src/views/iot/clientDetails/index.vue index 9e541073..5cbed3d5 100644 --- a/vue/src/views/iot/clientDetails/index.vue +++ b/vue/src/views/iot/clientDetails/index.vue @@ -13,7 +13,7 @@ 搜索 重置 - 该功能暂不可用 + 该功能暂不可用,后面版本发布 diff --git a/vue/src/views/iot/device/mqtt-client.vue b/vue/src/views/iot/device/mqtt-client.vue index 57b721d6..59be124e 100644 --- a/vue/src/views/iot/device/mqtt-client.vue +++ b/vue/src/views/iot/device/mqtt-client.vue @@ -38,12 +38,13 @@ export default { methods: { /** 连接Mqtt */ connectMqtt(subscribeTopics) { + let randomClientId='web-' + Math.random().toString(16).substr(2); let options = { username: "wumei-smart", password: getToken(), cleanSession: false, keepAlive: 30, - clientId: 'web-' + Math.random().toString(16).substr(2), + clientId: randomClientId, connectTimeout: 10000 } // 配置Mqtt地址 @@ -52,7 +53,7 @@ export default { console.log("mqtt地址：", url); this.client = mqtt.connect(url, options); this.client.on("connect", (e) => { - console.log("成功连接服务器:", e); + console.log("客户端："+randomClientId+"，成功连接服务器:", e); // 订阅主题 if (subscribeTopics != '' && subscribeTopics.length > 0) { this.client.subscribe(subscribeTopics, { diff --git a/vue/src/views/iot/emqx/client.vue b/vue/src/views/iot/emqx/client.vue index eb7df660..469372dc 100644 --- a/vue/src/views/iot/emqx/client.vue +++ b/vue/src/views/iot/emqx/client.vue @@ -2,8 +2,8 @@
- - + + 搜索 @@ -185,6 +185,7 @@ export default { queryParams: { _limit: 10, _page: 1, + clientid:null, }, // 表单参数 form: {}, diff --git a/vue/src/views/iot/emqx/resource.vue b/vue/src/views/iot/emqx/resource.vue index 1e850c38..1fda80ac 100644 --- a/vue/src/views/iot/emqx/resource.vue +++ b/vue/src/views/iot/emqx/resource.vue @@ -12,27 +12,24 @@ - + - +
@@ -96,22 +93,18 @@ - - - - - {{ statusForm.status[0].node }} - 可用 - 不可用 - 重新连接 - - - + + + {{ statusForm.status[0].node }} + 可用 + 不可用 + 重新连接 + - +
diff --git a/vue/src/views/iot/emqx/rule.vue b/vue/src/views/iot/emqx/rule.vue index be132257..97067047 100644 --- a/vue/src/views/iot/emqx/rule.vue +++ b/vue/src/views/iot/emqx/rule.vue @@ -10,37 +10,34 @@ - + - + - + - + - + @@ -48,7 +45,7 @@ - +
@@ -107,20 +104,18 @@ - - - -
- -

条件

-
使用 SQL 定义规则条件与数据处理方式
- -
- - + + +
+ 条件 + 使用 SQL 定义规则条件与数据处理方式 +
+ + + 规则 SQL： - + 备注： @@ -129,106 +124,103 @@ SQL测试： - - - + 自定义模拟数据进行 SQL 命令测试，仅用于测试功能 -
- - username： - - - - topic： - - - - qos： - - - - clientid： - - - - payload： - - - - 测 试 - - - 测试结果： - - -
+ - +
-
编写 SQL 进行条件过滤与数据处理
-
-
-
-
-

- EMQ X - 在消息发布、事件触发时将触发规则引擎，满足触发条件的规则将执行各自的 - SQL 语句筛选并处理消息和事件的上下文信息。 -

-

- 规则引擎借助响应动作可将特定主题的消息处理结果存储到数据库，发送到 - HTTP Server，转发到消息队列 Kafka 或 - RabbitMQ，重新发布到新的主题甚至是另一个 Broker - 集群中，每个规则可以配置多个响应动作。 -

-

- 1. 选择发布到 't/#' 主题的消息，并筛选出全部字段： -

-
- SELECT * FROM "t/#" -
-

- 2. 选择发布到 't/a' 主题的消息，并从 JSON - 格式的消息内容中筛选出 "x" 字段： -

-
- SELECT payload.x as x FROM "t/a" -
-

- 规则引擎使用 $events/ 开头的虚拟主题（事件主题）处理 - EMQ X - 内置事件，内置事件提供更精细的消息控制和客户端动作处理能力，可用在 - QoS 1 QoS 2 的消息抵达记录、设备上下线记录等业务中。 -

-

- 1. 选择客户端连接事件，筛选 Username 为 'emqx' - 的设备并获取连接信息： -

-
- SELECT clientid, connected_at FROM - "$events/client_connected" WHERE username = - 'emqx' -
-

规则引擎和 SQL 语句的详细教程参见 EMQ X 文档。

-
-
+
编写 SQL 进行条件过滤与数据处理
+
+

+ EMQ X + 在消息发布、事件触发时将触发规则引擎，满足触发条件的规则将执行各自的 + SQL 语句筛选并处理消息和事件的上下文信息。 +

+

+ 规则引擎借助响应动作可将特定主题的消息处理结果存储到数据库，发送到 + HTTP Server，转发到消息队列 Kafka 或 + RabbitMQ，重新发布到新的主题甚至是另一个 Broker + 集群中，每个规则可以配置多个响应动作。 +

+

+ 1. 选择发布到 't/#' 主题的消息，并筛选出全部字段： +

+
+ SELECT * FROM "t/#"
+

+ 2. 选择发布到 't/a' 主题的消息，并从 JSON + 格式的消息内容中筛选出 "x" 字段： +

+
+ SELECT payload.x as x FROM "t/a" +
+

+ 规则引擎使用 $events/ 开头的虚拟主题（事件主题）处理 + EMQ X + 内置事件，内置事件提供更精细的消息控制和客户端动作处理能力，可用在 + QoS 1 QoS 2 的消息抵达记录、设备上下线记录等业务中。 +

+

+ 1. 选择客户端连接事件，筛选 Username 为 'emqx' + 的设备并获取连接信息： +

+
+ SELECT clientid, connected_at FROM + "$events/client_connected" WHERE username = + 'emqx' +
+

规则引擎和 SQL 语句的详细教程参见 EMQ X 文档。

- - + + + + username + + + + topic + + + + payload + + + + + + clientid + + + + qos + + + + 测试结果： + + + + 测 试 + + + + + +
- -

响应动作

-
处理命中规则的消息
- +
+ 响应动作 + 处理命中规则的消息 +
@@ -254,10 +246,10 @@ - + - + 动作： @@ -486,8 +478,7 @@ export default { //检查 (调试)表单参数 inspectForm: {}, //消息重新发布表单参数 - republishForm: { - }, + republishForm: {}, //桥接数据到 MQTT Broker表单参数 data_to_mqtt_broker_Form: { resources: [], @@ -672,9 +663,9 @@ export default { this.$refs[formName].validate((valid) => { if (valid) { param.$resource = this.data_to_mqtt_broker_Form.resourceId; - if(this.data_to_mqtt_broker_Form.params.payload_tmpl != null){ + if (this.data_to_mqtt_broker_Form.params.payload_tmpl != null) { param.payload_tmpl = - this.data_to_mqtt_broker_Form.params.payload_tmpl.default; + this.data_to_mqtt_broker_Form.params.payload_tmpl.default; } action.params = param; action.name = this.data_to_mqtt_broker_Form.name; @@ -689,9 +680,9 @@ export default { this.$refs[formName].validate((valid) => { if (valid) { param.$resource = this.data_to_webserver_Form.resourceId; - if(this.data_to_webserver_Form.params.payload_tmpl != null){ + if (this.data_to_webserver_Form.params.payload_tmpl != null) { param.payload_tmpl = - this.data_to_webserver_Form.params.payload_tmpl.default; + this.data_to_webserver_Form.params.payload_tmpl.default; } action.params = param; action.name = this.data_to_webserver_Form.name; @@ -762,54 +753,18 @@ export default { .sql-tips { border: 4px dashed #d8d8d8; color: #71737d; -} - -.sql-tips { - padding: 20px 0; + font-size: 12px; + padding: 10px; border-radius: 4px; - font-size: 15px; - max-height: 480px; -} - -.sql-tips .title { - padding: 0 20px 12px; -} - -.el-scrollbar { + height: 510px; overflow: hidden; - position: relative; -} - -.sql-tips .doc-wrapper { - max-height: 400px; - padding: 0 20px; -} - -.sql-tips .el-scrollbar__wrap { - overflow-x: hidden; -} - -.el-scrollbar__wrap { - overflow: scroll; - height: 100%; -} - -p { - display: block; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0px; - margin-inline-end: 0px; + margin-right: -10px; } .code { line-height: 1.4; padding: 6px; border-radius: 4px; - margin-bottom: 12px; -} - -.code { background-color: hsla(0, 0%, 87%, 0.8); }