455 lines
13 KiB
Vue
455 lines
13 KiB
Vue
<template>
|
||
<view class="parameterSetup">
|
||
<view class="device-info">
|
||
<view class="title-box">
|
||
基本信息
|
||
</view>
|
||
<view class="parameterSetup-content" v-if="deviceDataInfo">
|
||
<view class="parameterSetup-row" v-for="(value,key,index) in deviceTopData" @click="onClickRowFn(key,value)" :key="key">
|
||
<view class="parameterSetup-row-name">{{parameterField[key]}}</view>
|
||
<view class="parameterSetup-row-value">
|
||
<text class="pr10" :style="{color:key=='deviceName'?'#999':'#000'}">{{value}}</text>
|
||
<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="parameterSetup-row" v-for="(item,i) in deviceBottomData" :key="i">
|
||
<view class="parameterSetup-row-name">{{item.paramName}}</view>
|
||
<view class="parameterSetup-row-value">
|
||
<text class="pr10" style="color: #999;">{{item.paramVal||'-'}}</text>
|
||
<!-- <u-icon name="arrow-right" color="#bfbfbf"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device-alarm-box" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'">
|
||
<view class="title-box">
|
||
告警配置
|
||
</view>
|
||
<u-tabs class="tab-box" :list="groupList" bar-width="375" bg-color="#f5f5f5" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
|
||
<view class="alarm-loading-box" v-if="alarmLoading">
|
||
<u-loading mode="circle" size="30" :show="alarmLoading"></u-loading>
|
||
<text>刷新中</text>
|
||
</view>
|
||
<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 >
|
||
<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>
|
||
<u-empty v-if="!list" text="告警列表为空" mode="list"></u-empty>
|
||
<view class="btn-list" @click="getAlarmList">
|
||
<view class="btn-box">
|
||
刷新告警配置
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="parameterSetup-content">
|
||
<view class="parameterSetup-row" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'" @click="goAlarmConfig">
|
||
<view class="parameterSetup-row-name">告警配置</view>
|
||
<view class="parameterSetup-row-value">
|
||
<text class="pr10">去配置</text>
|
||
<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 接线设置 -->
|
||
<!-- <u-picker mode="selector" v-model="wiringSetupFlag" title="请选择要接入的线路" :range="wiringSetupSelector" :default-selector="[0]"></u-picker> -->
|
||
<!-- 线路 -->
|
||
<!-- <u-picker mode="selector" v-model="lineRoadFlag" :range="lineRoadSelector" :default-selector="[0]"></u-picker> -->
|
||
<!-- 设备别名 -->
|
||
<!-- <u-popup v-model="deviceNameFlag" mode="center" :closeable="true">
|
||
<view class="popup-setup">
|
||
<view class="popup-setup-title">修改设备别名</view>
|
||
<u-input v-model="deviceNameValue" type="text" :border="true" />
|
||
<view class="popup-setup-btn">
|
||
<u-button type="error" size="medium" @click="deviceNameFlag = false">取消</u-button>
|
||
<u-button type="success" size="medium">保存</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup> -->
|
||
<!-- 重命名 -->
|
||
<u-popup v-model="topEditFlag" mode="center" :closeable="true">
|
||
<view class="popup-setup">
|
||
<view class="popup-setup-title">{{currentTopPickRow==="lineRoad"?"线路别名":"重命名"}}</view>
|
||
<u-input type="text" :border="true" v-model="topEditDataInputValue"/>
|
||
<view class="popup-setup-btn">
|
||
<u-button type="error" size="medium" @click="topEditFlag = false;topEditDataInputValue = '';">取消</u-button>
|
||
<u-button type="success" size="medium" @click="onSaveTopEditFn">保存</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 修改弹出框 -->
|
||
<u-popup v-model="editDataFlag" mode="center" :closeable="true">
|
||
<view class="popup-setup">
|
||
<view class="popup-setup-title">{{bottomCurrentPickObj.paramName}}</view>
|
||
<u-input type="text" :border="true" v-model="bottomEditDataInputValue" />
|
||
<view class="popup-setup-btn">
|
||
<u-button type="error" size="medium" @click="editDataFlag = false;bottomEditDataInputValue='';">取消</u-button>
|
||
<u-button type="success" size="medium" @click="bottomSaveEditFn">保存</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import parameterField from "@/pages/home/wisdomElectricity/realTime/parameterField.js"
|
||
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
||
export default{
|
||
data(){
|
||
return {
|
||
tabCurrent: 0,
|
||
deviceKey:'',
|
||
groupList:[],
|
||
list:[],
|
||
|
||
topEditFlag:false,
|
||
|
||
editDataFlag:false,
|
||
bottomEditDataInputValue:"", // 底部参数修改的值
|
||
bottomCurrentPickObj:null, // 当前选择的底部参数
|
||
|
||
deviceNameValue:"",
|
||
parameterField:parameterField,
|
||
deviceTopData:{
|
||
},
|
||
deviceDataObj:null,
|
||
|
||
deviceDataInfo:null,
|
||
deviceBottomData:null,
|
||
|
||
currentBottomPickData:null,
|
||
currentTopPickRow:"",
|
||
topEditDataInputValue:"",
|
||
alarmLoading:false
|
||
}
|
||
},
|
||
mixins:[MescrollMixin],
|
||
onLoad(e) {
|
||
console.log(e,"eesss");
|
||
this.deviceId = e.deviceId;
|
||
this.deviceKey = e.deviceKey;
|
||
this.getDeviceInfoDataFn();
|
||
this.getAlarmList();
|
||
},
|
||
methods:{
|
||
goAlarmConfig(){
|
||
uni.navigateTo({
|
||
url:'./alarmConfig?deviceKey=' + this.deviceDataInfo.deviceKey
|
||
})
|
||
},
|
||
getDeviceInfoDataFn(){
|
||
// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
|
||
this.$get("/app/device/" + this.deviceId).then((res)=>{
|
||
if(res.code !=200) return;
|
||
this.deviceDataInfo = res.data;
|
||
if(this.deviceDataInfo.paramList){
|
||
if(res.data.deviceType == 'MINIATURE_BREAKER'){
|
||
this.deviceBottomData = this.deviceDataInfo.paramList.filter((item) => {
|
||
return item.paramKey != 'leakage_current' && item.paramKey != 'temperature';
|
||
})
|
||
}else{
|
||
this.deviceBottomData = this.deviceDataInfo.paramList;
|
||
}
|
||
}
|
||
this.deviceTopData = {
|
||
deviceName:this.deviceDataInfo.parentName,
|
||
lineRoad:this.deviceDataInfo.deviceName,
|
||
// rename:this.deviceDataInfo.deviceName
|
||
};
|
||
})
|
||
},
|
||
bottomSaveEditFn(){
|
||
this.$put("/app/device/edit-param",{
|
||
paramId: this.bottomCurrentPickObj.paramId,
|
||
paramVal: this.bottomEditDataInputValue
|
||
}).then((res)=>{
|
||
if(res.code === 200){
|
||
this.$tui.toast(res.msg,3000);
|
||
this.getDeviceInfoDataFn();
|
||
}
|
||
}).finally(()=>{
|
||
this.editDataFlag = false;
|
||
this.bottomEditDataInputValue='';
|
||
})
|
||
},
|
||
onClickBottomRowFn(item){
|
||
console.log(item,"item");
|
||
this.editDataFlag = true;
|
||
this.bottomCurrentPickObj = item;
|
||
},
|
||
onClickRowFn(key,value){
|
||
console.log(key,"ee",value);
|
||
if(key == "deviceName") return;
|
||
this.currentTopPickRow = key;
|
||
this.topEditDataInputValue=value;
|
||
this.topEditFlag = true;
|
||
},
|
||
onSaveTopEditFn(){
|
||
this.$put("/app/device/edit-image",{
|
||
deviceId: this.deviceDataInfo.deviceId,
|
||
deviceName: this.topEditDataInputValue
|
||
}).then((res)=>{
|
||
if(res.code === 200){
|
||
this.$tui.toast(res.msg,3000);
|
||
this.getDeviceInfoDataFn();
|
||
}
|
||
}).finally(()=>{
|
||
this.topEditFlag = false;
|
||
this.topEditDataInputValue='';
|
||
})
|
||
},
|
||
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) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getAlarmList() {
|
||
this.alarmLoading = true;
|
||
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();
|
||
})
|
||
}else{
|
||
this.groupList = [];
|
||
this.list = [];
|
||
}
|
||
this.alarmLoading = false;
|
||
}).catch((err)=>{
|
||
console.log("err",err)
|
||
this.alarmLoading = false;
|
||
})
|
||
},
|
||
//判断告警数据类型
|
||
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>
|
||
.parameterSetup{
|
||
width: 100%;
|
||
padding-bottom: 150rpx;
|
||
&-content{
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
&-row{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 16rpx;
|
||
border-bottom: 1px solid #ddd;
|
||
&-value{
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.popup-setup{
|
||
width: 600rpx;
|
||
padding: 50rpx 30rpx;
|
||
&-title{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
&-btn{
|
||
display: flex;
|
||
padding-top: 30rpx;
|
||
justify-content: space-around;
|
||
}
|
||
&-voltageLimit{
|
||
&-up,&-down{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
.title-box{
|
||
padding: 16rpx 20rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
position: relative;
|
||
// margin: 6rpx 0;
|
||
&:before{
|
||
content: '';
|
||
width: 6rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: 12rpx;
|
||
left: 8rpx;
|
||
background: #0066cc;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
.alarm-loading-box{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
>text{
|
||
margin-left: 10rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
::v-deep .u-collapse-head{
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
::v-deep .u-collapse-body{
|
||
// height: auto !important;
|
||
padding: 0 20rpx;
|
||
}
|
||
.btn-list{
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 140rpx;
|
||
padding: 20rpx 20rpx;
|
||
background: #fff;
|
||
z-index: 99;
|
||
border-top: 1px solid #f5f5f5;
|
||
.btn-box{
|
||
background: #0066cc;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
}
|
||
}
|
||
</style> |