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

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

@ -193,7 +193,7 @@ export default {
}).then(res => { }).then(res => {
this.data = res.data.list; this.data = res.data.list;
this.select = res.data.list[0].id 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.getStreetDetail(res.data.list[0].id);
this.getStockRowColumn(); this.getStockRowColumn();
}).catch(err => { }).catch(err => {
@ -225,10 +225,10 @@ export default {
leftShelveId, leftShelveId,
rightShelveId rightShelveId
}; };
this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{ // this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{
this.$set(this, 'stockInfo', data); // this.$set(this, 'stockInfo', data);
// this.stockInfo = data; // // this.stockInfo = data;
}); // });
} }
this.timer && clearInterval(this.timer); this.timer && clearInterval(this.timer);
init(); init();
@ -254,23 +254,23 @@ export default {
}) })
}, },
//获取盘点列表 //获取盘点列表
getStockList(streetId) { // getStockList(streetId) {
this.$api.httpApi.getStockList({ // this.$api.httpApi.getStockList({
params: { // params: {
streetId: streetId, // streetId: streetId,
} // }
}).then(res => { // }).then(res => {
this.checkList = res.data // this.checkList = res.data
}).catch(err => { // }).catch(err => {
}); // });
}, // },
handleChange(value) { handleChange(value) {
console.error('handleChange'); console.error('handleChange');
console.log(value) console.log(value)
this.select = value this.select = value
this.getStreetDetail(value) this.getStreetDetail(value)
this.getStockList(value); //this.getStockList(value);
this.getStockRowColumn() this.getStockRowColumn()
}, },
tocheckOperation(checkObj, item) { 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" :key="index"
:style="{ :style="{
height: videoHeight, height: videoHeight,
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0 marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}" }"
> >
@ -18,7 +19,7 @@
:style="{ :style="{
height: videoHeight, height: videoHeight,
}" }"
style="width: 100%;object-fit: cover;"
:id="`camera${item.id}`" :id="`camera${item.id}`"
autoplay muted ></video> autoplay muted ></video>
</a-col> </a-col>
@ -100,7 +101,10 @@ export default {
tabsChange(key) { tabsChange(key) {
sessionStorage.setItem('tabKey', key) sessionStorage.setItem('tabKey', key)
this.$nextTick(() => {
this.autoPlay() this.autoPlay()
})
}, },
showModel(item) { showModel(item) {
this.$nextTick(() => { this.$nextTick(() => {

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

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

Write Preview
Loading…
Cancel
Save