smart_storage_app/pages/home-page/policy-Config/index.vue

<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>

			<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>
		<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 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);
				}

				// 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>