349 lines
9.8 KiB
Vue
349 lines
9.8 KiB
Vue
<template>
|
||
<view style="height: 100vh">
|
||
<view class="">
|
||
<u-navbar
|
||
:title="$t('homePage.policy.policyTitle')"
|
||
:is-back="true"
|
||
title-color="#FFF"
|
||
:background="background"
|
||
:border-bottom="false"
|
||
:custom-back="toback"
|
||
>
|
||
</u-navbar>
|
||
</view>
|
||
<view class="policeForm">
|
||
<u-form ref="form" labelPosition="top">
|
||
<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
|
||
:key="'input_' + item.prop + '_' + item.inputKey"
|
||
:min="item.min"
|
||
:max="item.max"
|
||
:value="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'">
|
||
<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
|
||
@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>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { formList } from "@/common/form.js";
|
||
import { Langlist } from "@/common/lang";
|
||
import mqtt from "@/uni_modules/leliven-mqtt/index.js";
|
||
import pako from "pako";
|
||
export default {
|
||
data() {
|
||
return {
|
||
formList: formList,
|
||
background: {
|
||
backgroundColor: "#0EA17E",
|
||
},
|
||
|
||
mqttClient: null,
|
||
backData: {},
|
||
smallArr: [],
|
||
user: {
|
||
username: "admin", // 设置用户名
|
||
password: "zzkj@688737", // 设置密码
|
||
},
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
lang() {
|
||
return (
|
||
Langlist.find((v) => v.value == this.$store.state.vuex_language).prop ||
|
||
"en"
|
||
);
|
||
},
|
||
currentStation() {
|
||
return this.vuex_currentStation;
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.getSn();
|
||
},
|
||
|
||
methods: {
|
||
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",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
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) {
|
||
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;
|
||
|
||
// 检查是否需要强制更新（值被限制）
|
||
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;
|
||
}
|
||
|
||
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) {
|
||
console.log(123);
|
||
this.$set(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>
|
||
|
||
<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;
|
||
}
|
||
|
||
.select-value {
|
||
padding: 16rpx 0;
|
||
color: #333;
|
||
min-height: 60rpx;
|
||
}
|
||
</style>
|