420 lines
13 KiB
Vue
420 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<u--input v-model="queryParams.modelName" placeholder="请输入变量名称" prefixIcon="search"
|
||
prefixIconStyle="color: #909399" customStyle="height:50rpx;margin:0 20rpx;background-color: #ffffff;">
|
||
<template slot="suffix">
|
||
<u-button :text="$tt('scene.search')" type="primary" size="mini" @click="handleSearch"></u-button>
|
||
</template>
|
||
</u--input>
|
||
<view class="event-wrap">
|
||
<view class="alert-item" v-for="(item, index) in datas" :key="index">
|
||
<view class="left">
|
||
<u--text color="#666" :text="item.modelName"></u--text>
|
||
<view style="width:40px;margin-top: 10px;">
|
||
<u-tag text="事件" type="warning" size="mini" :plain="true" v-if="item.type==3"></u-tag>
|
||
<u-tag text="属性" type="primary" size="mini" :plain="true" v-if="item.type==1"></u-tag>
|
||
<u-tag text="功能" type="success" size="mini" :plain="true" v-if="item.type==2"></u-tag>
|
||
</view>
|
||
</view>
|
||
<view :class="deviceInfo.protocolCode==='MODBUS-RTU' ? 'middle' : 'right'">
|
||
<u-row justify="space-between">
|
||
<u-col :span="3">
|
||
<u--text color="#666" :text="item.value=== '' ||item.value === null ? '-' : item.value">
|
||
</u--text>
|
||
</u-col>
|
||
<u-col :span="2">
|
||
<u--text :text="item.unit"></u--text>
|
||
</u-col>
|
||
<u-col :span="2">
|
||
<!-- 下发按钮 -->
|
||
<u-icon name="edit-pen" color="#2979ff" size="20" v-if="item.isReadonly === 0&&item.type!=3"
|
||
@click="editFunc(item)"></u-icon>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
<view class="right" v-if="deviceInfo.protocolCode==='MODBUS-RTU'">
|
||
<u-button type="primary" size="mini" :plain="true" custom-style="margin:10px;"
|
||
@click="activeCollection(item)" v-if="deviceInfo.protocolCode==='MODBUS-RTU'">主动采集</u-button>
|
||
</view>
|
||
</view>
|
||
<u-empty mode="data" :show="total === 0" marginTop="60" :text="$tt('scene.emptyData')"></u-empty>
|
||
</view>
|
||
<!-- 下发数据弹窗 -->
|
||
<u-popup :show="isShowModel" :round="5" mode="bottom" bgColor="#eef3f7" :closeOnClickOverlay="false"
|
||
@close="isShowModel = false">
|
||
<view class="integer-popup-wrap" style="height:150px;padding: 10px;">
|
||
<view class="nav">
|
||
<text @click="isShowModel = false">{{$tt('common.cancel')}}</text>
|
||
<text @click="sendService">{{$tt('common.confirm')}}</text>
|
||
</view>
|
||
<view style="background-color: #fff;height:50px;padding: 10px;border-radius: 5px;">
|
||
<u--form labelPosition="left" label-width="180px">
|
||
<u-form-item v-for="(item, index) in opationList" :label="`${item.label}：`" :key="index">
|
||
<!--枚举，布尔型，弹出选择框 -->
|
||
<u-popup :show="showSelectModel" :round="5" mode="bottom" :closeOnClickOverlay="true"
|
||
@close="showSelectModel = false">
|
||
<view class="operator-popup-wrap">
|
||
<view class="cell-group-wrap">
|
||
<u-cell-group :border="false">
|
||
<view class="cell-wrap" v-for="(item1,index1) in item.options" :key="index">
|
||
<u-cell :title="item1.label" :name="item1.value"
|
||
@click="handleConfirmOperator(item1)"></u-cell>
|
||
</view>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 字符串 -->
|
||
<u--input v-model="funVal[item.key]" border="none" inputAlign="right" placeholder="请输入"
|
||
:customStyle="{ marginRight: '20rpx',width:'150px' }"
|
||
v-if="item.dataTypeName == 'string'||(item.dataTypeName == 'array'&&item.arrayType=='string')" />
|
||
<!-- 整数，小数 -->
|
||
<u--input v-model="funVal[item.key]" border="none" inputAlign="right" placeholder="请输入"
|
||
@input="justNumber(item)" type="number"
|
||
:customStyle="{ marginRight: '10rpx',width:'10px',color:'#000' }"
|
||
v-if="item.dataTypeName == 'integer' || item.dataTypeName == 'decimal'||item.dataTypeName == 'array'||(item.dataTypeName == 'array'&&item.arrayType=='integer')||(item.dataTypeName == 'array'&&item.arrayType=='decimal')"></u--input>
|
||
<span
|
||
v-if="(item.dataTypeName == 'integer' || item.dataTypeName == 'decimal'||(item.dataTypeName == 'array'&&item.arrayType=='integer')||(item.dataTypeName == 'array'&&item.arrayType=='decimal')) && item.unit && item.unit != 'un' && item.unit != '/'">{{
|
||
item.unit
|
||
}}</span>
|
||
<span class="range"
|
||
v-if="item.dataTypeName == 'integer'|| item.dataTypeName == 'decimal'||(item.dataTypeName == 'array'&&item.arrayType=='integer')||(item.dataTypeName == 'array'&&item.arrayType=='decimal')">
|
||
({{ item.min }} ~ {{ item.max }})
|
||
</span>
|
||
<!-- 枚举，布尔型 -->
|
||
<u--input v-model="operators.label" border="none" inputAlign="right" placeholder="请选择"
|
||
disabledColor="#fff" disabled :customStyle="{ marginRight: '20rpx' }"
|
||
v-if="item.dataTypeName == 'enum' || item.dataTypeName == 'bool'" />
|
||
<u-icon slot="right" name="arrow-right" @click="openList"
|
||
v-if="item.dataTypeName == 'enum' || item.dataTypeName == 'bool'"></u-icon>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-modal :show="centerDialogVisible" content="下发指令主动采集变量，是否继续？" @confirm="confirmCollection()"
|
||
@cancel="() => centerDialogVisible = false" showCancelButton></u-modal>
|
||
<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize" loading-text="努力加载中..."
|
||
loadmoreText="点击我加载更多" nomoreText="实在没有了" marginTop="20" @loadmore="loadMoreLogs" />
|
||
<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="ZYC.cn"></u-loading-page>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listThingsModel,
|
||
getOrderControl,
|
||
propGet,
|
||
serviceInvokeReply
|
||
} from '@/apis/modules/device.js';
|
||
export default {
|
||
name: "device-variable",
|
||
props: {
|
||
device: {
|
||
type: Object,
|
||
default: null,
|
||
required: true
|
||
}
|
||
},
|
||
watch: {
|
||
// 兼容小程序
|
||
device: function(newVal, oldVal) {
|
||
this.deviceInfo = newVal;
|
||
if (newVal.deviceId && newVal.deviceId !== oldVal.deviceId) {
|
||
this.queryParams.deviceId = newVal.deviceId;
|
||
this.getVariableList();
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
queryParams: {
|
||
deviceId: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
datas: [],
|
||
centerDialogVisible: false, //采集弹窗
|
||
form: {},
|
||
canSend: false, //是否可以下发，主要判断数值在不在范围
|
||
funVal: {},
|
||
chooseFun: {},
|
||
//下发的设备
|
||
serialNumber: '',
|
||
opationList: [],
|
||
total: 0, // 总条数
|
||
loadmoreStatus: 'loadmore', // 加载更多
|
||
loading: false,
|
||
isShowModel: false, //下发弹窗
|
||
operators: {},
|
||
showSelectModel: false,
|
||
deviceInfo: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
const {
|
||
deviceId,
|
||
serialNumber
|
||
} = this.device;
|
||
if (deviceId) {
|
||
this.queryParams.deviceId = deviceId;
|
||
this.serialNumber = serialNumber;
|
||
this.getVariableList();
|
||
}
|
||
},
|
||
methods: {
|
||
//查询物模型列表
|
||
getVariableList() {
|
||
listThingsModel(this.queryParams).then((res) => {
|
||
if (res.code === 200) {
|
||
if (this.queryParams.pageNum == 1) {
|
||
this.datas = res.rows;
|
||
} else {
|
||
this.datas = this.datas.concat(res.rows);
|
||
}
|
||
this.total = res.total;
|
||
setTimeout(() => {
|
||
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
|
||
this.loadmoreStatus = 'nomore';
|
||
} else {
|
||
this.loadmoreStatus = 'loadmore';
|
||
}
|
||
}, 1000);
|
||
}
|
||
});
|
||
},
|
||
handleConfirmOperator(item) {
|
||
this.operators = item;
|
||
for (let key in this.funVal) {
|
||
this.funVal[key] = this.operators.value;
|
||
}
|
||
this.showSelectModel = false;
|
||
},
|
||
openList() {
|
||
this.operators = {};
|
||
this.showSelectModel = true;
|
||
},
|
||
//搜索
|
||
handleSearch() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getVariableList();
|
||
},
|
||
//指令下发
|
||
async editFunc(item) {
|
||
const params = {
|
||
deviceId: this.device.deviceId,
|
||
modelId: item.modelId
|
||
}
|
||
//判断是否有权限
|
||
const response = await getOrderControl(params);
|
||
if (response.code != 200) {
|
||
uni.$u.toast(response.msg);
|
||
return;
|
||
}
|
||
//这里兼容子设备的下发，在网关设备下发的时候选择实际子设备的编号
|
||
this.serialNumber = item.serialNumber;
|
||
let title = '';
|
||
if (this.device.status !== 3 && this.device.isShadow !== 1) {
|
||
if (this.device.status === 1) {
|
||
title = '设备未激活';
|
||
} else if (this.device.status === 2) {
|
||
title = '设备处于禁用状态';
|
||
} else {
|
||
title = '设备处于离线状态';
|
||
}
|
||
uni.$u.toast(title);
|
||
return;
|
||
}
|
||
this.isShowModel = true;
|
||
this.canSend = true;
|
||
this.funVal = {};
|
||
this.operators.label = '';
|
||
this.chooseFun = item;
|
||
this.getOpationList(item);
|
||
},
|
||
// 发送指令
|
||
async sendService() {
|
||
if (this.canSend) {
|
||
try {
|
||
let params = this.funVal;
|
||
const pas = {
|
||
serialNumber: this.serialNumber,
|
||
identifier: this.chooseFun.identifier,
|
||
remoteCommand: params
|
||
}
|
||
this.isShowModel = true;
|
||
const res = await serviceInvokeReply(pas);
|
||
if (res.code == 200) {
|
||
this.$message.success('下发成功')
|
||
} else {
|
||
this.$message.error(res.data)
|
||
}
|
||
} finally {}
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '数值不在范围内，不能下发,请重新输入！'
|
||
});
|
||
}
|
||
|
||
},
|
||
//主动采集数据
|
||
activeCollection(item) {
|
||
this.centerDialogVisible = true;
|
||
this.form.serialNumber = item.serialNumber;
|
||
this.form.type = 1;
|
||
this.form.identifier = item.identifier;
|
||
},
|
||
//确认采集
|
||
confirmCollection() {
|
||
propGet(this.form).then(response => {
|
||
if (response.code == 200) {
|
||
this.centerDialogVisible = false;
|
||
} else {
|
||
this.centerDialogVisible = false;
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: response.msg
|
||
});
|
||
return;
|
||
}
|
||
})
|
||
},
|
||
// 封装操作列表
|
||
getOpationList(item) {
|
||
this.opationList = []
|
||
let options = []
|
||
this.funVal = {}
|
||
const datatype = item.datatype;
|
||
if (datatype.type == 'enum') {
|
||
options = datatype.enumList?.map(option => {
|
||
return {
|
||
label: option.text,
|
||
value: option.value + ''
|
||
}
|
||
}) || []
|
||
}
|
||
if (datatype.type == 'bool') {
|
||
options = [{
|
||
label: datatype.falseText || '',
|
||
value: '0'
|
||
}, {
|
||
label: datatype.trueText || '',
|
||
value: '1'
|
||
}]
|
||
}
|
||
this.opationList.push({
|
||
dataTypeName: datatype.type,
|
||
arrayType: datatype.arrayType,
|
||
label: item.modelName,
|
||
key: item.identifier,
|
||
max: parseInt(datatype?.max || 100),
|
||
min: parseInt(datatype?.min || -100),
|
||
options: options,
|
||
value: item.value
|
||
})
|
||
this.opationList.forEach(item => {
|
||
let value = item.value
|
||
if (item.datatype == 'integer' || item.datatype == 'decimal' || (item.dataTypeName ==
|
||
'array' && item.arrayType == 'integer') || (item.dataTypeName == 'array' && item
|
||
.arrayType == 'decimal')) {
|
||
value = parseInt(value)
|
||
}
|
||
this.funVal[item.key] = value;
|
||
})
|
||
},
|
||
//判断输入是否超过范围
|
||
justNumber(val) {
|
||
this.canSend = true
|
||
this.opationList.some(item => {
|
||
if (item.max < this.funVal[item.key] || item.min > this.funVal[item.key]) {
|
||
this.canSend = false
|
||
return true
|
||
}
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
// 上拉加载
|
||
loadMoreLogs() {
|
||
this.loadmoreStatus = 'loading';
|
||
this.queryParams.pageNum = ++this.queryParams.pageNum;
|
||
// 模拟网络请求
|
||
setTimeout(() => {
|
||
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
|
||
this.loadmoreStatus = 'nomore';
|
||
} else {
|
||
this.loadmoreStatus = 'loading';
|
||
this.getVariableList();
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.datas = [];
|
||
this.queryParams.pageNum = 1;
|
||
// 模拟网络请求
|
||
setTimeout(x => {
|
||
this.type === 1 && this.getList();
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background: #eef3f7;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.event-wrap {
|
||
.log-item {
|
||
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 5px;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.alert-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 5px;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
background-color: #ffffff;
|
||
|
||
.left {
|
||
margin-right: 10px;
|
||
width: 30%;
|
||
}
|
||
|
||
.middle {
|
||
flex: 1;
|
||
width: 30%;
|
||
}
|
||
|
||
.right {
|
||
margin-right: 10rpx;
|
||
width: 20%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
margin-bottom: 34rpx;
|
||
}
|
||
|
||
.u-popup {
|
||
text-align: center;
|
||
/* 文字居中 */
|
||
}
|
||
</style> |