代码提交
This commit is contained in:
pengqiao1993
268
pages/home-page/policy-Config/index.vue
Normal file
268
pages/home-page/policy-Config/index.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<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) {
|
||||
console.log(val)
|
||||
this.lang = Langlist.find(v => v.prop == val).value
|
||||
console.log(this.lang)
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user