295 lines
7.1 KiB
Vue
295 lines
7.1 KiB
Vue
<template>
|
|
<view class="ability-box">
|
|
<view class="attr-list">
|
|
<view class="attr-list-item" v-for="(item,index) in dataList" :key="index">
|
|
<view class="checkbox-box">
|
|
<u-checkbox
|
|
size="40"
|
|
v-model="item.checked"
|
|
@change="changeCheck($event,index)"
|
|
></u-checkbox>
|
|
</view>
|
|
<view class="attr-list-item-content" :class="item.ioRequired?'required':''">
|
|
<!-- 选择器 -->
|
|
<iots-select
|
|
v-if="item.ioFormType == 'select'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
v-model="item.value"
|
|
:selectList="item.ioObj.enums"
|
|
@change="changeData($event,index)"
|
|
:logShow="false"
|
|
></iots-select>
|
|
<!-- 步进器 -->
|
|
<iots-number-box
|
|
v-else-if="item.ioFormType == 'number'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
:min="parseFloat(item.IoDeployForm.min || 0)"
|
|
:max="parseFloat(item.IoDeployForm.max || 100)"
|
|
:step="parseFloat(item.IoDeployForm.step || 1)"
|
|
:logShow="false"
|
|
@change="changeData($event,index)"
|
|
v-model="item.value"
|
|
></iots-number-box>
|
|
<!-- 输入框 -->
|
|
<iots-input
|
|
v-else-if="item.ioFormType == 'text'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
v-model="item.value"
|
|
@change="changeData($event,index)"
|
|
:logShow="false"
|
|
></iots-input>
|
|
<!-- 开关 -->
|
|
<iots-switch
|
|
v-else-if="item.ioFormType == 'switch'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
v-model="item.value"
|
|
@change="changeData($event,index)"
|
|
:logShow="false"
|
|
></iots-switch>
|
|
<!-- 滑块 -->
|
|
<iots-slider
|
|
v-else-if="item.ioFormType == 'slider'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
:min="parseFloat(item.IoDeployForm.min || 0)"
|
|
:max="parseFloat(item.IoDeployForm.max || 100)"
|
|
:step="parseFloat(item.IoDeployForm.step || 1)"
|
|
v-model="item.value"
|
|
@change="changeData($event,index)"
|
|
:logShow="false"
|
|
></iots-slider>
|
|
<!-- 时间选择器 -->
|
|
<iots-select-time
|
|
v-else-if="item.ioFormType == 'time_picker'"
|
|
:name="item.ioName"
|
|
:disabled="false"
|
|
v-model="item.value"
|
|
@change="changeData($event,index)"
|
|
:logShow="false"
|
|
></iots-select-time>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn-box">
|
|
<u-checkbox
|
|
size="40"
|
|
v-model="isSelectAll"
|
|
@change="changeCheckAll"
|
|
>全选</u-checkbox>
|
|
<button @click="execute">执行</button>
|
|
</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import IotsSelect from '@/components/iot-components/select/iots-select.vue'
|
|
import IotsNumberBox from "@/components/iot-components/number-box/iots-number-box.vue"
|
|
import IotsSwitch from '@/components/iot-components/switch/iots-switch.vue'
|
|
import IotsSlider from '@/components/iot-components/slider/iots-slider.vue'
|
|
import IotsInput from '@/components/iot-components/input/iots-input.vue'
|
|
import IotsSelectTime from '@/components/iot-components/select-time/iots-select-time.vue'
|
|
export default{
|
|
data(){
|
|
return {
|
|
abilityObj:{},
|
|
dataList:[],
|
|
devId:'',
|
|
pk:'',
|
|
isSelectAll:true,
|
|
}
|
|
},
|
|
components: {
|
|
IotsSelect,
|
|
IotsSelectTime,
|
|
IotsNumberBox,
|
|
IotsSwitch,
|
|
IotsSlider,
|
|
IotsInput,
|
|
},
|
|
onLoad(option) {
|
|
let ability = JSON.parse(decodeURIComponent(option.ability))
|
|
console.log("当前参数",ability);
|
|
this.abilityObj = ability;
|
|
this.devId = option.devId;
|
|
this.pk = option.pk;
|
|
// this.dataList = ability.ioObj.in;
|
|
this.formatData(ability.ioObj.in);
|
|
uni.setNavigationBarTitle({
|
|
title:ability.name
|
|
})
|
|
},
|
|
methods:{
|
|
formatData(list){
|
|
let datalist = list.map(item=>{
|
|
if(item.ioFormType == 'number' || item.ioFormType == 'slider'){
|
|
if(item.IoDeployForm.min == undefined){
|
|
item.IoDeployForm.min = 0;
|
|
item.value = 0;
|
|
}else{
|
|
item.value = parseFloat(item.IoDeployForm.min);
|
|
}
|
|
}else if(item.ioFormType == 'switch'){
|
|
item.value = false;
|
|
}else{
|
|
item.value = null;
|
|
}
|
|
item.checked = true;
|
|
return item;
|
|
})
|
|
this.dataList = datalist;
|
|
},
|
|
changeCheck(e,index){
|
|
console.log("单选",e,index)
|
|
this.$forceUpdate()
|
|
let dataList = JSON.parse(JSON.stringify(this.dataList));
|
|
dataList[index].checked = e.value;
|
|
let isSelectAll = true;
|
|
dataList.forEach((item)=>{
|
|
if(!item.checked){
|
|
isSelectAll = false;
|
|
}
|
|
})
|
|
this.isSelectAll = isSelectAll;
|
|
},
|
|
changeCheckAll(e){
|
|
console.log("全选",e)
|
|
let dataList = JSON.parse(JSON.stringify(this.dataList));
|
|
dataList = dataList.map((item)=>{
|
|
item.checked = e.value;
|
|
return item;
|
|
})
|
|
this.$nextTick(()=>{
|
|
this.$set(this,'dataList',dataList)
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
changeData(){
|
|
this.$forceUpdate()
|
|
},
|
|
execute(){
|
|
if(this.verification()){
|
|
let obj = {};
|
|
this.dataList.forEach((item)=>{
|
|
if(item.checked){
|
|
obj[item.ioKey]=item.value
|
|
}
|
|
})
|
|
let params = {
|
|
ac:'write',
|
|
d:this.devId,
|
|
pk:this.pk,
|
|
p:obj,
|
|
kw:this.abilityObj.identifier
|
|
}
|
|
this.$api.iotsApi.downDeviceAbility(params).then(res => {
|
|
console.log("下发数据成功",res)
|
|
if(res.code == 0){
|
|
// this.$u.toast('执行成功')
|
|
this.$refs.uToast.show({
|
|
title: '执行成功',
|
|
type: 'success',
|
|
})
|
|
}else{
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'error',
|
|
})
|
|
}
|
|
}, error => {
|
|
})
|
|
}else{
|
|
console.log("校验未通过")
|
|
}
|
|
},
|
|
// 校验表单
|
|
verification(){
|
|
let flag = true;
|
|
this.dataList.forEach((item)=>{
|
|
if(flag && item.checked && item.ioRequired && !item.value && !['number', 'slider', 'switch'].includes(item.ioFormType)){
|
|
this.$refs.uToast.show({
|
|
title: item.ioName + '不能为空!',
|
|
type: 'error',
|
|
})
|
|
flag = false;
|
|
}
|
|
})
|
|
return flag;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
page{
|
|
background: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.iots-component-box{
|
|
margin-top: 0 !important;
|
|
}
|
|
.ability-box{
|
|
padding-bottom: 140rpx;
|
|
}
|
|
.attr-list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 20rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
margin-top: 20rpx;
|
|
.checkbox-box{
|
|
padding: 0 20rpx;
|
|
width: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
// margin-right: 20rpx;
|
|
}
|
|
.attr-list-item-content{
|
|
flex: 1;
|
|
position: relative;
|
|
&.required::after{
|
|
content: '';
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 12rpx;
|
|
left: 6rpx;
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
.btn-box{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
height: 140rpx;
|
|
padding: 0 30rpx;
|
|
padding-bottom: 10rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
button{
|
|
width: 300rpx;
|
|
height: 90rpx;
|
|
background: #3683FD;
|
|
border-radius: 43rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style> |