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 150 additions and 104 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
...@@ -2,98 +2,124 @@ ...@@ -2,98 +2,124 @@
<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, list: Array,
desk:Object desk: Object,
}, },
watch: { watch: {
cdata: { cdata: {
immediate: true, immediate: true,
handler(nval) { handler(nval) {
if(JSON.stringify(nval) == '{}'){ if (JSON.stringify(nval) == "{}") {
return false return false;
} }
setTimeout(()=>{ setTimeout(() => {
if(!_.isEmpty(nval))this.initZrender(); if (!_.isEmpty(nval)) this.initZrender();
},500); console.log(this.cdata);
}, 500);
},
deep: true,
}, },
deep: true
}
}, },
data() { data() {
return { return {
pointList: [],//当前绘制的图形点位列表 pointList: [], //当前绘制的图形点位列表
groupList: [], //图形数组 groupList: [], //图形数组
zr: {}, //绘图实例对象 zr: {}, //绘图实例对象
baseColor: '#ff000075', baseColor: "#ff000075",
strokeColor: '#f00', strokeColor: "#f00",
/*********************************/ /*********************************/
fillColor: '#f00', fillColor: "#f00",
scaleVal: 10, //缩放 scaleVal: 10, //缩放
rotateVal: 0, //旋转角度 rotateVal: 0, //旋转角度
tempData: {}, tempData: {},
/*********************************/ /*********************************/
groupObj: {} groupObj: {},
} };
}, },
methods: { methods: {
initZrender() { initZrender() {
this.$nextTick(() => { this.$nextTick(() => {
let client = document.querySelector('.painter').getBoundingClientRect(); let client = document.querySelector(".painter").getBoundingClientRect();
this.zr = zrender.init(this.$refs.painter, { this.zr = zrender.init(this.$refs.painter, {
renderer: 'canvas', renderer: "canvas",
devicePixelRatio: 2, devicePixelRatio: 2,
width: client.width, width: client.width,
height: client.height height: client.height,
}); });
this.bindingEvt(); this.bindingEvt();
this.initialGroup(); this.initialGroup();
}) });
}, },
initialGroup(){ initialGroup() {
let list = this.list // let list = _.filter(this.list, (item) => {
_.each(list,item=>{ // return this.isFloor || item.deviceSerialNum == this.cdata.serialnum;
// });
// _.each(list, (item) => {
// let gdata = zrender.util.clone(item);
// if (gdata.coordinates) {
// gdata.points = _.map(JSON.parse(gdata.coordinates), (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);
// }
// });
let list = this.list.filter(
(item) => item.deviceSerialNum == this.cdata.serialnum
);
console.log(list);
_.each(list, (item) => {
let gdata = zrender.util.clone(item); let gdata = zrender.util.clone(item);
if(gdata.coordinate){ if (gdata.coordinate) {
gdata.points = _.map(JSON.parse(gdata.coordinate),point=>{ gdata.points = _.map(JSON.parse(gdata.coordinate), (point) => {
let x = point.x*this.zr.getWidth()/1920; let x = (point.x * this.zr.getWidth()) / 1920;
let y = point.y*this.zr.getHeight()/1080; let y = (point.y * this.zr.getHeight()) / 1080;
return [x,y]; return [x, y];
}); });
gdata.desk = item; gdata.desk = item;
this.createGroup(gdata,true); console.log(gdata);
this.createGroup(gdata, true);
} }
}) });
}, },
bindingEvt() { bindingEvt() {
let that = this; let that = this;
let group; let group;
this.zr.on('click', evt => { this.zr.on("click", (evt) => {
if(!this.desk||_.isEmpty(this.desk)){ if (!this.desk || _.isEmpty(this.desk)) {
return this.$message({ return this.$message({
showClose: true, showClose: true,
type: "warning", type: "warning",
message: '请先点击选择通道' message: "请先点击选择通道",
}) });
} }
this.$emit('start',this.desk); this.$emit("start", this.desk);
let point = [evt.event.zrX, evt.event.zrY]; let point = [evt.event.zrX, evt.event.zrY];
this.pointList.push(point); this.pointList.push(point);
if (this.pointList.length == 1) { //第一次点击，创建Group if (this.pointList.length == 1) {
//第一次点击，创建Group
let points = zrender.util.clone(this.pointList); let points = zrender.util.clone(this.pointList);
group = this.createGroup({ points, fill: that.baseColor,desk:this.desk}); group = this.createGroup({
points,
fill: that.baseColor,
desk: this.desk,
});
} }
this.drawPolyline(group, this.pointList); this.drawPolyline(group, this.pointList);
}) });
this.zr.on('mousemove', evt => { this.zr.on("mousemove", (evt) => {
if (this.pointList.length == 0) return false; if (this.pointList.length == 0) return false;
let point = [evt.event.zrX, evt.event.zrY]; let point = [evt.event.zrX, evt.event.zrY];
this.drawPolyline(group, this.pointList.concat([point])); this.drawPolyline(group, this.pointList.concat([point]));
...@@ -101,11 +127,11 @@ export default { ...@@ -101,11 +127,11 @@ export default {
}, },
drawPolyline(group, points) { drawPolyline(group, points) {
group.polyline.setShape({ group.polyline.setShape({
points: points points: points,
}); });
group.points = zrender.util.clone(points); group.points = zrender.util.clone(points);
}, },
createGroup(gdata,isFull=false) { createGroup(gdata, isFull = false) {
let that = this; let that = this;
let points = gdata.points; let points = gdata.points;
...@@ -114,9 +140,9 @@ export default { ...@@ -114,9 +140,9 @@ export default {
/*******************************/ /*******************************/
let group = new zrender.Group({ let group = new zrender.Group({
complete: false, complete: false,
position: position || [0, 0] position: position || [0, 0],
}); });
if(isFull){ if (isFull) {
group.points = points; group.points = points;
} }
group.desk = gdata.desk; group.desk = gdata.desk;
...@@ -126,8 +152,8 @@ export default { ...@@ -126,8 +152,8 @@ export default {
let polyline = this.createPolyline({ let polyline = this.createPolyline({
stroke: that.strokeColor, stroke: that.strokeColor,
fill: fill, fill: fill,
points: points points: points,
}) });
group.id = gdata.id || Date.now().toString(36); group.id = gdata.id || Date.now().toString(36);
group.add(polyline); group.add(polyline);
group.polyline = polyline; group.polyline = polyline;
...@@ -135,17 +161,17 @@ export default { ...@@ -135,17 +161,17 @@ export default {
group.data = gdata; group.data = gdata;
if (this.isEdit && points.length == 1) { if (this.isEdit && points.length == 1) {
let circle = that.createCircle(group, points[0]); let circle = that.createCircle(group, points[0]);
group.add(circle) group.add(circle);
} else if(isFull){ } else if (isFull) {
this.drawText(group, false); this.drawText(group, false);
} }
group.on('click', function (evt) { group.on("click", function (evt) {
if (!that.isEdit) { if (!that.isEdit) {
evt.cancelBubble = true; evt.cancelBubble = true;
return false; return false;
} }
if(group.complete){ if (group.complete) {
that.$emit('gclick',group); that.$emit("gclick", group);
evt.cancelBubble = true; evt.cancelBubble = true;
return false; return false;
} }
...@@ -158,22 +184,22 @@ export default { ...@@ -158,22 +184,22 @@ export default {
/*action.onmouseleave = ()=>{ /*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;
...@@ -182,25 +208,25 @@ export default { ...@@ -182,25 +208,25 @@ export default {
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: { shape: {
cx: point[0], cx: point[0],
cy: point[1], cy: point[1],
r: 10 r: 10,
} },
}); });
circle.on('click', evt => { circle.on("click", (evt) => {
evt.cancelBubble = true; evt.cancelBubble = true;
that.pointList.push(that.pointList[0]); that.pointList.push(that.pointList[0]);
group.remove(circle); group.remove(circle);
if (that.pointList.length > 3) { if (that.pointList.length > 3) {
this.drawPolyline(group, that.pointList); this.drawPolyline(group, that.pointList);
this.drawText(group,true); this.drawText(group, true);
} else { } else {
this.zr.remove(group) this.zr.remove(group);
} }
that.pointList = []; that.pointList = [];
}); });
...@@ -217,24 +243,28 @@ export default { ...@@ -217,24 +243,28 @@ export default {
style: { style: {
stroke: params.stroke, stroke: params.stroke,
fill: params.fill || that.baseColor, fill: params.fill || that.baseColor,
lineWidth: 3 lineWidth: 3,
}, },
shape: { shape: {
points: params.points, points: params.points,
smooth: 0.01 smooth: 0.01,
} },
}); });
}, },
drawText(group,finish) { drawText(group, finish) {
let that = this,xPoints=[],yPoints=[]; let that = this,
_.each(group.points,item=>{ xPoints = [],
yPoints = [];
_.each(group.points, (item) => {
xPoints.push(item[0]); xPoints.push(item[0]);
yPoints.push(item[1]); yPoints.push(item[1]);
}) });
let [x, y] = [_.max(xPoints) - _.min(xPoints), _.max(yPoints) - _.min(yPoints)]; let [x, y] = [
_.max(xPoints) - _.min(xPoints),
_.max(yPoints) - _.min(yPoints),
];
let client = group.getBoundingRect(); let client = group.getBoundingRect();
let content = `{name|${group.desk.name || ''}}`; let content = `{name|${group.desk.name || ""}}`;
let text = new zrender.Text({ let text = new zrender.Text({
position: [client.x, client.y], position: [client.x, client.y],
...@@ -243,39 +273,39 @@ export default { ...@@ -243,39 +273,39 @@ export default {
y: client.height / 2, y: client.height / 2,
width: client.width, width: client.width,
height: client.height, height: client.height,
textAlign: 'center', textAlign: "center",
textVerticalAlign: 'middle', textVerticalAlign: "middle",
//textShadowBlur: 3, //textShadowBlur: 3,
textShadowColor: '#893e95', textShadowColor: "#893e95",
//textShadowOffsetX: 3, //textShadowOffsetX: 3,
//textShadowOffsetY: 3, //textShadowOffsetY: 3,
text: content, text: content,
fill: '#fff', fill: "#fff",
fontSize: 14, fontSize: 14,
fontWeight:600, fontWeight: 600,
rich: { rich: {
name: { name: {
textLineHeight: 16, textLineHeight: 16,
textFill: '#fff' textFill: "#fff",
} },
} },
} },
}); });
//text.setClipPath(curGroup.polyline) //text.setClipPath(curGroup.polyline)
//this.setDragaAble(text) //this.setDragaAble(text)
group.add(text); group.add(text);
group.text = text; group.text = text;
group.complete = true;//图像已经绘制完毕 group.complete = true; //图像已经绘制完毕
group.polyline.attr({ group.polyline.attr({
origin: [client.x + client.width / 2, client.y + client.height / 2] origin: [client.x + client.width / 2, client.y + client.height / 2],
}); });
if (that.isEdit) { if (that.isEdit) {
that.setDragaAble(group); that.setDragaAble(group);
} }
this.$emit('finish',group); this.$emit("finish", group);
}, },
setCurrentGroup(group) { setCurrentGroup(group) {
this.groupObj = _.find(this.groupList, item => { this.groupObj = _.find(this.groupList, (item) => {
return item.id == group.id; return item.id == group.id;
}); });
this.fillColor = this.groupObj.polyline.style.fill; this.fillColor = this.groupObj.polyline.style.fill;
...@@ -284,31 +314,33 @@ export default { ...@@ -284,31 +314,33 @@ export default {
let isDown = false, let isDown = false,
downPoint = [], downPoint = [],
initPoint = []; initPoint = [];
el.on('mousedown', evt => { el.on("mousedown", (evt) => {
isDown = true; isDown = true;
evt.cancelBubble = true; evt.cancelBubble = true;
downPoint = [evt.event.zrX, evt.event.zrY]; downPoint = [evt.event.zrX, evt.event.zrY];
initPoint = zrender.util.clone(el.position); initPoint = zrender.util.clone(el.position);
evt.cancelBubble = true; evt.cancelBubble = true;
}); });
el.on('mousemove', evt => { el.on("mousemove", (evt) => {
if (isDown) { if (isDown) {
evt.cancelBubble = true; evt.cancelBubble = true;
let pos = [evt.event.zrX - downPoint[0], evt.event.zrY - downPoint[1]]; let pos = [
el.attr('position', [initPoint[0] + pos[0], initPoint[1] + pos[1]]); 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 => { el.on("mouseup", (evt) => {
evt.cancelBubble = true; evt.cancelBubble = true;
isDown = false; isDown = false;
}); });
this.zr.on('mouseup', function () { this.zr.on("mouseup", function () {
isDown = false; isDown = false;
}) });
}, },
},
} };
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.painter { .painter {
......
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,7 +469,10 @@ export default { ...@@ -461,7 +469,10 @@ export default {
}, },
delCoord(data) { delCoord(data) {
data.coordinate = ""; data.coordinate = "";
this.$api.queueManagementApi.updateChannel(data).then((res) => { console.log(data, "gggggggg");
this.$api.queueManagementApi
.updateChannel({ ...data, deviceSerialNum: "" })
.then((res) => {
let result = res.data; let result = res.data;
if (result.code == 200) { if (result.code == 200) {
this.$message({ this.$message({
...@@ -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!