alarmEvent.vue
3.97 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<div class="alarm-event-box">
<el-table :data="tableData" height="30vh">
<el-table-column type="index" align="center" label="#"></el-table-column>
<el-table-column align="center" prop="camername" label="事件地点"></el-table-column>
<el-table-column align="center" prop="illname" label="抓拍类型"></el-table-column>
<el-table-column align="center" prop="illdt" label="发生时间"></el-table-column>
<el-table-column align="center" prop="operation" label="操作">
<template slot-scope="scope">
<el-tooltip content="查看" placement="bottom" effect="light" :visible-arrow="false">
<img
src="../../assets/img/home/look.png"
alt
class="edit"
@click="editVideo(scope.$index, scope.row)"
/>
</el-tooltip>
<span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow="false">
<img
src="../../assets/img/home/del.png"
alt
class="del"
@click="delFun(scope.$index, scope.row)"
/>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData:[]
}
},
methods:{
delFun(index, rows) {
rows.splice(index, 1);
},
editVideo(index, rows){
this.$emit('event',rows)
},
},
beforeMount(){
let that = this;
this.connect_id = new Date().getTime()
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功')
}
//事件断开
this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开')
that.connect_id = new Date().getTime()
that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
that.keepAlive = setInterval(() => {
let message = {
type: 'request',
id: new Date().getTime(),
mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
}
this.cws.send(JSON.stringify(message))
}, 20000);
}
//事件推送信息
let _this = this;
this.cws.onmessage = (evt) =>{
let data = JSON.parse(evt.data)
try {
if(data.event_data.illegal.state == 1){
let illname = _this.getCode('违法类型',data.event_data.illegal.code) || '';
let camername = data.event_data.location.name
let dt = this.showLocalTime(data.event_dt).split(' ')[1];
console.log(data.pics[0].src_url)
let pics = data.pics[0].src_url
let pos = data.event_data.location.pos
let obj = {
illname:illname,
illdt:dt,
camername:camername,
pics:pics,
pos:pos
}
if(that.tableData.length > 40) {
that.tableData.pop(obj)
} else {
that.tableData.unshift(obj)
}
that.tableData.unshift(obj)
} else{
}
} catch (error) {
}
if(data.command){
console.log('推送服务连接正常')
} else if(data.type =='response'){
console.log('请求任务推送成功')
}
}
this.keepAlive = setInterval(() => {
let message = {
type: 'request',
id: new Date().getTime(),
mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
}
this.cws.send(JSON.stringify(message))
}, 50000);
}
};
</script>
<style>
</style>>