mqtt安装

package.json

@@ -33,6 +33,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
     "md-editor-v3": "^4.9.0",
+    "mqtt": "^5.10.1",
     "nprogress": "0.2.0",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",

src/api/PBL/bigscreen.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+/**
+ * 大屏数据查询
+ * @param {查询条件} data
+ */
+export function SearchShelfLightInfomation() {
+  return request({
+    url: 'PBL/bigscreen/searchShelfLightInfomation',
+    method: 'get'
+  })
+}

src/store/modules/mqtt.js

@@ -0,0 +1,151 @@
+import mqtt from 'mqtt'
+const mqttStore = defineStore('mqtt', {
+  state: () => ({
+    // 是否链接
+    isLinked: false,
+    // 连接地址(测试)
+    demoUrl: '192.168.0.58',
+    // 连接地址(生产)
+    baseUrl: '192.0.0.24',
+    client: null,
+    options: {
+      // 清除 session
+      clean: true,
+      // mqtt协议版本号 默认为 4（v3.1.1）可以修改为 3（v3.1）和 5（v5.0）
+      protocolVersion: 4,
+      // 重连间隔时间
+      reconnectPeriod: 1000 * 5,
+      // 连接超时
+      connectTimeout: 1000 * 30,
+      // 认证信息
+      clientId: 'nbhxpbl' + Math.random().toString(16).substr(2, 8),
+      username: 'user',
+      password: 'public',
+      will: {
+        topic: 'web/out/will',
+        payload: `用户非正常断开链接`,
+        QoS: 0,
+        retain: 1
+      }
+    }
+  }),
+  actions: {
+    // 1-mqtt 2-mqtts 3-ws 4-wss 提取连接参数
+    getUrl(type = 'mqtt') {
+      if (type === 'mqtt') {
+        return `mqtt://${this.baseUrl}:1883`
+      } else if (type === 'mqtts') {
+        return `mqtts://${this.baseUrl}:8084`
+      } else if (type === 'ws') {
+        return `ws://${this.baseUrl}:8083/mqtt`
+      } else if (type === 'wss') {
+        return `wss://${this.baseUrl}:8084/mqtt`
+      }
+    },
+    create(type = 'mqtt', topic = null, clientId = 'nbhxpbl' + Math.random().toString(16).substr(2, 8)) {
+      try {
+        return new Promise((resolve, reject) => {
+          const that = this
+          if (process.env.NODE_ENV === 'development') {
+            this.baseUrl = this.demoUrl
+          }
+          this.options.clientId = clientId
+          this.client = mqtt.connect(this.getUrl(type), this.options)
+          this.client.on('connect', function (connack) {
+            console.log('=======mqtt链接成功=======')
+            that.isLinked = true
+            that.subscribe(topic)
+            resolve()
+          })
+          this.client.on('reconnect', function () {
+            console.log('============mqtt重连中==============')
+          })
+          this.client.on('close', function () {
+            console.log('=======mqtt断开链接=======')
+            that.isLinked = false
+          })
+          this.client.on('error', function (error) {
+            console.log('=======mqtt断开链接=======')
+            console.log('异常原因' + error)
+            that.isLinked = false
+          })
+        })
+      } catch (e) {
+        console.log(e)
+        this.isLinked = false
+        return null
+      }
+    },
+    checkClient() {
+      if (!this.isLinked || this.client === null) {
+        return false
+      }
+      return true
+    },
+    //topic可传入一个字符串
+    publish(topic = null, message = '', options = { qos: 0, retain: false }) {
+      try {
+        if (topic === null || !this.checkClient()) {
+          console.log('发布失败null')
+          return
+        }
+        this.client.publish(topic, message, options, function (error) {
+          if (error) {
+            console.log('发布失败' + error)
+          }
+        })
+      } catch (e) {
+        console.log('发布失败' + e)
+      }
+    },
+    //topic可传入一个字符串，或者一个字符串数组，也可以是一个 topic 对象
+    subscribe(topic = null, qos = 0) {
+      try {
+        if (topic === null || !this.checkClient()) {
+          console.log('订阅失败null')
+          return
+        }
+        this.client.subscribe(topic, { qos }, function (error, granted) {
+          if (error) {
+            console.log('订阅失败' + error)
+          } else {
+            console.log('订阅成功' + granted)
+          }
+        })
+      } catch (e) {
+        console.log('订阅失败' + e)
+      }
+    },
+    //topic可传入一个字符串，或者一个字符串数组，也可以是一个 topic 对象
+    unsubscribe(topic = null) {
+      try {
+        if (topic === null || !this.checkClient()) {
+          return
+        }
+        this.client.unsubscribe(topic, function (error) {
+          if (error) {
+            console.log('订阅失败' + error)
+          }
+        })
+      } catch (e) {
+        console.log('订阅失败' + e)
+      }
+    },
+    close() {
+      const that = this
+      this.client.end(false, {}, function () {
+        console.log('=======mqtt关闭链接=======')
+        that.isLinked = false
+      })
+    },
+    getMessageByJsonStr(payload) {
+      try {
+        return JSON.parse(payload.toString().replace(/\x00/g, ''))
+      } catch (e) {
+        return null
+      }
+    }
+  }
+})
+
+export default mqttStore

