212 lines
5.4 KiB
Vue
212 lines
5.4 KiB
Vue
<template>
|
||
<view class="alarmConfig-box">
|
||
<u-tabs class="tab-box" :list="groupList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
|
||
<mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<u-collapse ref="collapseRef" style="padding-bottom: 100rpx;">
|
||
<u-collapse-item :title="item.funcName" ref="collapseItem" v-for="(item, index) in list" :key="item.funcKey" @change="handleOpenChange(item, index)">
|
||
<template v-slot:title >
|
||
<text style="padding-left: 10rpx;">{{item.funcName}}</text>
|
||
<text :style="{color:item.isAck?'green':'red'}">（{{item.isAck?'已同步设备':'未同步设备'}}）</text>
|
||
</template>
|
||
<u-form ref="uForm" label-width="200" label-align="left">
|
||
<u-form-item :label="val.name" v-for="val in item.confJsonObj" :key="val.key">
|
||
<u-switch v-if="getAttrType(val) === 'switch'" :disabled="item.disabled" v-model="val.value"></u-switch>
|
||
<uni-data-select
|
||
v-else-if="getAttrType(val) === 'select'"
|
||
v-model="val.value"
|
||
placement="top"
|
||
:disabled="item.disabled"
|
||
:localdata="getSelectList(val)"
|
||
></uni-data-select>
|
||
<u-input v-else :disabled="item.disabled" v-model="val.value" />
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="btn-list">
|
||
<u-button v-if="item.disabled" @click="toggleState(index)">修改</u-button>
|
||
<u-button v-else type="primary" @click="sendAttr(item,index)">下发</u-button>
|
||
</view>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</mescroll-body>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabCurrent: 0,
|
||
deviceKey:'',
|
||
groupList:[],
|
||
list:[],
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
onLoad(option) {
|
||
console.log("获取到参数",option)
|
||
this.deviceKey = option.deviceKey;
|
||
},
|
||
methods: {
|
||
handleOpenChange(item, index) {
|
||
setTimeout(() => {
|
||
this.$refs.collapseRef.childrens[index].init();
|
||
}, 20);
|
||
},
|
||
tabChange(e){
|
||
console.log("tab",e)
|
||
this.tabCurrent = e;
|
||
this.list = this.groupList[e].list;
|
||
setTimeout(() => {
|
||
this.$refs.collapseRef.init();
|
||
}, 20);
|
||
},
|
||
getSelectList(data){
|
||
console.log("data",data);
|
||
let list = [];
|
||
list = data.options.map(item=>{
|
||
return {
|
||
text: item.label,
|
||
value: item.value
|
||
}
|
||
})
|
||
return list;
|
||
},
|
||
//切换状态
|
||
toggleState(i){
|
||
this.$nextTick(()=>{
|
||
this.list[i].disabled = !this.list[i].disabled;
|
||
})
|
||
},
|
||
sendAttr(data,i){
|
||
console.log("下发值为",data)
|
||
uni.showModal({
|
||
title: '提示',
|
||
content:'确认要下发配置吗？',
|
||
confirmText:'确认',
|
||
cancelText:'取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
let confJsonObj = data.confJsonObj.map(item=>{
|
||
if(item.key.endsWith('_state')){
|
||
return {
|
||
...item,
|
||
value:item.value?1:0
|
||
}
|
||
}else{
|
||
return item;
|
||
}
|
||
})
|
||
let parmas = {
|
||
...data,
|
||
confJsonObj
|
||
}
|
||
this.$put("/iot/func",parmas).then((res)=>{
|
||
console.log("res",res)
|
||
if(res.code == 200){
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
type: 'success',
|
||
})
|
||
this.list[i].disabled = !this.list[i].disabled;
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}).catch((err)=>{
|
||
console.log("err",err)
|
||
this.$refs.uToast.show({
|
||
title: err.msg,
|
||
type: 'error',
|
||
})
|
||
})
|
||
}else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
upCallback(page) {
|
||
this.$get("/iot/func/" + this.deviceKey,{}).then((res)=>{
|
||
console.log("res",res)
|
||
let groupList = [];
|
||
if(res?.data.length>0){
|
||
res.data.forEach((item,index)=>{
|
||
let flag = true;
|
||
groupList.forEach((val,i)=>{
|
||
if(val.funcType === item.funcType){
|
||
groupList[i].list.push({
|
||
...item,
|
||
disabled: true,
|
||
});
|
||
flag = false;
|
||
}
|
||
})
|
||
if(flag && item.funcType!= 'c'){
|
||
groupList.push({
|
||
funcType: item.funcType,
|
||
name: item.funcTypeName,
|
||
list: [{
|
||
...item,
|
||
disabled: true,
|
||
}]
|
||
})
|
||
}
|
||
});
|
||
this.groupList = groupList;
|
||
this.list = groupList[this.tabCurrent].list;
|
||
this.$nextTick(()=>{
|
||
this.$refs.collapseRef.init();
|
||
})
|
||
this.mescroll.endByPage(1, 1);
|
||
this.mescroll.endErr();
|
||
}else{
|
||
this.groupList = [];
|
||
this.list = [];
|
||
this.mescroll.endErr();
|
||
this.mescroll.showEmpty();
|
||
}
|
||
}).catch((err)=>{
|
||
console.log("err",err)
|
||
//联网失败, 结束加载
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
//判断告警数据类型
|
||
getAttrType(obj){
|
||
if(obj.key.endsWith('_state')){
|
||
return 'switch';
|
||
}else if(obj.key.endsWith('_select')){
|
||
return 'select';
|
||
}else{
|
||
return 'input';
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tab-box{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
z-index: 10;
|
||
}
|
||
::v-deep .u-collapse-head{
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
::v-deep .u-collapse-body{
|
||
// height: auto !important;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
</style>
|