视觉盘点

merge-requests/1/head
qiushui 4 years ago
parent 55e8441222
commit 234986ab97

Binary file not shown.

@ -17,9 +17,9 @@
@change="handleGetCameraList" @change="handleGetCameraList"
> >
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="showModel('test',record)"> <!-- <a @click="showModel('test',record)">
测试 测试
</a> </a> -->
<a-divider type="vertical"/> <a-divider type="vertical"/>
<a @click="showModel('config',record)"> <a @click="showModel('config',record)">
配置 配置

@ -29,50 +29,61 @@
</a-modal> </a-modal>
</template> </template>
<template v-else-if="type=='test'"> <template v-else-if="type=='test'">
<div class="test-model"> <a-modal
<video v-model="isShow"
@cancel="handleCancel"
width="80%" :footer="null"
height="80%" :maskClosable="false"
:id="`camera${id}`" width="1600px"
autoplay muted ></video> :bodyStyle="{padding:0,display:'flex'}"
:centered="true"
<div class="operation-list"> class="config-model"
<div class="operation-item"> >
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart" <div class="test-model">
@mouseup="zoomDecStop"> <video
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart" width="80%"
@mouseup="zoomAddStop"> height="80%"
</div> :id="`camera${id}`"
<div class="operation-item"> autoplay muted ></video>
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
<span>变焦</span> <div class="operation-list">
<img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop"> <div class="operation-item">
</div> <img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
<div class="operation-item"> @mouseup="zoomDecStop">
<img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop"> <span>变倍</span>
<span>光圈</span> <img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
<img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop"> @mouseup="zoomAddStop">
</div> </div>
</div> <div class="operation-item">
<div class="direction-list"> <img :src="focusSubUrl" alt="" @mousedown="focusDecStart" @mouseup="focusDecStop">
<div class="direction-item"> <span>变焦</span>
<img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop"> <img :src="focusAddUrl" alt="" @mousedown="focusAddStart" @mouseup="focusAddStop">
<img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop"> </div>
<img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop"> <div class="operation-item">
</div> <img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop">
<div class="direction-item"> <span>光圈</span>
<img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop"> <img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop">
<img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop"> </div>
</div> </div>
<div class="direction-item"> <div class="direction-list">
<img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop"> <div class="direction-item">
<img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop"> <img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop">
<img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop"> <img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop">
</div> <img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop">
</div> </div>
</div> <div class="direction-item">
<img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop">
<img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop">
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown="leftDownStart" @mouseup="leftDownStop">
<img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop">
<img :src="rightDownUrl" alt="" @mousedown="rightDownStart" @mouseup="rightDownStop">
</div>
</div>
</div>
</a-modal>
</template> </template>
<template v-else-if="type=='config'"> <template v-else-if="type=='config'">
@ -229,6 +240,7 @@ export default {
data() { data() {
return { return {
isShow:false, isShow:false,
player:null,
type:'', type:'',
title:'', title:'',
closable:false,//modelX closable:false,//modelX
@ -265,7 +277,6 @@ export default {
this.id = this.$route.query.modelData.id this.id = this.$route.query.modelData.id
this.type = this.$route.query.modelType this.type = this.$route.query.modelType
this.mdata = this.$route.query.modelData this.mdata = this.$route.query.modelData
//this.getTestVideo(this.$route.query.modelData.rtsp)
this.$nextTick(() => { this.$nextTick(() => {
this.autoPlay(this.id) this.autoPlay(this.id)
}) })
@ -274,13 +285,15 @@ export default {
this.id = this.$route.query.modelData.id this.id = this.$route.query.modelData.id
this.type = this.$route.query.modelType this.type = this.$route.query.modelType
this.mdata = this.$route.query.modelData this.mdata = this.$route.query.modelData
//this.getConfigVideo(this.$route.query.modelData.rtsp)
this.getConfigIoList()
this.$nextTick(() => { this.$nextTick(() => {
this.autoPlay(this.id) this.autoPlay(this.id)
}) })
this.getConfigIoList()
} }
}, },
destroy(){
//this.player.destroy()
},
methods: { methods: {
handleOk() { handleOk() {
this.confirmLoading = true; this.confirmLoading = true;
@ -320,24 +333,29 @@ export default {
}, },
handleCancel() { handleCancel() {
this.player.destroy()
console.log('Clicked cancel button'); console.log('Clicked cancel button');
this.$emit('close', false, {}) this.$emit('close', false, {})
if(this.type=='test') { if(this.type=='test') {
this.$router.go(-1); this.$router.go(-1);
this.player.destroy() //this.player.destroy();
this.player = null;
}else if(this.type=='config') { }else if(this.type=='config') {
this.$router.go(-1); this.$router.go(-1);
this.player.destroy() //this.player.destroy();
this.player = null;
} }
}, },
//
autoPlay(id){ autoPlay(id){
let video = document.getElementById('camera'+id); let video = document.getElementById('camera'+id);
console.log(video)
if(this.player == null){ this.player = new WebRtcPlayer(video,'camera'+id);
this.player = new WebRtcPlayer(video,'camera'+id);
}
this.player.load('camera'+id); this.player.load('camera'+id);
}, },
setVideoServer(){ setVideoServer(){
this.$api.httpApi.getVideoServer({ this.$api.httpApi.getVideoServer({
data: {} data: {}
@ -375,7 +393,7 @@ export default {
type: type type: type
} }
}).then(res => { }).then(res => {
console.log(res)
this.getConfigIoList() this.getConfigIoList()
}).catch(err => { }).catch(err => {

@ -161,7 +161,10 @@ export default {
}, },
mounted() { mounted() {
//this.changeTab('1-1') //this.changeTab('1-1')
this.getStatus(); this.$nextTick(() => {
this.getStatus();
})
}, },
created() { created() {
//this.getStatus(); //this.getStatus();
@ -246,7 +249,7 @@ export default {
this.getStatusBg(a.row,a.column,a.status) this.getStatusBg(a.row,a.column,a.status)
} }
} }
this.columnTabStatus = res.data.columnTabStatus
var i = 1; var i = 1;
for(let a in res.data.columnTabStatus){ for(let a in res.data.columnTabStatus){
this.status.column[i] = res.data.columnTabStatus[a] this.status.column[i] = res.data.columnTabStatus[a]

@ -62,7 +62,24 @@
{{ checkObj[item.key] }} {{ checkObj[item.key] }}
</span> </span>
</li> </li>
<li>
<span class="img-box-title">
盘点图:
</span>
</li>
<template>
<span v-if="checkObj.checkPic">
<happy-scroll color="rgba(100,100,100,0.5)" size="1" class="scroll-box" style="width:50;height:90px;">
<viewer>
<img class="historyImg" :src="imgUrl+checkObj.checkPic"/>
</viewer>
</happy-scroll>
</span>
<span v-else>
暂无盘点图
</span>
</template>
</ul> </ul>
</div> </div>
@ -99,11 +116,11 @@
</div> </div>
<div class="carousel-page-footer"> <div class="carousel-page-footer">
<div class="status-btn" v-if="checkObj.status == 0"> <div class="status-btn" v-if="checkObj.status == 0">
<a-button class="btn" <!-- <a-button class="btn"
type="danger" type="danger"
@click="showModel(checkObj,index)" @click="showModel(checkObj,index)"
>人工复核 >人工复核
</a-button> </a-button> -->
<a-button class="btn" <a-button class="btn"
type="primary" type="primary"
style="background:#29c12b;border-color:#29c12b;" style="background:#29c12b;border-color:#29c12b;"
@ -187,14 +204,7 @@ export default {
label:'扫描条码号', label:'扫描条码号',
key: 'code' key: 'code'
}, },
{
label:'系统数量',
key: 'wmsCount'
},
{
label:'扫描数量',
key: 'count'
}
], ],
statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确"} statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确"}
@ -449,7 +459,8 @@ export default {
closeModel(visible, data) { closeModel(visible, data) {
this.visible = visible this.visible = visible
this.modelData = data this.modelData = data
} },
} }
} }
@ -573,5 +584,9 @@ export default {
} }
} }
} }
.historyImg {
width: 180px;
height:auto;
}
</style> </style>

@ -147,7 +147,7 @@ export default {
width: 90 width: 90
}, },
{ {
title: "视频时长", title: "工单时长",
dataIndex: "timeLength", dataIndex: "timeLength",
}, },
{ {

@ -12,6 +12,7 @@ class WebRtcPlayer {
}; };
constructor(video1, uuid, options={}) { constructor(video1, uuid, options={}) {
console.log("new uuid:"+uuid)
this.server = WebRtcPlayer.server; this.server = WebRtcPlayer.server;
//this.video = document.getElementById(id); //this.video = document.getElementById(id);
this.video = video1 this.video = video1
@ -55,6 +56,7 @@ 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'){
console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
}else{ }else{
console.log(this.webrtc.connectionState) console.log(this.webrtc.connectionState)
this.load(this.uuid); this.load(this.uuid);
@ -97,7 +99,7 @@ class WebRtcPlayer {
} }
destroy() { destroy() {
console.log("destroy uuid:"+this.uuid)
this.webrtc.close(); this.webrtc.close();
this.webrtc = null; this.webrtc = null;
this.video.srcObject = null; this.video.srcObject = null;

Loading…
Cancel
Save