upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

1.报警参数修改

Browse Source 
2.视频墙增加
dongguan-华为云
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 23c67cd52c
commit d19624c38c
6 changed files with 677 additions and 26 deletions
Show Stats Download Patch File Download Diff File

15
src/api/http/http-api.js
Unescape Escape View File

@ -81,6 +81,21 @@ export default {
url: "/realTime/allCameras/3", url: "/realTime/allCameras/3",
name: "获取全部球机" name: "获取全部球机"
}, },
getAllCameras4:{
method: "GET",
url: "/realTime/allCameras/4",
name: "获取全部球机"
},
getAllCameras5:{
method: "GET",
url: "/realTime/allCameras/5",
name: "获取全部球机"
},
getAllCameras6:{
method: "GET",
url: "/realTime/allCameras/6",
name: "获取全部球机"
},
getWallStyle:{ getWallStyle:{
method: "GET", method: "GET",
url: "/realTime/wallStyle", url: "/realTime/wallStyle",

27
src/router/index.js
Unescape Escape View File

@ -57,6 +57,33 @@ const routes = [
}, },
component: () => import('@/views/videoWall3/index'), component: () => import('@/views/videoWall3/index'),
}, },
{
path: 'videoWall4',
name: 'videoWall4',
meta: {
icon: 'desktop',
name: '视频墙4'
},
component: () => import('@/views/videoWall4/index'),
},
{
path: 'videoWall5',
name: 'videoWall5',
meta: {
icon: 'desktop',
name: '视频墙5'
},
component: () => import('@/views/videoWall5/index'),
},
{
path: 'videoWall6',
name: 'videoWall6',
meta: {
icon: 'desktop',
name: '视频墙6'
},
component: () => import('@/views/videoWall6/index'),
},
{ {
path: 'realTimeMonitoring', path: 'realTimeMonitoring',
name: 'realTimeMonitoring', name: 'realTimeMonitoring',

37
src/views/alarmVideos/alarmLog.vue
Unescape Escape View File

@ -7,12 +7,15 @@
<a-col :span="4" > <a-col :span="4" >
<a-form-item label="巷道"> <a-form-item label="巷道">
<a-select :default-value="0" style="width: 100px" @change="handleChange"> <a-select :default-value="0" style="width: 100px" @change="handleChange">
巷道： 类型：
<a-select-option :value="0"> <a-select-option :value="0">
全部 全部
</a-select-option> </a-select-option>
<a-select-option v-for="(item,index) in streetList" :key="index" :value="item.id"> <a-select-option :value="1">
{{item.name}} 报警
</a-select-option>
<a-select-option :value="2">
巡检
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
@ -123,34 +126,16 @@ export default {
} }
}, },
{ {
title: "告警信号", title: "情况说明",
dataIndex: "signal", dataIndex: "warmName",
}, },
{ {
title: "告警时间", title: "告警时间",
dataIndex: "startTime", dataIndex: "startTime",
}, },
{ {
title: "复位时间", title: "设备编码",
dataIndex: "endTime", dataIndex: "deviceCode",
},
{
title: "巷道",
dataIndex: "streetName",
},
{
title: "涉及货位",
dataIndex: "location",
},
// TODO 日志合并
{
title: "告警时长",
dataIndex: "timeLength",
},
{
title: "录像视频",
// dataIndex: "videoPath1",
scopedSlots: {customRender: 'videoPath1'}
} }
], ],
visible: false, visible: false,
@ -187,7 +172,7 @@ export default {
}, },
handleChange(value) { handleChange(value) {
console.log(`selected ${value}`); console.log(`selected ${value}`);
this.queryParam.streetId=value this.queryParam.type=value
}, },
handleSearch() { handleSearch() {
console.log(this.queryParam) console.log(this.queryParam)

208
src/views/videoWall4/index.vue
Unescape Escape View File

@ -0,0 +1,208 @@
<template>
<div id="videos">
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
<a-row v-for='rowIndex in row' :key='rowIndex'>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
</a-col>
</a-row>
</div>
</template>
<script>
import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
name: 'top',
components: {},
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
row : 0,
column : 0,
a: 0,
clientHeight: 0,
videoH: 0,
isFullscreen: false,
originHeight: 0,
fullHeight: 0,
players: []
}
},
//watch: {},
computed: {
videoHeight() {
return( this.clientHeight/ this.row ) + 'px';
}
},
destroyed() {
this.destory()
},
mounted () {
this.getWallStyle();
this.$nextTick(() => {
this.getAllCameras()
});
let isFullscreen =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
this.isFullscreen = !!isFullscreen;
let that = this;
document.addEventListener("fullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
},
methods: {
getWallStyle(){
this.$api.httpApi.getWallStyle({
data: {}
}).then(res => {
if(res.code == 200) {
this.row = res.data[0];
this.column = res.data[1];
this.getClientHeight();
sessionStorage.setItem('originHeight', this.clientHeight)
}
}).catch(err => {
console.log(err)
})
},
getClientHeight() {
this.clientHeight = this.$el.clientHeight-40;
console.log("clientHeight:"+this.clientHeight)
},
getAllCameras(){
this.$api.httpApi.getAllCameras4({
data: {}
}).then(res => {
if(res.code == 200) {
let cameras = res.data;
for(let i = 1;i<=cameras.length;i++){
let rowIndex = Math.floor((i-1) / this.column) + 1;
if(rowIndex > this.row){
return
}
let columnIndex = i % this.column;
if(columnIndex == 0){
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);
}
}
}).catch(err => {
console.log(err)
})
},
destory(){
for(let player of this.players){
console.log("stop")
player.destroy()
}
},
full () {
if(this.isFullscreen){
this.exitfullscreen()
}else{
this.enterfullscreen()
}
},
//控制全屏
enterfullscreen () { //进入全屏
var docElm = document.getElementById('videos') // 指定容器id
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
this.$nextTick(() => {
this.clientHeight = document.body.clientHeight;
console.log("full:"+document.body.clientHeight)
})
},
//退出全屏
exitfullscreen () {
console.log("tuichu");
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.$nextTick(() => {
let origin = sessionStorage.getItem('originHeight');
if(origin){
this.clientHeight = origin;
}else{
this.getClientHeight();
}
})
}
}
}
</script>
<style>
/* #videos > .ant-row {
height: calc(100% / 8);
}
#videos > .ant-row > .ant-col{
height: calc(100% / 8);
} */
</style>

