liux
/
nxdt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修复终端设备巡检问题

This commit is contained in:
BianLzhaoMin 2025-02-08 14:45:10 +08:00
parent 51a8f78477
commit 7d5250225f
5 changed files with 713 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/screen/components/video/FixedCameraInspection.vue
View File

@ -39,7 +39,8 @@
</div>
</template>
<script>
import VideoPlay from '@/views/screen/components/video/components/VideoPlay.vue'
// import VideoPlay from '@/views/screen/components/video/components/VideoPlay.vue'
import VideoPlay from '@/views/screen/components/video/components/videoPlayNew.vue'
import VideoList from '@/views/screen/components/video/components/VideoList.vue'
import { getVideoList } from '@/api/screen/screen'
import { encryptCBC } from '@/utils/aescbc'

78
src/views/screen/components/video/components/Player.vue
View File

@ -9,13 +9,9 @@
<template>
<div :class="{ player: true, selected: isSelected }" @click="handlePlayerClick" @dblclick="dblclick">
<!-- {{ title }}号窗口 -->
<video class="cell-player-1" ref="videosmallone" preload="auto" muted type="rtmp/flv" :id="id" v-if="false">
<video class="cell-player-1" ref="videosmallone" preload="auto" muted type="rtmp/flv" :id="id">
<source src="" />
</video>
<div v-else class="jessibuca">
<div id="container" ref="container"></div>
</div>
</div>
</template>
@ -51,8 +47,6 @@ export default {
videoToken: '',
qxToken: '',
qxInfo: {},
jessibuca: null,
playUrl: '',
}
},
beforeUnmount() {
@ -76,12 +70,6 @@ export default {
created() {
this.getQxToken()
},
beforeDestroy() {
if (this.jessibuca) {
this.jessibuca.destroy()
this.jessibuca = null
}
},
methods: {
getQxToken() {
getQxToken().then(res => {
@ -143,15 +131,6 @@ export default {
setTimeout(() => {
this.player.play()
}, 500) // Delay to ensure the player is ready
} else {
const url =
this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
this.createJessibuca()
this.playUrl = url
setTimeout(() => {
this.playvideo()
}, 1000)
}
}, 1000)
},
@ -225,61 +204,6 @@ export default {
}
this.$emit('clearTime', this.title)
},
createJessibuca() {
this.jessibuca = new window.Jessibuca({
container: this.$refs.container,
videoBuffer: 0.2, // 缓存时长
isResize: false,
text: '',
debug: false,
showBandwidth: true, // 显示网速
operateBtns: {
fullscreen: true,
screenshot: true,
play: true,
audio: true,
},
forceNoOffscreen: true,
isNotMute: true,
})
this.jessibuca.on('load', function () {
console.log('on load')
})
this.jessibuca.on('play', function () {
console.log('on play')
})
this.jessibuca.on('audioInfo', function (msg) {
// console.log('audioInfo', msg)
})
this.jessibuca.on('videoInfo', function (info) {
// console.log('videoInfo', info)
})
this.jessibuca.on('error', function (error) {
console.log('error', error)
})
this.jessibuca.on('start', function () {
console.log('start')
})
this.jessibuca.on('stats', function (stats) {
// console.log('stats', stats)
})
},
playvideo() {
if (this.playUrl) {
console.log('播放--', this.playUrl)
this.jessibuca.play(this.playUrl)
}
},
async stopvideo() {
if (this.jessibuca) {
await this.jessibuca.destroy()
jessibuca = null
}
},
},
}
</script>

17
src/views/screen/components/video/components/VideoPlay.vue
View File

@ -93,13 +93,13 @@
>
4路
</span>
<!-- <span
<span
:class="{ active: cellCount === 6 }"
@click="changCellCount(6)"
style="margin-right: 5px; cursor: pointer; font-size: 22px"
>
6路
</span> -->
</span>
</div>
</div>
</el-form-item>
@ -127,10 +127,7 @@
<div class="right">
<div class="cell">
<div class="cell-player">
<div class="player-container" v-for="i in cellCount" :key="i" :class="cellClassNew">
<JessibucaH265 :playerInfo="fixedData[i - 1]" />
</div>
<!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
<div :class="cellClass(i)" v-for="i in cellCount" :key="i">
<player
:title="i"
:id="`player${i}`"
@ -173,7 +170,7 @@
></player>
</div>
</template>
</div> -->
</div>
</div>
<canvas id="canvas_video" style="display: none"></canvas>
<canvas id="huaImg" style="display: none"></canvas>
@ -554,9 +551,9 @@ export default {
},
},
mounted() {
this.getDeviceList()
},
// mounted() {
// this.getDeviceList()
// },
}
</script>

