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

部分代码更新

Browse Source
merge-requests/1/head
张鑫 5 years ago
parent acfccfdb14
commit c5340766eb
4 changed files with 222 additions and 117 deletions
Show Stats Download Patch File Download Diff File

3
src/views/checkManage/index.vue
Unescape Escape View File

@ -15,6 +15,9 @@
未盘点
</span>
</div>
<div class="">
</div>
</div>
</template>
<style lang="scss" scoped>

212
src/views/realTimeMonitoring/index.vue
Unescape Escape View File

@ -10,17 +10,15 @@
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey">
<a-tab-pane key="0" tab="全部" >
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange">
<a-tab-pane key="0" tab="全部">
</a-tab-pane>
<a-tab-pane :key="index+1" :tab="item.streetName" v-for="(item,index) in realTimeListData">
<a-tab-pane :key="(index+1).toString()" :tab="item.streetName" v-for="(item,index) in realTimeListData">
</a-tab-pane>
</a-tabs>
<div class="flex-layouts">
<div class="video-list" v-for="(item,index) in realTimeListData" :key="index+1">
<!-- 对应全部的-->
<div v-if="tabKey == 0" class="video-item">
<div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
<div class="video-item" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
<canvas :class="['video',i.id?'video'+i.id:'']">
</canvas>
@ -29,21 +27,7 @@
</div>
</div>
</div>
<!--对应各个巷道的-->
<div v-if="tabKey == index+1" class="video-item">
<div class="video-box" width="400" height="225" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
<canvas :class="['video',i.id?'video'+i.id:'']">
</canvas>
<div class="video-name">
{{item.streetName}} {{i.name}}
</div>
</div>
</div>
</div>
</div>
<!-- <h1 style="color: #40a9ff">{{num}}</h1>-->
<!-- <canvas class="video-cav" width="480" height="270"></canvas>-->
<Model
:visible.sync="visible"
:modelData.sync="modelData"
@ -61,11 +45,98 @@ export default {
return {
// 收起true 展开false
controlLabel: true,
realTimeListData:[],
realTimeListData:[{
"streetId": 1,
"streetName": "巷道1",
"cameras": [
{
"id": 13,
"name": "测试球机 不要动11",
"ip": "192.168.1.105",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.105:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:32"
},
{
"id": 14,
"name": "测试球机 不要动106",
"ip": "192.168.1.106",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.106:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:47"
}
]
},
{
"streetId": 36,
"streetName": "巷道2",
"cameras": [
{
"id": 15,
"name": "测试球机 不要动107",
"ip": "192.168.1.107",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.107:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:50:55"
},
{
"id": 16,
"name": "测试球机 不要动108",
"ip": "192.168.1.108",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:hzleaper123@192.168.1.108:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:51:04"
}
]
},
{
"streetId": 37,
"streetName": "gge",
"cameras": [
{
"id": 17,
"name": "测试球机 不要动111",
"ip": "192.168.1.111",
"port": 37777,
"user": "admin",
"password": "hzleaper123",
"rtsp": "rtsp://admin:admin123@192.168.1.111:554/cam/realmonitor?channel=1&subtype=0",
"position": "222",
"focusing": "123",
"aperture": "123",
"multiple": 111,
"updateTime": "2020-12-25T13:51:18"
}
]
}],
url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
tabKey: "0",
path:[],
player:'',
player:"",
visible:false,
modelData:[],
timer:'',
@ -75,7 +146,8 @@ export default {
inject: ['reload'],
mounted() {
this.getRealTimeList()
// this.getVideos()
console.log('index mounted执行了')
// this.getSdVideos()
this.timerFn()
},
destroyed(){
@ -88,48 +160,72 @@ export default {
// handleUpDown() {
// this.controlLabel = !this.controlLabel;
// },
getSdVideos(channel,id,that){
console.log('首页getSdVideos方法执行了')
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+channel
var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+ channel
var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video'+id),
audio: false,
pauseWhenHidden: false,
videoBufferSize: 16 * 1024 * 1024,
loop:false,
onPlay: function() {
//开始播放事件回调
console.log('play')
},
onEnded: function() {
//播放完成事件回调
console.log('end')
},
onPause:function(){
//暂停时的回调
console.log('pause')
},
onVideoDecode:function(){
//–在每个解码和渲染的视频帧之后调用的回调
}
})
player.play()
return that.player=player
},
getRealTimeList(){
var that=this
this.$api.httpApi.getRealTimeList({
data: {}
}).then(res => {
console.log(res.data)
if(res.code == 200){
this.realTimeListData = res.data
res.data.forEach(function(item){
// this.$api.httpApi.getRealTimeList({
// data: {}
// }).then(res => {
// console.log(res.data)
// if(res.code == 200){
// this.realTimeListData = res.data
console.log('首页getRealTimeList方法执行了')
that.realTimeListData.forEach(function(item){
// console.log(item.cameras)
var $that = that
console.log('进来第一层循环了')
item.cameras.forEach(function(item){
// console.log(item.rtsp)
console.log('进来第二层循环了')
$that.$api.httpApi.getChannel({
data:{
"clarity":"SD", //标清SD
"sourceUrl":item.rtsp,
"paramBefore": "-y -i",
"paramBehind": "-f mpegts -vcodec mpeg1video -an -s 480*270 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 400*225 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}
}).then(res => {
console.log(res.data)
var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
// var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video'+item.id),
audio: false,
pauseWhenHidden: false,
videoBufferSize: 8 * 1024 * 1024,
loop:false,
})
player.play()
return $that.player=player
console.log('首页push调用channel执行了')
$that.getSdVideos(res.data.channel,item.id,$that)
}).catch(err => {
console.log(err)
})
})
})
}
console.log(this.realTimeListData)
}).catch(err => {
});
// }).catch(err => {
// console.log(err)
// })
},
timerFn(){
const that=this
@ -142,21 +238,14 @@ export default {
}
},1000)
},
// getVideos(){
// var canvas = document.querySelector('.video-cav')
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
// var player = new JSMpeg.Player(url, {
// canvas: canvas,
// audio: false,
// pauseWhenHidden: false,
// videoBufferSize: 8 * 1024 * 1024,
// loop:false
// })
// },
tabsChange(key){
console.log(key)
},
showModel(item){
console.log(11111)
this.player= this.player.destroy()
clearInterval(this.timer)
this.player= this.player.destroy()
document.querySelector('.video').remove();
console.log(item)
this.visible = true
this.modelData=item
@ -218,13 +307,13 @@ export default {
display: flex;
width: 1630px;
flex-wrap: wrap;
position: fixed
}
.video-list{
display: flex;
.video-item{
display: flex;
width: 100%;
.video-box{
position: relative;
margin: 3px;
cursor: pointer;
@ -244,6 +333,5 @@ export default {
}
}
}
}
}
</style>

28
src/views/realTimeMonitoring/model.vue
Unescape Escape View File

@ -78,7 +78,7 @@ export default {
console.log('触发了watch，重新赋值')
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
console.log(newVal.rtsp)
this.request(newVal)
this.getHdVideos(newVal)
})
}
@ -128,7 +128,7 @@ export default {
// this.isRouter = true
// console.log(this.mdata)
// this.player= this.player.destroy()
// this.request(this.mdata)
// this.getHdVideos(this.mdata)
// })
// },
handleCancel() {
@ -140,25 +140,39 @@ export default {
that.$emit('close',false,{})
},500)
},
request(data){
getHdVideos(data){
const that=this
this.$api.httpApi.getChannel({
data:{
"clarity":"HD", //高清HD
"sourceUrl":data.rtsp,
"paramBefore": "-y -i",
"paramBehind": "-f mpegts -vcodec mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
"paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 3000k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
}
}).then(res => {
console.log(res.data)
var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
// var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
console.log('我是大屏视频回调')
// var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel
var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video-canvas'),
audio: false,
pauseWhenHidden: false,
videoBufferSize: 8 * 1024 * 1024,
videoBufferSize: 16 * 1024 * 1024,
loop:false,
})
player.play();
// var playvideotimer=setInterval(function(){
// var currentTime=player.currentTime;
// console.log(currentTime);
// if(currentTime>=3){
// clearInterval(playvideotimer)
// player.destroy();
// document.querySelector('.video-canvas').remove();
// }
// },60)
return that.player=player
}).catch(err => {

26
vue.config.js
Unescape Escape View File

@ -16,17 +16,17 @@ module.exports = {
},
port: 8008
},
configureWebpack: config => {
// 生产去除日志
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
config.optimization.minimizer[0].options.terserOptions.compress.drop_console =
true
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger =
true
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
'console.log'
]
}
},
// configureWebpack: config => {
// // 生产去除日志
// if (process.env.NODE_ENV === 'production') {
// config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
// config.optimization.minimizer[0].options.terserOptions.compress.drop_console =
// true
// config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger =
// true
// config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
// 'console.log'
// ]
// }
// },
};

Write Preview
Loading…
Cancel
Save