208
src/views/videoWall5/index.vue
Unescape Escape View File

@ -0,0 +1,208 @@
<template>
<div id="videos">
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
<a-row v-for='rowIndex in row' :key='rowIndex'>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
</a-col>
</a-row>
</div>
</template>
<script>
import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
name: 'top',
components: {},
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
row : 0,
column : 0,
a: 0,
clientHeight: 0,
videoH: 0,
isFullscreen: false,
originHeight: 0,
fullHeight: 0,
players: []
}
},
//watch: {},
computed: {
videoHeight() {
return( this.clientHeight/ this.row ) + 'px';
}
},
destroyed() {
this.destory()
},
mounted () {
this.getWallStyle();
this.$nextTick(() => {
this.getAllCameras()
});
let isFullscreen =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
this.isFullscreen = !!isFullscreen;
let that = this;
document.addEventListener("fullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
},
methods: {
getWallStyle(){
this.$api.httpApi.getWallStyle({
data: {}
}).then(res => {
if(res.code == 200) {
this.row = res.data[0];
this.column = res.data[1];
this.getClientHeight();
sessionStorage.setItem('originHeight', this.clientHeight)
}
}).catch(err => {
console.log(err)
})
},
getClientHeight() {
this.clientHeight = this.$el.clientHeight-40;
console.log("clientHeight:"+this.clientHeight)
},
getAllCameras(){
this.$api.httpApi.getAllCameras5({
data: {}
}).then(res => {
if(res.code == 200) {
let cameras = res.data;
for(let i = 1;i<=cameras.length;i++){
let rowIndex = Math.floor((i-1) / this.column) + 1;
if(rowIndex > this.row){
return
}
let columnIndex = i % this.column;
if(columnIndex == 0){
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);
}
}
}).catch(err => {
console.log(err)
})
},
destory(){
for(let player of this.players){
console.log("stop")
player.destroy()
}
},
full () {
if(this.isFullscreen){
this.exitfullscreen()
}else{
this.enterfullscreen()
}
},
//控制全屏
enterfullscreen () { //进入全屏
var docElm = document.getElementById('videos') // 指定容器id
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
this.$nextTick(() => {
this.clientHeight = document.body.clientHeight;
console.log("full:"+document.body.clientHeight)
})
},
//退出全屏
exitfullscreen () {
console.log("tuichu");
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.$nextTick(() => {
let origin = sessionStorage.getItem('originHeight');
if(origin){
this.clientHeight = origin;
}else{
this.getClientHeight();
}
})
}
}
}
</script>
<style>
/* #videos > .ant-row {
height: calc(100% / 8);
}
#videos > .ant-row > .ant-col{
height: calc(100% / 8);
} */
</style>

