Skip to content

李君 / carrefour

Go to a project
Commit 99527382 by tianlonglong
Options

tll

1 parent 6b4a821b
Inline Side-by-side
Showing 3 changed files with 364 additions and 318 deletions
src/views/Management/DeskManage/index.vue
...@@ -273,6 +273,7 @@ export default { ...@@ -273,6 +273,7 @@ export default {
this.tableData = []; this.tableData = [];
this.getDeskList(); this.getDeskList();
if (this.ptype == 1) { if (this.ptype == 1) {
console.log(444);
this.loadGateData(); this.loadGateData();
} else { } else {
this.drawFloorMap(); this.drawFloorMap();
...@@ -402,6 +403,7 @@ export default { ...@@ -402,6 +403,7 @@ export default {
.getBoundingClientRect().width; .getBoundingClientRect().width;
item.cheight = (item.cwidth * item.height) / item.width; item.cheight = (item.cwidth * item.height) / item.width;
that.canvasList = canvasList; that.canvasList = canvasList;
console.log(that.canvasList);
}); });
}; };
} }
......
src/views/queueManagement/channelManagement/Painter.vue
<template> <template>
<div class="painter" ref="painter"></div> <div class="painter" ref="painter"></div>
</template> </template>
<script> <script>
import _ from 'underscore'; import _ from "underscore";
import zrender from 'zrender'; import zrender from "zrender";
export default { export default {
props: { props: {
isEdit:Boolean, isEdit: Boolean,
cdata: { cdata: {
type: Object, type: Object,
default: {} default: {},
},
list:Array,
desk:Object
}, },
watch: { list: Array,
cdata: { desk: Object,
immediate: true, },
handler(nval) { watch: {
if(JSON.stringify(nval) == '{}'){ cdata: {
return false immediate: true,
} handler(nval) {
setTimeout(()=>{ if (JSON.stringify(nval) == "{}") {
if(!_.isEmpty(nval))this.initZrender(); return false;
},500);
},
deep: true
} }
setTimeout(() => {
if (!_.isEmpty(nval)) this.initZrender();
console.log(this.cdata);
}, 500);
},
deep: true,
},
},
data() {
return {
pointList: [], //当前绘制的图形点位列表
groupList: [], //图形数组
zr: {}, //绘图实例对象
baseColor: "#ff000075",
strokeColor: "#f00",
/*********************************/
fillColor: "#f00",
scaleVal: 10, //缩放
rotateVal: 0, //旋转角度
tempData: {},
/*********************************/
groupObj: {},
};
},
methods: {
initZrender() {
this.$nextTick(() => {
let client = document.querySelector(".painter").getBoundingClientRect();
this.zr = zrender.init(this.$refs.painter, {
renderer: "canvas",
devicePixelRatio: 2,
width: client.width,
height: client.height,
});
this.bindingEvt();
this.initialGroup();
});
}, },
data() { initialGroup() {
return { // let list = _.filter(this.list, (item) => {
pointList: [],//当前绘制的图形点位列表 // return this.isFloor || item.deviceSerialNum == this.cdata.serialnum;
groupList: [], //图形数组 // });
zr: {}, //绘图实例对象 // _.each(list, (item) => {
baseColor: '#ff000075', // let gdata = zrender.util.clone(item);
strokeColor: '#f00', // if (gdata.coordinates) {
/*********************************/ // gdata.points = _.map(JSON.parse(gdata.coordinates), (point) => {
fillColor: '#f00', // let x = (point.x * this.zr.getWidth()) / 1920;
scaleVal: 10, //缩放 // let y = (point.y * this.zr.getHeight()) / 1080;
rotateVal: 0, //旋转角度 // return [x, y];
tempData: {}, // });
/*********************************/ // gdata.desk = item;
groupObj: {} // console.log(gdata);
// this.createGroup(gdata, true);
// }
// });
let list = this.list.filter(
(item) => item.deviceSerialNum == this.cdata.serialnum
);
console.log(list);
_.each(list, (item) => {
let gdata = zrender.util.clone(item);
if (gdata.coordinate) {
gdata.points = _.map(JSON.parse(gdata.coordinate), (point) => {
let x = (point.x * this.zr.getWidth()) / 1920;
let y = (point.y * this.zr.getHeight()) / 1080;
return [x, y];
});
gdata.desk = item;
console.log(gdata);
this.createGroup(gdata, true);
} }
});
}, },
methods: { bindingEvt() {
initZrender() { let that = this;
this.$nextTick(() => { let group;
let client = document.querySelector('.painter').getBoundingClientRect(); this.zr.on("click", (evt) => {
this.zr = zrender.init(this.$refs.painter, { if (!this.desk || _.isEmpty(this.desk)) {
renderer: 'canvas', return this.$message({
devicePixelRatio: 2, showClose: true,
width: client.width, type: "warning",
height: client.height message: "请先点击选择通道",
}); });
this.bindingEvt(); }
this.initialGroup(); this.$emit("start", this.desk);
}) let point = [evt.event.zrX, evt.event.zrY];
}, this.pointList.push(point);
initialGroup(){ if (this.pointList.length == 1) {
let list = this.list //第一次点击，创建Group
_.each(list,item=>{ let points = zrender.util.clone(this.pointList);
let gdata = zrender.util.clone(item); group = this.createGroup({
if(gdata.coordinate){ points,
gdata.points = _.map(JSON.parse(gdata.coordinate),point=>{ fill: that.baseColor,
let x = point.x*this.zr.getWidth()/1920; desk: this.desk,
let y = point.y*this.zr.getHeight()/1080; });
return [x,y]; }
}); this.drawPolyline(group, this.pointList);
gdata.desk = item; });
this.createGroup(gdata,true); this.zr.on("mousemove", (evt) => {
} if (this.pointList.length == 0) return false;
}) let point = [evt.event.zrX, evt.event.zrY];
}, this.drawPolyline(group, this.pointList.concat([point]));
bindingEvt() { });
let that = this; },
let group; drawPolyline(group, points) {
this.zr.on('click', evt => { group.polyline.setShape({
if(!this.desk||_.isEmpty(this.desk)){ points: points,
return this.$message({ });
showClose: true, group.points = zrender.util.clone(points);
type: "warning", },
message: '请先点击选择通道' createGroup(gdata, isFull = false) {
}) let that = this;
} let points = gdata.points;
this.$emit('start',this.desk);
let point = [evt.event.zrX, evt.event.zrY]; let fill = gdata.fill;
this.pointList.push(point); let position = gdata.position;
if (this.pointList.length == 1) { //第一次点击，创建Group /*******************************/
let points = zrender.util.clone(this.pointList); let group = new zrender.Group({
group = this.createGroup({ points, fill: that.baseColor,desk:this.desk}); complete: false,
} position: position || [0, 0],
this.drawPolyline(group, this.pointList); });
}) if (isFull) {
this.zr.on('mousemove', evt => { group.points = points;
if (this.pointList.length == 0) return false; }
let point = [evt.event.zrX, evt.event.zrY]; group.desk = gdata.desk;
this.drawPolyline(group, this.pointList.concat([point])); group.cdata = this.cdata;
}); group.zr = this.zr;
},
drawPolyline(group, points) { let polyline = this.createPolyline({
group.polyline.setShape({ stroke: that.strokeColor,
points: points fill: fill,
}); points: points,
group.points = zrender.util.clone(points); });
}, group.id = gdata.id || Date.now().toString(36);
createGroup(gdata,isFull=false) { group.add(polyline);
let that = this; group.polyline = polyline;
let points = gdata.points; group.fill = gdata.fill;
group.data = gdata;
let fill = gdata.fill; if (this.isEdit && points.length == 1) {
let position = gdata.position; let circle = that.createCircle(group, points[0]);
/*******************************/ group.add(circle);
let group = new zrender.Group({ } else if (isFull) {
complete: false, this.drawText(group, false);
position: position || [0, 0] }
}); group.on("click", function (evt) {
if(isFull){ if (!that.isEdit) {
group.points = points; evt.cancelBubble = true;
} return false;
group.desk = gdata.desk; }
group.cdata = this.cdata; if (group.complete) {
group.zr = this.zr; that.$emit("gclick", group);
evt.cancelBubble = true;
let polyline = this.createPolyline({ return false;
stroke: that.strokeColor, }
fill: fill,
points: points if (that.pointList.length == 1) {
}) //evt.cancelBubble = true;
group.id = gdata.id || Date.now().toString(36); }
group.add(polyline); });
group.polyline = polyline; let action = this.$refs.action;
group.fill = gdata.fill; /*action.onmouseleave = ()=>{
group.data = gdata;
if (this.isEdit && points.length == 1) {
let circle = that.createCircle(group, points[0]);
group.add(circle)
} else if(isFull){
this.drawText(group, false);
}
group.on('click', function (evt) {
if (!that.isEdit) {
evt.cancelBubble = true;
return false;
}
if(group.complete){
that.$emit('gclick',group);
evt.cancelBubble = true;
return false;
}
if (that.pointList.length == 1) {
//evt.cancelBubble = true;
}
});
let action = this.$refs.action;
/*action.onmouseleave = ()=>{
action.style.display = 'none' action.style.display = 'none'
}*/ }*/
group.on('contextmenu', function (evt) { group.on("contextmenu", function (evt) {
if (!that.isEdit) { if (!that.isEdit) {
evt.stop(); evt.stop();
return false return false;
} }
if (that.pointList.length > 0) { if (that.pointList.length > 0) {
evt.stop(); evt.stop();
return false; return false;
} }
action.style.display = 'block'; action.style.display = "block";
action.style.left = (evt.offsetX - 5) + 'px' action.style.left = evt.offsetX - 5 + "px";
action.style.top = (evt.offsetY - 5) + 'px' action.style.top = evt.offsetY - 5 + "px";
evt.stop(); evt.stop();
that.setCurrentGroup(this); that.setCurrentGroup(this);
return false; return false;
}) });
this.zr.add(group); this.zr.add(group);
this.groupList.push(group); this.groupList.push(group);
return group; return group;
}, },
createCircle(group, point) { createCircle(group, point) {
let that = this; let that = this;
let circle = new zrender.Circle({ let circle = new zrender.Circle({
style: { style: {
fill: 'transparent', fill: "transparent",
stroke: '#f00', stroke: "#f00",
lineWidth: 2 lineWidth: 2,
},
shape: {
cx: point[0],
cy: point[1],
r: 10
}
});
circle.on('click', evt => {
evt.cancelBubble = true;
that.pointList.push(that.pointList[0]);
group.remove(circle);
if (that.pointList.length > 3) {
this.drawPolyline(group, that.pointList);
this.drawText(group,true);
} else {
this.zr.remove(group)
}
that.pointList = [];
});
return circle;
},
createPolyline(params) {
let that = this;
return new zrender.Polyline({
x: 0,
y: 0,
origin: [0, 0],
//cursor:'move',
draggable: false,
style: {
stroke: params.stroke,
fill: params.fill || that.baseColor,
lineWidth: 3
},
shape: {
points: params.points,
smooth: 0.01
}
});
}, },
drawText(group,finish) { shape: {
let that = this,xPoints=[],yPoints=[]; cx: point[0],
_.each(group.points,item=>{ cy: point[1],
xPoints.push(item[0]); r: 10,
yPoints.push(item[1]);
})
let [x, y] = [_.max(xPoints) - _.min(xPoints), _.max(yPoints) - _.min(yPoints)];
let client = group.getBoundingRect();
let content = `{name|${group.desk.name || ''}}`;
let text = new zrender.Text({
position: [client.x, client.y],
style: {
x: client.width / 2,
y: client.height / 2,
width: client.width,
height: client.height,
textAlign: 'center',
textVerticalAlign: 'middle',
//textShadowBlur: 3,
textShadowColor: '#893e95',
//textShadowOffsetX: 3,
//textShadowOffsetY: 3,
text: content,
fill: '#fff',
fontSize: 14,
fontWeight:600,
rich: {
name: {
textLineHeight: 16,
textFill: '#fff'
}
}
}
});
//text.setClipPath(curGroup.polyline)
//this.setDragaAble(text)
group.add(text);
group.text = text;
group.complete = true;//图像已经绘制完毕
group.polyline.attr({
origin: [client.x + client.width / 2, client.y + client.height / 2]
});
if (that.isEdit) {
that.setDragaAble(group);
}
this.$emit('finish',group);
}, },
setCurrentGroup(group) { });
this.groupObj = _.find(this.groupList, item => { circle.on("click", (evt) => {
return item.id == group.id; evt.cancelBubble = true;
}); that.pointList.push(that.pointList[0]);
this.fillColor = this.groupObj.polyline.style.fill; group.remove(circle);
if (that.pointList.length > 3) {
this.drawPolyline(group, that.pointList);
this.drawText(group, true);
} else {
this.zr.remove(group);
}
that.pointList = [];
});
return circle;
},
createPolyline(params) {
let that = this;
return new zrender.Polyline({
x: 0,
y: 0,
origin: [0, 0],
//cursor:'move',
draggable: false,
style: {
stroke: params.stroke,
fill: params.fill || that.baseColor,
lineWidth: 3,
}, },
setDragaAble(el, popup) { shape: {
let isDown = false, points: params.points,
downPoint = [], smooth: 0.01,
initPoint = [];
el.on('mousedown', evt => {
isDown = true;
evt.cancelBubble = true;
downPoint = [evt.event.zrX, evt.event.zrY];
initPoint = zrender.util.clone(el.position);
evt.cancelBubble = true;
});
el.on('mousemove', evt => {
if (isDown) {
evt.cancelBubble = true;
let pos = [evt.event.zrX - downPoint[0], evt.event.zrY - downPoint[1]];
el.attr('position', [initPoint[0] + pos[0], initPoint[1] + pos[1]]);
}
});
el.on('mouseup', evt => {
evt.cancelBubble = true;
isDown = false;
});
this.zr.on('mouseup', function () {
isDown = false;
})
}, },
});
},
drawText(group, finish) {
let that = this,
xPoints = [],
yPoints = [];
_.each(group.points, (item) => {
xPoints.push(item[0]);
yPoints.push(item[1]);
});
let [x, y] = [
_.max(xPoints) - _.min(xPoints),
_.max(yPoints) - _.min(yPoints),
];
let client = group.getBoundingRect();
let content = `{name|${group.desk.name || ""}}`;
} let text = new zrender.Text({
} position: [client.x, client.y],
style: {
x: client.width / 2,
y: client.height / 2,
width: client.width,
height: client.height,
textAlign: "center",
textVerticalAlign: "middle",
//textShadowBlur: 3,
textShadowColor: "#893e95",
//textShadowOffsetX: 3,
//textShadowOffsetY: 3,
text: content,
fill: "#fff",
fontSize: 14,
fontWeight: 600,
rich: {
name: {
textLineHeight: 16,
textFill: "#fff",
},
},
},
});
//text.setClipPath(curGroup.polyline)
//this.setDragaAble(text)
group.add(text);
group.text = text;
group.complete = true; //图像已经绘制完毕
group.polyline.attr({
origin: [client.x + client.width / 2, client.y + client.height / 2],
});
if (that.isEdit) {
that.setDragaAble(group);
}
this.$emit("finish", group);
},
setCurrentGroup(group) {
this.groupObj = _.find(this.groupList, (item) => {
return item.id == group.id;
});
this.fillColor = this.groupObj.polyline.style.fill;
},
setDragaAble(el, popup) {
let isDown = false,
downPoint = [],
initPoint = [];
el.on("mousedown", (evt) => {
isDown = true;
evt.cancelBubble = true;
downPoint = [evt.event.zrX, evt.event.zrY];
initPoint = zrender.util.clone(el.position);
evt.cancelBubble = true;
});
el.on("mousemove", (evt) => {
if (isDown) {
evt.cancelBubble = true;
let pos = [
evt.event.zrX - downPoint[0],
evt.event.zrY - downPoint[1],
];
el.attr("position", [initPoint[0] + pos[0], initPoint[1] + pos[1]]);
}
});
el.on("mouseup", (evt) => {
evt.cancelBubble = true;
isDown = false;
});
this.zr.on("mouseup", function () {
isDown = false;
});
},
},
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.painter { .painter {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
src/views/queueManagement/channelManagement/index.vue
...@@ -288,10 +288,17 @@ export default { ...@@ -288,10 +288,17 @@ export default {
areaId: this.searchForm.areaId, areaId: this.searchForm.areaId,
}) })
.then((res) => { .then((res) => {
console.log(res);
let data = res.data.data; let data = res.data.data;
data.forEach((item) => { data.forEach((item) => {
item.name = this.areaObj.name; let sd = this.tableData.filter(
(item1) => item1.deviceSerialNum == item.serialnum
);
if (sd) {
item.name = sd.map((item2) => item2.name).join(",");
} else {
item.name = "";
}
item.id = item.serialnum; item.id = item.serialnum;
item.picUrl = item.picUrl =
window._vionConfig.picUrl + window._vionConfig.picUrl +
...@@ -303,6 +310,7 @@ export default { ...@@ -303,6 +310,7 @@ export default {
(item.coordinate = JSON.parse(item.coordinate)); (item.coordinate = JSON.parse(item.coordinate));
}); });
this.gateList = data; this.gateList = data;
console.log(this.gateList);
this.drawJoinMap(); this.drawJoinMap();
}); });
// this.drawFloorMap(); // this.drawFloorMap();
...@@ -461,21 +469,24 @@ export default { ...@@ -461,21 +469,24 @@ export default {
}, },
delCoord(data) { delCoord(data) {
data.coordinate = ""; data.coordinate = "";
this.$api.queueManagementApi.updateChannel(data).then((res) => { console.log(data, "gggggggg");
let result = res.data; this.$api.queueManagementApi
if (result.code == 200) { .updateChannel({ ...data, deviceSerialNum: "" })
this.$message({ .then((res) => {
message: result.msg, let result = res.data;
type: "success", if (result.code == 200) {
}); this.$message({
this.getTableData(); message: result.msg,
} else { type: "success",
this.$message({ });
message: result.msg, this.getTableData();
type: "error", } else {
}); this.$message({
} message: result.msg,
}); type: "error",
});
}
});
}, },
editCoord(group) { editCoord(group) {
let { position, points, __zr, cdata, desk } = group; let { position, points, __zr, cdata, desk } = group;
...@@ -487,7 +498,8 @@ export default { ...@@ -487,7 +498,8 @@ export default {
}; };
}); });
desk.coordinate = JSON.stringify(coordinate); desk.coordinate = JSON.stringify(coordinate);
let params = Object.assign({}, desk); let params = Object.assign({}, desk, { deviceSerialNum: cdata.id });
console.log(group, desk, "gggggg");
return this.$api.queueManagementApi.updateChannel(params); return this.$api.queueManagementApi.updateChannel(params);
}, },
}, },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!