Skip to content

李君 / carrefour

Go to a project
Commit 1d669e9f by 李君
Options

位置标定重构

1 parent 3f239696
Inline Side-by-side
Showing 5 changed files with 486 additions and 108 deletions
src/views/queueManagement/cameraPositionCalibration/bindDev.vue
<template>
<el-dialog :title="$t('button.positionCalibration')" width="80%" class="manage-dialog" v-if="bindVisible" :visible.sync="bindVisible" :close-on-click-modal="false" @close="closeBindDialog">
<div class="draw_desks">
<div class="gateWrap" id="gateManageChannel">
<img :src="floorImg" class="fimg" @load="loadGateData">
<div class="grender" ref="gRender"></div>
<el-dialog :title="$t('dialog.mapCoordinateTitle')" class="manage-dialog xy-dialog" :visible.sync="xyEditVisible" :show-close="false"
@close="dialogClose">
{{$t('table.laneName')}}<el-select @change="channelChange" v-model="channelVal">
<el-option v-for="item in channelList" :key="item.id" :label="item.serialnum" :value="item.serialnum" />
</el-select>
<div class="xy-content">
<div class="xy-container1">
<canvas id="editXycanvas1" class="xycanvas" @click="getEditXyAxis1"></canvas>
<img :src="editChannelImg" class="editChannelImg" id="editChannelImg" style="width: 640px;height: 360px;" @click="getEditXyAxis1" />
</div>
<div class="xy-container">
<canvas id="editXycanvas" class="xycanvas" @click="getEditXyAxis"></canvas>
<img :src="editFloorImg" class="editFloorImg" id="editFloorImg" @click="getEditXyAxis" />
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false">
{{$t('button.closed')}}
</el-button>
<div class="xy-row">
<el-button class="dialog-btn" @click="changeStep(3)" :type="step === 3 ? 'primary' : 'normal'">画对应区域</el-button>
</div>
<div>
<el-button class="dialog-btn" @click="clearCanvas">清空楼层图</el-button>
<el-button class="dialog-btn" @click="clearCanvasZ">清空抓拍图</el-button>
<el-button class="dialog-btn" @click="dialogClose">{{ $t('dialog.cancel') }}</el-button>
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="transferEditXy">{{ $t('dialog.confirm') }}</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import drawUtils from './drawUtils';
import _ from 'underscore';
import xyImg from '@/assets/img/manage/xy.png'
import xyImg1 from '@/assets/img/manage/xy1.png'
export default {
extends:drawUtils,
data() {
return {
bindVisible: false,
floorImg: '',
width:0,
height:0,
groupList:[],
// zr:'',
areaId:'',
areaObj:{}
channelList: [],
channelVal: '',
xyEditVisible: false, // dialog
editFloorImg: '', // 楼层图片
editGateXY: {
val: [],
cval: []
}, // 楼层多坐标
editChannelImg: '', // 相机截图
editGateC: {
val: [],
cval: [],
centerPoint: [{
x: 0,
y: 0
}],
centerPointv: [0, 0],
marginPoint: [{
x: 0,
y: 0
}],
marginPointv: [0, 0]
}, // 截图多坐标
editForm: {
type: 4
},
step: 1, // 步骤 1 画相机截图中心点 2 画相机边缘点 3 画相机和楼层图多个点
radix: 0
}
},
methods: {
dialogInit(row) {
this.areaObj = {...row}
this.areaId = row.id
this.floorImg = window._vionConfig.picUrl+row.pic
this.bindVisible = true;
},
loadGateData() {
let {width,height} = document.getElementById('gateManageChannel').getBoundingClientRect();
this.width = width;
this.height = height;
this.groupList = [];
this.zr = zrender.init(this.$refs.gRender, {
renderer: 'canvas',
devicePixelRatio: 2,
width: width,
height: height
});
window.zr = this.zr;
this.$api.queueManagementApi.getDevices({
areaId: this.areaId
}).then(res=>{
let data = res.data.data
data.forEach(item=>{
item.name = this.areaObj.name;
// item.id = this.areaObj.id;
item.id = item.serialnum;
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + "-01.jpg?t=" + Date.parse(new Date()) / 1000;
item.coordinate&&(item.coordinate=JSON.parse(item.coordinate))
dialogInit(pic, channelList) {
this.channelList = channelList
this.channelVal = channelList[0].id
this.editForm = channelList[0];
this.editFloorImg = window._vionConfig.picUrl + pic;
this.xyEditVisible = true;
this.drawFun()
},
drawFun(){
console.log(this.editForm)
let coordinate = this.editForm.coordinate ? this.editForm.coordinate : {
centerPoint: [{
x: 0,
y: 0
}],
marginPoint: [{
x: 0,
y: 0
}],
cameraPoints: null,
mapPoints: null
}
if (coordinate.mapPoints) { // 楼层图
this.editGateXY.cval = coordinate.mapPoints
}
if (coordinate.cameraPoints && coordinate.centerPoint && coordinate.marginPoint) {
this.editGateC.cval = coordinate.cameraPoints
this.editGateC.centerPointv = coordinate.centerPoint
this.editGateC.marginPointv = coordinate.marginPointv
}
this.commonInit(this.editFloorImg, 'editFloorImg', '.xy-container', 'floor', 'editXycanvas')
this.editChannelImg = `${this.editForm.picUrl}`
this.commonInit(this.editChannelImg, 'editChannelImg', '.xy-container1', 'channel', 'editXycanvas1')
},
// 获取相机截图
channelChange(val) {
this.channelList.forEach(item => {
if (item.id == val) {
this.editForm = {...item}
this.editChannelImg = `${item.picUrl}`
this.drawFun()
}
})
this.gateList =data;
this.drawJoinMap()
});
},
drawJoinMap(){
let that = this;
console.log(this.gateList)
_.each(this.gateList,(item,index)=>{
if(item.picUrl){
let img = new Image();
img.src = item.picUrl;
img.onload = function(){
item.width = this.width;
item.height = this.height;
that.createGroup(item,index+1);
commonInit(imgPath, imgId, id, status, canvasId) {
let editImg = new Image();
editImg.src = imgPath;
editImg.onload = () => {
let [width, height, floorImage, _width, _height, _xy, editForm] = [
0, 0,
document.getElementById(imgId),
this.getStyleFn(`.${imgId}`, 'width'),
this.getStyleFn(`.${imgId}`, 'height'),
this.getStyleFn(id, 'width'),
this.editForm
]
if (status === 'channel') {
width = 640 //_width / 3
height = parseInt(640 * _height / _width)
} else {
if (_width >= _xy) {
width = _xy
height = parseInt(_xy * _height / _width)
this.radix = (_width / _xy).toFixed(0)
} else if (_width < _xy) {
width = _width
height = _height
this.radix = 1
}
}
floorImage.style.width = width + 'px';
floorImage.style.height = height + 'px';
let [gateVal, gateValZ, center, margin] = [
[],
[],
[],
[],
[]
]
if (editForm.coordinate) {
const coordinate = editForm.coordinate
if (status === 'floor') {
coordinate.mapPoints.forEach(item => {
gateVal.push([
(item.x / this.normalWidth * width).toFixed(0),
(item.y / this.normalWidth * height).toFixed(0)
])
})
this.editGateXY.val = gateVal
} else if (status === 'channel') {
if (coordinate.cameraPoints) {
coordinate.cameraPoints.forEach(item => {
gateValZ.push([
(item.x / 3),
(item.y / 3)
])
})
}
if (coordinate.centerPoint) {
center = [
(coordinate.centerPoint.x / 3),
(coordinate.centerPoint.y / 3)
]
}
if (coordinate.marginPoint) {
margin = [
(coordinate.marginPoint.x / 3),
(coordinate.marginPoint.y / 3)
]
}
this.editGateC.val = gateValZ
this.editGateC.centerPoint = center
this.editGateC.marginPoint = margin
}
}
setTimeout(() => {
let canvas = document.getElementById(canvasId);
canvas.width = width;
canvas.height = height;
if (!canvas.getContext) return;
let ctx = canvas.getContext("2d");
if (gateVal.length > 0 && status === 'floor') {
this.commonEditCanvas(gateVal, null, ctx, null)
}
if (gateValZ.length > 0 && status === 'channel') {
this.commonEditCanvas(gateValZ, center, ctx, margin)
}
}, 0)
}
},
commonEditCanvas(item, centerPoint, ctx, margin) {
if (centerPoint && margin) {
let _img1 = new Image();
_img1.src = xyImg1;
_img1.onload = () => {
ctx.drawImage(_img1, centerPoint[0] - 15, centerPoint[1] - 30, 30, 30)
ctx.drawImage(_img1, margin[0] - 15, margin[1] - 30, 30, 30)
}
}
let _img = new Image();
_img.src = xyImg;
_img.onload = () => {
for (let i = 0; i < item.length; i++) {
ctx.drawImage(_img, item[i][0] - 15, item[i][1] - 30, 30, 30);
ctx.fillStyle = '#f00';
ctx.lineWidth = 8;
ctx.font = '16px Georgia';
ctx.fillText(i + 1, item[i][0] - 5, parseInt(item[i][1]) + 8);
}
}
},
getEditXyAxis(e) {
this.commonEditXyAxis(this.editFloorImg, '.editFloorImg', 'editXycanvas', 'floor', e)
},
getEditXyAxis1(e) {
this.commonEditXyAxis(this.editChannelImg, '.editChannelImg', 'editXycanvas1', 'channel', e)
},
createGroup(data,index){
let left = 0;
let top = 0;
changeStep(s) {
this.step = s
},
commonEditXyAxis(img, id, canvasId, status, e) {
const {
step
} = this
let newImg = new Image();
let that = this;
let group = new zrender.Group({
z:1,
draggable:true,
gateId:data.id,
gateName:data.name,
picUrl:data.picUrl,
position:[left,top]
}).on('mouseup', function (evt) {
that.saveGateData(data.id);
newImg.src = img;
newImg.onload = () => {
let width = this.getStyleFn(id, 'width');
let height = this.getStyleFn(id, 'height');
let ev = e || window.event;
let eleRect = ev.target.getBoundingClientRect();
let _top = (eleRect.top - ev.target.clientTop).toFixed(0);
let _left = (eleRect.left - ev.target.clientLeft).toFixed(0);
let startX = ev.pageX - _left - $(document).scrollLeft();
let startY = ev.pageY - _top - $(document).scrollTop();
let xVal = (startX * this.normalWidth / width).toFixed(0);
let yVal = (startY * this.normalHeight / height).toFixed(0);
let canvas = document.getElementById(canvasId);
if (!canvas.getContext) return;
let ctx = canvas.getContext("2d");
let _img = new Image();
_img.src = xyImg;
if ((step === 1 || step === 2) && status === 'channel') { // 步骤一
if (step === 1 && this.editGateC.centerPoint) {
ctx.clearRect(this.editGateC.centerPoint.x - 15, this.editGateC.centerPoint.y - 30, 30, 30)
} else if (step === 2 && this.editGateC.marginPoint) {
ctx.clearRect(this.editGateC.marginPoint.x - 15, this.editGateC.marginPoint.y - 30, 30, 30)
}
_img.src = xyImg1;
_img.onload = function() {
ctx.drawImage(_img, startX - 15, startY - 30, 30, 30);
}
}
if (step === 3) {
_img.onload = function() {
ctx.drawImage(_img, startX - 15, startY - 30, 30, 30);
let index = 0;
if (status === 'floor') {
index = that.editGateXY.val.length;
} else if (status === 'channel') {
index = that.editGateC.val.length;
}
ctx.fillStyle = '#f00';
ctx.lineWidth = 8;
ctx.font = '16px Georgia';
ctx.fillText(index, startX - 5, startY + 10);
}
}
if (step === 1) { // 步骤一，标中心点
if (status === 'channel') {
this.editGateC.centerPoint = {
x: startX,
y: startY
}
this.editGateC.centerPointv = {
x: startX * 3,
y: startY * 3
}
}
} else if (step === 2) { // 步骤二，标边点
if (status === 'channel') {
this.editGateC.marginPoint = {
x: startX,
y: startY
}
this.editGateC.marginPointv = {
x: startX * 3,
y: startY * 3
}
}
} else if (step === 3) { // 步骤三，标范围
if (status === 'floor') {
this.editGateXY.val.push({
x: startX,
y: startY
})
this.groupList.push(group);
this.zr.add(group);
window.group = group;
this.drawPolyImage(data,group);
// this.editGateXY.cval.push({ x: startX * this.radix, y: startY * this.radix })
this.editGateXY.cval.push({
x: xVal,
y: yVal
})
console.info(xVal, yVal, 666)
} else if (status === 'channel') {
this.editGateC.val.push({
x: startX,
y: startY
})
this.editGateC.cval.push({
x: startX * 3,
y: startY * 3
})
}
}
}
},
// 清空楼层图画布
clearCanvas() {
this.common('editXycanvas', 'floor')
},
closeBindDialog() {
this.bindVisible = false
// 清空截图画布
clearCanvasZ() {
this.common('editXycanvas1', 'channel')
},
transferEditXy() {
if (this.editGateC.cval && this.editGateC.cval.length > 3 && this.editGateXY.cval && this.editGateXY.cval.length > 3) {
let coordinate = JSON.stringify({
centerPoint: {
x: 0,
y: 0
},
marginPoint: {
x: 0,
y: 0
},
cameraPoints: this.editGateC.cval,
mapPoints:this.editGateXY.cval
})
let parmas = {
areaId:this.editForm.areaId,
serialnum:this.editForm.serialnum,
coordinate:coordinate,
}
this.$api.queueManagementApi.demarcateFun(parmas).then(res => {
console.log(res)
let result = res.data;
if(result.code==200){
this.$message({
showClose: true,
message: this.$t('message.labelSuccess'),
type: 'success'
});
}
});
} else {
this.$message({
showClose: true,
message: '请检查标点是否正确！',
type: 'warning'
});
}
},
dialogClose() {
let floorImage = document.getElementById('editFloorImg')
let channelImg = document.getElementById('editChannelImg')
floorImage.style.width = null
floorImage.style.height = null
channelImg ? channelImg.style.width = null : null
channelImg ? channelImg.style.height = null : null
this.editFloorImg = '';
this.editChannelImg = '';
this.editGateXY = {
val: [],
cval: []
};
this.editGateC = {
val: [],
cval: [],
centerPoint: [{
x: 0,
y: 0
}],
centerPointv: [{
x: 0,
y: 0
}],
marginPoint: null,
marginPointv: null
};
this.$parent.loadGateData()
this.xyEditVisible = false
},
common(id, status) {
let [canvas, width, height] = [document.getElementById(id), 0, 0]
if (status === 'floor') { // 楼层图
this.editGateXY = {
val: [],
cval: []
}
width = this.getStyleFn('.editFloorImg', 'width');
height = this.getStyleFn('.editFloorImg', 'height');
} else { // 抓拍图
this.editGateC = {
val: [],
cval: [],
centerPoint: null,
centerPointv: null,
marginPoint: null,
marginPointv: null
}
width = this.getStyleFn('.editChannelImg', 'width');
height = this.getStyleFn('.editChannelImg', 'height');
}
if (!canvas.getContext) return;
let ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
},
}
</script>
<style lang="less" scoped="scoped">
.draw_desks {
position: relative;
width: 100%;
height: 700px;
<style scoped>
.pos-inp {
height: 30px !important;
width: 120px;
}
.gateWrap{
position: relative;
.editFloorImg {
float: left;
}
.xy-row {
padding-bottom: 5px;
}
.xy-content {
width: 100%;
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
height: 100%;
/* display: flex; */
}
.gateWrap .fimg{
display: block;
.xy-container {
width: 100%;
/* text-align: center; */
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
.gateWrap .grender{
.xy-container1 {
/* text-align: center; */
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
.xycanvas {
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
opacity: 0.7;
bottom: 0;
left: 0;
right: 0;
}
.editChannelImg {
width: 100%;
height: auto;
}
.dialog-footer {
display: flex;
justify-content: space-between;
}
</style>
src/views/queueManagement/cameraPositionCalibration/index.vue
......@@ -95,8 +95,7 @@
this.getTableData();
},
bindRow(row){
console.log(this.areaObj)
// this.$refs.bindDevModel.dialogInit(row);
this.$refs.bindDevModel.dialogInit(this.areaObj.pic,this.gateList);
},
searchFun(){
this.currentPage = 1;
......@@ -198,7 +197,7 @@
.draw_desks {
position: relative;
width: 100%;
height: 700px;
// height: 700px;
}
.gateWrap{
position: relative;
......
src/views/queueManagement/channelManagement/addDesk.vue
......@@ -12,6 +12,10 @@
<el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input>
<i class="error-tip">*</i>
</el-form-item>
<el-form-item :label="$t('dialog.deviceNum')" prop="deviceSerialNum">
<el-input v-model="addForm.deviceSerialNum" :placeholder="$t('pholder.input')"></el-input>
<i class="error-tip">*</i>
</el-form-item>
<el-form-item :label="$t('table.counterType')" prop="counterType">
<el-select v-model="addForm.counterType" :placeholder="$t('pholder.select')">
<el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
......@@ -76,7 +80,12 @@ export default {
required: true,
message: this.$t('pholder.select'),
trigger: 'blur'
}]
}],
deviceSerialNum:[{
required: true,
message: this.$t('pholder.input'),
trigger: 'blur'
}],
}
}
},
......@@ -87,7 +96,8 @@ export default {
name: '',
areaId:"",
code:'',
counterType:''
counterType:'',
deviceSerialNum:''
};
this.isEdit = type
if(data){
......@@ -187,7 +197,7 @@ export default {
<style scoped lang="less">
.dialog_lj{
/deep/.el-dialog__body{
height: 270px;
height: 320px;
}
/deep/.el-form-item__label{
line-height: 30px;
......
src/views/queueManagement/channelManagement/index.vue
......@@ -27,6 +27,7 @@
<el-table-column :label="$t('table.order')" align="center" type="index" width="100"></el-table-column>
<el-table-column :label="$t('table.laneName')" align="center" prop="name"></el-table-column>
<el-table-column :label="$t('table.channelCode')" align="center" prop="code"></el-table-column>
<el-table-column :label="$t('dialog.deviceNum')" align="center" prop="deviceSerialNum"></el-table-column>
<el-table-column :label="$t('table.counterType')" :formatter="formatCounterType" align="center" prop="counterType"></el-table-column>
<el-table-column :label="$t('table.areaName')" :formatter="formatArea" align="center" prop="areaId"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="200">
......@@ -409,7 +410,7 @@ export default {
height: calc(100% - 120px);
}
.manage-content {
height: calc(100% - 100px);
height: calc(100% - 0px);
}
.bind {
......@@ -418,12 +419,7 @@ export default {
cursor: pointer;
}
.manage-container {
height: 100%;
}
.treeMenu {
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
// height: 100%;
}
.unbind {
color: #0069ff;
......
src/views/queueManagement/public/css/common.css
......@@ -10,8 +10,11 @@
.searchFormSocial .el-form-item{
margin-bottom: 0;
}
.single-report-header{
margin-bottom: 0 !important;
}
.socialHeader{
padding-top: 10px;
padding-top: 0px;
margin-right: 10px !important;
}
.contentSocial{
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!