208
src/views/videoWall6/index.vue
Unescape Escape View File

@ -0,0 +1,208 @@
<template>
<div id="videos">
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
<a-row v-for='rowIndex in row' :key='rowIndex'>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
</a-col>
</a-row>
</div>
</template>
<script>
import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
name: 'top',
components: {},
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
row : 0,
column : 0,
a: 0,
clientHeight: 0,
videoH: 0,
isFullscreen: false,
originHeight: 0,
fullHeight: 0,
players: []
}
},
//watch: {},
computed: {
videoHeight() {
return( this.clientHeight/ this.row ) + 'px';
}
},
destroyed() {
this.destory()
},
mounted () {
this.getWallStyle();
this.$nextTick(() => {
this.getAllCameras()
});
let isFullscreen =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
this.isFullscreen = !!isFullscreen;
let that = this;
document.addEventListener("fullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("mozfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
that.isFullscreen = !that.isFullscreen;
});
},
methods: {
getWallStyle(){
this.$api.httpApi.getWallStyle({
data: {}
}).then(res => {
if(res.code == 200) {
this.row = res.data[0];
this.column = res.data[1];
this.getClientHeight();
sessionStorage.setItem('originHeight', this.clientHeight)
}
}).catch(err => {
console.log(err)
})
},
getClientHeight() {
this.clientHeight = this.$el.clientHeight-40;
console.log("clientHeight:"+this.clientHeight)
},
getAllCameras(){
this.$api.httpApi.getAllCameras6({
data: {}
}).then(res => {
if(res.code == 200) {
let cameras = res.data;
for(let i = 1;i<=cameras.length;i++){
let rowIndex = Math.floor((i-1) / this.column) + 1;
if(rowIndex > this.row){
return
}
let columnIndex = i % this.column;
if(columnIndex == 0){
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);
}
}
}).catch(err => {
console.log(err)
})
},
destory(){
for(let player of this.players){
console.log("stop")
player.destroy()
}
},
full () {
if(this.isFullscreen){
this.exitfullscreen()
}else{
this.enterfullscreen()
}
},
//控制全屏
enterfullscreen () { //进入全屏
var docElm = document.getElementById('videos') // 指定容器id
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
}
this.$nextTick(() => {
this.clientHeight = document.body.clientHeight;
console.log("full:"+document.body.clientHeight)
})
},
//退出全屏
exitfullscreen () {
console.log("tuichu");
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.$nextTick(() => {
let origin = sessionStorage.getItem('originHeight');
if(origin){
this.clientHeight = origin;
}else{
this.getClientHeight();
}
})
}
}
}
</script>
<style>
/* #videos > .ant-row {
height: calc(100% / 8);
}
#videos > .ant-row > .ant-col{
height: calc(100% / 8);
} */
</style>
Write Preview
Loading…
Cancel
Save