mqtt完善

vue/src/views/iot/device/device-edit.vue

@@ -80,7 +80,7 @@
                         </el-form-item>
                     </el-col>
 
-                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
+                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                         <div style="border:1px solid #dfe4ed;border-radius:5px;padding:5px;text-align:center;line-height:400px;">
                             <div id="map" style="height:435px;width:100%;">地图展示区域，新增后显示</div>
                         </div>

vue/src/views/iot/device/index.vue

@@ -197,7 +197,9 @@ import {
 export default {
     name: "Device",
     dicts: ['iot_device_status', 'iot_is_enable'],
-    components: {mqttClient},
+    components: {
+        mqttClient
+    },
     data() {
         return {
             // 实时监测间隔
@@ -337,11 +339,9 @@ export default {
                 // 发布
                 this.publish = {
                     topic: topic,
-                    message: message
+                    message: message,
+                    name: model.name
                 };
-                if (model.name != "") {
-                    this.$modal.notifySuccess("[ " + model.name + " ] 指令发送成功");
-                }
             }
         },
         /** 接收到Mqtt回调 */

vue/src/views/iot/device/mqtt-client.vue

@@ -4,9 +4,6 @@
 
 <script>
 import mqtt from 'mqtt'
-import {
-    cacheJsonThingsModel
-} from "@/api/iot/model";
 import {
     getToken
 } from "@/utils/auth";
@@ -26,7 +23,7 @@ export default {
     watch: {
         // 获取到父组件传递的值
         publish: function (val, oldVal) {
-            this.mqttPublish(val.topic, val.message);
+            this.mqttPublish(val.topic, val.message,val.name);
         },
         subscribes: function (val, oldVal) {
             this.connectMqtt(val);
@@ -80,9 +77,10 @@ export default {
         },
 
         /** 发布消息 */
-        mqttPublish(topic, message) {
+        mqttPublish(topic, message, name) {
             if (!this.client.connected) {
                 console.log('客户端未连接')
+                this.$modal.notifyError("Mqtt客户端未连接");
                 return
             }
             this.client.publish(topic, message, {
@@ -91,6 +89,7 @@ export default {
                 if (!err) {
                     console.log('成功发布主题：' + topic)
                     console.log('主题内容：' + message);
+                    this.$modal.notifySuccess("[ " + name + " ] 指令发送成功");
                 }
             })
         },
@@ -110,7 +109,8 @@ export default {
         mqttError() {
             this.client.on('error', (error) => {
                 console.log('连接失败：', error)
-                this.client.end()
+                this.$modal.notifyError("Mqtt客户端连接失败");
+                this.client.end();
             })
         },
         /** 取消订阅 */
@@ -123,7 +123,8 @@ export default {
         unconnectMqtt() {
             this.client.end()
             this.client = null
-            console.log('服务器已断开连接！')
+            console.log('服务器已断开连接！');
+            this.$modal.notifyError("Mqtt服务器已断开连接！");
         },
         /** 监听服务器重新连接 */
         reconnectMqtt() {

vue/src/views/iot/device/running-status.vue

@@ -181,7 +181,9 @@ import mqttClient from './mqtt-client.vue'
 export default {
     name: "running-status",
     dicts: ['iot_yes_no'],
-    components: {mqttClient},
+    components: {
+        mqttClient
+    },
     props: {
         device: {
             type: Object,
@@ -302,10 +304,8 @@ export default {
                 // 发布
                 this.publish = {
                     topic: topic,
-                    message: message
+                    message: message,
-                }
+                    name: model.name
-                if (model) {
-                    this.$modal.notifySuccess("[ " + model.name + " ] 指令发送成功");
                 }
             }
         },