204 lines
6.7 KiB
Vue
204 lines
6.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<form>
|
|
<tui-list-cell :hover="false">
|
|
<view class="tui-line-cell" style="padding-bottom: 20rpx;">
|
|
<view class="tui-title" style="font-size: 32rpx;font-weight: 600;color: #5677FC;">{{device_name}}</view>
|
|
</view>
|
|
<view class="tui-line-cell">
|
|
<view class="tui-title">安装高度</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="默认安装高度" maxlength="50" type="text" />
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" width="100rpx" height="50rpx" :size="24" @click="read('安装高度')">读取</tui-button>
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" type="danger" width="100rpx" height="50rpx" :size="24" @click="setup('安装高度')">设置</tui-button>
|
|
</view>
|
|
<view class="tui-line-cell" style="padding-top: 15rpx;">
|
|
<view class="tui-title">液位上限</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="默认液位上限" maxlength="50" type="text" />
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" width="100rpx" height="50rpx" :size="24" @click="read('液位上限')">读取</tui-button>
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" type="danger" width="100rpx" height="50rpx" :size="24" @click="setup('液位上限')">设置</tui-button>
|
|
</view>
|
|
<view class="tui-line-cell" style="padding-top: 15rpx;">
|
|
<view class="tui-title">液位下限</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="默认液位下限" maxlength="50" type="text" />
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" width="100rpx" height="50rpx" :size="24" @click="read('液位下限')">读取</tui-button>
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" type="danger" width="100rpx" height="50rpx" :size="24" @click="setup('液位下限')">设置</tui-button>
|
|
</view>
|
|
<view class="tui-line-cell" style="padding-top: 15rpx;">
|
|
<view class="tui-title">雨量上限</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="默认雨量上限" maxlength="50" type="text" />
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" width="100rpx" height="50rpx" :size="24" @click="read('雨量上限')">读取</tui-button>
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" type="danger" width="100rpx" height="50rpx" :size="24" @click="setup('雨量上限')">设置</tui-button>
|
|
</view>
|
|
<view class="tui-line-cell" style="padding-top: 15rpx;">
|
|
<view class="tui-title">雨量下限</view>
|
|
<input placeholder-class="tui-phcolor" class="tui-input" name="name" placeholder="默认雨量下限" maxlength="50" type="text" />
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" width="100rpx" height="50rpx" :size="24" @click="read('雨量下限')">读取</tui-button>
|
|
<tui-button margin="10rpx 10rpx 10rpx 0" type="danger" width="100rpx" height="50rpx" :size="24" @click="setup('雨量下限')">设置</tui-button>
|
|
</view>
|
|
</tui-list-cell>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import myapp from '@/common/js/myapp.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
apiHost: myapp.apiHost,
|
|
device_id: 0,
|
|
device_info: {},
|
|
f_did: 0,
|
|
device_name: ''
|
|
}
|
|
},
|
|
onLoad: function(option) {
|
|
this.device_id = option.id
|
|
let user = myapp.checkLogin()
|
|
uni.setStorageSync('lastPagePath', '/packagePage/pages/config/config')
|
|
let that = this
|
|
// 获取f_did
|
|
myapp.request('/?c=overview&a=getDeviceFdid',function(res) {
|
|
that.f_did = res.data.data
|
|
console.info(res.data.data)
|
|
},{device_id:that.device_id})
|
|
// 获取设备名称
|
|
myapp.request('/?c=overview&a=getDeviceName',function(res) {
|
|
that.device_name = res.data.data
|
|
console.info(res.data.data)
|
|
},{device_id:that.device_id})
|
|
},
|
|
onShow: function() {
|
|
//################# web socket ################
|
|
uni.connectSocket({
|
|
url: myapp.websocket.url
|
|
})
|
|
|
|
uni.onSocketOpen(function (res) {
|
|
console.log('WebSocket连接已打开！' + JSON.stringify(res))
|
|
|
|
myapp.websocket.socketOpen = true
|
|
myapp.websocket.send(myapp, 'connect')
|
|
|
|
for (let i = 0; i < myapp.websocket.socketMsgQueue.length; i++) {
|
|
uni.sendSocketMessage({data: myapp.websocket.socketMsgQueue[i]})
|
|
}
|
|
myapp.websocket.socketMsgQueue = []
|
|
})
|
|
|
|
uni.onSocketError(function (res) {
|
|
console.log('WebSocket连接打开失败，请检查！' + JSON.stringify(res))
|
|
})
|
|
|
|
uni.onSocketMessage(function (res) {
|
|
console.log('收到服务器内容：' + JSON.stringify(res))
|
|
uni.hideLoading()
|
|
if(JSON.stringify(res).indexOf('connect') == -1) {
|
|
myapp.showHint('指令发送完成')
|
|
}
|
|
})
|
|
let this_device_id = this.device_id
|
|
uni.onSocketClose(function (res) {
|
|
console.log('WebSocket 已关闭！' + JSON.stringify(res))
|
|
uni.hideLoading()
|
|
uni.redirectTo({
|
|
url: '/packagePage/pages/config/config?id=' + this_device_id
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
read: function(name) {
|
|
// uni.showLoading({
|
|
// title: '命令发送中',
|
|
// mask: true
|
|
// })
|
|
console.info(name)
|
|
},
|
|
setup: function(name) {
|
|
console.info(name)
|
|
// uni.showLoading({
|
|
// title: '命令发送中',
|
|
// mask: true
|
|
// })
|
|
// if(name == '安装高度')
|
|
// {
|
|
// myapp.websocket.send(myapp, 'control', '闸门停止上升', '000100000006FF0500240000', this.f_did)
|
|
|
|
// }else if(name == '液位上限')
|
|
// {
|
|
// myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
|
|
|
// }else if(name == '液位下限')
|
|
// {
|
|
// myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
|
|
|
// }else if(name == '雨量上限')
|
|
// {
|
|
// myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
|
|
|
// }else if(name == '雨量下限')
|
|
// {
|
|
// myapp.websocket.send(myapp, 'control', '闸门停止下降', '000100000006FF0500250000', this.f_did)
|
|
|
|
// }
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
padding: 20rpx 0 50rpx 0;
|
|
}
|
|
|
|
.tui-line-cell {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.tui-title {
|
|
line-height: 32rpx;
|
|
min-width: 120rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tui-input {
|
|
font-size: 24rpx;
|
|
color: #e60000;
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
overflow: visible;
|
|
}
|
|
|
|
.radio-group {
|
|
margin-left: auto;
|
|
transform: scale(0.8);
|
|
transform-origin: 100% center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tui-radio {
|
|
display: inline-block;
|
|
padding-left: 28rpx;
|
|
font-size: 36rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
|
|
.tui-btn-box {
|
|
padding: 40rpx 50rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tui-button-gray {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.tui-tips {
|
|
padding: 30rpx;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|