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> <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"> <el-dialog :title="$t('dialog.mapCoordinateTitle')" class="manage-dialog xy-dialog" :visible.sync="xyEditVisible" :show-close="false"
<div class="draw_desks"> @close="dialogClose">
<div class="gateWrap" id="gateManageChannel"> {{$t('table.laneName')}}<el-select @change="channelChange" v-model="channelVal">
<img :src="floorImg" class="fimg" @load="loadGateData"> <el-option v-for="item in channelList" :key="item.id" :label="item.serialnum" :value="item.serialnum" />
<div class="grender" ref="gRender"></div> </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> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false"> <div class="xy-row">
{{$t('button.closed')}} <el-button class="dialog-btn" @click="changeStep(3)" :type="step === 3 ? 'primary' : 'normal'">画对应区域</el-button>
</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> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import drawUtils from './drawUtils'; import xyImg from '@/assets/img/manage/xy.png'
import _ from 'underscore'; import xyImg1 from '@/assets/img/manage/xy1.png'
export default { export default {
extends:drawUtils,
data() { data() {
return { return {
bindVisible: false, channelList: [],
floorImg: '', channelVal: '',
width:0, xyEditVisible: false, // dialog
height:0, editFloorImg: '', // 楼层图片
groupList:[], editGateXY: {
// zr:'', val: [],
areaId:'', cval: []
areaObj:{} }, // 楼层多坐标
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: { methods: {
dialogInit(row) { dialogInit(pic, channelList) {
this.areaObj = {...row} this.channelList = channelList
this.areaId = row.id this.channelVal = channelList[0].id
this.floorImg = window._vionConfig.picUrl+row.pic this.editForm = channelList[0];
this.bindVisible = true; this.editFloorImg = window._vionConfig.picUrl + pic;
}, this.xyEditVisible = true;
loadGateData() { this.drawFun()
let {width,height} = document.getElementById('gateManageChannel').getBoundingClientRect();
this.width = width; },
this.height = height; drawFun(){
this.groupList = []; console.log(this.editForm)
this.zr = zrender.init(this.$refs.gRender, { let coordinate = this.editForm.coordinate ? this.editForm.coordinate : {
renderer: 'canvas', centerPoint: [{
devicePixelRatio: 2, x: 0,
width: width, y: 0
height: height }],
}); marginPoint: [{
window.zr = this.zr; x: 0,
this.$api.queueManagementApi.getDevices({ y: 0
areaId: this.areaId }],
}).then(res=>{ cameraPoints: null,
let data = res.data.data mapPoints: null
data.forEach(item=>{ }
item.name = this.areaObj.name; if (coordinate.mapPoints) { // 楼层图
// item.id = this.areaObj.id; this.editGateXY.cval = coordinate.mapPoints
item.id = item.serialnum; }
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + "-01.jpg?t=" + Date.parse(new Date()) / 1000; if (coordinate.cameraPoints && coordinate.centerPoint && coordinate.marginPoint) {
item.coordinate&&(item.coordinate=JSON.parse(item.coordinate)) 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; commonInit(imgPath, imgId, id, status, canvasId) {
console.log(this.gateList) let editImg = new Image();
_.each(this.gateList,(item,index)=>{ editImg.src = imgPath;
if(item.picUrl){ editImg.onload = () => {
let img = new Image(); let [width, height, floorImage, _width, _height, _xy, editForm] = [
img.src = item.picUrl; 0, 0,
img.onload = function(){ document.getElementById(imgId),
item.width = this.width; this.getStyleFn(`.${imgId}`, 'width'),
item.height = this.height; this.getStyleFn(`.${imgId}`, 'height'),
that.createGroup(item,index+1); 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){ changeStep(s) {
let left = 0; this.step = s
let top = 0; },
commonEditXyAxis(img, id, canvasId, status, e) {
const {
step
} = this
let newImg = new Image();
let that = this; let that = this;
let group = new zrender.Group({ newImg.src = img;
z:1, newImg.onload = () => {
draggable:true, let width = this.getStyleFn(id, 'width');
gateId:data.id, let height = this.getStyleFn(id, 'height');
gateName:data.name, let ev = e || window.event;
picUrl:data.picUrl, let eleRect = ev.target.getBoundingClientRect();
position:[left,top] let _top = (eleRect.top - ev.target.clientTop).toFixed(0);
}).on('mouseup', function (evt) { let _left = (eleRect.left - ev.target.clientLeft).toFixed(0);
that.saveGateData(data.id); 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.editGateXY.cval.push({ x: startX * this.radix, y: startY * this.radix })
this.zr.add(group); this.editGateXY.cval.push({
window.group = group; x: xVal,
this.drawPolyImage(data,group); 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> </script>
<style lang="less" scoped="scoped">
.draw_desks { <style scoped>
position: relative; .pos-inp {
width: 100%; height: 30px !important;
height: 700px; width: 120px;
} }
.gateWrap{
position: relative; .editFloorImg {
float: left;
}
.xy-row {
padding-bottom: 5px;
}
.xy-content {
width: 100%; 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%; 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; position: absolute;
left: 0;
top: 0; top: 0;
width:100%; bottom: 0;
height: 100%; left: 0;
opacity: 0.7; right: 0;
}
.editChannelImg {
width: 100%;
height: auto;
}
.dialog-footer {
display: flex;
justify-content: space-between;
} }
</style> </style>
src/views/queueManagement/cameraPositionCalibration/index.vue
...@@ -95,8 +95,7 @@ ...@@ -95,8 +95,7 @@
this.getTableData(); this.getTableData();
}, },
bindRow(row){ bindRow(row){
console.log(this.areaObj) this.$refs.bindDevModel.dialogInit(this.areaObj.pic,this.gateList);
// this.$refs.bindDevModel.dialogInit(row);
}, },
searchFun(){ searchFun(){
this.currentPage = 1; this.currentPage = 1;
...@@ -198,7 +197,7 @@ ...@@ -198,7 +197,7 @@
.draw_desks { .draw_desks {
position: relative; position: relative;
width: 100%; width: 100%;
height: 700px; // height: 700px;
} }
.gateWrap{ .gateWrap{
position: relative; position: relative;
......
src/views/queueManagement/channelManagement/addDesk.vue
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
<el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input> <el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input>
<i class="error-tip">*</i> <i class="error-tip">*</i>
</el-form-item> </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-form-item :label="$t('table.counterType')" prop="counterType">
<el-select v-model="addForm.counterType" :placeholder="$t('pholder.select')"> <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" /> <el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
...@@ -76,7 +80,12 @@ export default { ...@@ -76,7 +80,12 @@ export default {
required: true, required: true,
message: this.$t('pholder.select'), message: this.$t('pholder.select'),
trigger: 'blur' trigger: 'blur'
}] }],
deviceSerialNum:[{
required: true,
message: this.$t('pholder.input'),
trigger: 'blur'
}],
} }
} }
}, },
...@@ -87,7 +96,8 @@ export default { ...@@ -87,7 +96,8 @@ export default {
name: '', name: '',
areaId:"", areaId:"",
code:'', code:'',
counterType:'' counterType:'',
deviceSerialNum:''
}; };
this.isEdit = type this.isEdit = type
if(data){ if(data){
...@@ -187,7 +197,7 @@ export default { ...@@ -187,7 +197,7 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.dialog_lj{ .dialog_lj{
/deep/.el-dialog__body{ /deep/.el-dialog__body{
height: 270px; height: 320px;
} }
/deep/.el-form-item__label{ /deep/.el-form-item__label{
line-height: 30px; line-height: 30px;
......
src/views/queueManagement/channelManagement/index.vue
...@@ -27,6 +27,7 @@ ...@@ -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.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.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('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.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.areaName')" :formatter="formatArea" align="center" prop="areaId"></el-table-column>
<el-table-column :label="$t('table.operate')" align="center" width="200"> <el-table-column :label="$t('table.operate')" align="center" width="200">
...@@ -409,7 +410,7 @@ export default { ...@@ -409,7 +410,7 @@ export default {
height: calc(100% - 120px); height: calc(100% - 120px);
} }
.manage-content { .manage-content {
height: calc(100% - 100px); height: calc(100% - 0px);
} }
.bind { .bind {
...@@ -418,12 +419,7 @@ export default { ...@@ -418,12 +419,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.manage-container { .manage-container {
height: 100%; // height: 100%;
}
.treeMenu {
padding-right: 5px;
border-right: 3px solid #f0f3f9;
height: 100%;
} }
.unbind { .unbind {
color: #0069ff; color: #0069ff;
......
src/views/queueManagement/public/css/common.css
...@@ -10,8 +10,11 @@ ...@@ -10,8 +10,11 @@
.searchFormSocial .el-form-item{ .searchFormSocial .el-form-item{
margin-bottom: 0; margin-bottom: 0;
} }
.single-report-header{
margin-bottom: 0 !important;
}
.socialHeader{ .socialHeader{
padding-top: 10px; padding-top: 0px;
margin-right: 10px !important; margin-right: 10px !important;
} }
.contentSocial{ .contentSocial{
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!