src/views/PBL/TVScreen/index.vue

@@ -54,6 +54,7 @@ const pblOptions = ref([])
 
 /// ========================= 仓库信息 =============================
 import { listStoragelocation } from '@/api/PBL/storagelocation.js'
+import { SearchShelfLightInfomation } from '@/api/PBL/bigscreen.js'
 const loading = ref(false)
 const total = ref(0)
 const dataList = ref([])
@@ -63,24 +64,33 @@ const queryParams = reactive({
 })
 const msg = ref('JK-003叫料')
 function getList() {
-  loading.value = true
-  listStoragelocation(queryParams).then((res) => {
-    const { code, data } = res
-    if (code == 200) {
-      // 数据模拟
-      let _list = data.result
-      dataList.value = _list
-      total.value = data.totalNum
-      loading.value = false
+  // loading.value = true
+  SearchShelfLightInfomation(queryParams).then((res) => {
+    console.log(res.data)
+  })
+  // listStoragelocation(queryParams).then((res) => {
+  //   const { code, data } = res
+  //   if (code == 200) {
+  //     // 数据模拟
+  //     let _list = data.result
+  //     dataList.value = _list
+  //     total.value = data.totalNum
+  //     loading.value = false
+  //   }
+  // })
+}
+// 灯状态变动
+function changeLight(rackCode, partnumber, status = 1) {
+  dataList.value.forEach((item) => {
+    if (item.rackCode === rackCode && item.partnumber === partnumber) {
+      item.status = status
     }
   })
 }
-// 关灯
+// 手动灭灯
 function closeLight(item) {
   if (item.status === 1) {
     item.status = 0
-  } else {
-    item.status = 1
   }
 }
 function getStatusClass(item) {
@@ -101,7 +111,38 @@ function boxSelectClass(num, index) {
 }
 getList()
 /// =============================================================
+/// ========================== MQTT ==============================
+import mqttStore from '@/store/modules/mqtt'
+const mqtt = mqttStore()
+function mqttCreate() {
+  mqtt.create('ws', 'nbhx/pbl/light/#')
+}
+function mqttClose() {
+  mqtt.close()
+}
+function mqttMessage() {
+  if (mqtt.checkClient()) {
+    mqtt.client.on('message', function (topic, payload, packet) {
+      console.log(`Topic: ${topic}, Message: ${payload.toString()}, QoS: ${packet.qos}`)
+      console.log(`getMessageByJsonStr`, mqtt.getMessageByJsonStr(payload))
+    })
+  } else {
+    console.log('mqtt 未连接 error')
+  }
+}
 
+onMounted(() => {
+  mqttCreate()
+  setTimeout(() => {
+    mqttMessage()
+  }, 1000)
+  console.log('mqtt组件已挂载')
+})
+onUnmounted(() => {
+  mqttClose()
+  console.log('mqtt组件已卸载')
+})
+/// ==================================================================
 /// ======================= 自动刷新 ========================
 // 自动获取数据
 const getTimerData = () => {