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

feat: 远程配置

Browse Source
This commit is contained in:
pengqiao1993
2026-03-24 08:49:46 +08:00
parent 41b5d50cd4
commit a7c986fa3e
2 changed files with 2180 additions and 2108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3698
common/form.js
View File

File diff suppressed because it is too large Load Diff

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

@ -1,290 +1,348 @@
<template> <template>
<view style="height: 100vh"> <view style="height: 100vh">
<view class=""> <view class="">
<u-navbar :title="$t('homePage.policy.policyTitle')" :is-back="true" title-color="#FFF" <u-navbar
:background="background" :border-bottom="false" :custom-back="toback"> :title="$t('homePage.policy.policyTitle')"
</u-navbar> :is-back="true"
</view> title-color="#FFF"
<view class="policeForm"> :background="background"
<u-form ref="form" labelPosition="top"> :border-bottom="false"
<view class="" v-for="(item, index) in smallArr" :key="index"> :custom-back="toback"
<view class="" v-if="item.type == 'Input'"> >
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop"> </u-navbar>
<u-input :key="'input_' + item.prop + '_' + item.inputKey" :min="item.min" :max="item.max" </view>
:value="item.value" type="number" :placeholder="item[`place_${lang}`]" <view class="policeForm">
@input="handleInput(item, $event)" /> <u-form ref="form" labelPosition="top">
</u-form-item> <view class="" v-for="(item, index) in smallArr" :key="index">
</view> <view class="" v-if="item.type == 'Input'">
<view class="" v-if="item.type == 'Switch'"> <u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop"> <u-input
<u-switch :size="40" v-model="item.value"></u-switch> :key="'input_' + item.prop + '_' + item.inputKey"
</u-form-item> :min="item.min"
</view> :max="item.max"
<view class="" v-if="item.type == 'Select'" @click="selectShow(item, index)"> :value="item.value"
<u-form-item :label="item[`label_${lang}`]" :prop="item.prop"> type="number"
<view class="" v-show="false"> :placeholder="item[`place_${lang}`]"
<u-input v-model="item.value" disabled @click="selectShow(item, index)" /> @input="handleInput(item, $event)"
</view> />
<view class=""> </u-form-item>
{{ item.selectLabel || $t("homePage.alarm.placeSelect") }} </view>
</view> <view class="" v-if="item.type == 'Switch'">
<u-select :key="item.prop" @confirm="confirm($event, item)" v-model="item.isShow" <u-form-item :label="item[`label_${lang}`]" :prop="item.prop">
:list="getSelectList(item)"></u-select> <u-switch :size="40" v-model="item.value"></u-switch>
</u-form-item> </u-form-item>
</view> </view>
</view> <view class="" v-if="item.type == 'Select'">
</u-form> <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="select-value" @click.stop="selectShow(item, index)">
{{ 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>
</u-form>
<button
<button @click="submitDevice" type="success" size="mini" style=" @click="submitDevice"
type="success"
size="mini"
style="
background-color: #009458; background-color: #009458;
padding: 10rpx 0; padding: 10rpx 0;
color: #fff; color: #fff;
margin-top: 40rpx; margin-top: 40rpx;
width: 100%; width: 100%;
"> "
{{ $t("homePage.mine.submit") }} >
</button> {{ $t("homePage.mine.submit") }}
</view> </button>
<u-toast ref="uToast" /> </view>
</view> <u-toast ref="uToast" />
</view>
</template> </template>
<script> <script>
import { import { formList } from "@/common/form.js";
formList import { Langlist } from "@/common/lang";
} from "@/common/form.js"; import mqtt from "@/uni_modules/leliven-mqtt/index.js";
import { import pako from "pako";
Langlist export default {
} from "@/common/lang"; data() {
import mqtt from "@/uni_modules/leliven-mqtt/index.js"; return {
import pako from "pako"; formList: formList,
export default { background: {
backgroundColor: "#0EA17E",
},
data() { mqttClient: null,
return { backData: {},
formList: formList, smallArr: [],
background: { user: {
backgroundColor: "#0EA17E", username: "admin", // 设置用户名
}, password: "zzkj@688737", // 设置密码
},
};
},
mqttClient: null, computed: {
backData: {}, lang() {
smallArr: [], return (
user: { Langlist.find((v) => v.value == this.$store.state.vuex_language).prop ||
username: 'admin', // 设置用户名 "en"
password: 'zzkj@688737' // 设置密码 );
} },
currentStation() {
}; return this.vuex_currentStation;
}, },
onLoad() { },
this.getSn() onLoad() {
}, this.getSn();
computed: { },
lang() {
return Langlist.find(v => v.value == this.$store.state.vuex_language).prop || 'en'
},
currentStation() {
return this.vuex_currentStation;
},
},
onShow() { methods: {
this.initmqttClient() getSn() {
}, this.$u.api.station
.getStationPostionSn({
stationId: this.currentStation.id,
})
.then((res) => {
this.sn = res.data[0]?.sn;
this.initmqttClient();
});
},
initmqttClient() {
console.log(this.lang);
console.log(this.currentStation);
// 初始化客户端连接地址
// #ifdef H5
let mqttClient = mqtt.connect("ws://1.95.170.86:8083/mqtt", {
...this.user,
});
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
let mqttClient = mqtt.connect("wx://1.95.170.86:8083/mqtt", {
...this.user,
});
// #endif
this.mqttClient = mqttClient;
// 连接MQ服务
mqttClient
.on("connect", (res) => {
console.log("连接成功");
// 订阅主题
mqttClient.subscribe(`1/ems/${this.sn}/control/response`, (err) => {
console.log(`1/app/${this.sn}/control/request`);
if (!err) {
// 订阅成功
mqttClient.publish(
`1/app/${this.sn}/control/request`,
JSON.stringify({
fun: "GET",
type: "WJ_Get_NewControlSystem",
content: 0,
}),
);
}
});
})
.on("reconnect", function () {
console.log("重新连接");
})
.on("error", function () {
console.log("连接失败");
})
.on("end", function () {
console.log("连接End");
})
.on("message", (topic, message) => {
console.log(this.decodeGzipBase64(message.toString()), "111");
let data = this.decodeGzipBase64(message.toString());
if (data.content && data.content.params) {
this.control(data.content);
} else if (data.content == 1) {
this.$refs.uToast.show({
title: this.$t("homePage.mine.operateSuccess"),
type: "success",
});
} else {
uni.showToast({
title: this.$t("homePage.mine.operateFail"),
icon: "none",
});
}
});
},
methods: { decodeGzipBase64(base64Str) {
getSn(){ // 1. base64 → Uint8Array
this.$u.api.station.getStationPostionSn({ const binaryStr = atob(base64Str);
stationId: this.currentStation.id const len = binaryStr.length;
}).then(res => { const bytes = new Uint8Array(len);
this.sn = res.data[0]?.sn
})
},
initmqttClient() {
console.log(this.lang)
console.log(this.currentStation)
// 初始化客户端连接地址
// #ifdef H5
let mqttClient = mqtt.connect('ws://1.95.170.86:8083/mqtt', {
...this.user
})
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
let mqttClient = mqtt.connect('wx://1.95.170.86:8083/mqtt', {
...this.user
})
// #endif
this.mqttClient = mqttClient
// 连接MQ服务
mqttClient.on('connect', function(res) {
console.log('连接成功')
// 订阅主题
mqttClient.subscribe(`1/ems/${this.sn}/control/response`, (err) => {
if (!err) {
// 订阅成功
mqttClient.publish(`1/app/${this.sn}/control/request`, JSON.stringify({
fun: 'GET',
type: 'WJ_Get_NewControlSystem',
content: 0
}))
}
})
}).on('reconnect', function() {
console.log('重新连接')
}).on('error', function() {
console.log('连接失败')
}).on('end', function() {
console.log('连接End')
}).on('message', (topic, message) => {
console.log(this.decodeGzipBase64(message.toString()))
let data = this.decodeGzipBase64(message.toString())
if (data.content && data.content.params) {
this.control(data.content)
} else
if (data.content == 1) {
this.$refs.uToast.show({
title: this.$t('homePage.mine.operateSuccess'),
type: 'success',
})
} else {
uni.showToast({
title: this.$t('homePage.mine.operateFail'),
icon: 'none'
})
}
}) for (let i = 0; i < len; i++) {
}, bytes[i] = binaryStr.charCodeAt(i);
}
decodeGzipBase64(base64Str) { // 2. gunzip 解压
// 1. base64 → Uint8Array const decompressed = pako.ungzip(bytes, {
const binaryStr = atob(base64Str); to: "string",
const len = binaryStr.length; });
const bytes = new Uint8Array(len); // 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) {
console.log(NewControlSystemShow_data, "123");
this.formList.forEach((item) => {
if (
item.type == "Switch" &&
NewControlSystemShow_data?.smallScreen?.includes(item.prop)
) {
this.$set(
item,
"value",
NewControlSystemShow_data?.params[item.prop] ? true : false,
);
}
if (
item.type == "Input" &&
NewControlSystemShow_data?.smallScreen?.includes(item.prop)
) {
this.$set(
item,
"value",
NewControlSystemShow_data?.params[item.prop] ?? item.default,
);
}
if (
item.type == "Select" &&
NewControlSystemShow_data?.smallScreen?.includes(item.prop)
) {
const newValue =
NewControlSystemShow_data?.params[item.prop] ?? item.default;
this.$set(item, "value", newValue);
item.selectLabel = item.selectArr.find((v) => v.value == newValue)?.[
`label_${this.lang}`
];
}
this.$set(item, "isShow", false);
});
this.backData = NewControlSystemShow_data;
this.smallArr = this.formList.filter((v) =>
NewControlSystemShow_data?.smallScreen.includes(v.prop),
);
console.log(this.smallArr, "234");
},
confirm(val, item) {
if (val && val.length > 0) {
this.$set(item, "value", val[0].value);
this.$set(item, "selectLabel", val[0].label);
}
this.$set(item, "isShow", false);
},
handleInput(item, value) {
try {
// u-input 组件 @input 事件直接传递 value 值，不是 event 对象
let iptval = String(value || "").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);
numVal = isNaN(numVal) ? 0 : numVal;
for (let i = 0; i < len; i++) { // 检查是否需要强制更新（值被限制）
bytes[i] = binaryStr.charCodeAt(i); let needForceUpdate = false;
} if (item.min !== undefined && item.min !== null && numVal < item.min) {
numVal = item.min;
needForceUpdate = true;
}
if (item.max !== undefined && item.max !== null && numVal > item.max) {
numVal = item.max;
needForceUpdate = true;
}
// 2. gunzip 解压 item.value = numVal;
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) {
console.log(NewControlSystemShow_data)
this.formList.forEach(item => {
if (item.type == "Switch") {
item.value = NewControlSystemShow_data?.params[item.prop] ? true : false
}
if (item.type == "Input") {
item.value = NewControlSystemShow_data?.params[item.prop] || item.default // 如果值被限制，强制重新渲染输入框
} if (needForceUpdate) {
this.$set(item, "inputKey", (item.inputKey || 0) + 1);
}
} catch (error) {
console.log("handleInput方法错误:", error);
}
},
if (item.type == 'Select') { toback() {
item.selectLabel = item.selectArr.find(v => v.value == item.value)?.[`label_${this.lang}`] uni.navigateBack();
} },
item.isShow = false selectShow(val, index) {
}) console.log(123);
this.backData = NewControlSystemShow_data this.$set(val, "isShow", true);
this.smallArr = this.formList.filter(v => NewControlSystemShow_data?.smallScreen.includes(v.prop)) },
}, submitDevice() {
confirm(val, item) { let smallParam = this.smallArr.reduce((pre, cur) => {
if (val && val.length > 0) { pre[cur.prop] = cur.type == "Switch" ? (cur.value ? 1 : 0) : cur.value;
item.value = val[0].value pre[cur.prop] = Number(pre[cur.prop]);
item.selectLabel = val[0].label return pre;
} }, {});
item.isShow = false
},
handleInput(item, value) {
try {
// u-input 组件 @input 事件直接传递 value 值，不是 event 对象
let iptval = String(value || '').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);
numVal = isNaN(numVal) ? 0 : numVal;
// 检查是否需要强制更新（值被限制） this.mqttClient.publish(
let needForceUpdate = false; `1/app/${this.sn}/control/request`,
if (item.min !== undefined && item.min !== null && numVal < item.min) { JSON.stringify({
numVal = item.min; fun: "SET",
needForceUpdate = true; type: "WJ_Set_NewControlSystem",
} content: {
if (item.max !== undefined && item.max !== null && numVal > item.max) { ...this.backData,
numVal = item.max; params: {
needForceUpdate = true; ...this.backData.params,
} ...smallParam,
},
item.value = numVal; },
}),
// 如果值被限制，强制重新渲染输入框 );
if (needForceUpdate) { },
this.$set(item, 'inputKey', (item.inputKey || 0) + 1); },
} };
} catch (error) {
console.log('handleInput方法错误:', error);
}
},
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.mqttClient.publish(`1/app/${this.sn}/control/request`, JSON.stringify({
fun: 'SET',
type: 'WJ_Set_NewControlSystem',
content: {
...this.backData,
params: {
...this.backData.params,
...smallParam
}
}
}))
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.policeForm { .policeForm {
margin: 22rpx; margin: 22rpx;
padding: 22rpx; padding: 22rpx;
background-color: #fff; background-color: #fff;
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1); box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
border-radius: 8rpx; border-radius: 8rpx;
} }
</style>
.select-value {
padding: 16rpx 0;
color: #333;
min-height: 60rpx;
}
</style>