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
-
81src/components/Map/components/Monitor.vue
-
153src/components/Map/components/Monitor0.vue
-
252src/components/Map/components/Monitor1.vue
-
18src/components/Map/components/ToiletDetail.vue
-
3src/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