zzkj/smart_storage_app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mqtt

Browse Source
This commit is contained in:
pengqiao1993
2026-03-10 16:36:41 +08:00
parent 9b0d792dbf
commit e1798023c2
7 changed files with 1413 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

568
pages/home-page/policy-Config/index.vue
View File

@ -1,302 +1,296 @@
<template>
<view style="height: 100vh">
<view class="">
<u-navbar
title="策略下发"
:is-back="true"
:background="background"
:border-bottom="false"
:custom-back="toback"
>
</u-navbar>
</view>
<view class="policeForm">
<view class="" v-for="(item, index) in smallArr" :key="index">
<view class="" v-if="item.type == 'Input'">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<u-input
:min="item.min"
:max="item.max"
v-model.number="item.value"
type="number"
:placeholder="item[`place_${lang}`]"
@input="handleInput(item, $event)"
/>
</u-form-item>
</view>
<view class="" v-if="item.type == 'Switch'">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<u-switch :size="40" v-model="item.value"></u-switch>
</u-form-item>
</view>
<view
class=""
v-if="item.type == 'Select'"
@click="selectShow(item, index)"
>
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<view class="" v-show="false">
<u-input
v-model="item.value"
disabled
@click="selectShow(item, index)"
/>
</view>
<view class="">
{{ item.selectLabel || $t("homePage.alarm.placeSelect") }}
</view>
<u-select
:key="item.prop"
@confirm="confirm($event, item)"
v-model="item.isShow"
:list="getSelectList(item)"
></u-select>
</u-form-item>
</view>
</view>
<view style="height: 100vh">
<view class="">
<u-navbar title="策略下发" :is-back="true" :background="background" :border-bottom="false"
:custom-back="toback">
</u-navbar>
</view>
<view class="policeForm">
<view class="" v-for="(item, index) in smallArr" :key="index">
<view class="" v-if="item.type == 'Input'">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<u-input :min="item.min" :max="item.max" v-model.number="item.value" type="number"
:placeholder="item[`place_${lang}`]" @input="handleInput(item, $event)" />
</u-form-item>
</view>
<view class="" v-if="item.type == 'Switch'">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<u-switch :size="40" v-model="item.value"></u-switch>
</u-form-item>
</view>
<view class="" v-if="item.type == 'Select'" @click="selectShow(item, index)">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<view class="" v-show="false">
<u-input v-model="item.value" disabled @click="selectShow(item, index)" />
</view>
<view class="">
{{ item.selectLabel || $t("homePage.alarm.placeSelect") }}
</view>
<u-select :key="item.prop" @confirm="confirm($event, item)" v-model="item.isShow"
:list="getSelectList(item)"></u-select>
</u-form-item>
</view>
</view>
<button
@click="submitDevice"
type="success"
size="mini"
style="
<button @click="submitDevice" type="success" size="mini" style="
background-color: #009458;
padding: 10rpx 0;
color: #fff;
margin-top: 40rpx;
width: 100%;
"
>
{{ $t("homePage.mine.submit") }}
</button>
</view>
</view>
">
{{ $t("homePage.mine.submit") }}
</button>
</view>
<mqtt-client :options="mqttOptions" @connect="onConnect" @message="onMessage">
</mqtt-client>
</view>
</template>
<script>
import { formList } from "@/common/form.js";
import { Langlist } from "@/common/lang";
import pako from "pako";
import * as Paho from "@/static/lib/mqtt.js";
export default {
data() {
return {
formList: formList,
background: {
backgroundColor: "#0EA17E",
},
lang: 'en',
mqttClient: null,
backData: {},
smallArr: [],
};
},
computed: {
language() {
return this.$store.state.vuex_language
}
},
watch: {
language: {
handler(val) {
// console.log(val)
// this.lang.value = Langlist.find(v => v.prop == val)
// console.log(this.lang)
},
immediate: true,
deep: true,
},
},
onShow() {
if (!this.mqttClient) {
this.initMQTT()
}
},
beforeDestroy() {
if (this.mqttClient) {
this.mqttClient.disconnect()
this.mqttClient = null
}
},
methods: {
decodeGzipBase64(base64Str) {
// 1. base64 → Uint8Array
const binaryStr = atob(base64Str);
const len = binaryStr.length;
const bytes = new Uint8Array(len);
import {
formList
} from "@/common/form.js";
import {
Langlist
} from "@/common/lang";
import pako from "pako";
import mqttClient from '@/uni_modules/yh-wsmqtt/wsmqtt/components/mqtt-client.vue'
import * as Paho from "@/static/lib/mqtt.js";
export default {
components: {
mqttClient
},
data() {
return {
formList: formList,
background: {
backgroundColor: "#0EA17E",
},
lang: 'en',
mqttClient: null,
backData: {},
smallArr: [],
mqttOptions: {
host: '13.39.200.14',
port: 8083,
path: '/mqtt'
}
};
},
computed: {
language() {
return this.$store.state.vuex_language
}
},
watch: {
language: {
handler(val) {
// console.log(val)
// this.lang.value = Langlist.find(v => v.prop == val)
// console.log(this.lang)
},
immediate: true,
deep: true,
},
},
onShow() {
// if (!this.mqttClient) {
// this.initMQTT()
// }
},
beforeDestroy() {
// if (this.mqttClient) {
// this.mqttClient.disconnect()
// this.mqttClient = null
// }
},
methods: {
onConnect() {
console.log('连接成功')
},
onMessage(msg) {
console.log('收到消息:', msg)
},
decodeGzipBase64(base64Str) {
// 1. base64 → Uint8Array
const binaryStr = atob(base64Str);
const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
for (let i = 0; i < len; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
// 2. gunzip 解压
const decompressed = pako.ungzip(bytes, {
to: "string"
});
// 3. 转 JSON（如果是 JSON）
return JSON.parse(decompressed);
},
getSelectList(item) {
if (item.selectArr && item.selectArr.length > 0) {
return item.selectArr.map(option => ({
value: option.value.toString(),
label: option[`label_${this.lang}`] || option.label
}))
}
return []
},
control(NewControlSystemShow_data) {
this.formList.forEach(item => {
if (item.type == "Switch") {
item.value = NewControlSystemShow_data?.params[item.prop] ? true : false
} else {
item.value = NewControlSystemShow_data?.params[item.prop] || item.default
}
if (item.type == 'Select') {
item.selectLabel = item.selectArr.find(v => v.value == item.value)?.[`label_${this.lang}`]
}
item.isShow = false
})
this.backData = NewControlSystemShow_data
this.smallArr = this.formList.filter(v => NewControlSystemShow_data?.smallScreen.includes(v.prop))
},
confirm(val, item) {
if (val && val.length > 0) {
item.value = val[0].value
item.selectLabel = val[0].label
}
item.isShow = false
},
handleInput(item, event) {
try {
let inputValue = event.detail.value;
let iptval = String(inputValue).replace(/[^0-9.]/g, '');
const parts = iptval.split('.');
if (parts.length > 2) {
iptval = parts[0] + '.' + parts.slice(1).join('');
}
if (!iptval || iptval === '.') {
item.value = 0;
return;
}
let numVal = Number(iptval);
if (item.min !== undefined && item.min !== null) {
numVal = Math.max(numVal, item.min);
}
if (item.max !== undefined && item.max !== null) {
numVal = Math.min(numVal, item.max);
}
numVal = isNaN(numVal) ? 0 : numVal;
item.value = numVal;
} catch (error) {
console.log('handleInput方法错误:', error);
}
},
initMQTT() {
// 创建MQTT客户端实例
const clientId = 'client_' + Math.random().toString(36).substr(2, 9);
// 使用WebSocket连接方式
this.mqttClient = new Paho.Client('13.39.200.14', 8083, clientId);
// 设置回调函数
this.mqttClient.onConnectionLost = this.onConnectionLost;
this.mqttClient.onMessageArrived = this.onMessageArrived;
// 连接选项
const options = {
onSuccess: this.onConnect,
onFailure: this.onFail,
userName: 'admin',
password: 'zzkj@688737',
useSSL: false,
timeout: 30,
keepAliveInterval: 60,
cleanSession: true
};
// 连接到MQTT broker
this.mqttClient.connect(options);
},
onConnect() {
console.log('Connected to MQTT broker!');
// 订阅主题
this.mqttClient.subscribe('WJ_Get_NewControlSystem');
// 发送获取数据的消息
this.sendMQTTMessage('WJ_Get_NewControlSystem', JSON.stringify({
fun: 'GET',
type: 'WJ_Get_NewControlSystem',
content: 0
}));
},
onFail(error) {
console.error('Failed to connect:', error);
},
onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log('Connection lost: ' + responseObject.errorMessage);
}
},
onMessageArrived(message) {
console.log('Message arrived:', message.payloadString);
try {
// let data = JSON.parse(message.payloadString);
// if (data.type == 'WJ_Get_NewControlSystem') {
// this.control(data.content);
// }
} catch (error) {
console.log('解析MQTT消息错误:', error);
}
},
sendMQTTMessage(topic, payload) {
if (this.mqttClient && this.mqttClient.isConnected()) {
const message = new Paho.Message(payload);
message.destinationName = topic;
this.mqttClient.send(message);
console.log('MQTT消息发送成功:', payload);
} else {
console.log('MQTT客户端未连接');
if (!this.mqttClient) {
this.initMQTT();
}
setTimeout(() => {
this.sendMQTTMessage(topic, payload);
}, 1000);
}
},
toback() {
uni.navigateBack()
},
selectShow(val, index) {
val.isShow = true
},
submitDevice() {
let smallParam = this.smallArr.reduce((pre, cur) => {
pre[cur.prop] = cur.type == "Switch" ? cur.value ? 1 : 0 : cur.value
pre[cur.prop] = Number(pre[cur.prop])
return pre
}, {})
this.sendMQTTMessage("WJ_Set_NewControlSystem", JSON.stringify({
fun: 'SET',
type: 'WJ_Set_NewControlSystem',
content: {
...this.backData,
params: {
...this.backData.params,
...smallParam
}
}
}))
},
},
};
// 2. gunzip 解压
const decompressed = pako.ungzip(bytes, {
to: "string"
});
// 3. 转 JSON（如果是 JSON）
return JSON.parse(decompressed);
},
getSelectList(item) {
if (item.selectArr && item.selectArr.length > 0) {
return item.selectArr.map(option => ({
value: option.value.toString(),
label: option[`label_${this.lang}`] || option.label
}))
}
return []
},
control(NewControlSystemShow_data) {
this.formList.forEach(item => {
if (item.type == "Switch") {
item.value = NewControlSystemShow_data?.params[item.prop] ? true : false
} else {
item.value = NewControlSystemShow_data?.params[item.prop] || item.default
}
if (item.type == 'Select') {
item.selectLabel = item.selectArr.find(v => v.value == item.value)?.[`label_${this.lang}`]
}
item.isShow = false
})
this.backData = NewControlSystemShow_data
this.smallArr = this.formList.filter(v => NewControlSystemShow_data?.smallScreen.includes(v.prop))
},
confirm(val, item) {
if (val && val.length > 0) {
item.value = val[0].value
item.selectLabel = val[0].label
}
item.isShow = false
},
handleInput(item, event) {
try {
let inputValue = event.detail.value;
let iptval = String(inputValue).replace(/[^0-9.]/g, '');
const parts = iptval.split('.');
if (parts.length > 2) {
iptval = parts[0] + '.' + parts.slice(1).join('');
}
if (!iptval || iptval === '.') {
item.value = 0;
return;
}
let numVal = Number(iptval);
if (item.min !== undefined && item.min !== null) {
numVal = Math.max(numVal, item.min);
}
if (item.max !== undefined && item.max !== null) {
numVal = Math.min(numVal, item.max);
}
numVal = isNaN(numVal) ? 0 : numVal;
item.value = numVal;
} catch (error) {
console.log('handleInput方法错误:', error);
}
},
initMQTT() {
// 创建MQTT客户端实例
const clientId = 'client_' + Math.random().toString(36).substr(2, 9);
// 使用WebSocket连接方式
this.mqttClient = new Paho.Client('13.39.200.14', 8083, clientId);
// 设置回调函数
this.mqttClient.onConnectionLost = this.onConnectionLost;
this.mqttClient.onMessageArrived = this.onMessageArrived;
// 连接选项
const options = {
onSuccess: this.onConnect,
onFailure: this.onFail,
userName: 'admin',
password: 'zzkj@688737',
useSSL: false,
timeout: 30,
keepAliveInterval: 60,
cleanSession: true
};
// 连接到MQTT broker
this.mqttClient.connect(options);
},
onConnect() {
console.log('Connected to MQTT broker!');
// 订阅主题
this.mqttClient.subscribe('WJ_Get_NewControlSystem');
// 发送获取数据的消息
this.sendMQTTMessage('WJ_Get_NewControlSystem', JSON.stringify({
fun: 'GET',
type: 'WJ_Get_NewControlSystem',
content: 0
}));
},
onFail(error) {
console.error('Failed to connect:', error);
},
onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log('Connection lost: ' + responseObject.errorMessage);
}
},
onMessageArrived(message) {
console.log('Message arrived:', message.payloadString);
try {
// let data = JSON.parse(message.payloadString);
// if (data.type == 'WJ_Get_NewControlSystem') {
// this.control(data.content);
// }
} catch (error) {
console.log('解析MQTT消息错误:', error);
}
},
sendMQTTMessage(topic, payload) {
if (this.mqttClient && this.mqttClient.isConnected()) {
const message = new Paho.Message(payload);
message.destinationName = topic;
this.mqttClient.send(message);
console.log('MQTT消息发送成功:', payload);
} else {
console.log('MQTT客户端未连接');
if (!this.mqttClient) {
this.initMQTT();
}
setTimeout(() => {
this.sendMQTTMessage(topic, payload);
}, 1000);
}
},
toback() {
uni.navigateBack()
},
selectShow(val, index) {
val.isShow = true
},
submitDevice() {
let smallParam = this.smallArr.reduce((pre, cur) => {
pre[cur.prop] = cur.type == "Switch" ? cur.value ? 1 : 0 : cur.value
pre[cur.prop] = Number(pre[cur.prop])
return pre
}, {})
this.sendMQTTMessage("WJ_Set_NewControlSystem", JSON.stringify({
fun: 'SET',
type: 'WJ_Set_NewControlSystem',
content: {
...this.backData,
params: {
...this.backData.params,
...smallParam
}
}
}))
},
},
};
</script>
<style lang="scss" scoped>
.policeForm {
margin: 22rpx;
padding: 22rpx;
background-color: #fff;
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
border-radius: 8rpx;
}
</style>
.policeForm {
margin: 22rpx;
padding: 22rpx;
background-color: #fff;
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
border-radius: 8rpx;
}
</style>