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
158 lines
5.3 KiB
3 years ago
|
<!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>
|
||
|
|
|