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)"
              />
              <div></div>
            </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>
  </view>
</template>

<script>
import {
	formList
} from '@/common/form.js'
import {
	Langlist
} from '@/common/lang'
import pako from 'pako'
export default {
	data() {
		return {
			formList: formList,
			background: {
				backgroundColor: "#0EA17E",
			},
			lang: 'en',
			socketTask: null,
			backData: {},
			smallArr: [],
		}
	},
	computed: {
		language() {
			return this.vuex_language
		}
	},
	watch: {
		language: {
			handler(val) {
				this.lang = Langlist.find(v => v.prop == val).value
			},
			immediate: true,
			deep: true,
		},
	},
	onShow() {
		if (!this.socketTask) {
			this.init()
		}
		this.send({
			fun: 'GET',
			type: 'WJ_Get_NewControlSystem',
			content: 0
		})
		this.socketTask.onMessage(res => {
			let dataZip = this.decodeGzipBase64(res.data)
			if (dataZip.type == 'WJ_Get_NewControlSystem') {
				this.control(dataZip.content)
			}
		})
	},
	beforeDestroy() {
		this.socketTask = null
	},
	methods: {
		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);
			}
		},
		init() {
			this.socketTask = uni.connectSocket({
				url: "ws://192.168.1.136:9002", //仅为示例，并非真实接口地址。
				// url: 'wss://remotec.zzkj-cloud.com/ws/',
				complete: (res) => {
					
				},
			});
		},
		send(msg) {
			if (this.socketTask) {
				this.socketTask.send({
					data: JSON.stringify(msg || {}),
					complete: (res) => {
						console.log('消息发送成功:', res)
					}
				})
			} else {
				console.log('socketTask未初始化')
				this.init()
				setTimeout(() => {
					this.send(msg)
				}, 500)
			}
		},
		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.send({
				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>