物联网平台 +Web 组态
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

158 lines
5.3 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../lib/element-ui/index.css" />
<link rel="stylesheet" href="./css/index.css" />
<script src="../common/util.js"></script>
<script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
<script src="../../lib/bigscreen/js/vue.min.js"></script>
<script src="../../lib/element-ui/index.js"></script>
<script type="text/javascript" src="../../lib/layer/layer.js"></script>
<script type="text/javascript" src="../../lib/mqtt/mqtt.min.js"></script>
<title>设备远程调试</title>
</head>
<body>
<div id="app" v-cloak>
<el-row>
<el-col :span="6">
<div class="grid-content">
<div>
<div>
<label class="el-form-item__label" style="">连接开关</label>
</div>
<div style="text-align: center;">
<el-button :class="connectMode?'el-button--success':'el-button--info'" @click="onConnect" style="width:80%;">{{connectMode?'关闭':'打开'}}</el-button>
</div>
</div>
<div>
<div style="overflow: hidden;">
<label class="el-form-item__label" style="">收发数据类型</label>
</div>
<div style="padding:5px 15px;">
<el-radio v-model="dataType" @change="changeType" label="1">16进制</el-radio>
<el-radio v-model="dataType" @change="changeType" label="2">ASCII</el-radio>
</div>
</div>
</div>
</el-col>
<el-col :span="18"><div class="grid-content">
<el-input type="textarea" v-model="recedisplay" id="textarea" placeholder="接收区" :rows="10" ></el-input>
</div></el-col>
</el-row>
<el-row style="margin-top:3px;">
<el-col :span="6">
<div class="grid-content">
<div style="text-align: center;padding: 15px;">
<el-button @click="sendData" style="width: 70%;height: 70px;">发送</el-button>
</div>
</div>
</el-col>
<el-col :span="18"><div class="grid-content">
<el-input type="textarea" v-model="senddisplay" placeholder="发送区" :rows="4" ></el-input>
</div></el-col>
</el-row>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app' ,
data: function(){
return {
recedisplay: '' , // 接收显示值
dataType: '1' , // 16进制或者ascII
senddisplay: '' , // 发送值
receOrginalData: [] , // 接收原始数据
connectMode: false , // 连接状态
client : '' , // mqtt连接状态
deviceCode: '' , // 设备号
}
},
methods: {
sendData(){
// 发送数据点击
if( this.senddisplay.trim() != '' ){
this.client.publish('/transmit/device' ,JSON.stringify( { 'messageType':2 , 'dataType': this.dataType ,
'data':this.senddisplay.trim() ,'deviceCode': this.deviceCode }) );
}
},
changeType(){
// 切换数据显示
this.dataDisplay();
},
onConnect(){
// 连接开关点击
this.connectMode= ! this.connectMode ;
},
dataDisplay(){
this.recedisplay = '' ;
var valuelist = this.receOrginalData ;
if( valuelist.length > 300 ){
valuelist.shift();
}
for( var i=0; i< valuelist.length ; i++ ){
var time = timeStamp2String( valuelist[i].time,'hh:mm:ss' ) ;
var ascii = valuelist[i].ascii ;
var byte = valuelist[i].byte ;
var direction = valuelist[i].direction ;
this.recedisplay += '['+ time + (direction==1?' 发送 ':' 接收 ') + ']:' + ( this.dataType==1? gdv(byte) : gdv(ascii) ) +"\r\n" ;
}
var height=$("#textarea")[0].scrollHeight;
$("#textarea").scrollTop(height);
},
mqttInit(){
// mqtt 初始化
var that = this ;
var client = this.client ;
const options = {
connectTimeout: 4000, // 超时时间
// 认证信息
clientId: 'brower_' + parseInt(Math.random()/31.1*10000000000),
username: mqttUserName ,
password: mqttPassword ,
}
client = mqtt.connect('ws://'+document.domain+':8083/mqtt', options) ;
client.on('reconnect', function(error) {
console.log("reconnect");
})
client.on('error', function(error) {
console.log('连接失败:', error)
})
client.on('message', function(topic, message,s) {
if( that.connectMode ){
if( message.toString().indexOf('error') > -1 ){
layer.msg("设备离线,无法通信");
}else{
that.receOrginalData.push( eval('('+ message.toString() +')') ) ;
that.dataDisplay();
}
}
})
if( that.deviceCode != ''){
// 连接
client.publish('/transmit/device' ,JSON.stringify( { 'messageType':1 , 'deviceCode':that.deviceCode }) );
client.subscribe("/sys/debug/"+ that.deviceCode );
setInterval(function(){
if( that.connectMode ){
client.publish('/transmit/device' ,JSON.stringify( { 'messageType':1 , 'deviceCode':that.deviceCode }) );
}
},2.4*60*1000)
}
this.client = client ;
}
},
created(){
this.deviceCode = getQueryString("devicecode");
this.mqttInit();
},
mounted(){
}
});
</script>
</body>