Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
rudern
物联大师
提交
dabd4123
物
物联大师
项目概览
rudern
/
物联大师
通知
4
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
物
物联大师
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
dabd4123
编写于
9月 18, 2020
作者:
J
Jason
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
支持发送十六进制内容
上级
54178582
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
101 addition
and
67 deletion
+101
-67
portal/src/app/main/link-monitor/link-monitor.component.html
portal/src/app/main/link-monitor/link-monitor.component.html
+11
-9
portal/src/app/main/link-monitor/link-monitor.component.scss
portal/src/app/main/link-monitor/link-monitor.component.scss
+31
-10
portal/src/app/main/link-monitor/link-monitor.component.ts
portal/src/app/main/link-monitor/link-monitor.component.ts
+56
-48
portal/src/app/mqtt.service.ts
portal/src/app/mqtt.service.ts
+3
-0
未找到文件。
portal/src/app/main/link-monitor/link-monitor.component.html
浏览文件 @
dabd4123
<p>
TODO: 工作状态,数据收发量,速度
</p>
<div>
<!-- TODO: 工作状态,数据收发量,速度-->
<textarea
cols=
"30"
rows=
"10"
[(ngModel)]=
"text"
></textarea>
<button
nz-button
(click)=
"send()"
>
发送
</button>
<div
class=
"send-area"
>
<textarea
[(ngModel)]=
"text"
style=
"resize: vertical"
></textarea>
<div
class=
"submit"
>
<label
nz-checkbox
[(ngModel)]=
"isHex"
>
十六进制
</label>
<button
nz-button
nzType=
"primary"
(click)=
"send()"
>
发送
</button>
</div>
</div>
</div>
<div
nz-row
[nzGutter]=
"10"
>
<div
nz-row
[nzGutter]=
"10"
class=
"monitor"
>
<div
nz-col
nzSpan=
"12"
>
<div
nz-col
nzSpan=
"12"
nzXs=
"24"
nzSm=
"12"
>
<div
class=
"title"
>
<div
class=
"title"
>
数据接收
数据接收
</div>
</div>
...
@@ -18,7 +20,7 @@
...
@@ -18,7 +20,7 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div
nz-col
nzSpan=
"12"
>
<div
nz-col
nzSpan=
"12"
nzXs=
"24"
nzSm=
"12"
>
<div
class=
"title"
>
<div
class=
"title"
>
数据发送
数据发送
</div>
</div>
...
...
portal/src/app/main/link-monitor/link-monitor.component.scss
浏览文件 @
dabd4123
.title
{
.monitor
{
text-align
:
center
;
.title
{
padding
:
5px
;
text-align
:
center
;
padding
:
5px
;
}
.content
{
min-height
:
200px
;
max-height
:
400px
;
border
:
1px
solid
grey
;
overflow-y
:
auto
;
overflow-x
:
hidden
;
word-break
:
break-all
;
}
}
}
.content
{
min-height
:
200px
;
.send-area
{
max-height
:
400px
;
display
:
flex
;
border
:
1px
solid
grey
;
align-items
:
center
;
overflow-y
:
auto
;
justify-content
:
center
;
overflow-x
:
hidden
;
word-break
:
break-all
;
textarea
{
flex
:
1
;
min-height
:
40px
;
max-height
:
100px
;
}
.submit
{
display
:
flex
;
flex-direction
:
column
;
width
:
100px
;
padding
:
5px
;
}
}
}
portal/src/app/main/link-monitor/link-monitor.component.ts
浏览文件 @
dabd4123
import
{
Component
,
ElementRef
,
OnDestroy
,
OnInit
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Component
,
ElementRef
,
OnDestroy
,
OnInit
,
ViewChild
}
from
'
@angular/core
'
;
import
{
ActivatedRoute
}
from
'
@angular/router
'
;
import
{
ActivatedRoute
}
from
'
@angular/router
'
;
import
{
ApiService
}
from
'
../../api.service
'
;
import
{
ApiService
}
from
'
../../api.service
'
;
import
{
MqttService
}
from
'
../../mqtt.service
'
;
@
Component
({
@
Component
({
selector
:
'
app-link-monitor
'
,
selector
:
'
app-link-monitor
'
,
...
@@ -16,8 +17,8 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
...
@@ -16,8 +17,8 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
id
:
number
;
id
:
number
;
link
:
any
;
link
:
any
;
ws
:
WebSocket
;
i
nterval
:
any
;
i
sHex
=
false
;
text
=
''
;
text
=
''
;
dataRecv
=
[];
dataRecv
=
[];
...
@@ -26,30 +27,67 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
...
@@ -26,30 +27,67 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
cacheSizeRecv
=
500
;
cacheSizeRecv
=
500
;
cacheSizeSend
=
500
;
cacheSizeSend
=
500
;
constructor
(
private
routeInfo
:
ActivatedRoute
,
private
as
:
ApiService
)
{
recvSub
:
any
;
sendSub
:
any
;
constructor
(
private
routeInfo
:
ActivatedRoute
,
private
as
:
ApiService
,
private
mqtt
:
MqttService
)
{
this
.
id
=
this
.
routeInfo
.
snapshot
.
params
.
id
;
this
.
id
=
this
.
routeInfo
.
snapshot
.
params
.
id
;
this
.
load
();
this
.
load
();
}
}
ngOnInit
():
void
{
ngOnInit
():
void
{
}
}
ngOnDestroy
():
void
{
ngOnDestroy
():
void
{
this
.
ws
.
close
(
1000
,
'
exit
'
);
this
.
recvSub
.
unsubscribe
();
clearInterval
(
this
.
interval
);
this
.
sendSub
.
unsubscribe
();
}
hex_to_buffer
(
hex
:
string
):
Buffer
{
hex
=
hex
.
replace
(
/
\s
*/g
,
''
);
const
arr
=
[];
for
(
let
i
=
0
;
i
<
hex
.
length
;
i
+=
2
)
{
arr
.
push
(
hex
.
substr
(
i
,
2
));
}
const
hexes
=
arr
.
map
(
el
=>
parseInt
(
el
,
16
));
return
Buffer
.
from
(
new
Uint8Array
(
hexes
));
}
}
startHearbeat
():
void
{
buffer_to_hex
(
buf
):
string
{
this
.
interval
=
setInterval
(()
=>
{
const
arr
=
Array
.
prototype
.
slice
.
call
(
buf
);
this
.
ws
.
send
(
JSON
.
stringify
({
type
:
'
ping
'
}));
return
arr
.
map
(
el
=>
Number
(
el
).
toString
(
16
)).
join
(
'
'
);
},
10000
);
}
subscribe
():
void
{
this
.
recvSub
=
this
.
mqtt
.
subscribe
(
'
/
'
+
this
.
link
.
channel_id
+
'
/
'
+
this
.
id
+
'
/recv
'
).
subscribe
(
packet
=>
{
this
.
dataRecv
.
push
({
data
:
this
.
buffer_to_hex
(
packet
.
payload
),
time
:
new
Date
(),
});
if
(
this
.
dataRecv
.
length
>
this
.
cacheSizeRecv
)
{
this
.
dataRecv
.
splice
(
0
,
1
);
}
this
.
contentRecv
.
nativeElement
.
scrollTo
(
0
,
this
.
contentRecv
.
nativeElement
.
scrollHeight
);
});
this
.
sendSub
=
this
.
mqtt
.
subscribe
(
'
/
'
+
this
.
link
.
channel_id
+
'
/
'
+
this
.
id
+
'
/send
'
).
subscribe
(
packet
=>
{
this
.
dataSend
.
push
({
data
:
this
.
buffer_to_hex
(
packet
.
payload
),
time
:
new
Date
(),
});
if
(
this
.
dataSend
.
length
>
this
.
cacheSizeSend
)
{
this
.
dataSend
.
splice
(
0
,
1
);
}
this
.
contentSend
.
nativeElement
.
scrollTo
(
0
,
this
.
contentSend
.
nativeElement
.
scrollHeight
);
});
}
}
load
():
void
{
load
():
void
{
this
.
as
.
get
(
'
link/
'
+
this
.
id
).
subscribe
(
res
=>
{
this
.
as
.
get
(
'
link/
'
+
this
.
id
).
subscribe
(
res
=>
{
this
.
link
=
res
.
data
;
this
.
link
=
res
.
data
;
// TODO 检查在线状态
this
.
monitor
();
this
.
subscribe
();
});
});
}
}
...
@@ -58,43 +96,13 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
...
@@ -58,43 +96,13 @@ export class LinkMonitorComponent implements OnInit, OnDestroy {
}
}
send
():
void
{
send
():
void
{
console
.
log
(
'
send
'
,
this
.
text
);
//console.log('send', this.text);
this
.
ws
.
send
(
JSON
.
stringify
({
type
:
'
send
'
,
data
:
this
.
text
}));
let
content
:
any
=
this
.
text
;
}
// 转换十六进制
if
(
this
.
isHex
)
{
monitor
():
void
{
content
=
this
.
hex_to_buffer
(
this
.
text
);
this
.
ws
=
new
WebSocket
(
'
ws://127.0.0.1:8080/api/monitor/
'
+
this
.
link
.
channel_id
+
'
/
'
+
this
.
id
);
}
this
.
mqtt
.
publish
(
'
/
'
+
this
.
link
.
channel_id
+
'
/
'
+
this
.
id
+
'
/transfer
'
,
content
);
this
.
ws
.
onopen
=
e
=>
{
console
.
log
(
'
Connection open ...
'
);
// ws.send("{}");
this
.
startHearbeat
();
};
this
.
ws
.
onmessage
=
e
=>
{
console
.
log
(
'
Recv:
'
+
e
.
data
);
const
obj
=
JSON
.
parse
(
e
.
data
);
switch
(
obj
.
type
)
{
case
'
recv
'
:
this
.
dataRecv
.
push
(
obj
);
if
(
this
.
dataRecv
.
length
>
this
.
cacheSizeRecv
)
{
this
.
dataRecv
.
splice
(
0
,
this
.
dataRecv
.
length
-
this
.
cacheSizeRecv
);
}
this
.
contentRecv
.
nativeElement
.
scrollTo
(
0
,
this
.
contentRecv
.
nativeElement
.
scrollHeight
);
break
;
case
'
send
'
:
this
.
dataSend
.
push
(
obj
);
if
(
this
.
dataSend
.
length
>
this
.
cacheSizeSend
)
{
this
.
dataSend
.
splice
(
0
,
this
.
dataSend
.
length
-
this
.
cacheSizeSend
);
}
this
.
contentSend
.
nativeElement
.
scrollTo
(
0
,
this
.
contentSend
.
nativeElement
.
scrollHeight
);
break
;
}
};
this
.
ws
.
onclose
=
e
=>
{
console
.
log
(
'
Connection closed.
'
);
};
}
}
}
}
portal/src/app/mqtt.service.ts
浏览文件 @
dabd4123
...
@@ -55,6 +55,9 @@ export class MqttService {
...
@@ -55,6 +55,9 @@ export class MqttService {
return
i
===
fs
.
length
&&
i
===
ts
.
length
;
return
i
===
fs
.
length
&&
i
===
ts
.
length
;
}
}
publish
(
topic
:
string
,
content
:
any
):
void
{
this
.
client
.
publish
(
topic
,
content
);
}
subscribe
(
filterString
:
string
):
Observable
<
any
>
{
subscribe
(
filterString
:
string
):
Observable
<
any
>
{
if
(
!
this
.
topics
[
filterString
])
{
if
(
!
this
.
topics
[
filterString
])
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录