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/4/merge
yiming 3 years ago
parent 06d7eb0bff
commit 7c8cb04802
7 changed files with 146 additions and 63 deletions
Show Stats Download Patch File Download Diff File

BIN
dist.zip
View File

Binary file not shown.

4
public/index.html
Unescape Escape View File

@ -10,12 +10,12 @@
<!-- <script src="/video_play_plugins/video.js"></script> -->
<script src="/video_play_plugins/webrtcplayer.js"></script>
<title>昆船垛机视觉系统</title>
<title>堆垛机视觉系统</title>
</head>
<body>
<noscript>
<strong>We're sorry but 昆船垛机视觉系统 doesn't work properly without JavaScript enabled. Please enable it to
<strong>We're sorry but 堆垛机视觉系统 doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>

10
src/api/http/http-api.js
Unescape Escape View File

@ -66,6 +66,16 @@ export default {
url: "/realTime/allCameras",
name: "获取全部球机"
},
allCamerasByArea:{
method: "GET",
url: "/realTime/allCamerasByArea",
name: "根据库区查询球机"
},
getAllAreas:{
method: "GET",
url: "/realTime/allAreas",
name: "获取全部库区"
},
getWallStyle:{
method: "GET",
url: "/realTime/wallStyle",

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

@ -1,66 +1,67 @@
<template>
<div class="realTime bg-white">
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px>
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData">
</a-tab-pane>
</a-tabs>
<!-- {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
<a-row :gutter="20">
<a-col
v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
:span="24 / selectTab.videoStyleColumn"
:key="index"
:style="{
height: videoHeight,
<a-col
v-for="(item, index) in cameras.slice(0, selectTab.videoStyleRow * selectTab.videoStyleColumn)"
:span="24 / selectTab.videoStyleColumn"
:key="index"
:style="{
height: videoHeight,
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}"
>
<div style="position: relative;width: 100%;">
<video :style="{ height: videoHeight,}" :id="`camera${item.id}`" autoplay muted controls>
</video>
<div class="operation-list">
<div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
>
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
>
</div>
<div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
@mouseup=focusDecStop($event,item.id)>
<span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
@mouseup=focusAddStop($event,item.id)>
</div>
<div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
<span>光圈</span>
<img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
<img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
<img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
</div>
<div class="direction-item">
<img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
<img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
@mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
<img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
<img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
@mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
</div>
</div>
</div>
marginBottom: ((selectTab.videoStyleRow * selectTab.videoStyleColumn - index - 1) >= selectTab.videoStyleColumn) ? '20px': 0
}"
>
<div style="position: relative;width: 100%;">
<video :style="{ height: videoHeight,}" :id="`camera${item.id}`" autoplay muted controls>
</video>
<div class="operation-list">
<div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown=zoomDecStart($event,item.id) @mouseleave=zoomDecStop($event,item.id)
>
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown=zoomAddStart($event,item.id) @mouseleave=zoomAddStop($event,item.id)
>
</div>
<div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown=focusDecStart($event,item.id) @mouseleave=focusDecStop($event,item.id)
@mouseup=focusDecStop($event,item.id)>
<span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown=focusAddStart($event,item.id) @mouseleave=focusAddStop($event,item.id)
@mouseup=focusAddStop($event,item.id)>
</div>
<div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown=irisDecStart($event,item.id) @mouseup=irisDecStop($event,item.id) @mouseleave=irisDecStop($event,item.id)>
<span>光圈</span>
<img :src="irisAddUrl" alt="" @mousedown=irisAddStart($event,item.id) @mouseup=irisAddStop($event,item.id) @mouseleave=irisAddStop($event,item.id)>
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img :src="leftUpUrl" alt="" @mousedown=leftUpStart($event,item.id) @mouseup=leftUpStop($event,item.id) @mouseleave=leftUpStop($event,item.id)>
<img :src="upUrl" alt="" @mousedown=upStart($event,item.id) @mouseup=upStop($event,item.id) @mouseleave=upStop($event,item.id) >
<img :src="rightUpUrl" alt="" @mousedown=rightUpStart($event,item.id) @mouseup=rightUpStop($event,item.id) @mouseleave=rightUpStop($event,item.id) >
</div>
<div class="direction-item">
<img :src="leftUrl" alt="" @mousedown=leftStart($event,item.id) @mouseup=leftStop($event,item.id) @mouseleave=leftStop($event,item.id)>
<img :src="rightUrl" alt="" @mousedown=rightStart($event,item.id) @mouseup=rightStop($event,item.id) @mouseleave=rightStop($event,item.id)>
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown=leftDownStart($event,item.id)
@mouseup=leftDownStop($event,item.id) @mouseleave=leftDownStop($event,item.id)>
<img :src="downUrl" alt="" @mousedown=downStart($event,item.id) @mouseup=downStop($event,item.id) @mouseleave=downStop($event,item.id)>
<img :src="rightDownUrl" alt="" @mousedown=rightDownStart($event,item.id)
@mouseup=rightDownStop($event,item.id) @mouseleave=rightDownStop($event,item.id)>
</div>
</div>
</div>
</a-col>
</a-col>
</a-row>
</div>