702
src/views/screen/components/video/components/videoPlayNew.vue Normal file
View File

@ -0,0 +1,702 @@
<!--
* @Author: zhangtq 2452618307@qq.com
* @Date: 2024-11-15 14:26:52
* @LastEditors: zhangtq 2452618307@qq.com
* @LastEditTime: 2025-01-20 18:30:16
* @FilePath: src/views/screen/components/video/components/VideoPlay.vue
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
-->
<template>
<div style="height: 100%">
<el-form layout="inline" class="header">
<div style="display: flex; flex-direction: row">
<el-form-item style="width: 40%">
<div style="display: inline-block; float: left">
<el-button
type="primary"
size="small"
icon="el-icon-search"
style="background: #1aa4e1"
@click="openPlayBack"
v-if="logBtnShow"
>
查看回放
</el-button>
<el-button
type="primary"
size="small"
icon="el-icon-search"
style="background: #1aa4e1"
@click="openLog"
v-if="logBtnShow"
>
日志查看
</el-button>
<el-button
type="primary"
size="small"
icon="el-icon-error"
@click="closeVideos(1)"
style="background: #1aa4e1"
>
关闭
</el-button>
<el-button
type="primary"
size="small"
icon="el-icon-error"
@click="closeVideos(2)"
style="background: #1aa4e1"
>
全关闭
</el-button>
<el-button
type="primary"
id="startTiming"
v-if="timingShow"
size="small"
icon="el-icon-check"
@click="changeTimingStatus(1)"
style="background: #a4a4a4; border: 1px solid #a4a4a4"
:disabled="timingStatus"
>
开启定时
</el-button>
<el-button
type="primary"
id="closeTiming"
v-if="timingShow"
size="small"
icon="el-icon-error"
@click="changeTimingStatus(2)"
style="background: #1aa4e1; border: 1px solid #1aa4e1"
:disabled="!timingStatus"
>
关闭定时
</el-button>
</div>
</el-form-item>
<el-form-item style="width: 30%">
<div class="cell-tool">
<div class="bk-button-group">
<span
:class="{ active: cellCount === 1 }"
@click="changCellCount(1)"
style="margin-right: 5px; cursor: pointer; font-size: 22px"
>
1路
</span>
<span
:class="{ active: cellCount === 4 }"
@click="changCellCount(4)"
style="margin-right: 5px; cursor: pointer; font-size: 22px"
>
4路
</span>
<!-- <span
:class="{ active: cellCount === 6 }"
@click="changCellCount(6)"
style="margin-right: 5px; cursor: pointer; font-size: 22px"
>
6路
</span> -->
</div>
</div>
</el-form-item>
<div class="status">
<span>
<el-badge is-dot class="item" type="primary" style="margin-top: 8px"></el-badge>
总数：{{ videoNum.totalNum }}
</span>
<span style="margin-left: 10px">
<el-badge is-dot class="item" type="success" style="margin-top: 8px"></el-badge>
在线：{{ videoNum.onlineNum }}
</span>
<span style="margin-left: 10px">
<el-badge is-dot class="item" type="info" style="margin-top: 8px"></el-badge>
离线：{{ videoNum.offlineNum }}
</span>
</div>
</div>
</el-form>
<div class="main-body">
<div class="left">
<div class="left-upper"></div>
<div class="left-lower"></div>
</div>
<div class="right">
<div class="cell">
<div class="cell-player">
<div class="player-container" v-for="i in cellCount" :key="i" :class="cellClassNew">
<JessibucaH265 :playerInfo="fixedData[i - 1]" />
</div>
<!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
<player
:title="i"
:id="`player${i}`"
@playerClick="handlePlayerClick"
@dblclick="toggleFullScreen()"
v-if="cellCount != 6"
:activePlayer="activePlayer"
:is_history="true"
:ref="`player${i}`"
></player>
<player
:title="i"
:id="`player${i}`"
@playerClick="handlePlayerClick"
@dblclick="toggleFullScreen()"
v-if="cellCount == 6 && i != 2 && i != 3"
:activePlayer="activePlayer"
:is_history="true"
:ref="`player${i}`"
></player>
<template v-if="cellCount == 6 && i == 2">
<div class="cell-player-6-2-cell">
<player
:title="i"
:id="`player${i}`"
@playerClick="handlePlayerClick"
@dblclick="toggleFullScreen()"
:activePlayer="activePlayer"
:is_history="true"
:ref="`player${i}`"
></player>
<player
:title="i + 1"
:id="`player${i + 1}`"
@playerClick="handlePlayerClick"
@dblclick="toggleFullScreen()"
:activePlayer="activePlayer"
:is_history="true"
:ref="`player${i + 1}`"
></player>
</div>
</template>
</div> -->
</div>
<canvas id="canvas_video" style="display: none"></canvas>
<canvas id="huaImg" style="display: none"></canvas>
</div>
<div class="right-lower"></div>
</div>
</div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="55%" style="height: 90%">
<el-form
label-width="80px"
style="display: flex; flex-direction: column; justify-content: center; align-items: center"
>
<img :src="base64" alt="" style="width: 95vh; height: 53vh" />
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
<span style="color: red">*</span>
<span>备注：</span>
<el-input
type="textarea"
v-model="reason"
placeholder="请输入备注"
clearable
maxlength="200"
show-word-limit
style="width: 92vh; margin-left: 3vh; margin-top: 2vh"
v-no-whitespace
></el-input>
</div>
<el-form-item style="position: absolute; left: 75%; top: 93%">
<el-button type="primary" @click="storeCapture" v-preventReClick="3000">确定</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="日志" :visible.sync="logOpen" :destroy-on-close="true">
<VideoLog />
</el-dialog>
<el-dialog title="回放" :visible.sync="playBackOpen" :destroy-on-close="true">
<VideoPlayBack ref="playBack" />
</el-dialog>
</div>
</template>
<script>
import player from './Player.vue'
import { insertCapture } from '@/api/screen/screen'
import screenfull from 'screenfull'
import VideoLog from '@/views/screen/components/video/components/VideoLog.vue'
import VideoPlayBack from '@/views/screen/components/video/components/VideoPlayBack.vue'
import doc from '@/components/bonus/Doc/index.vue'
import JessibucaH265 from '@/components/JessibucaH265'
import { getVideoList } from '@/api/screen/screen'
import { getQxToken } from '@/api/video/camera'
import { selectVideoLoginInfo } from '@/api/screen/screen'
export default {
components: { VideoPlayBack, VideoLog, player, JessibucaH265 },
props: {
videoArray: {
type: Array,
default: () => [],
},
item: {
type: Object,
default: () => {},
},
videoNum: {
type: Object,
default: () => ({
totalNum: 0,
onlineNum: 0,
offlineNum: 0,
}),
},
logBtnShow: {
type: Boolean,
default: false,
},
timingShow: {
type: Boolean,
default: false,
},
timingStatus: {
type: Boolean,
default: false,
},
},
data() {
return {
logOpen: false,
playBackOpen: false,
cellCount: 4,
treeData: [],
activeArray: [],
activePlayer: 1,
puidArray: [],
dialogVisible: false,
reason: '',
base64: '',
blob: '',
fullscreen: false,
fixedData: [],
}
},
methods: {
play(item) {
console.log('item', item)
console.log('puidArray', this.puidArray)
let tf = this.puidArray.some(val => {
return val.puid === item.puid
})
if (tf) {
this.$message({
message: '此设备已经在播放中！！！',
type: 'warning',
})
return
} else {
this.puidArray.push(item)
this.playRealtimeVideo(item.puid, Number(item.ballIndex))
}
},
playVideo: function (i, activePlayer) {
setTimeout(() => {
const playerRef = `player${activePlayer}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
if (!this.activeArray.includes(activePlayer)) {
this.activeArray.push(activePlayer)
}
setTimeout(() => {
playerInstance[0].openVideo(this.puidArray[i].puid, Number(this.puidArray[i].ballIndex))
}, 500)
} else {
console.error(`Player instance for ${playerRef} is not available.`)
}
}, 500)
},
changCellCount(count) {
this.cellCount = count
let length = this.puidArray.length > count ? count : this.puidArray.length
this.puidArray = this.puidArray.sort((a, b) => a.activePlayer - b.activePlayer)
for (let i = 0; i < length; i++) {
this.closeVideoByChange(this.puidArray[i].activePlayer)
if (this.puidArray[i].activePlayer !== i + 1) {
this.activePlayer = i + 1
this.puidArray[i].activePlayer = i + 1
} else {
this.activePlayer = this.puidArray[i].activePlayer
}
this.playVideo(i, this.activePlayer)
this.$emit('changCellCount', count)
}
},
closeVideoByChange(activePlayer) {
const playerRef = `player${activePlayer}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
playerInstance[0].closeVideo()
this.activeArray.splice(this.activeArray.indexOf(activePlayer), 1)
}
},
closeVideos(type) {
if (type === 2) {
this.$emit('changeTimingStatus', 2)
while (this.activeArray.length > 0) {
this.closeVideoOne(this.activeArray[0])
}
} else {
this.closeVideoOne(this.activePlayer)
}
},
closeVideoOne(playerIndex) {
const playerRef = `player${playerIndex}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
playerInstance[0].closeVideo()
this.activeArray.splice(this.activeArray.indexOf(playerIndex), 1)
this.puidArray.splice(
this.puidArray.find(item => item.activePlayer === playerIndex),
1
)
}
},
async playRealtimeVideo(puid, ballIndex) {
if (this.activeArray.length === this.cellCount) {
this.$message.error('请先关闭一个视频再打开新视频！')
return
}
for (let i = 1; i <= this.cellCount; i++) {
if (!this.activeArray.includes(i)) {
this.activePlayer = i
break
}
}
const playerRef = `player${this.activePlayer}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
this.activeArray.push(Number(this.activePlayer))
this.puidArray[this.puidArray.length - 1].activePlayer = this.activePlayer
playerInstance[0].openVideo(puid, ballIndex)
} else {
console.error(`Player instance for ${playerRef} is not available.`)
}
this.$emit('playerClick', {
item: this.puidArray[this.puidArray.length - 1],
})
},
handlePlayerClick(e) {
this.activePlayer = e.title
let item = this.puidArray.find(item => item.activePlayer === this.activePlayer)
this.$emit('playerClick', {
item: item,
})
},
captureScreen(e) {
console.log('e:====', e)
console.log('this.activePlayer:====', this.activePlayer)
var canvas = document.getElementById('huaImg')
var video = document.getElementById(`player${this.activePlayer}`)
// const playerRef = `player${this.activePlayer}`
// const video = this.$refs[playerRef]
let ctx = canvas.getContext('2d')
canvas.width = 1080
canvas.height = 720
ctx.drawImage(video, 0, 0, 1080, 720)
const base64Image = canvas.toDataURL('image/png')
this.base64 = base64Image
this.blob = this.base64ToBlob(base64Image, 'image/png')
if (e === 2) {
saveAs(base64Image, new Date().getTime() + '.png')
} else {
this.openDialog()
}
},
openDialog() {
this.dialogVisible = true
},
base64ToBlob(base64, mime) {
const byteString = atob(base64.split(',')[1])
const ab = new ArrayBuffer(byteString.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ab], { type: mime })
},
storeCapture() {
if (!this.reason) {
this.$message({
message: '请输入备注',
type: 'warning',
})
return
}
const param = new FormData()
param.append('file', this.blob)
const activePlayerItem = this.puidArray.find(item => item.activePlayer === this.activePlayer)
activePlayerItem.fileType = 1
activePlayerItem.reason = this.reason
param.append('params', JSON.stringify(activePlayerItem))
insertCapture(param).then(res => {
this.$message({
message: '保存成功',
type: 'success',
})
this.dialogVisible = false
this.reason = ''
this.blob = ''
this.base64 = ''
this.$parent.getSnapPhotoList()
})
},
//双击全屏
toggleFullScreen() {
const playerRef = `player${this.activePlayer}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
if (screenfull.isEnabled) {
if (screenfull.isFullscreen) {
screenfull.exit()
} else {
screenfull.request(playerInstance[0].$el)
}
} else {
this.$message.error('当前不支持全屏模式！！！')
}
} else {
console.error(`Player instance for ${playerRef} is not available.`)
}
},
openLog() {
this.logOpen = true
},
openPlayBack() {
this.playBackOpen = true
},
changeTimingStatus(type) {
const startTiming = document.getElementById('startTiming')
const closeTiming = document.getElementById('closeTiming')
if (type === 1) {
startTiming.style.background = '#a4a4a4'
startTiming.style.border = '1px solid #a4a4a4'
closeTiming.style.background = '#1aa4e1'
closeTiming.style.border = '1px solid #1aa4e1'
} else {
startTiming.style.background = '#1aa4e1'
startTiming.style.border = '1px solid #1aa4e1'
closeTiming.style.background = '#a4a4a4'
closeTiming.style.border = '1px solid #a4a4a4'
}
this.$emit('changeTimingStatus', type)
},
autoPlayVideo(item) {
const playerRef = `player${this.activePlayer}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
this.activeArray.push(Number(this.activePlayer))
item.activerPlayer = this.activePlayer
this.puidArray.push(item)
setTimeout(() => {
playerInstance[0].openVideo(item.puid, item.ballIndex)
}, 1000 * this.activePlayer)
} else {
console.error(`Player instance for ${playerRef} is not available.`)
}
this.activePlayer++
},
closeAllVideo() {
for (let i = 0; i <= this.activeArray.length; i++) {
const playerRef = `player${this.activeArray[i]}`
const playerInstance = this.$refs[playerRef]
if (playerInstance && playerInstance[0]) {
setTimeout(() => {
playerInstance[0].closeVideo()
}, 1000 * i)
}
}
this.activePlayer = 1
this.activeArray = []
this.puidArray = []
},
// 获取设备列表
async getDeviceList() {
const res = await getVideoList({
deviceType: '固定摄像头',
})
this.fixedData = res.data
},
},
computed: {
cellClass() {
return function (index) {
switch (this.cellCount) {
case 1:
return ['cell-player-1']
case 4:
return ['cell-player-4']
case 6:
if (index == 1) return ['cell-player-6-1']
if (index == 2) return ['cell-player-6-2']
if (index == 3) return ['cell-player-6-none']
return ['cell-player-6']
case 9:
return ['cell-player-9']
case 16:
return ['cell-player-16']
default:
break
}
}
},
cellClassNew() {
if (this.cellCount === 1) return 'container-1'
if (this.cellCount === 4) return 'container-4'
},
},
mounted() {
this.getDeviceList()
},
}
</script>
<style scoped>
.header {
background-color: transparent;
border-radius: 10px;
display: flex;
flex-direction: column;
height: 7vh;
padding: 10px;
}
.main-body {
width: 100%;
height: 90%;
display: flex;
.right {
width: 100%;
height: 100%;
.cell {
margin-top: 0.5%;
display: flex;
flex-direction: column;
height: 100%;
}
}
}
.bk-button-group .active {
color: skyblue;
}
.cell-tool {
height: 40px;
line-height: 40px;
margin-top: -1px;
color: whitesmoke;
margin-left: 18.5%;
}
.cell-player {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
height: 75vh;
}
.cell-player-4 {
width: 50%;
height: 50% !important;
box-sizing: border-box;
}
.cell-player-1 {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.cell-player-6-1 {
width: 66.66%;
height: 66.66% !important;
box-sizing: border-box;
}
.cell-player-6-2 {
width: 33.33%;
height: 66.66% !important;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.cell-player-6-none {
display: none;
}
.cell-player-6-2-cell {
width: 100%;
height: 50% !important;
box-sizing: border-box;
}
.cell-player-6 {
width: 33.33%;
height: 33.33% !important;
box-sizing: border-box;
}
.cell-player-9 {
width: 33.33%;
height: 33.33% !important;
box-sizing: border-box;
}
.cell-player-16 {
width: 25%;
height: 25% !important;
box-sizing: border-box;
}
.ant-select {
width: 180px;
}
.status {
width: 30%;
float: right;
display: flex;
flex-direction: row;
align-items: center;
justify-content: right;
margin-right: 2rem;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: white;
span {
margin: 0 10px;
color: white;
}
}
.container-1 {
flex: 1;
}
.container-4 {
width: calc((100% / 2) - 6px);
margin-left: 6px;
margin-bottom: 6px;
}
.container-4:nth-child(2n) {
margin-left: 0;
}
</style>

2
vue.config.js
View File

@ -38,7 +38,7 @@ module.exports = {
// target: `http://localhost:18080`,
// target: 'http://192.168.0.176:18080',
// target: 'http://192.168.0.58:19090', // 杰
// target: 'http://192.168.0.14:19090', // 测试
// target: 'http://192.168.0.14:18080', // 测试
target: 'http://218.21.27.6:1999/prod-api', // 测试
// target: 'http://192.168.0.38:18080', // 郝
changeOrigin: true,