smart_storage_app/pages/home-page/policy-Config/index.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>