zhangqi
2 years ago
9 changed files with 366 additions and 174 deletions
-
BINdist.rar
-
5src/api/urls.js
-
22src/components/Map/ToiletMap.vue
-
2src/components/Map/components/Map.vue
-
83src/components/Map/components/Monitor.vue
-
153src/components/Map/components/Monitor0.vue
-
252src/components/Map/components/Monitor1.vue
-
18src/components/Map/components/ToiletDetail.vue
-
5src/views/Cockpit/Cockpit.vue
@ -1,153 +0,0 @@ |
|||||
<template> |
|
||||
<el-dialog |
|
||||
:title="title" |
|
||||
:visible.sync="showMonitor" |
|
||||
:before-close="handleClose" |
|
||||
:modal-append-to-body="false"> |
|
||||
<div class="detail-content"> |
|
||||
<div id="monitor"> |
|
||||
<div class="tool"> |
|
||||
<el-date-picker |
|
||||
v-model="dateSection" |
|
||||
type="datetimerange" |
|
||||
range-separator="至" |
|
||||
start-placeholder="开始日期" |
|
||||
end-placeholder="结束日期" |
|
||||
value-format="yyyy/M/d HH:mm:ss" |
|
||||
@change="handleChange"> |
|
||||
</el-date-picker> |
|
||||
|
|
||||
</div> |
|
||||
<video ref="video" controls v-if="type === 2"></video> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import request from '@/api/request' |
|
||||
import { getM3u8Api, getImouApi } from '@/api/urls' |
|
||||
export default { |
|
||||
data () { |
|
||||
return { |
|
||||
title: '', |
|
||||
showMonitor: false, |
|
||||
type: 2, |
|
||||
m3u8Url: '', |
|
||||
imouUrl: '', |
|
||||
player: null, |
|
||||
Hls: null, |
|
||||
dateSection: [], |
|
||||
startTime: '', |
|
||||
endTime: '' |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
async viewMonitor (id, title) { |
|
||||
this.title = title + '视频' |
|
||||
this.showMonitor = true |
|
||||
// this.playMonitorToM3u8() |
|
||||
var res = await request.get(getM3u8Api, { |
|
||||
params: { |
|
||||
toiletId: 2 |
|
||||
} |
|
||||
}) |
|
||||
if (res.code === '200') { |
|
||||
this.m3u8Url = res.data.hls |
|
||||
this.playMonitorToM3u8() |
|
||||
// this.playMonitorToImou(res.data.url, res.data.kitToken) |
|
||||
} else { |
|
||||
this.$message.info(res.message) |
|
||||
} |
|
||||
// console.log(res) |
|
||||
}, |
|
||||
playMonitorToM3u8 () { |
|
||||
if (Hls.isSupported()) { |
|
||||
if (this.Hls) this.Hls.destroy() |
|
||||
this.Hls = new Hls(); |
|
||||
// this.Hls.loadSource('http://cmgw-vpc.lechange.com:8888/LCO/5L060F4PAAD53DB/0/1/20210719T080253/f741fbd46fe34fe3cd794c4931a05c8e.m3u8'); |
|
||||
this.Hls.loadSource(this.m3u8Url);//设置播放路径 |
|
||||
this.Hls.attachMedia(this.$refs.video); //解析到video标签上 |
|
||||
this.Hls.on(Hls.Events.MANIFEST_PARSED, () => { |
|
||||
this.$refs.video.play(); |
|
||||
console.log("加载成功"); |
|
||||
}); |
|
||||
this.Hls.on(Hls.Events.ERROR, (event, data) => { |
|
||||
// 监听出错事件 |
|
||||
console.log("加载失败"); |
|
||||
}) |
|
||||
} else { |
|
||||
this.$message.error("不支持的格式"); |
|
||||
return; |
|
||||
} |
|
||||
}, |
|
||||
playMonitorToImou (url, token) { |
|
||||
if (!this.player) this.player = new ImouPlayer('#monitor') |
|
||||
this.player.setup({ |
|
||||
src: [ |
|
||||
{ |
|
||||
url: url, |
|
||||
kitToken: token |
|
||||
} |
|
||||
], |
|
||||
width: 800, |
|
||||
height: 450, |
|
||||
poster: '', |
|
||||
autoplay: true, |
|
||||
controls: true, |
|
||||
}) |
|
||||
this.player.play() |
|
||||
}, |
|
||||
handleChange (val) { |
|
||||
if (val) { |
|
||||
this.startTime = val[0] |
|
||||
this.endTime = val[1] |
|
||||
} else { |
|
||||
this.loginStartTime = '' |
|
||||
this.loginEndTime = '' |
|
||||
} |
|
||||
}, |
|
||||
handleClose () { |
|
||||
if (this.type === 1 && this.player) { |
|
||||
this.player.stop() |
|
||||
this.player.destroy() |
|
||||
} |
|
||||
if (this.type === 2 && this.Hls) { |
|
||||
this.Hls.destroy() |
|
||||
this.Hls = null |
|
||||
this.$refs.video.pause() |
|
||||
this.$refs.video.removeAttribute('src') |
|
||||
this.$refs.video.load() |
|
||||
} |
|
||||
this.showMonitor = false |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
/deep/ .el-dialog { |
|
||||
width: 800px; |
|
||||
border-radius: 8px; |
|
||||
overflow: hidden; |
|
||||
.detail-content { |
|
||||
#monitor { |
|
||||
width: 800px; |
|
||||
// height: 450px; |
|
||||
.tool { |
|
||||
padding: 10px; |
|
||||
.el-date-editor { |
|
||||
.el-range__icon { |
|
||||
height: 14px; |
|
||||
line-height: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
video { |
|
||||
width: 100%; |
|
||||
height: 450px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,252 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:title="title" |
||||
|
:visible.sync="showMonitor" |
||||
|
:before-close="handleClose" |
||||
|
:modal-append-to-body="false"> |
||||
|
<div class="detail-content"> |
||||
|
<div class="tool"> |
||||
|
<span class="label">回放：</span> |
||||
|
<el-date-picker |
||||
|
v-model="date" |
||||
|
type="date" |
||||
|
value-format="yyyy/M/d" |
||||
|
placeholder="选择日期" |
||||
|
@change="handleChangeDate"> |
||||
|
</el-date-picker> |
||||
|
<el-time-picker |
||||
|
is-range |
||||
|
v-model="timeSection" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间" |
||||
|
placeholder="选择时间范围" |
||||
|
value-format="HH:mm:ss" |
||||
|
@change="handleChangeTime"> |
||||
|
</el-time-picker> |
||||
|
<a class="bt_submit" @click="returnVideo">回放</a> |
||||
|
<a class="bt_submit" @click="resetPlay">监控</a> |
||||
|
</div> |
||||
|
<div id="monitor"> |
||||
|
<video ref="video" controls v-if="type === 2"></video> |
||||
|
</div> |
||||
|
<div class="auto-box"> |
||||
|
<el-switch |
||||
|
v-model="autoClose" |
||||
|
@change="autoCloseChange"> |
||||
|
</el-switch> |
||||
|
<span class="text">十分钟后自动关闭</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import request from '@/api/request' |
||||
|
import { getImouApi, getImouReturnApi } from '@/api/urls' |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
title: '', |
||||
|
id: '', |
||||
|
showMonitor: false, |
||||
|
type: 1, |
||||
|
m3u8Url: '', |
||||
|
imouUrl: '', |
||||
|
kitToken: '', |
||||
|
player: null, |
||||
|
Hls: null, |
||||
|
autoClose: true, |
||||
|
timer: null, |
||||
|
date: '', |
||||
|
timeSection: ['00:00:00', '23:59:59'], |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
async viewMonitor (id, title) { |
||||
|
this.id = id |
||||
|
this.title = title + '视频' |
||||
|
this.showMonitor = true |
||||
|
this.autoCloseChange() |
||||
|
// this.playMonitorToM3u8() |
||||
|
this.getUrl() |
||||
|
// console.log(res) |
||||
|
}, |
||||
|
async getUrl () { |
||||
|
var res = await request.get(getImouApi, { |
||||
|
params: { |
||||
|
toiletId: this.id |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === '200') { |
||||
|
// this.m3u8Url = res.data.videoUrl |
||||
|
// this.playMonitorToM3u8() |
||||
|
this.imouUrl = res.data.url |
||||
|
this.kitToken = res.data.kitToken |
||||
|
this.playMonitorToImou(res.data.url, res.data.kitToken) |
||||
|
} else { |
||||
|
this.$message.info(res.message) |
||||
|
} |
||||
|
}, |
||||
|
playMonitorToM3u8 () { |
||||
|
if (Hls.isSupported()) { |
||||
|
this.Hls = new Hls(); |
||||
|
// this.Hls.loadSource('http://cmgw-vpc.lechange.com:8888/LCO/5L060F4PAAD53DB/0/1/20210719T080253/f741fbd46fe34fe3cd794c4931a05c8e.m3u8'); |
||||
|
this.Hls.loadSource(this.m3u8Url);//设置播放路径 |
||||
|
this.Hls.attachMedia(this.$refs.video); //解析到video标签上 |
||||
|
this.Hls.on(Hls.Events.MANIFEST_PARSED, () => { |
||||
|
this.$refs.video.play(); |
||||
|
console.log("加载成功"); |
||||
|
}); |
||||
|
this.Hls.on(Hls.Events.ERROR, (event, data) => { |
||||
|
// 监听出错事件 |
||||
|
console.log("加载失败"); |
||||
|
}) |
||||
|
} else { |
||||
|
this.$message.error("不支持的格式"); |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
playMonitorToImou (url, token) { |
||||
|
if (!this.player) this.player = new ImouPlayer('#monitor') |
||||
|
this.player.setup({ |
||||
|
src: [ |
||||
|
{ |
||||
|
url: url, |
||||
|
kitToken: token |
||||
|
} |
||||
|
], |
||||
|
width: 800, |
||||
|
height: 450, |
||||
|
poster: '', |
||||
|
autoplay: true, |
||||
|
controls: true, |
||||
|
}) |
||||
|
this.player.play() |
||||
|
}, |
||||
|
autoCloseChange () { |
||||
|
var _that = this |
||||
|
if (this.autoClose) { |
||||
|
this.timer = setTimeout(() => { |
||||
|
_that.handleClose() |
||||
|
}, 1000 * 60 * 10); |
||||
|
} else { |
||||
|
clearTimeout(this.timer) |
||||
|
} |
||||
|
}, |
||||
|
handleChangeDate (val) { |
||||
|
if (val && this.timeSection) { |
||||
|
this.startTime = val + ' ' + this.timeSection[0] |
||||
|
this.endTime = val + ' ' + this.timeSection[1] |
||||
|
} else { |
||||
|
this.startTime = '' |
||||
|
this.endTime = '' |
||||
|
} |
||||
|
}, |
||||
|
handleChangeTime (val) { |
||||
|
if (val) { |
||||
|
this.startTime = this.date + ' ' + val[0] |
||||
|
this.endTime = this.date + ' ' + val[1] |
||||
|
} else { |
||||
|
this.startTime = '' |
||||
|
this.endTime = '' |
||||
|
} |
||||
|
}, |
||||
|
async returnVideo () { |
||||
|
if (!this.date) { |
||||
|
this.$message.info('请选择日期') |
||||
|
return |
||||
|
} |
||||
|
if (!this.timeSection) { |
||||
|
this.$message.info('请选择时间段') |
||||
|
return |
||||
|
} |
||||
|
var res = await request.get(getImouReturnApi, { |
||||
|
params: { |
||||
|
toiletId: this.id, |
||||
|
startTime: this.startTime, |
||||
|
endTime: this.endTime |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === '200') { |
||||
|
this.player && this.player.destroy() |
||||
|
this.player = null |
||||
|
this.playMonitorToImou(res.data.url, res.data.kitToken) |
||||
|
} else { |
||||
|
this.$message.info(res.message) |
||||
|
} |
||||
|
console.log(res) |
||||
|
}, |
||||
|
resetPlay () { |
||||
|
this.player && this.player.destroy() |
||||
|
this.player = null |
||||
|
this.playMonitorToImou(this.imouUrl, this.kitToken) |
||||
|
}, |
||||
|
handleClose () { |
||||
|
clearTimeout(this.timer) |
||||
|
if (this.type === 1 && this.player) { |
||||
|
this.player.stop() |
||||
|
this.player.destroy() |
||||
|
this.player = null |
||||
|
} |
||||
|
if (this.type === 2 && this.Hls) { |
||||
|
this.Hls && this.Hls.destroy() |
||||
|
this.Hls = null |
||||
|
this.$refs.video.pause() |
||||
|
this.$refs.video.removeAttribute('src') |
||||
|
this.$refs.video.load() |
||||
|
} |
||||
|
this.showMonitor = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
/deep/ .el-dialog { |
||||
|
width: 800px; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
.detail-content { |
||||
|
.tool { |
||||
|
padding: 10px; |
||||
|
display: flex; |
||||
|
.label { |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
.el-date-editor { |
||||
|
.el-range__icon { |
||||
|
height: 14px; |
||||
|
line-height: 100%; |
||||
|
} |
||||
|
.el-icon-date { |
||||
|
height: 14px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
a { |
||||
|
margin-left: 10px; |
||||
|
margin-right: 0 !important; |
||||
|
} |
||||
|
} |
||||
|
#monitor { |
||||
|
width: 800px; |
||||
|
height: 450px; |
||||
|
video { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.auto-box { |
||||
|
padding: 10px; |
||||
|
@include lineHeight(40px); |
||||
|
.text { |
||||
|
margin-left: 10px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue