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> </span>
</div> </div>
<div class="">
</div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -10,40 +10,24 @@
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey"> <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange">
<a-tab-pane key="0" tab="全部" > <a-tab-pane key="0" tab="全部">
</a-tab-pane> </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-tab-pane>
</a-tabs> </a-tabs>
<div class="flex-layouts"> <div class="flex-layouts">
<div class="video-list" v-for="(item,index) in realTimeListData" :key="index+1"> <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)">
<div v-if="tabKey == 0" class="video-item"> <canvas :class="['video',i.id?'video'+i.id:'']">
<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> </canvas>
<div class="video-name"> <div class="video-name">
{{item.streetName}} {{i.name}} {{item.streetName}} {{i.name}}
</div> </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> </div>
</div> </div>
<!-- <h1 style="color: #40a9ff">{{num}}</h1>-->
<!-- <canvas class="video-cav" width="480" height="270"></canvas>-->
<Model <Model
:visible.sync="visible" :visible.sync="visible"
:modelData.sync="modelData" :modelData.sync="modelData"
@ -61,11 +45,98 @@ export default {
return { return {
// 收起true 展开false // 收起true 展开false
controlLabel: true, 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", url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
tabKey: "0", tabKey: "0",
path:[], path:[],
player:'', player:"",
visible:false, visible:false,
modelData:[], modelData:[],
timer:'', timer:'',
@ -75,7 +146,8 @@ export default {
inject: ['reload'], inject: ['reload'],
mounted() { mounted() {
this.getRealTimeList() this.getRealTimeList()
// this.getVideos() console.log('index mounted执行了')
// this.getSdVideos()
this.timerFn() this.timerFn()
}, },
destroyed(){ destroyed(){
@ -88,48 +160,72 @@ export default {
// handleUpDown() { // handleUpDown() {
// this.controlLabel = !this.controlLabel; // 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(){ getRealTimeList(){
var that=this var that=this
this.$api.httpApi.getRealTimeList({ // this.$api.httpApi.getRealTimeList({
data: {} // data: {}
}).then(res => { // }).then(res => {
console.log(res.data) // console.log(res.data)
if(res.code == 200){ // if(res.code == 200){
this.realTimeListData = res.data // this.realTimeListData = res.data
res.data.forEach(function(item){ console.log('首页getRealTimeList方法执行了')
// console.log(item.cameras) that.realTimeListData.forEach(function(item){
var $that = that // console.log(item.cameras)
item.cameras.forEach(function(item){ var $that = that
// console.log(item.rtsp) console.log('进来第一层循环了')
$that.$api.httpApi.getChannel({ item.cameras.forEach(function(item){
data:{ // console.log(item.rtsp)
"sourceUrl":item.rtsp, console.log('进来第二层循环了')
"paramBefore": "-y -i", $that.$api.httpApi.getChannel({
"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" data:{
} "clarity":"SD", //标清SD
}).then(res => { "sourceUrl":item.rtsp,
console.log(res.data) "paramBefore": "-y -i",
var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel "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"
// var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel }
var player = new JSMpeg.Player(url, { }).then(res => {
canvas: document.querySelector('.video'+item.id), console.log(res.data)
audio: false, console.log('首页push调用channel执行了')
pauseWhenHidden: false, $that.getSdVideos(res.data.channel,item.id,$that)
videoBufferSize: 8 * 1024 * 1024, }).catch(err => {
loop:false, console.log(err)
})
player.play()
return $that.player=player
}).catch(err => {
})
})
}) })
} })
console.log(this.realTimeListData) })
}).catch(err => {
}); // }).catch(err => {
// console.log(err)
// })
}, },
timerFn(){ timerFn(){
const that=this const that=this
@ -142,21 +238,14 @@ export default {
} }
},1000) },1000)
}, },
// getVideos(){ tabsChange(key){
// var canvas = document.querySelector('.video-cav') console.log(key)
// 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
// })
// },
showModel(item){ showModel(item){
console.log(11111) console.log(11111)
this.player= this.player.destroy()
clearInterval(this.timer) clearInterval(this.timer)
this.player= this.player.destroy()
document.querySelector('.video').remove();
console.log(item) console.log(item)
this.visible = true this.visible = true
this.modelData=item this.modelData=item
@ -218,30 +307,29 @@ export default {
display: flex; display: flex;
width: 1630px; width: 1630px;
flex-wrap: wrap; flex-wrap: wrap;
position: fixed
} }
.video-list{ .video-list{
display: flex; display: flex;
.video-item{ .video-item{
display: flex; display: flex;
width: 100%; width: 100%;
.video-box{ position: relative;
position: relative; margin: 3px;
margin: 3px; cursor: pointer;
cursor: pointer; .video-name{
.video-name{ position: absolute;
position: absolute; top: 10px;
top: 10px; left: 10px;
left: 10px; color: #ffda62;
color: #ffda62; font-weight: 600;
font-weight: 600; font-size: 17px;
font-size: 17px; }
} .video{
.video{ border: solid 1px #000000;
border: solid 1px #000000; background: #001529;
background: #001529; width: 400px;
width: 400px; height: 225px;
height: 225px;
}
} }
} }
} }

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

@ -78,7 +78,7 @@ export default {
console.log('触发了watch，重新赋值') console.log('触发了watch，重新赋值')
this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题 this.$nextTick(()=>{ //this.$nextTick解决不能在表单渲染之前赋值的报错问题
console.log(newVal.rtsp) console.log(newVal.rtsp)
this.request(newVal) this.getHdVideos(newVal)
}) })
} }
@ -128,7 +128,7 @@ export default {
// this.isRouter = true // this.isRouter = true
// console.log(this.mdata) // console.log(this.mdata)
// this.player= this.player.destroy() // this.player= this.player.destroy()
// this.request(this.mdata) // this.getHdVideos(this.mdata)
// }) // })
// }, // },
handleCancel() { handleCancel() {
@ -140,25 +140,39 @@ export default {
that.$emit('close',false,{}) that.$emit('close',false,{})
},500) },500)
}, },
request(data){ getHdVideos(data){
const that=this const that=this
this.$api.httpApi.getChannel({ this.$api.httpApi.getChannel({
data:{ data:{
"clarity":"HD", //高清HD
"sourceUrl":data.rtsp, "sourceUrl":data.rtsp,
"paramBefore": "-y -i", "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 => { }).then(res => {
console.log(res.data) console.log(res.data)
var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel console.log('我是大屏视频回调')
// var url = 'ws://127.0.0.1:9007/api/lychee/stream/live/'+res.data.channel // 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, { var player = new JSMpeg.Player(url, {
canvas: document.querySelector('.video-canvas'), canvas: document.querySelector('.video-canvas'),
audio: false, audio: false,
pauseWhenHidden: false, pauseWhenHidden: false,
videoBufferSize: 8 * 1024 * 1024, videoBufferSize: 16 * 1024 * 1024,
loop:false, 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 return that.player=player
}).catch(err => { }).catch(err => {

26
vue.config.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save