闸门智控小程序
This commit is contained in:
@@ -0,0 +1,203 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user