From f69041d1d906b9ec33888aa6d4c68a9603550ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= Date: Fri, 1 Nov 2024 17:08:20 +0800 Subject: [PATCH] =?UTF-8?q?mqtt=E5=AE=89=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/api/PBL/bigscreen.js | 12 +++ src/store/modules/mqtt.js | 151 +++++++++++++++++++++++++++++++ src/views/PBL/TVScreen/index.vue | 65 ++++++++++--- 4 files changed, 217 insertions(+), 12 deletions(-) create mode 100644 src/api/PBL/bigscreen.js create mode 100644 src/store/modules/mqtt.js diff --git a/package.json b/package.json index a388f46..e7d2e69 100644 --- a/package.json +++ b/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", diff --git a/src/api/PBL/bigscreen.js b/src/api/PBL/bigscreen.js new file mode 100644 index 0000000..b9e9220 --- /dev/null +++ b/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' + }) +} diff --git a/src/store/modules/mqtt.js b/src/store/modules/mqtt.js new file mode 100644 index 0000000..5cc2f0f --- /dev/null +++ b/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 diff --git a/src/views/PBL/TVScreen/index.vue b/src/views/PBL/TVScreen/index.vue index 7c7b400..79d63b6 100644 --- a/src/views/PBL/TVScreen/index.vue +++ b/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 = () => {