Skip to content

V
video-monitoring
Commit aa54396f authored by 拾柒's avatar 拾柒
Browse files
Options

修改模板信息

parent 04ac4a7f
Hide whitespace changes
Inline Side-by-side
Showing with 76 additions and 29 deletions
package.json
View file @ aa54396f
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
}, },
"dependencies": { "dependencies": {
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"as-time-line": "^1.2.0",
"axios": "0.28.1", "axios": "0.28.1",
"clipboard": "2.0.8", "clipboard": "2.0.8",
"core-js": "3.37.1", "core-js": "3.37.1",
......
src/main.js
View file @ aa54396f
...@@ -38,6 +38,9 @@ import VueMeta from 'vue-meta' ...@@ -38,6 +38,9 @@ import VueMeta from 'vue-meta'
// 字典数据组件 // 字典数据组件
import DictData from '@/components/DictData' import DictData from '@/components/DictData'
import timeLine from "as-time-line";
import "as-time-line/lib/timeline.css";
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey Vue.prototype.getConfigKey = getConfigKey
...@@ -61,6 +64,7 @@ Vue.component('ImagePreview', ImagePreview) ...@@ -61,6 +64,7 @@ Vue.component('ImagePreview', ImagePreview)
Vue.use(directive) Vue.use(directive)
Vue.use(plugins) Vue.use(plugins)
Vue.use(VueMeta) Vue.use(VueMeta)
Vue.use(timeLine)
DictData.install() DictData.install()
/** /**
......
src/views/video/index.vue
View file @ aa54396f
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<template> <template>
<div style="background-color: #D4D9E5"> <div style="background-color: #D4D9E5">
<div class="hello-ezuikit-js" style="padding:13px 30px;display: flex"> <div class="hello-ezuikit-js" style="padding:13px 30px;display: flex">
<div id="video-container-out" :style="{width: 910 + 'px', height: 415 + 'px', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" @dblclick="handleDoubleClick(0)"> <div id="video-container-out" :style="{width: 910 + 'px', height: 415 + 'px', backgroundColor: '#424246', marginRight: '30px' ,boxShadow: '#2b2f3a 0px 0px 20px'}" >
<div id="video-container" style="width: 910px; height: 380px" @click="abv" > <div id="video-container" style="width: 910px; height: 415px" @click="abv" >
</div> </div>
<div style="display: flex;"> <div style="display: flex;" v-if = "false">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain--> <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
<!-- @click="fulScreen"></el-button>--> @click="enableZoom"></el-button>
<el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain <el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave"></el-button> @click="startSave"></el-button>
<el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain <el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
@click="capturePicture"></el-button> @click="capturePicture"></el-button>
</div> </div>
</div> </div>
<div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px" @dblclick="handleDoubleClick(1)"> <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px" >
<div id="video-container1" style="width: 910px; height: 380px"> <div id="video-container1" style="width: 910px; height: 415px">
</div> </div>
<div style="display: flex;"> <div style="display: flex;" v-if = "false">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain--> <!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain-->
<!-- @click="fulScreen1"></el-button>--> <!-- @click="fulScreen1"></el-button>-->
<el-button v-if="recordButton1" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain <el-button v-if="recordButton1" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
</div> </div>
<div class="hello-ezuikit-js" style="padding:10px 30px;display: flex"> <div class="hello-ezuikit-js" style="padding:10px 30px;display: flex">
<div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;margin-right: 30px;boxShadow: #2b2f3a 0px 0px 20px" @dblclick="handleDoubleClick(2)"> <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;margin-right: 30px;boxShadow: #2b2f3a 0px 0px 20px" >
<div id="video-container2" style="width: 910px; height: 380px"> <div id="video-container2" style="width: 910px; height: 415px">
</div> </div>
<div style="display: flex;"> <div style="display: flex;" v-if = "false">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain--> <!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain-->
<!-- @click="fulScreen2"></el-button>--> <!-- @click="fulScreen2"></el-button>-->
<el-button v-if="recordButton2" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain <el-button v-if="recordButton2" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
...@@ -47,10 +47,10 @@ ...@@ -47,10 +47,10 @@
@click="capturePicture2"></el-button> @click="capturePicture2"></el-button>
</div> </div>
</div> </div>
<div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px" @dblclick="handleDoubleClick(3)"> <div id="video-container-out" style="width: 910px; height: 415px;background-color: #424246;boxShadow: #2b2f3a 0px 0px 20px" >
<div id="video-container3" style="width: 910px; height: 380px"> <div id="video-container3" style="width: 910px; height: 415px">
</div> </div>
<div style="display: flex;"> <div style="display: flex;" v-if = "false">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain--> <!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain-->
<!-- @click="fulScreen"></el-button>--> <!-- @click="fulScreen"></el-button>-->
<el-button v-if="recordButton3" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain <el-button v-if="recordButton3" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
...@@ -211,10 +211,10 @@ export default { ...@@ -211,10 +211,10 @@ export default {
accessToken: token, accessToken: token,
url: videoUrl, url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版; // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板 template: 'd826f4675a6844a18eeb3033b3a5a857', //模板
plugin: ['talk'], // 加载插件，talk-对讲 plugin: ['talk'], // 加载插件，talk-对讲
width: 910, width: 910,
height: 380, height: 415,
}) })
}, },
getInit1(token,videoUrl){ getInit1(token,videoUrl){
...@@ -224,10 +224,10 @@ export default { ...@@ -224,10 +224,10 @@ export default {
accessToken: token, accessToken: token,
url: videoUrl, url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版; // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板 template: 'd826f4675a6844a18eeb3033b3a5a857', //模板
plugin: ['talk'], // 加载插件，talk-对讲 plugin: ['talk'], // 加载插件，talk-对讲
width: 910, width: 910,
height: 380, height: 415,
}) })
}, },
getInit2(token,videoUrl){ getInit2(token,videoUrl){
...@@ -237,10 +237,10 @@ export default { ...@@ -237,10 +237,10 @@ export default {
accessToken: token, accessToken: token,
url: videoUrl, url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版; // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板 template: 'd826f4675a6844a18eeb3033b3a5a857', //模板
plugin: ['talk'], // 加载插件，talk-对讲 plugin: ['talk'], // 加载插件，talk-对讲
width: 910, width: 910,
height: 380, height: 415,
}) })
}, },
getInit3(token,videoUrl){ getInit3(token,videoUrl){
...@@ -250,10 +250,10 @@ export default { ...@@ -250,10 +250,10 @@ export default {
accessToken: token, accessToken: token,
url: videoUrl, url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版; // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板 template: 'd826f4675a6844a18eeb3033b3a5a857', //模板
plugin: ['talk'], // 加载插件，talk-对讲 plugin: ['talk'], // 加载插件，talk-对讲
width: 910, width: 910,
height: 380, height: 415,
}) })
}, },
fulScreen() { fulScreen() {
...@@ -268,6 +268,9 @@ export default { ...@@ -268,6 +268,9 @@ export default {
fulScreen3() { fulScreen3() {
this.player3.fullScreen() this.player3.fullScreen()
}, },
enableZoom() {
this.player.fast(2)
},
capturePicture() { capturePicture() {
var capturePicturePromise = this.player.capturePicture( var capturePicturePromise = this.player.capturePicture(
`${new Date().getTime()}` `${new Date().getTime()}`
......
src/views/video/playback.vue
View file @ aa54396f
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="playback"> <div class="playback">
<div class="hello-ezuikit-js" style="padding:20px 30px;display: flex"> <div class="hello-ezuikit-js" style="padding:20px 30px;display: flex">
<div id="video-container-out" style="width: 1404px; height: 750px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" > <div id="video-container-out" style="width: 1404px; height: 750px;background-color: #424246;margin-right: 30px;box-shadow: #2b2f3a 0px 0px 20px" >
<div id="video-container" style="width: 1404px; height: 700px" > <div id="video-container" style="width: 1404px; height: 750px" >
</div> </div>
<div style="display: flex;"> <div style="display: flex;" v-if="false">
<!-- <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain--> <el-button icon="el-icon-full-screen" style="border: transparent;background-color: transparent;font-size: large" plain
<!-- @click="fulScreen"></el-button>--> @click="enableZoom"></el-button>
<el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain <el-button v-if="recordButton" icon="el-icon-video-camera" style="border: transparent;background-color: transparent;font-size: large" plain
@click="startSave"></el-button> @click="startSave"></el-button>
<el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain <el-button v-if="!recordButton" icon="el-icon-video-camera-solid" style="border: transparent;background-color: transparent;font-size: large;color: #F6F6FA" plain
...@@ -54,6 +54,7 @@ export default { ...@@ -54,6 +54,7 @@ export default {
name: "playback", name: "playback",
data() { data() {
return { return {
dateArr: [],
code: '', code: '',
// startTime // startTime
startTime: '', startTime: '',
...@@ -95,11 +96,15 @@ export default { ...@@ -95,11 +96,15 @@ export default {
}, },
mounted() { mounted() {
console.info('传递的数据',this.$route.query.carryRowCode)
this.carryRowCode = this.$route.query.carryRowCode; this.carryRowCode = this.$route.query.carryRowCode;
this.code = this.$route.query.carryRowCode.code; this.code = this.$route.query.carryRowCode.code;
this.startTime = this.$route.query.carryRowCode.monitoringStarttime this.startTime = this.$route.query.carryRowCode.monitoringStarttime
this.endTime = this.$route.query.carryRowCode.monitoringFinallytime this.endTime = this.$route.query.carryRowCode.monitoringFinallytime
const timestamp = []
timestamp.push(new Date(this.startTime).getTime())
timestamp.push(new Date(this.endTime).getTime())
this.dateArr = timestamp
// this.getIndex() // this.getIndex()
this.getToken() this.getToken()
}, },
...@@ -120,12 +125,44 @@ export default { ...@@ -120,12 +125,44 @@ export default {
beforeDestroy() { beforeDestroy() {
}, },
methods: { methods: {
// 格式化时间
formatDate(dateStr) {
const date = new Date(dateStr);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hours = ('0' + date.getHours()).slice(-2);
const minutes = ('0' + date.getMinutes()).slice(-2);
const seconds = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
handleClickTimeLineFn(date) {
// 格式化时间
const formattedDate = this.formatDate(date);
// 获取当前的视频url
getHistoryStream(this.code,this.accessToken,formattedDate,this.endTime).then(res => {
console.info('回放视频流',res)
if(res.data.code == 200){
this.player.stop()
// this.player.destroyed()
this.player = null
this.getInit(this.accessToken,res.data.data.url)
} else {
this.$message.warning('当前视频没有回放')
this.back()
}
})
},
// 返回 // 返回
back(){ back(){
this.$router.push({ this.$router.push({
path: "/monitoringhistory/history", path: "/monitoringhistory/history",
}) })
}, },
enableZoom() {
this.player.fast(2)
},
fulScreen() { fulScreen() {
this.player.fullScreen() this.player.fullScreen()
}, },
...@@ -190,10 +227,12 @@ export default { ...@@ -190,10 +227,12 @@ export default {
// url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959', // url: 'ezopen://open.ys7.com/AW5687499/1.hd.local.rec?begin=20240805100000&end=20240805235959',
url: videoUrl, url: videoUrl,
// simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版; // simple - 极简版; pcLive-pc直播；pcRec-pc回放； mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
template: 'simple', //模板 template: '0e3e189e86084314be1b738037019d81', //模板
header: ['capturePicture', 'save', 'zoom'],
footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
plugin: ['talk'], // 加载插件，talk-对讲 plugin: ['talk'], // 加载插件，talk-对讲
width: 1404, width: 1404,
height: 700, height: 750,
}) })
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment