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

pandian

Browse Source
merge-requests/1/head
qiushui 4 years ago
parent a0c82c4bda
commit e28ef3e027
6 changed files with 62 additions and 363 deletions
Show Stats Download Patch File Download Diff File

59
src/views/checkManage/Subsection.vue
Unescape Escape View File

@ -22,7 +22,8 @@
</a-layout-content>
</a-layout>
<a-layout-footer>
<a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row">
<!-- <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row"> -->
<a-tabs default-active-key="1" tab-position="bottom" @onchange="changeTab" @change="value => select.row = value" v-if="total.row > nums.row">
<a-tab-pane
v-for="index in latticeRow"
:key="index"
@ -86,7 +87,9 @@ export default {
return parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
},
random() {
return {
row: this.getRandomRow(this.select.row),
column: this.getRandomColumn(this.select.column),
}
@ -117,6 +120,9 @@ export default {
destroyed() {
},
methods: {
changeTab(){
console.log("latticeRow"+this.latticeRow)
},
// 获取行或列的范围字符串
getRandom(index, lattice, num, total) {
if(index !== lattice) {
@ -166,36 +172,41 @@ export default {
// }
},
async getStatus() {
console.log( "column"+this.latticeColumn)
console.log( "row"+this.latticeRow)
// for(let i = 1 ; i++; i < this.latticeRow) {
// let rowColumn = this.getRandomRow(i);
// this.status.row[i] = this.fragmentStatus('row', i);
// let r = this.getRandomRow(i);
// console.log(r)
// //this.status.row[i] = this.fragmentStatus('row', i);
// }
//
// for(let i = 1 ; i++; i < this.latticeColumn) {
// let rowColumn = this.getRandomColumn(i);
// this.status.column[i] = this.fragmentStatus('column', i);
// }
for(let row = 1; row <= this.total.row; row++) {
for(let column = 1; column <= this.total.column; column++) {
let status = (this.stockInfo[`${row}-${column}`] || {}).status || 0;
if(status < 2) {
// 当前是在第几段
let latticeRow = parseInt(row / this.nums.row) + (row % this.nums.row > 0 ? 1 : 0);
let latticeColumn = parseInt(column / this.nums.column) + (column % this.nums.column > 0 ? 1 : 0);
if(status === 1) {
console.log('第几段', latticeRow, latticeColumn);
console.log(row, column,status);
this.$set(this.status.row, latticeRow, status);
this.$set(this.status.column, latticeColumn, status);
}else {
if(!this.status.row[latticeRow]) this.$set(this.status.row, latticeRow, status);
if(!this.status.column[latticeColumn]) this.$set(this.status.column, latticeColumn, status);
}
}
}
}
console.log(this.status);
// for(let row = 1; row <= this.total.row; row++) {
// for(let column = 1; column <= this.total.column; column++) {
// let status = (this.stockInfo[`${row}-${column}`] || {}).status || 0;
// if(status < 2) {
// // 当前是在第几段
// let latticeRow = parseInt(row / this.nums.row) + (row % this.nums.row > 0 ? 1 : 0);
// let latticeColumn = parseInt(column / this.nums.column) + (column % this.nums.column > 0 ? 1 : 0);
// if(status === 1) {
// console.log('第几段', latticeRow, latticeColumn);
// console.log(row, column,status);
// this.$set(this.status.row, latticeRow, status);
// this.$set(this.status.column, latticeColumn, status);
// }else {
// if(!this.status.row[latticeRow]) this.$set(this.status.row, latticeRow, status);
// if(!this.status.column[latticeColumn]) this.$set(this.status.column, latticeColumn, status);
// }
// }
// }
// }
// console.log(this.status);
},
}
}

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

@ -193,7 +193,7 @@ export default {
}).then(res => {
this.data = res.data.list;
this.select = res.data.list[0].id
this.getStockList(res.data.list[0].id)
//this.getStockList(res.data.list[0].id)
this.getStreetDetail(res.data.list[0].id);
this.getStockRowColumn();
}).catch(err => {
@ -225,10 +225,10 @@ export default {
leftShelveId,
rightShelveId
};
this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{
this.$set(this, 'stockInfo', data);
// this.stockInfo = data;
});
// this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{
// this.$set(this, 'stockInfo', data);
// // this.stockInfo = data;
// });
}
this.timer && clearInterval(this.timer);
init();
@ -254,23 +254,23 @@ export default {
})
},
//获取盘点列表
getStockList(streetId) {
this.$api.httpApi.getStockList({
params: {
streetId: streetId,
}
}).then(res => {
this.checkList = res.data
}).catch(err => {
// getStockList(streetId) {
// this.$api.httpApi.getStockList({
// params: {
// streetId: streetId,
// }
// }).then(res => {
// this.checkList = res.data
// }).catch(err => {
});
},
// });
// },
handleChange(value) {
console.error('handleChange');
console.log(value)
this.select = value
this.getStreetDetail(value)
this.getStockList(value);
//this.getStockList(value);
this.getStockRowColumn()
},
tocheckOperation(checkObj, item) {

157
src/views/realTimeMonitoring/VideoPlayer.vue
Unescape Escape View File

@ -1,157 +0,0 @@
<template>
<video-player
v-if="showVideo"
ref="video-player"
class="vjs-custom-skin"
:options="playerOptions"
@pause="onPlayerPause"
@playing="onPlayerPlaying"
@timeupdate="onPlayerTimeupdate"
@ended="onPlayerEnded"
@error="onError"
@emptied="onEmptied"
@statechanged="playerStateChanged"
@loadeddata="onPlayerLoadeddata"
/>
</template>
<script>
import 'vue-video-player/src/custom-theme.css'
export default {
name: 'VideoPlayer',
props: {
src: {
type: String,
// default: 'http://cctvalih5ca.v.myalicdn.com/live/cctv6_1/index.m3u8',
required: true
}
},
components: {
videoPlayer
},
data() {
return {
timer: null, // 识别是否正常播放
currentTime: 0, // 当前播放时间
showVideo: true,
isPlay: false, // 是否正在播放
playerOptions: {
sources: [{
type: 'application/x-mpegURL',
withCredentials: false,
src: this.src
}],
height: '100%',
language: 'zh-CN',
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
techOrder: ['html5'],
flash: { hls: { withCredentials: false }},
html5: { hls: { withCredentials: false }},
autoplay: true, // 自动播放
muted: true, // 默认情况下将会消除任何音频。
controls: true,
notSupportedMessage: '不支持的视频格式',
controlBar: {
timeDivider: false, // 当前时间和持续时间的分隔符
durationDisplay: false, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
},
mounted() {
this.$nextTick(()=> {
const videoRef = this.$refs['video-player'];
// videoRef.player.play();
console.log(videoRef);
})
},
methods: {
// 暂停回调
onPlayerPause() {
this.isPlay && this.$emit('showModel');
// this.isPlay = false;
console.log('onPlayerPause');
},
// 已开始播放回调
onPlayerPlaying(...args) {
this.isPlay = true;
console.log('onPlayerPlaying');
},
// 视频播完回调
onPlayerEnded($event) {
this.isPlay = false;
console.log('onPlayerEnded');
},
onTimer() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.onloadVideo();
}, 8 * 1000)
},
onloadVideo() {
console.log('重新加载了');
const videoRef = this.$refs['video-player'];
console.log(videoRef);
this.showVideo = false;
this.$nextTick(() => {
this.showVideo = true;
})
},
onError(data) {
console.log('onError');
console.log(data);
},
onEmptied(data) {
console.log('onEmptied');
console.log(data);
},
onPlayerLoadeddata($event) {
console.log('onPlayerLoadeddata')
},
playerStateChanged(playerCurrentState) {
// 视频正在等待中
if(playerCurrentState.waiting) {
// this.onTimer();
}else {
this.timer && clearTimeout(this.timer);
}
// console.log('player current update state', playerCurrentState)
},
// 播放
onPlayerTimeupdate($event) {
// 已经加载了多长时间的视频
const bufferedEnd = $event.bufferedEnd();
// 已经播放了多久
const currentTime = $event.currentTime();
this.currentTime = currentTime;
// this.onTimer();
// 还剩多少时间可以播放
const differTime = bufferedEnd - currentTime;
}
}
}
</script>
<style lang="scss" scoped>
.vjs-custom-skin /deep/{
width: 100%;
height: 100%;
cursor: pointer;
.video-player, .video-js {
height: 100% !important;
}
// 屏蔽视频操作栏
.vjs-control-bar {
display: none !important;
}
// 加载中转圈
.vjs-loading-spinner {
// display: none;
}
}
</style>

157
src/views/realTimeMonitoring/VideoPlayerBak.vue
Unescape Escape View File

@ -1,157 +0,0 @@
<template>
<video-player
v-if="showVideo"
ref="video-player"
class="vjs-custom-skin"
:options="playerOptions"
@pause="onPlayerPause"
@playing="onPlayerPlaying"
@timeupdate="onPlayerTimeupdate"
@ended="onPlayerEnded"
@error="onError"
@emptied="onEmptied"
@statechanged="playerStateChanged"
@loadeddata="onPlayerLoadeddata"
/>
</template>
<script>
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
export default {
name: 'VideoPlayer',
props: {
src: {
type: String,
// default: 'http://cctvalih5ca.v.myalicdn.com/live/cctv6_1/index.m3u8',
required: true
}
},
components: {
videoPlayer
},
data() {
return {
timer: null, // 识别是否正常播放
currentTime: 0, // 当前播放时间
showVideo: true,
isPlay: false, // 是否正在播放
playerOptions: {
sources: [{
type: 'application/x-mpegURL',
withCredentials: false,
src: this.src
}],
height: '100%',
language: 'zh-CN',
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
techOrder: ['html5'],
flash: { hls: { withCredentials: false }},
html5: { hls: { withCredentials: false }},
autoplay: true, // 自动播放
muted: true, // 默认情况下将会消除任何音频。
controls: true,
notSupportedMessage: '不支持的视频格式',
controlBar: {
timeDivider: false, // 当前时间和持续时间的分隔符
durationDisplay: false, // 显示持续时间
remainingTimeDisplay: false, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
}
}
}
},
mounted() {
this.$nextTick(()=> {
const videoRef = this.$refs['video-player'];
// videoRef.player.play();
console.log(videoRef);
})
},
methods: {
// 暂停回调
onPlayerPause() {
this.isPlay && this.$emit('showModel');
// this.isPlay = false;
console.log('onPlayerPause');
},
// 已开始播放回调
onPlayerPlaying(...args) {
this.isPlay = true;
console.log('onPlayerPlaying');
},
// 视频播完回调
onPlayerEnded($event) {
this.isPlay = false;
console.log('onPlayerEnded');
},
onTimer() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.onloadVideo();
}, 8 * 1000)
},
onloadVideo() {
console.log('重新加载了');
const videoRef = this.$refs['video-player'];
console.log(videoRef);
this.showVideo = false;
this.$nextTick(() => {
this.showVideo = true;
})
},
onError(data) {
console.log('onError');
console.log(data);
},
onEmptied(data) {
console.log('onEmptied');
console.log(data);
},
onPlayerLoadeddata($event) {
console.log('onPlayerLoadeddata')
},
playerStateChanged(playerCurrentState) {
// 视频正在等待中
if(playerCurrentState.waiting) {
// this.onTimer();
}else {
this.timer && clearTimeout(this.timer);
}
// console.log('player current update state', playerCurrentState)
},
// 播放
onPlayerTimeupdate($event) {
// 已经加载了多长时间的视频
const bufferedEnd = $event.bufferedEnd();
// 已经播放了多久
const currentTime = $event.currentTime();
this.currentTime = currentTime;
// this.onTimer();
// 还剩多少时间可以播放
const differTime = bufferedEnd - currentTime;
}
}
}
</script>
<style lang="scss" scoped>
.vjs-custom-skin /deep/{
width: 100%;
height: 100%;
cursor: pointer;
.video-player, .video-js {
height: 100% !important;
}
// 屏蔽视频操作栏
.vjs-control-bar {
display: none !important;
}
// 加载中转圈
.vjs-loading-spinner {
// display: none;
}
}
</style>

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

@ -11,6 +11,7 @@
:key="index"
:style="{
height: videoHeight,
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}"
>
@ -18,7 +19,7 @@
:style="{
height: videoHeight,
}"
style="width: 100%;object-fit: cover;"
:id="`camera${item.id}`"
autoplay muted ></video>
</a-col>
@ -100,7 +101,10 @@ export default {
tabsChange(key) {
sessionStorage.setItem('tabKey', key)
this.$nextTick(() => {
this.autoPlay()
})
},
showModel(item) {
this.$nextTick(() => {

2
src/views/realTimeMonitoring/webrtcplayer.js
Unescape Escape View File

@ -55,12 +55,10 @@ class WebRtcPlayer {
this.webrtc.onconnectionstatechange = () => {
if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
}else{
console.log(this.webrtc.connectionState)
this.load(this.uuid);
}
}
}

Write Preview
Loading…
Cancel
Save