4
src/views/roadwayManage/index.vue
Unescape Escape View File

@ -98,6 +98,10 @@ const columns = [
title: '巷道标识',
dataIndex: 'plcId',
},
{
title: '库区',
dataIndex: 'area',
},
{
title: '光源IP',
scopedSlots: { customRender: 'lightSourceIp' }

12
src/views/roadwayManage/model.vue
Unescape Escape View File

@ -25,6 +25,15 @@
v-decorator="['plcId', { rules: [{ required: true, message: '请输入巷道标识!' }] }]"
/>
</a-form-item>
</div>
<div class="across-layout">
<a-form-item label="库区" :label-col="formItemAcrossLayout.labelCol">
<a-input
v-decorator="['area']"
/>
</a-form-item>
</div>
<div class="across-layout">
<a-form-item label="PLC IP" :label-col="formItemAcrossLayout.labelCol">
@ -277,7 +286,8 @@ export default {
camera1Id:newVal.camera1Id,
camera2Id:newVal.camera2Id,
camera1Name:newVal.camera1Name,
camera2Name:newVal.camera2Name
camera2Name:newVal.camera2Name,
area:newVal.area
})
})
}

64
src/views/videoWall/index.vue
Unescape Escape View File

@ -3,6 +3,12 @@
<a-button type="primary" @click="full" v-if="!isFullscreen"> 全屏<a-icon type="right" /> </a-button>
<a-button type="primary" @click="full" v-if="isFullscreen"><a-icon type="left" /> 退出全屏 </a-button>
<!-- @change="tabsChange" v-model="tabKey"-->
<a-tabs v-model="activeKey" slot="headerContent" @change="tabChange" v-if="areas" padding:10px>
<a-tab-pane :key="item.toString()" :tab="item" v-for="item in areas">
</a-tab-pane>
</a-tabs>
<a-row v-for='rowIndex in row' :key='rowIndex'>
<a-col v-for='colIndex in column' :key='colIndex' :span="24/column" :style="{height: videoHeight}" >
<video class="camera" :id="rowIndex+'-'+colIndex" autoplay muted :style="{'height': '100%',width:'100%','object-fit':'fill'}" ></video>
@ -35,7 +41,9 @@ export default {
isFullscreen: false,
originHeight: 0,
fullHeight: 0,
players: []
players: [],
areas:[],
activeKey: ''
}
},
//watch: {},
@ -51,7 +59,8 @@ export default {
this.getWallStyle();
this.$nextTick(() => {
this.getAllCameras()
this.getAllAreas()
});
let isFullscreen =
document.fullscreenElement ||
@ -124,13 +133,62 @@ export default {
console.log(err)
})
},
getAllAreas(){
this.$api.httpApi.getAllAreas({
data: {}
}).then(res => {
if(res.code == 200) {
this.areas = res.data;
if(this.areas.length == 0){
this.getAllCameras()
}else{
this.activeKey = this.areas[0]
this.tabChange();
}
}
}).catch(err => {
console.log(err)
})
},
destory(){
for(let player of this.players){
console.log("stop")
player.destroy()
}
this.players = []
},
tabChange(){
this.destory();
this.$api.httpApi.allCamerasByArea({
params:{
area:this.activeKey
}
}).then(res => {
if(res.code == 200) {
let cameras = res.data;
for(let i = 1;i<=cameras.length;i++){
let rowIndex = Math.floor((i-1) / this.column) + 1;
if(rowIndex > this.row){
return
}
let columnIndex = i % this.column;
if(columnIndex == 0){
columnIndex = this.column;
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);
}
}
}).catch(err => {
console.log(err)
})
},
full () {
if(this.isFullscreen){
this.exitfullscreen()

Write Preview
Loading…
Cancel
Save