<template>
<div id="canvasContainer">
<div id="canvasBox">
<!-- 网格 -->
<canvas id="canGrid" class="can" :style="{left: gridLeft, top: gridTop}" :hleft="gridLeft" :htop="gridTop"></canvas>
<!-- 箱体连线区域，包含输出源 -->
<canvas id="can" class="can"></canvas>
<div id="maskArea"></div>
<div id="maskSourceCut">
<div class="mask" v-show="is_show_mask" :style="`left: ${maskLeft}; top: ${maskTop}; right: ${maskRight}; bottom: ${maskBottom}`">
<div class="hander hander_lt" v-if="showHander" :style="`width: ${handerWidth}px; height: ${handerHeight}px`" @mousedown="(e) => resizeDown(e,'lt')" @mousemove="(e) => resizeMove(e,'lt')"
@mouseup="(e) => resizeUp(e,'lt')"></div>
<div class="hander hander_ct" v-if="showHander" :style="`width: ${handerWidth}px;`" @mousedown="(e) => resizeDown(e,'ct')" @mousemove="(e) => resizeMove(e,'ct')"
@mouseup="(e) => resizeUp(e,'ct')"></div>
<div class="hander hander_rt" v-if="showHander" :style="`width: ${handerWidth}px; height: ${handerHeight}px`" @mousedown="(e) => resizeDown(e,'rt')" @mousemove="(e) => resizeMove(e,'rt')"
@mouseup="(e) => resizeUp(e,'rt')"></div>
<div class="hander hander_rc" v-if="showHander" :style="`height: ${handerHeight}px;`" @mousedown="(e) => resizeDown(e,'rc')" @mousemove="(e) => resizeMove(e,'rc')"
@mouseup="(e) => resizeUp(e,'rc')"></div>
<div class="hander hander_rb" v-if="showHander" :style="`width: ${handerWidth}px; height: ${handerHeight}px`" @mousedown="(e) => resizeDown(e,'rb')" @mousemove="(e) => resizeMove(e,'rb')"
@mouseup="(e) => resizeUp(e,'rb')"></div>
<div class="hander hander_cb" v-if="showHander" :style="`width: ${handerWidth}px;`" @mousedown="(e) => resizeDown(e,'cb')" @mousemove="(e) => resizeMove(e,'cb')"
@mouseup="(e) => resizeUp(e,'cb')"></div>
<div class="hander hander_lb" v-if="showHander" :style="`width: ${handerWidth}px; height: ${handerHeight}px`" @mousedown="(e) => resizeDown(e,'lb')" @mousemove="(e) => resizeMove(e,'lb')"
@mouseup="(e) => resizeUp(e,'lb')"></div>
<div class="hander hander_lc" v-if="showHander" :style="`height: ${handerHeight}px;`" @mousedown="(e) => resizeDown(e,'lc')" @mousemove="(e) => resizeMove(e,'lc')"
@mouseup="(e) => resizeUp(e,'lc')"></div>
<div class="maskCenter" @mousemove="resizeMove" @mouseup="
cutMaskFlag = false;
cutMaskType = '';
cutRate = 1;
"></div>
</div>
</div>
</div>
</div>
</template>
<script>
var triangle = {};
var canvas;
var lineArr = {};
var firstAdd;
var sourceCanvas = {};
var rightKey = false; // 右键
var isdrawBox = false;
var startDrawX = 0;
var startDrawY = 0;
var yesSddBox
import bus from "@/assets/js/bus.js";
import {connectionMode} from "@/components/drawLine/ConnectionMode.js";
import {handleDataUtil} from "@/components/saveSystemData/handleUtil.js";
import {mapState, mapMutations} from "vuex";
import myCanvas from "./myCanvas";
import {Message} from "element-ui";
import {accAdd, accSub, accMul, accDiv} from "@/assets/js/mathem.js";
export default {mixins: [myCanvas],
computed: {
...mapState({
gridShow: "gridShow",
canvasSpace: "canvasSpace",
canvasColor: "canvasColor",
mode: "mode",
boxes: "boxes",
sourceData: "sourceData",
inputCut: "inputCut",
selectedBoxes: "selectedBoxes",
boxType: "boxType",
areaId: "areaId",
groupList: "groupList",
seletedGroup: "seletedGroup",
frame: "frame",
is_show_mask: "is_show_mask",
boxTypeList: "boxTypeList",
canvasSize: "canvasSize",
canvasZoom: "canvasZoom",
changeNetWork: "changeNetWork",
showFace: "showFace",
dataSource: "dataSource",
sourceMoveEnable: "sourceMoveEnable",
doBack: "doBack",
doUp: "doUp",
currentMode: "currentMode",
selectGroupIndex: "selectGroupIndex",
limitSourceSpace: "limitSourceSpace",
onlineBoxListData: "onlineBoxListData",
allPort: "allPort",
inputDetail: "inputDetail",
inputPortIndex: "inputPortIndex",
cropEn: "cropEn",
cut: "cut",
inputSource: "inputSource",
focusPropertyFlag: "focusPropertyFlag",
gridAdsorbent: "gridAdsorbent",
adsorbent: "adsorbent",
source_crop: "source_crop",
cutData: "cutData",
rightBoxDetail: "rightBoxDetail",
}),
},
data () {
return {
imrotat: false,
gridLeft: 0,
gridTop: 0,
activeTpye: false,
mousePosition: {
x: null,
y: null,
},
cutRate: 1,
cutMaskFlag: false,
cutMaskType: "",
cutMinWidth: 50,
cutMinHeight: 50,
handerWidth: 40,
handerHeight: 40,
showHander: true,
ctrlFlag: false,
copyBoxFlag: false,
cutBoxFlag: false,
originData: null,
noIndex: 0, // 默认未抉择 卡槽 网口 ----- 临时废除
dataRect: [], // 点击增加箱体 ---- 临时废除
allData: [], // 所有箱体数据
allData2: [], // 深拷贝所有箱体数据
maskLeft: "0px",
maskTop: "0px",
maskRight: "0px",
maskBottom: "0px",
// maskWidth: "0px",
// maskHeight: "0px",
cutingFlag: false,
// 开始裁剪时鼠标的坐标
start_x: null,
start_y: null,
// 裁剪完结时松开鼠标的坐标
end_x: null,
end_y: null,
// 裁剪后区域间隔边距的间隔
imgTop: "0px",
imgRight: "1000px",
imgBottom: "1000px",
imgLeft: "0px",
// 裁剪区域片的宽高
imgHeight: "100%",
imgWidth: "100%",
cutParam: "0,0,0,0", // 裁剪后果传参 左上右下（不带 px）canvasBox: null,
movingSoureFlag: false,
scalingSourceFlag: false,
movup: false, // 挪动实现后
rotup: false, // 旋转实现后
yd: {},
allGroup: [],
isChangeLine: false,
addlineDash: 1,
startPort: {},
endPort: {},
lineDash: {},
addAngle: 0,
onLineBoxType: "",
onlineBoxLength: 0,
drawAddBox: [],
newBoxes: [],
unselectecBoxes: [],
boxReqList: [],
addBoxParams: [], // 存贮每次新增箱体数据
face: true, // 默认为 true 代表为正视图。drawLineType: "",
loadNumber: 1,
parms: {},
portIds: [],
copyNum: 1,
copyKeyNum: 1,
copyBoxSpace: 10,
frameMessage: "",
deepcolorMessage: "",
shiftFlag: false,
dowmMoseList: [],
ctrlShiftA_number: 0, // 管制长按后退后退操作时反复执行
zouxian: "",
zouxianMode: "",
hoverGroupFlag: false,
scaleOffsetFlag: false,
moveMouseX: "",
moveMouseY: "",
};
},
mounted () {bus.$on("setToRightBox", (val) => {
let that = this;
console.log("右侧扭转坐标角度", val);
if (firstAdd) {
this.addAngle = val.angle;
firstAdd.set({angle: val.angle}).setCoords();
canvas.renderAll();} else {let item = val // canvas.getActiveObject();
if (item) {if (item.isCheckTo) {item.set({ angle: val.angle, left: val.left, top: val.top}).setCoords();
item._objects[2].set({angle: -val.angle}).setCoords();
canvas.renderAll();
let rectList = this.allData.filter(function (obj, i) {return obj.id == item.id;});
rectList[0].rotationAngle = val.angle;
rectList[0].x = val.left;
rectList[0].y = val.top;
this.setUpdateBox(rectList, (res) => {this.handleData2('manualRotate')
}, 1);
this.$nextTick(function () {handleDataUtil.doEnything(this.dataSource, this.allData, "canvas", this.groupList, "");
this.setDoBack(false);
this.setDoUp(true);
})
} else {
item.set({
left: val.left,
top: val.top,
originX: 'center',
originY: 'center',
angle: val.angle,
}).setCoords()
canvas.renderAll();
let boxReqList = [];
item._objects.forEach((obj, i) => {if (obj.isCheckTo) {obj._objects[2].set({angle: -((parseFloat(val.angle) + parseFloat(obj.angle)) % 360) }).setCoords()
that.allData.forEach((item, k) => {if (item.id == obj.id) {item.rotationAngle = parseInt((parseFloat(val.angle) + parseFloat(obj.angle)) % 360)
item.x = obj.matrixCache.value[4];
item.y = obj.matrixCache.value[5];
item.operateType = "manualRotate";
boxReqList.push(item);
}
});
} else {
let arr = obj._objects
let objCenterPort = obj.matrixCache.value
arr.forEach((list, j) => {that.allData.forEach((item, k) => {if (item.id == list.id) {item.rotationAngle = parseInt((parseFloat(val.angle) + parseFloat(list.angle)) % 360)
let x1 = objCenterPort[4] + list.left;
let y1 = objCenterPort[5] + list.top;
let gg = that.rotatoNi(
x1,
y1,
objCenterPort[4],
objCenterPort[5],
val.angle
);
item.x = gg.x;
item.y = gg.y;
item.operateType = "manualRotate";
boxReqList.push(item);
list._objects[2].set({angle: -((val.angle + list.angle) % 360) })
}
});
})
}
});
console.log('旋转后', item)
this.handleData2('manualRotate')
console.log('所有', JSON.parse(JSON.stringify(that.allData)))
console.log('入参', JSON.parse(JSON.stringify(boxReqList)))
this.setUpdateBox(boxReqList, (res) => {//this.handleData2('manualRotate')
console.log('返回', res)
}, 1);
this.$nextTick(function () {handleDataUtil.doEnything(this.dataSource, this.allData, "canvas", this.groupList, "");
this.setDoBack(false);
this.setDoUp(true);
})
}
}
}
});
bus.$on("renderSource", (data) => {console.log(data);
sourceCanvas.set(data);
sourceCanvas.set({
hoverCursor: "pointer",
selectable: true,
evented: true,
});
this.setSourceData(data);
this.canvasBox.renderAll();});
bus.$on("initSoucre_", (data) => {
var that = this;
console.log(data);
// return;
sourceCanvas = new fabric.Rect({
left: data.cropX + that.canvasSize.width / 4,
top: data.cropY + that.canvasSize.height / 4,
originX: "left", // 绝对于坐标点地位
originY: "top", // 绝对于坐标点地位
width: data.cropWidth,
height: data.cropHeight,
hoverCursor: "normal",
fill: "green",
borderColor: "black", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "black", // 手柄背景色
cornerStrokeColor: "black", // 手柄框边框
hasControls: true, // 手柄
hasBorders: true, // 手柄线
visible: true, // 是否可见
selectable: false, // 是否可抉择的对象
evented: false, // 是否拖动
centeredScaling: false, // 居中缩放
transparentCorners: false, // 选中框通明角
preserveObjectStacking: true,
opacity: 0.2,
id: "source",
});
sourceCanvas.setControlsVisibility({
mt: true,
mb: true,
bl: true,
br: true,
tl: true,
tr: true,
mr: true,
ml: true,
mtr: false,
});
var objs_ = canvas.getObjects();
for (var i = 0; i < objs_.length; i++) {if (objs_[i].id == 'source') {canvas.remove(objs_[i]);
}
}
console.log(sourceCanvas);
canvas.add(sourceCanvas);
});
bus.$on("initSoucre_index", (data) => {
var that = this;
console.log(data);
// return;
sourceCanvas = new fabric.Rect({
left: data.left,
top: data.top,
originX: "left", // 绝对于坐标点地位
originY: "top", // 绝对于坐标点地位
width: data.width,
height: data.height,
hoverCursor: "normal",
fill: "green",
borderColor: "black", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "black", // 手柄背景色
cornerStrokeColor: "black", // 手柄框边框
hasControls: true, // 手柄
hasBorders: true, // 手柄线
visible: true, // 是否可见
selectable: false, // 是否可抉择的对象
evented: false, // 是否拖动
centeredScaling: false, // 居中缩放
transparentCorners: false, // 选中框通明角
preserveObjectStacking: true,
opacity: 0.2,
id: "source",
});
sourceCanvas.setControlsVisibility({
mt: true,
mb: true,
bl: true,
br: true,
tl: true,
tr: true,
mr: true,
ml: true,
mtr: false,
});
var objs_ = canvas.getObjects();
for (var i = 0; i < objs_.length; i++) {if (objs_[i].id == 'source') {canvas.remove(objs_[i]);
}
}
//console.log(sourceCanvas);
canvas.add(sourceCanvas);
});
bus.$on("drawSource", (data) => {console.log(data);
let [gridLeft, gridTop] = [
this.canvasSize.width / 4,
this.canvasSize.height / 4
];
data.left += gridLeft;
data.top += gridTop;
this.setSourceData(data);
//console.log(this.sourceData);
this.setCut({
cutLeft: 0,
cutTop: 0,
cutWidth: data.cropWidth,
cutHeight: data.cropHeight,
cropX: data.cropX,
cropY: data.cropY
});
this.initSource(data);
});
bus.$on("disableSource", (data) => {sourceCanvas.set(data);
this.canvasBox.renderAll();});
bus.$on("showMask", (data) => {this.setIs_show_mask(data.showFlag);
if (!data.showFlag) {
this.maskLeft = "0px";
this.maskTop = "0px";
this.maskRight = "0px";
this.maskBottom = "0px";
}
if (data.cutData) {
this.showHander = data.showHander;
this.maskLeft = data.cutData.x * this.canvasZoom + "px";
this.maskTop = data.cutData.y * this.canvasZoom + "px";
this.maskRight = (this.source_crop.width - data.cutData.w - data.cutData.x) * this.canvasZoom + "px";
this.maskBottom = (this.source_crop.height - data.cutData.h - data.cutData.y) * this.canvasZoom + "px";
}
});
bus.$on("showMask_index", (data) => {this.setIs_show_mask(false);
});
bus.$on("setProCon", (flag) => {canvas.discardActiveObject();
var objects = canvas.getObjects();
let x = document.getElementById("canGrid").offsetWidth * 2;
// for (var i in objects) {// if (objects[i].id == "source") {// objects[i].left = x * 2 - objects[i].left - objects[i].width;
// objects[i].top = objects[i].top;
// } else if (objects[i].type == "group" && objects[i].groupId == "box") {// objects[i].left = x * 2 - objects[i].left;
// objects[i].top = objects[i].top;
// objects[i].angle = 360 - objects[i].angle;
// }
// objects[i].setCoords();
// }
this.face = flag;
this.allData.forEach((item, index) => {
item.x = x - item.x - item.width + 100; // 这里的 100 长期加的，临时以两头地位转换坐标，是否最内部有款式影响
item.rotationAngle = 360 - item.rotationAngle;
});
this.setUpdateBox(
this.allData,
(res) => {this.refreshCanvas(res, true);
},
1
);
// that.handleData("");
});
bus.$on("toolDelete", () => {this.deleteBox();
});
bus.$on("toolSelectAll", (flag) => {
var that = this;
let objs = canvas.getObjects();
if (objs.length == 1 || (that.mode != "canvas" && that.mode != "box")) {
// 只有一个源，没有箱体
return;
}
if (!flag) {
// 全选
canvas.discardActiveObject();
let sel = [];
let boxes = [];
objs.map((item) => {if (item.id != "source" && item.type == "group" && item.groupId == "box") {boxes.push(item);
sel.push(item);
} else if (
item.id != "source" &&
item.type == "group" &&
item.groupId != "box"
) {
that.groupList.forEach(group => {if (group.id == item.id && !group.hidden) {boxes.push(item);
sel.push(item);
}
})
}
});
var selection = new fabric.ActiveSelection(sel, {canvas: canvas,});
canvas.setActiveObject(selection);
canvas.requestRenderAll();
this.setSelectAll(true);
this.setSelectedBoxes(boxes);
} else {
// 勾销全选
canvas.discardActiveObject();
canvas.requestRenderAll();
this.setSelectAll(false);
this.setSelectedBoxes([]);
}
});
bus.$on("disgardObjs", () => {canvas.discardActiveObject();
canvas.requestRenderAll();
this.setSelectAll(false);
this.setSelectedBoxes([]);
});
bus.$on("makeGroup", () => {if (!canvas.getActiveObject()) {return;}
if (canvas.getActiveObject().type !== "activeSelection") {
// 选中单个箱体进行分组时，此判断 return
return;
}
let that = this;
let ids = [];
let hasGroupFlag = false;
canvas.getActiveObject()._objects.forEach((obj) => {if (obj.type == "group" && obj.groupId != "box") {this.$message.warning(this.$t('GroupNotContinue'));
hasGroupFlag = true;
} else {ids.push(obj.id);
}
});
if (hasGroupFlag) {return;}
if (ids.length == 0) {this.$message.warning(this.$t('PleaseSelectGroup'));
return;
}
// 判断 ids 是否存在于 allGroup 中。for (let allGroupItem of that.allGroup) {for (let boxItem of allGroupItem._objects) {
let id = boxItem.id;
// 判断 id 是否在 ids 中，如果有，则表明有已分组的数据，不能够再分组。if (ids.indexOf(id) > -1) {return;}
}
}
this.setMode("group");
let name = this.getGroupName();
this.$store.dispatch("setBoxGroup", {
params: {
ids: ids,
areaId: this.areaId, // 分区 id
name: name,
},
success (res) {that.setActiveMakeGroup(false);
let group = canvas.getActiveObject().toGroup({
// 选中单个箱体进行分组，此办法报错
borderColor: "red",
isGroup: true,
});
let groupId = res.obj.id;
group.set({id: groupId,});
ids.forEach((id) => {that.allData.forEach((data) => {if (data.id == id) {data.groupId = groupId;}
});
});
canvas.requestRenderAll();
that.allGroup.push(group);
that.$store.dispatch("getBoxGroupByAreaId", {
params: {areaId: that.areaId,},
success (res) {
let groupList = res.obj;
groupList.forEach((item) => {if (item.isShow == "0") {item.hidden = false;} else if (item.isShow == "1") {item.hidden = true;}
});
that.setGroupList(groupList);
for (let i = 0; i < groupList.length; i++) {if (groupList[i].areaId == that.areaId && groupList[i].id == groupId) {that.setSelectGroupIndex(i);
break;
}
}
that.$nextTick(function () {handleDataUtil.doEnything(this.dataSource, this.allData, "canvas", this.groupList, "");
this.setDoBack(false);
this.setDoUp(true);
})
},
error (res) {},});
},
error (res) {that.$message(that.$t(res.msg))
},
});
});
bus.$on("breakGroup", () => {
let that = this;
let groupId = -1;
if (this.seletedGroup) {
// 通过分组列表选中分组
groupId = this.seletedGroup.id;
} else {
// 通过屏幕区点击选中分组
groupId = canvas.getActiveObject().id;}
that.$store.dispatch("delBoxGroup", {
params: {
id: groupId,
areaId: that.areaId, // 分区 id
},
success (res) {that.setActiveBreakGroup(false);
let newGroupList = JSON.parse(JSON.stringify(that.groupList));
for (let i = 0; i < that.groupList.length; i++) {
if (that.groupList[i].areaId == that.areaId &&
that.groupList[i].id == groupId
) {newGroupList.splice(i, 1);
break;
}
}
that.setGroupList(newGroupList);
that.setSelectGroupIndex(-1);
that.allData.forEach((data) => {if (data.groupId == groupId) {data.groupId = 0;}
});
let nmb = null
let items = canvas.getActiveObject();
if (items) {if (items.type == "activeSelection") {let objs = items._objects[0];
let matrixCache = objs.matrixCache;
objs
.set({left: matrixCache.value[4] + objs.left,
top: matrixCache.value[5] + objs.top,
})
.setCoords();
nmb = objs.toActiveSelection();} else {nmb = items.toActiveSelection();
}
canvas.discardActiveObject();
canvas.requestRenderAll();}
canvas.forEachObject((obj) => {nmb._objects.forEach((item) => {if (obj.id == item.id) {obj.angle = (360 + obj.angle) % 360
}
})
})
for (let i = 0; i < that.allGroup.length; i++) {if (groupId == that.allGroup[i].id) {that.allGroup.splice(i, 1);
}
}
that.$nextTick(function () {handleDataUtil.doEnything(this.dataSource, this.allData, "canvas", this.groupList, "");
this.setDoBack(false);
this.setDoUp(true);
})
},
error (res) {},});
});
bus.$on("hideShowGroup", (data) => {
let that = this;
let params = {
params: {id: that.groupList[data.index].id,
isShow: data.group.hidden ? 1 : 0, // 0- 显示 1- 暗藏
name: that.groupList[data.index].name,
},
success (res) {let objs = canvas.getObjects();
let groupList = JSON.parse(JSON.stringify(that.groupList));
objs.forEach((obj) => {if (obj.type == "group" && obj.id == that.groupList[data.index].id) {if (data.group.hidden) {
obj.set({visible: false,});
groupList[data.index].hidden = true;
groupList[data.index].isShow = "0";
if (data.index == that.selectGroupIndex) {canvas.discardActiveObject();
}
} else {
obj.set({visible: true,});
groupList[data.index].hidden = false;
groupList[data.index].isShow = "1";
if (data.index == that.selectGroupIndex) {canvas.discardActiveObject();
canvas.setActiveObject(obj);
}
}
}
});
that.setGroupList(groupList);
canvas.renderAll();
if (data.index == that.selectGroupIndex) {if (data.group.hidden) {that.setActiveDeleteBox(false);
that.setActiveBreakGroup(false);
}
}
that.handleData2("");
},
error (res) {},};
this.$store.dispatch("updateBoxGroup", params);
});
bus.$on("showHiddenGroups", (list) => {let objs = canvas.getObjects();
let groupList = JSON.parse(JSON.stringify(list));
groupList.forEach((li) => {objs.forEach((obj) => {if (obj.type == "group" && obj.id == li.id) {
obj.set({visible: true,});
}
});
});
this.showHiddenLines();
canvas.renderAll();});
bus.$on("hideHiddenGroups", (list) => {let objs = canvas.getObjects();
let groupList = JSON.parse(JSON.stringify(list));
groupList.forEach((li) => {objs.forEach((obj) => {if (obj.type == "group" && obj.id == li.id) {
obj.set({visible: false,});
}
});
});
this.handleData2();
canvas.renderAll();});
bus.$on("changeLine", () => {
// 关上自定义连线状态 -- 箱体不可选和挪动 中心点可选
this.isChangeLine = true;
});
bus.$on("breakLine", () => {this.deleteLine();
});
bus.$on("selectGroup", (groupId) => {canvas.discardActiveObject();
canvas.requestRenderAll();
var sel = null;
canvas.forEachObject(obj => {if (obj.type == "group" && obj.groupId != "box") {if (obj.id == groupId && obj.visible) {sel = obj;}
}
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
if (this.mode != "boxLine16") {this.setActiveBreakGroup(true);
this.setActiveDeleteBox(true);
}
});
bus.$on("changePort", (data) => {
let that = this;
var newPort = data[1];
var slotId = data[0];
var netWorkPortId = newPort;
for (var i = 0; i < this.allPort.length; i++) {if (this.allPort[i].portId == newPort && this.allPort[i].slotId == slotId) {netWorkPortId = this.allPort[i].networkPort;
}
}
if (this.currentMode == "canvas_online") { // 代表在线增加模式下切换网口
let indexIndex = that.allData.filter(function (obj, i) {return obj.networkPort == netWorkPortId;});
let _index = indexIndex.length // 序号
for (var i = 0; i < that.onlineBoxListData.length; i++) {if (that.onlineBoxListData[i].networkPort == netWorkPortId && _index >= that.onlineBoxListData[i].list.length) {
that.$message({
duration: 2000,
message: that.$t('ExceedingTheLoadOfTheBox'),
type: "error",
});
// this.quitAddRect();
// this.setShowBack(false);
// this.setAddBoxMode(false);
// this.setMaskLeftMenu(false);
// this.setActiveChangeLine(true);
// this.setActiveConnectLine(true);
canvas.forEachObject(o => {// console.log(o.id);
if (o.id != "source" && (o.id == "" || o.id == undefined)) {canvas.remove(o);
}
});
return;
}
}
}
if (firstAdd || (this.currentMode == "canvas_online" || this.currentMode == "canvas_offline")) {that.addBoxParams[0].networkPort = netWorkPortId;
that.addBoxParams[0].portId = newPort;
that.addBoxParams[0].slotId = slotId;
that.addBoxParams[0].index = '';
that.parms.index = netWorkPortId;
that.parms.networkPort = netWorkPortId;
that.parms.portId = newPort;
that.parms.slotId = slotId;
canvas.remove(firstAdd);
firstAdd = this.groupAdd(that.addBoxParams[0], canvas);
canvas.add(firstAdd);
return
}
let item = canvas.getActiveObjects();
let boxReqList = [];
for (let index = 0; index < item.length; index++) {if (item[index].isCheckTo) {that.allData.forEach((e) => {if (item[index].id == e.id) {
boxReqList.push({
id: e.id,
networkPort: netWorkPortId,
oldNetworkPort: item[index].networkPort,
});
}
});
} else {let list = item[index]._objects
list.forEach((l) => {that.allData.forEach((e) => {if (l.id == e.id) {
boxReqList.push({
id: e.id,
networkPort: netWorkPortId,
oldNetworkPort: l.networkPort,
});
}
});
})
}
}
this.$axios({
method: "post",
url: "/box/updateBox",
data: {
flag: 1, // 接口是否返回最新的箱体列表，0 否；1 是
areaId: that.areaId,
refreshIndex: true,
list: boxReqList,
frame: 1, // 给后盾传参帧率，用于带载校验
},
}).then((res) => {if (res && res.status == 200) {for (var i = 0; i < res.obj.length; i++) {for (var j = 0; j < res.obj[i].list.length; j++) {res.obj[i].list[j].slotId = res.obj[i].slotId;
}
}
this.refreshCanvas(res);
handleDataUtil.doEnything(
this.dataSource,
this.allData,
"canvas",
this.groupList,
""
); // 后退
this.setDoBack(false);
this.setDoUp(true);
} else {that.$message(that.$t(res.msg))
}
});
});
bus.$on("copyToMe", (ports) => {this.copy2Me(ports);
});
bus.$on("backChange", (data) => {canvas.forEachObject((o) => {if (o.id != "source") {canvas.remove(o);
}
});
this.getboxList();
// this.$refs.queryOnlineBox.queryOnlineBox();
bus.$emit("getiOnLineBox", "")
});
bus.$on("copyDoEnything", (date) => {
this.copyBoxFlag = false;
this.copyKeyNum = 1;
let list = canvas.getActiveObjects()
list = list.filter(function (obj, i) {return obj.isCheckTo == true;});
let items = list//this.selectedBoxes;
this.copyNum += 1
var ports = [...new Set(date.copyTome)];
let data = [];
let indexArr = new Array(ports.length);
if (date.copyTome != []) {for (let j = 0; j < ports.length; j++) {
let index = -1;
for (let k = 0; k < this.allData.length; k++) {if (this.allData[k].networkPort == ports[j]) {if (this.allData[k].index >= index) {index = this.allData[k].index;
}
}
}
indexArr[j] = index;
for (let i = 0; i < items.length; i++) {if (items[i].networkPort == ports[j]) {indexArr[j] += 1;
let [x, y] = [0, 0];
if (items.length == 1) {[x, y] = [items[i].left, items[i].top];
} else {[x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
}
//[x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
data.push({rotationAngle: parseInt(parseFloat(items[i].angle)),
areaId: this.areaId,
networkPort: items[i].networkPort,
index: indexArr[j],
type: null,
width: items[i].width,
height: items[i].height,
x: x + this.copyNum * this.copyBoxSpace,
y: y + this.copyNum * this.copyBoxSpace,
boxFileId: items[i].boxFileId,
});
}
}
}
}
if (date.copyToOtherPort != []) {
var copyToOtherPort = date.copyToOtherPort;
var copyToOtherPorts = date.copyToOtherPorts;
for (let j = 0; j < copyToOtherPort.length; j++) {
let index = -1;
for (let i = 0; i < data.length; i++) {if (data[i].networkPort == copyToOtherPorts[j]) {if (data[i].index >= index) {index = data[i].index + 1;
}
}
}
if (index == -1) {for (let i = 0; i < this.allData.length; i++) {if (this.allData[i].networkPort == copyToOtherPorts[j]) {if (this.allData[i].index >= index) {index = this.allData[i].index + 1;
}
}
}
}
if (index == -1) {index = 1;}
var number = 0;
for (let i = 0; i < items.length; i++) {if (items[i].networkPort == copyToOtherPort[j]) {let [x, y] = [0, 0];
if (items.length == 1) {[x, y] = [items[i].left, items[i].top];
} else {[x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
}
// [x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
data.push({rotationAngle: parseInt(parseFloat(items[i].angle)),
areaId: this.areaId,
networkPort: copyToOtherPorts[j],
index: index + number,
type: null,
width: items[i].width,
height: items[i].height,
x: x + this.copyNum * this.copyBoxSpace,
y: y + this.copyNum * this.copyBoxSpace,
boxFileId: items[i].boxFileId,
});
number++;
}
}
}
}
// return;
console.log('拷贝相干数据', copyToOtherPorts);
let that = this;
//return
this.setAddBox(data, (res) => {res.obj.forEach((o) => {o.id = o.boxId;});
that.allData = that.allData.concat(res.obj);
data.forEach((item, index) => {item.id = res.obj[index].boxId;
item.type = res.obj[index].type;
item.slotId = res.obj[index].slotId;
item.portId = res.obj[index].portId;
canvas.add(this.groupAdd(item, canvas));
});
requestAnimationFrame(() => {that.handleData2("");
})
this.$nextTick(function () {
handleDataUtil.doEnything(
this.dataSource,
this.allData,
"canvas",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
})
});
});
bus.$on("copyToOther", (data) => {
let items = this.selectedBoxes;
let ports = data.ports;
let otherPorts = data.otherPorts;
let resultData = [];
for (let j = 0; j < ports.length; j++) {
let index = -1;
for (let i = 0; i < this.allData.length; i++) {if (this.allData[i].networkPort == otherPorts[j]) {if (this.allData[i].index >= index) {index = this.allData[i].index + 1;
}
}
}
if (index == -1) {index = 1;}
for (let i = 0; i < items.length; i++) {if (items[i].networkPort == ports[j]) {let [x, y] = [0, 0];
if (items.length == 1) {[x, y] = [items[i].left, items[i].top];
} else {[x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
}
resultData.push({rotationAngle: items[i].angle,
areaId: this.areaId,
networkPort: otherPorts[j],
index: index + i,
type: null,
width: items[i].width,
height: items[i].height,
x: x + 30,
y: y + 30,
});
}
}
}
let that = this;
this.setAddBox(resultData, (res) => {res.obj.forEach((o) => {o.id = o.boxId;});
that.allData = that.allData.concat(res.obj);
resultData.forEach((item, index) => {item.id = res.obj[index].boxId;
canvas.add(this.groupAdd(item, canvas));
});
that.handleData2("");
that.$nextTick(function () {handleDataUtil.doEnything(this.dataSource, this.allData, "canvas", this.groupList, ""); // 后退
this.setDoBack(false);
this.setDoUp(true);
})
});
});
bus.$on("deselectSource", () => {canvas.discardActiveObject();
canvas.requestRenderAll();});
bus.$on("changeBoxType", (typeData) => {
// 批改箱体类型
let that = this;
if (that.parms.type == "offline" && firstAdd) {that.addBoxParams[0].type = typeData.id
that.addBoxParams[0].boxFileId = typeData.id
that.addBoxParams[0].width = typeData.scan_w
that.addBoxParams[0].height = typeData.scan_h
canvas.remove(firstAdd);
var createTextJson = JSON.parse(JSON.stringify(that.addBoxParams[0]));
createTextJson.index = 0;
firstAdd = this.groupAdd(createTextJson, canvas);
console.log(firstAdd);
canvas.add(firstAdd);
return
}
let item = canvas.getActiveObjects();
let boxReqList = [];
let changeIds = [];
for (let index = 0; index < item.length; index++) {if (item[index].isCheckTo) {that.allData.forEach((e) => {if (item[index].id == e.id) {changeIds.push(e.id);
boxReqList.push({
id: e.id,
boxFileId: typeData.id,
networkPort: e.networkPort,
width: typeData.scan_w,
height: typeData.scan_h,
type: typeData.name
});
}
});
} else {let list = item[index]._objects
list.forEach((item) => {that.allData.forEach((e) => {if (item.id == e.id) {changeIds.push(e.id);
boxReqList.push({
id: e.id,
boxFileId: typeData.id,
networkPort: e.networkPort,
width: typeData.scan_w,
height: typeData.scan_h,
type: typeData.name
});
}
});
})
}
}
if (boxReqList.length == 0) {return;}
this.$axios({
method: "post",
url: "/box/updateBox",
data: {
flag: 1, // 接口是否返回最新的箱体列表，0 否；1 是
areaId: that.areaId,
list: boxReqList,
frame: 1, // 给后盾传参帧率，用于带载校验
},
}).then((res) => {if (res && res.status == 200) {if (res.obj) {for (var i = 0; i < res.obj.length; i++) {for (var j = 0; j < res.obj[i].list.length; j++) {res.obj[i].list[j].slotId = res.obj[i].slotId;
}
}
}
that.refreshCanvas(res, false);
that.$nextTick(function () {handleDataUtil.doEnything(that.dataSource, that.allData, "canvas", this.groupList, "");
that.setDoBack(false);
that.setDoUp(true);
})
} else {that.$message(that.$t(res.msg))
}
});
});
bus.$on("submitChangeType", (typeData) => {
let that = this;
let item = canvas.getObjects();
let boxes = [];
let boxReqList = [];
for (let i = 0; i < item.length; i++) {
if (item[i].type == "group" &&
item[i].groupId == "box"
) {boxes.push(item[i]);
if (item[i].boxFileId == typeData.presentBoxType) {
boxReqList.push({id: item[i].id,
boxFileId: typeData.otherBoxType,
networkPort: item[i].networkPort,
width: typeData.scan_w,
height: typeData.scan_h,
});
}
} else if (item[i].type == "group" &&
item[i].groupId != "box"
) {let objs = item[i]._objects;
objs.forEach(o => {if (o.boxFileId == typeData.presentBoxType) {
boxReqList.push({
id: o.id,
boxFileId: typeData.otherBoxType,
networkPort: o.networkPort,
width: typeData.scan_w,
height: typeData.scan_h,
});
}
});
}
}
if (boxReqList.length == 0) {return;}
this.$axios({
method: "post",
url: "/box/updateBox",
data: {
flag: 1, // 接口是否返回最新的箱体列表，0 否；1 是
areaId: that.areaId,
list: boxReqList,
frame: 1, // 给后盾传参帧率，用于带载校验
},
}).then((res) => {if (res && res.status == 200) {if (res.obj) {for (var i = 0; i < res.obj.length; i++) {for (var j = 0; j < res.obj[i].list.length; j++) {res.obj[i].list[j].slotId = res.obj[i].slotId;
}
}
}
that.refreshCanvas(res);
bus.$emit('closeTypeChange');
} else {that.$message(that.$t(res.msg))
}
});
});
bus.$on("selectBoxesByPort", (port) => {canvas.discardActiveObject();
this.setSelectedBoxes([]);
let portBoxes = [];
let activeObjs = [];
canvas.forEachObject((o) => {if (o.type == "group" && o.groupId == "box" && o.networkPort == port) {portBoxes.push(o);
activeObjs.push(o);
} else if (o.type == "group" && o.groupId == "box" && o.networkPort != port) {this.unselectecBoxes.push(o);
} else if (o.type == "group" && o.groupId != "box") {
let objs = o._objects;
let flag = false;
objs.forEach(obj => {if (obj.networkPort == port) {flag = true;}
});
if (flag) {activeObjs.push(o);
}
}
});
var sel = new fabric.ActiveSelection(activeObjs, {canvas: canvas,});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
this.setSelectedBoxes(portBoxes);
let boxes = canvas.getObjects().filter((o) => {return o.type == "group" && o.groupId == "box" && o.id != "source";});
if (boxes.length == portBoxes.length) {this.setSelectAll(true);
} else {this.setSelectAll(false);
}
this.setSelectedBoxes(portBoxes);
});
bus.$on("useThisLineWay", (data) => {
let index = data.lineIndex;
let port = data.port;
if (port > -1) {
// 以后是依据网口号来选中箱体并利用连线
console.log("以后是依据网口号来选中箱体并利用连线");
}
let item = canvas.getActiveObjects();
let activeObject = canvas.getActiveObject();
if (!activeObject) {return;}
let selectedIds = [];
if (activeObject.type == "group" && activeObject.groupId != "box" && port == -1) {
// 选中单个分组
let objs = activeObject._objects;
objs.forEach((obj) => {selectedIds.push(obj.id);
});
} else if (
activeObject.type == "group" &&
activeObject.groupId != "box" &&
port > -1
) {
// 通过网口来选中了某分组，再提取分组中该网口箱体
let _objs = activeObject._objects;
_objs.forEach((o) => {if (o.networkPort == port) {selectedIds.push(o.id);
}
});
} else if (activeObject.type == "group" && activeObject.groupId == "box") {
// 选中单个箱体
selectedIds.push(activeObject.id);
} else if (activeObject.type == "activeSelection") {
// 选中多个元素，箱体与分组都可能有
let objs = activeObject._objects;
objs.forEach((obj) => {if (obj.type == "group" && obj.groupId == "box") {selectedIds.push(obj.id);
} else if (obj.type == "group" && obj.groupId != "box") {
let _objs = obj._objects;
_objs.forEach((o) => {if (port > -1) {
// 通过网口来选中了分组 + 箱体，从分组中提取该网口的箱体
if (o.networkPort == port) {selectedIds.push(o.id);
}
} else {selectedIds.push(o.id);
}
});
}
});
}
let selectedBoxes = [];
for (let i = 0; i < this.allData.length; i++) {selectedIds.forEach((boxId) => {if (boxId == this.allData[i].id) {selectedBoxes.push(this.allData[i]);
}
});
}
let boxes = connectionMode.getBoxOrder(this.allData, selectedBoxes, [], index, "");
if (boxes && boxes.length > 0) {let boxReqList = [];
boxes.map((box) => {boxReqList = boxReqList.concat(box);
});
this.setUpdateBox(
boxReqList,
(res) => {this.refreshCanvas(res, true, item, true);
this.$nextTick(function () {
handleDataUtil.doEnything(
this.dataSource,
this.allData,
"canvas_connectionsLine",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
})
},
1
);
}
});
bus.$on("goBack", () => {
var that = this;
that.backMethods();});
bus.$on("goForward", () => {
var that = this;
that.upMethods();});
bus.$on("zoomIt", (num) => {// if (this.mode == "operateSource") {
// return;
// }
this.getZoom(num);
});
bus.$on("scrollZoom", (num) => {// if (!this.ctrlFlag || this.mode == "operateSource") {if (!this.ctrlFlag) {return;}
this.getZoom(num);
});
bus.$on("zoomItDrop", (num) => {this.zoomDrop(num);
});
bus.$on("zoomToAllBoxes", callback => {let sel = [];
canvas.forEachObject(o => {if (o.id != "source" && o.type == "group") {sel.push(o);
}
})
var selection = new fabric.ActiveSelection(sel, {canvas: canvas,});
canvas.setActiveObject(selection);
let allBoxes = canvas.getActiveObject();
// console.log(allBoxes);
// return;
if (!allBoxes || allBoxes._objects.length == 0) {return;}
console.log(allBoxes);
// return;
let canGrid = document.getElementById("canGrid");
let num = this.limitSourceSpace;
let {left, top, width, height} = allBoxes;
// allBoxes.left = left + 1;
// allBoxes.width = width - 1;
// allBoxes.height = height - 1;
// allBoxes.top = top - 1;
if (top + height <= parseInt(canGrid.style.top) / this.canvasZoom + num ||
left + width <= parseInt(canGrid.style.left) / this.canvasZoom + num ||
top >= parseInt(canGrid.style.top) / this.canvasZoom + canGrid.height / this.canvasZoom - num ||
left >= parseInt(canGrid.style.left) / this.canvasZoom + canGrid.width / this.canvasZoom - num
) {allBoxes = null;}
callback && callback(allBoxes
, () => {canvas.discardActiveObject();
canvas.requestRenderAll();});
});
bus.$on("editGroupAngle", v => {
let that = this;
let val = canvas.getActiveObject();
if (!val) {return;}
let originAngle = parseFloat(val.angle);
console.log("批改分组旋转角度 ---" + v);
let [left, top] = [val.ownMatrixCache.value[4], val.ownMatrixCache.value[5]];
val.set({
originX: 'center',
originY: 'center',
angle: parseFloat(v),
}).setCoords()
val.set({
left,
top,
}).setCoords()
canvas.renderAll();
let boxReqList = [];
var groupId = "";
var groupAngle = "";
if (val.type == "group") {val._objects.forEach((obj, i) => {that.allData.forEach((item, k) => {if (item.id == obj.id) {
groupId = obj.groupIdd;
groupAngle = originAngle;
item.rotationAngle = (parseFloat(val.angle) + parseFloat(obj.angle)) % 360
let gg = that.rotatoNi(
item.x,
item.y,
left,
top,
(parseFloat(val.angle) - originAngle) % 360 // 同 val.angle
);
item.x = gg.x;
item.y = gg.y;
item.operateType = "manualRotate";
boxReqList.push(item);
}
});
obj._objects[2].set({angle: -((parseFloat(val.angle) + parseFloat(obj.angle)) % 360) }).setCoords()});
} else if (val.type == "activeSelection") {val._objects[0]._objects.forEach((obj, i) => {that.allData.forEach((item, k) => {if (item.id == obj.id) {item.rotationAngle = (parseFloat(obj.angle) + parseFloat(val.angle)) % 360
let gg = that.rotatoNi(
item.x,
item.y,
val.left,
val.top,
parseFloat(val.angle)
);
item.x = gg.x;
item.y = gg.y;
item.operateType = "manualRotate";
boxReqList.push(item);
}
});
obj._objects[2].set({angle: -((parseFloat(val.angle) + parseFloat(obj.angle)) % 360) }).setCoords()});
}
// console.log(groupId);
// this.handleData2('manualRotate')
this.setUpdateBox(boxReqList, (res) => {
// 获取箱体列表刷新画布
let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
this.handleData2('manualRotate')
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas",
that.groupList,
'',
groupId,
groupAngle,
v
);
that.setDoBack(false);
that.setDoUp(true);
});
}, 1);
});
this.$nextTick(() => {this.getFrame();
let that = this;
let params = {params: {},
success (res) { },
error (res) {},};
this.$store.dispatch('getGlobalSettings', params)
this.originData = JSON.parse(JSON.stringify(this.sourceData));
this.initGrid();
this.initCanvas();
window.onresize = () => {this.initGrid();
};
document.getElementById("canvasBox").oncontextmenu = function (event) {if (event.button == 2) {
// 右键退出
rightKey = false;
event.returnValue = false;
that.setShowBack(false);
that.setAddBoxMode(false);
that.setMaskLeftMenu(false);
//str-- 右键退出自定义连线状态
that.quitAddRect();
that.setActiveConnectLine(true);
// if (that.selectedBoxes.length > 0) {if (that.selectedBoxes.length > 1) { // 单个箱体分组一期不做
that.setActiveMakeGroup(true);
}
}
};
document.onkeydown = function (e) {
let key = e || window.event.keyCode;
// if(that.dowmMoseList.length == 3 && that.dowmMoseList.indexOf("Control") != -1 && that.dowmMoseList.indexOf("Shift") != -1 && that.dowmMoseList.indexOf("Shift")){//}
if (that.ctrlFlag && that.mode != "operateSource") {if (key.key == 'ArrowUp') {let boxReqList = []
let selectBoxes = canvas.getActiveObject()
if (selectBoxes.isCheckTo) { // 单个
selectBoxes.set({top: selectBoxes.top - 1})
that.allData.forEach((item) => {if (selectBoxes.id == item.id) {
item.y = selectBoxes.top - 1
boxReqList.push(item)
}
});
} else {
let obj = selectBoxes._objects
selectBoxes.set({top: selectBoxes.top - 1})
if (selectBoxes.type == 'activeSelection') {obj.forEach((o) => {if (o.isCheckTo) {// 框选中的多个箱体
that.allData.forEach((item) => {if (o.id == item.id) {item.y = o.matrixCache.value[5] - 1
boxReqList.push(item)
}
});
} else { // 框选中的分组
o._objects.forEach((t) => {that.allData.forEach((item) => {if (t.id == item.id) {item.y = o.matrixCache.value[5] + t.top - 1
boxReqList.push(item)
}
});
})
}
})
} else {obj.forEach((o) => {if (o.isCheckTo) {// 纯分组
that.allData.forEach((item) => {if (o.id == item.id) {item.y = selectBoxes.ownMatrixCache.value[5] + o.top - 1
boxReqList.push(item)
}
});
}
})
}
}
that.handleData2('');
canvas.renderAll();
if (boxReqList.length > 0) {
that.setUpdateBox(
boxReqList,
(res) => {let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
that.allData2 = JSON.parse(JSON.stringify(that.allData));
},
1
);
}
}
if (key.key == 'ArrowRight') {let boxReqList = []
let selectBoxes = canvas.getActiveObject()
if (selectBoxes.isCheckTo) { // 单个
selectBoxes.set({left: selectBoxes.left + 1})
that.allData.forEach((item) => {if (selectBoxes.id == item.id) {
item.x = selectBoxes.left + 1
boxReqList.push(item)
}
});
} else {
let obj = selectBoxes._objects
selectBoxes.set({left: selectBoxes.left + 1})
if (selectBoxes.type == 'activeSelection') {obj.forEach((o) => {if (o.isCheckTo) {// 框选中的多个箱体
that.allData.forEach((item) => {if (o.id == item.id) {item.x = o.matrixCache.value[4] + 1
boxReqList.push(item)
}
});
} else { // 框选中的分组
o._objects.forEach((t) => {that.allData.forEach((item) => {if (t.id == item.id) {item.x = o.matrixCache.value[4] + t.left + 1
boxReqList.push(item)
}
});
})
}
})
} else {obj.forEach((o) => {if (o.isCheckTo) {// 纯分组
that.allData.forEach((item) => {if (o.id == item.id) {item.x = selectBoxes.ownMatrixCache.value[4] + o.left + 1
boxReqList.push(item)
}
});
}
})
}
}
that.handleData2('');
canvas.renderAll();
if (boxReqList.length > 0) {
that.setUpdateBox(
boxReqList,
(res) => {let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
that.allData2 = JSON.parse(JSON.stringify(that.allData));
},
1
);
}
}
if (key.key == 'ArrowDown') {let boxReqList = []
let selectBoxes = canvas.getActiveObject()
if (selectBoxes.isCheckTo) { // 单个
selectBoxes.set({top: selectBoxes.top + 1})
that.allData.forEach((item) => {if (selectBoxes.id == item.id) {
item.y = selectBoxes.top + 1
boxReqList.push(item)
}
});
} else {
let obj = selectBoxes._objects
selectBoxes.set({top: selectBoxes.top + 1})
if (selectBoxes.type == 'activeSelection') {obj.forEach((o) => {if (o.isCheckTo) {// 框选中的多个箱体
that.allData.forEach((item) => {if (o.id == item.id) {item.y = o.matrixCache.value[5] + 1
boxReqList.push(item)
}
});
} else { // 框选中的分组
o._objects.forEach((t) => {that.allData.forEach((item) => {if (t.id == item.id) {item.y = o.matrixCache.value[5] + t.top + 1
boxReqList.push(item)
}
});
})
}
})
} else {obj.forEach((o) => {if (o.isCheckTo) {// 纯分组
that.allData.forEach((item) => {if (o.id == item.id) {item.y = selectBoxes.ownMatrixCache.value[5] + o.top + 1
boxReqList.push(item)
}
});
}
})
}
}
that.handleData2('');
canvas.renderAll();
if (boxReqList.length > 0) {
that.setUpdateBox(
boxReqList,
(res) => {let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
that.allData2 = JSON.parse(JSON.stringify(that.allData));
},
1
);
}
}
if (key.key == 'ArrowLeft') {let boxReqList = []
let selectBoxes = canvas.getActiveObject()
if (selectBoxes.isCheckTo) { // 单个
selectBoxes.set({left: selectBoxes.left - 1})
that.allData.forEach((item) => {if (selectBoxes.id == item.id) {
item.x = selectBoxes.left - 1
boxReqList.push(item)
}
});
} else {
let obj = selectBoxes._objects
selectBoxes.set({left: selectBoxes.left - 1})
if (selectBoxes.type == 'activeSelection') {obj.forEach((o) => {if (o.isCheckTo) {// 框选中的多个箱体
that.allData.forEach((item) => {if (o.id == item.id) {item.x = o.matrixCache.value[4] - 1
boxReqList.push(item)
}
});
} else { // 框选中的分组
o._objects.forEach((t) => {that.allData.forEach((item) => {if (t.id == item.id) {item.x = o.matrixCache.value[4] + t.left - 1
boxReqList.push(item)
}
});
})
}
})
} else {obj.forEach((o) => {if (o.isCheckTo) {// 纯分组
that.allData.forEach((item) => {if (o.id == item.id) {item.x = selectBoxes.ownMatrixCache.value[4] + o.left - 1
boxReqList.push(item)
}
});
}
})
}
}
that.handleData2('');
canvas.renderAll();
if (boxReqList.length > 0) {
that.setUpdateBox(
boxReqList,
(res) => {let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
that.allData2 = JSON.parse(JSON.stringify(that.allData));
},
1
);
}
}
}
if (that.dowmMoseList.indexOf(key.key) == -1) {that.dowmMoseList.push(key.key);
}
if (key.key == "Delete") {if (!canvas.getActiveObject()) {return;}
that.deleteBox();}
if (key.key == "Control") {that.ctrlFlag = true;}
if (key.key == "Shift") {that.shiftFlag = true;}
// console.log(that.dowmMoseList);
if ((key.key == "z" || key.key == "Z") && (that.dowmMoseList.length == 3 && that.dowmMoseList.indexOf("Control") != -1 && that.dowmMoseList.indexOf("Shift") != -1) &&
that.ctrlShiftA_number == 0) {
that.ctrlShiftA_number = 1;
if (that.doUp == false) {console.log("我进入后退");
that.upMethods();}
}
if ((key.key == "z" || key.key == "Z") && (that.dowmMoseList.length == 2 && that.dowmMoseList.indexOf("Control") != -1) &&
that.ctrlShiftA_number == 0) {
that.ctrlShiftA_number = 1;
if (that.doBack == false) {console.log("我进入后退");
that.backMethods();}
}
if ((key.key == "a" || key.key == "A") && that.ctrlFlag) {console.log("全选");
let objs = canvas.getObjects();
if (objs.length == 1 || (that.mode != "canvas" && that.mode != "box")) {
// 只有一个源，没有箱体
return;
}
canvas.discardActiveObject();
let sel = [];
let boxes = [];
objs.map((item) => {if (item.id != "source" && item.type == "group" && item.groupId == "box") {boxes.push(item);
sel.push(item);
} else if (
item.id != "source" &&
item.type == "group" &&
item.groupId != "box"
) {
that.groupList.forEach(group => {if (group.id == item.id && !group.hidden) {boxes.push(item);
sel.push(item);
}
})
}
});
var selection = new fabric.ActiveSelection(sel, {canvas: canvas,});
canvas.setActiveObject(selection);
canvas.requestRenderAll();
that.setSelectAll(true);
that.setSelectedBoxes(boxes);
return false;
}
if ((key.key == "c" || key.key == "C") && that.ctrlFlag) {console.log("复制");
that.cutBoxFlag = false;
that.copyBoxFlag = true;
}
if ((key.key == "x" || key.key == "X") && that.ctrlFlag) {console.log("剪切");
that.copyBoxFlag = false;
that.copyKeyNum = 1;
that.cutBoxFlag = true;
}
if ((key.key == "v" || key.key == "V") && that.ctrlFlag) {if (that.selectedBoxes.length == 0) {return;}
if (that.copyBoxFlag) {console.log("复制粘贴");
that.copyKeyNum += 1
let ports = [];
let items = that.selectedBoxes;
for (let i = 0; i < items.length; i++) {ports.push(items[i].networkPort);
}
that.copy2Me(ports);
} else if (that.cutBoxFlag) {let canvasBoxDom = document.getElementById("canvasBox");
let [x, y, l, t, w, h] = [
that.mousePosition.x,
that.mousePosition.y,
that.getOffsetLeft(canvasBoxDom),
that.getOffsetTop(canvasBoxDom),
canvasBoxDom.offsetWidth,
canvasBoxDom.offsetHeight,
];
if (!(x <= l || x >= l + w || y <= t || y >= t + h)) {
that.cutBoxFlag = false;
console.log("剪切粘贴");
let boxReqList = [];
if (
that.selectedBoxes.length == 1 &&
that.selectedBoxes[0].type == "group" &&
that.selectedBoxes[0].groupId == "box"
) {for (let i = 0; i < that.allData.length; i++) {
if (that.allData[i].networkPort == that.selectedBoxes[0].networkPort &&
that.allData[i].index == that.selectedBoxes[0].index
) {that.allData[i].x = x - l;
that.allData[i].y = y - t;
boxReqList.push(that.allData[i]);
}
}
} else {for (let i = 0; i < that.allData.length; i++) {for (let j = 0; j < that.selectedBoxes.length; j++) {
if (that.allData[i].networkPort == that.selectedBoxes[j].networkPort &&
that.allData[i].index == that.selectedBoxes[j].index
) {that.allData[i].x = x - l + that.selectedBoxes[j].left;
that.allData[i].y = y - t + that.selectedBoxes[j].top;
boxReqList.push(that.allData[i]);
}
}
}
}
that.setUpdateBox(boxReqList, (res) => {if (that.selectedBoxes.length == 1) {that.selectedBoxes[0].set({left: x - l, top: y - t}).setCoords();} else {let selection = canvas.getActiveObject();
let ownMatrixCache = selection.ownMatrixCache;
let changeX = x - l - ownMatrixCache.value[4];
let changeY = y - t - ownMatrixCache.value[5];
ownMatrixCache.value[4] = x - l;
ownMatrixCache.value[5] = y - t;
selection
.set({
ownMatrixCache: ownMatrixCache,
left: changeX + selection.left,
top: changeY + selection.top,
})
.setCoords();
let objs = selection._objects;
objs.forEach((item) => {
let matrixCache = item.matrixCache;
matrixCache.value[4] = x - l + item.left;
matrixCache.value[5] = y - t + item.top;
item.set({matrixCache: matrixCache}).setCoords();});
}
that.handleData2("");
canvas.renderAll();});
}
}
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas",
that.groupList,
""
);
that.setDoBack(false);
that.setDoUp(true);
});
}
if (key.key == "ArrowUp" && that.mode == "operateSource" && that.sourceMoveEnable && !that.focusPropertyFlag) {let sourceData = JSON.parse(JSON.stringify(that.sourceData));
that.setSourceData({left: Math.round(sourceData.left),
top: Math.round(sourceData.top - 1),
width: Math.round(sourceData.width),
height: Math.round(sourceData.height),
});
that.moveSourceByKeyboard();}
if (
key.key == "ArrowDown" &&
that.mode == "operateSource" &&
that.sourceMoveEnable && !that.focusPropertyFlag
) {let sourceData = JSON.parse(JSON.stringify(that.sourceData));
that.setSourceData({left: Math.round(sourceData.left),
top: Math.round(sourceData.top + 1),
width: Math.round(sourceData.width),
height: Math.round(sourceData.height),
});
that.moveSourceByKeyboard();}
if (
key.key == "ArrowLeft" &&
that.mode == "operateSource" &&
that.sourceMoveEnable && !that.focusPropertyFlag
) {let sourceData = JSON.parse(JSON.stringify(that.sourceData));
that.setSourceData({left: Math.round(sourceData.left - 1),
top: Math.round(sourceData.top),
width: Math.round(sourceData.width),
height: Math.round(sourceData.height),
});
that.moveSourceByKeyboard();}
if (
key.key == "ArrowRight" &&
that.mode == "operateSource" &&
that.sourceMoveEnable && !that.focusPropertyFlag
) {let sourceData = JSON.parse(JSON.stringify(that.sourceData));
that.setSourceData({left: Math.round(sourceData.left + 1),
top: Math.round(sourceData.top),
width: Math.round(sourceData.width),
height: Math.round(sourceData.height),
});
that.moveSourceByKeyboard();}
};
document.onkeyup = function (e) {
let key = e || window.event.keyCode;
for (var i = that.dowmMoseList.length - 1; i >= 0; i--) {if (that.dowmMoseList[i].toUpperCase() == key.key.toUpperCase()) {that.dowmMoseList.splice(i, 1);
}
}
if (key.key == "Control") {
that.ctrlFlag = false;
// that.ctrlShiftA_number = 0;
}
if (key.key == "Shift") {
that.shiftFlag = false;
// that.ctrlShiftA_number = 0;
}
if (key.key == "Z" || key.key == "z") {that.ctrlShiftA_number = 0;}
};
document.onmousemove = function (e) {
e = e || window.event;
if (e.pageX || e.pageY) {that.$set(that.mousePosition, "x", e.pageX);
that.$set(that.mousePosition, "y", e.pageY);
if (that.cutMaskFlag) {that.resizeMoving();
}
}
};
document.onmouseup = function (e) {if (that.cutMaskFlag) {
that.cutMaskFlag = false;
that.cutMaskType = "";
that.cutRate = 1;
}
};
})
},
beforeDestroy () {bus.$off("setToRightBox");
bus.$off("renderSource");
bus.$off("drawSource");
bus.$off("disableSource");
bus.$off("showMask");
bus.$off("setProCon");
bus.$off("toolDelete");
bus.$off("toolSelectAll");
bus.$off("disgardObjs");
bus.$off("makeGroup");
bus.$off("breakGroup");
bus.$off("hideShowGroup");
bus.$off("showHiddenGroups");
bus.$off("hideHiddenGroups");
bus.$off("changeLine");
bus.$off("breakLine");
bus.$off("selectGroup");
bus.$off("changePort");
bus.$off("copyToMe");
bus.$off("backChange");
bus.$off("copyDoEnything");
bus.$off("copyToOther");
bus.$off("deselectSource");
bus.$off("changeBoxType");
bus.$off("submitChangeType");
bus.$off("selectBoxesByPort");
bus.$off("useThisLineWay");
bus.$off("goBack");
bus.$off("goForward");
bus.$off("zoomIt");
bus.$off("scrollZoom");
bus.$off("zoomItDrop");
bus.$off("zoomToAllBoxes");
bus.$off("editGroupAngle");
},
watch: {allGroup (n) {this.setAllGroupData(n);
},
currentMode (n, o) {
var that = this;
if (n.indexOf("canvas_") != -1) {handleDataUtil.signOutAll(that.dataSource);
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_offline",
that.groupList,
"otherInit"
);
}
if (n.indexOf("canvas_") != -1 && n != "canvas") {this.setDoBack(true);
this.setDoUp(true);
}
if (n == "canvas") {var returnData = handleDataUtil.getUpOrBack(this.dataSource, "canvas");
this.setDoBack(returnData.back);
this.setDoUp(returnData.up);
}
if (n == "canvas_offline" || n == "canvas_online") {this.setNotAddBoxFlag(false);
this.setActiveMakeGroup(false);
} else {this.setNotAddBoxFlag(true);
}
if (n == 'canvas_connectionsLine') {this.groupIsbler(true)
}
// this.loadNumber++;
},
isChangeLine (val) {this.groupIsbler(val)
if (val) {this.getboxList(true, () => {canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj.set({ selectable: false});
console.log("所有箱体禁止挪动");
}
});
})
} else {this.getboxList(false, () => {canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj.set({ selectable: true, evented: true});
console.log("所有箱体禁止挪动");
}
});
})
}
},
areaId (n) {
// return;
this.getboxList(false, () => {this.zoomCanvas(this.canvasZoom, 1);
});
},
changeNetWork (n) {this.getboxList();
},
mode (n) {if (n != "box" && n != "canvas") {
this.copyBoxFlag = false;
this.copyKeyNum = 1;
}
if (n == "operateSource") {canvas.discardActiveObject();
sourceCanvas.set({
hoverCursor: "pointer",
selectable: true,
evented: true,
});
canvas.forEachObject((obj) => {if (obj.type == "group" && obj.id != "source") {
obj.set({
hoverCursor: "normal",
selectable: false,
evented: false,
});
}
});
this.canvasBox.renderAll();} else {if (!this.isChangeLine) {if (sourceCanvas && sourceCanvas.id == "source") {
sourceCanvas.set({
hoverCursor: "normal",
selectable: false,
evented: false,
});
canvas.forEachObject((obj) => {if (obj.type == "group" && obj.id != "source") {if (obj.groupId == "box") {
obj.set({
hoverCursor: "pointer",
selectable: true,
evented: true,
});
} else {
obj.set({
hoverCursor: "move",
selectable: true,
evented: true,
});
}
}
});
this.canvasBox.renderAll();}
}
}
if (n == 'boxLine16') {// this.groupIsbler(true)
}
},
gridShow (n, o) {this.initGrid();
},
canvasColor (n) {this.initGrid();
},
canvasSpace (n) {this.initGrid();
},
canvasSize (n, o) {//console.log(n)
this.initGrid();
// console.log(n.width * 2 * this.canvasZoom);
var maxWidth = document.getElementById("canvasBox");
// console.log(maxWidth.offsetWidth);
this.canvasBox.setWidth(n.width * 2 * this.canvasZoom < maxWidth.offsetWidth ? maxWidth.offsetWidth : n.width * 1.5 * this.canvasZoom);
this.canvasBox.setHeight(n.height * 1.5 * this.canvasZoom);
this.gridLeft = (n.width * this.canvasZoom) / 4 + "px";
this.gridTop = (n.height * this.canvasZoom) / 4 + "px";
this.setBlackCanvasBackGorund({gridLeft: (n.width * this.canvasZoom) / 4,
gridTop: (n.height * this.canvasZoom) / 4,
})
this.canvasBox.renderAll();
this.getboxList_yg();
if (o.width && o.height) {let [gridLeft, gridTop] = [
this.canvasSize.width / 4,
this.canvasSize.height / 4
];
let [ogridLeft, ogridTop] = [
o.width / 4,
o.height / 4
];
let data = {
left: this.sourceData.left - ogridLeft + gridLeft,
top: this.sourceData.top - ogridTop + gridTop,
width: this.sourceData.width,
height: this.sourceData.height
}
sourceCanvas.set(data);
this.setSourceData(data);
this.canvasBox.renderAll();}
// 设置屏幕区域滚动条地位
let canvasZone = document.getElementById("canvasZone");
let [canvasZoneW, canvasZoneH] = [canvasZone.offsetWidth, canvasZone.offsetHeight];
if (n.width * this.canvasZoom > canvasZoneW / 3 * 2) {canvasZone.scrollLeft = (n.width / 4) * this.canvasZoom;
}
if (n.height * this.canvasZoom > canvasZoneH / 3 * 2) {canvasZone.scrollTop = (n.height / 4) * this.canvasZoom;
}
},
selectGroupIndex (n) {if (n > -1) {if (!this.groupList[n].hidden && this.mode != "boxLine16") {this.setActiveDeleteBox(true);
} else {this.setActiveDeleteBox(false);
}
}
},
selectedBoxes (n) {// console.log(canvas.getObjects);
if (n.length == 0) {
this.copyBoxFlag = false;
this.copyKeyNum = 1;
}
////// 用于高亮显示选中所有箱体
let objs_ = canvas.getActiveObjects();
var canList = canvas.getObjects();
if (this.mode == "boxLine16") { // 这时候的选中要变色彩
for (var i = 0; i < canList.length; i++) {if (canList[i].type == "group" && canList[i].groupId != "box") {canList[i]._objects.forEach(o => {o._objects[0].set({stroke: "#136094"})
})
}
if (canList[i].groupId == "box") {canList[i].item(0).set({stroke: "#136094",})
}
}
for (var i = 0; i < objs_.length; i++) {if (objs_[i].groupId == 'box') {objs_[i].item(0).set({stroke: "#0099FF",})
}
if (objs_[i].groupIdd != 0 && !objs_[i].groupIdd) {objs_[i]._objects.forEach(o => {o._objects[0].set({stroke: "#0099FF",})
})
}
}
}
if (objs_.length == 0) {for (var i = 0; i < canList.length; i++) {if (canList[i].type == "group" && canList[i].groupId != "box") {canList[i]._objects.forEach(o => {o._objects[0].set({stroke: "#136094"})
})
}
}
}
canvas.renderAll();
/////////////
if (n.length == 0 && this.mode != "operateSource" && this.mode != "boxLine16") {if (this.currentMode == 'canvas_editLine') {this.setMode("box");
} else {if (this.currentMode != "canvas_offline") {this.setMode("canvas");
}
}
this.setActiveBreakLine(false);
this.setActiveDeleteBox(false);
this.setSelectAll(false);
}
let objs = canvas.getActiveObject();
if (objs && objs.type == "group" && objs.groupId != "box") {if (this.mode != "boxLine16") {this.setActiveMakeGroup(false);
if (this.currentMode != "canvas_editLine" && this.currentMode != "canvas_online" && this.currentMode != "canvas_offline") {this.setActiveBreakGroup(true);
this.setActiveDeleteBox(true);
this.setMode("group");
}
}
let groupId = objs.id;
for (let i = 0; i < this.groupList.length; i++) {
if (this.groupList[i].areaId == this.areaId &&
this.groupList[i].id == groupId
) {this.setSelectGroupIndex(i);
break;
}
}
this.setActiveBreakLine(false);
} else {this.setSelectGroupIndex(-1);
this.setActiveBreakGroup(false);
if (
objs &&
objs.id != "source" &&
this.mode != "operateSource" &&
this.mode != "boxLine16"
) {this.setMode("box");
this.setActiveBreakLine(true);
if (this.currentMode != "canvas_online" && this.currentMode != "canvas_offline") {this.setActiveDeleteBox(true);
}
}
}
let niceP = canvas.getActiveObject();
if (niceP) {requestAnimationFrame(() => {bus.$emit("getRightBoxDetail", niceP);
})
} else {bus.$emit("getRightBoxDetail", {});
}
},
allData (n) {this.$store.state.allBoxData = n;},
maskLeft (n) {let maskWidth = this.sourceData.width - parseInt(n) - parseInt(this.maskRight);
if (maskWidth < 140 && maskWidth >= 100) {this.handerWidth = 20;} else if (maskWidth < 100) {this.handerWidth = 10;} else if (maskWidth >= 140) {this.handerWidth = 40;}
bus.$emit("changeCutMaskSize", {
maskLeft: this.maskLeft,
maskTop: this.maskTop,
maskRight: this.maskRight,
maskBottom: this.maskBottom,
});
},
maskTop (n) {let maskHeight = this.sourceData.height - parseInt(n) - parseInt(this.maskBottom);
if (maskHeight < 140 && maskHeight >= 100) {this.handerHeight = 20;} else if (maskHeight < 100) {this.handerHeight = 10;} else if (maskHeight >= 140) {this.handerHeight = 40;}
bus.$emit("changeCutMaskSize", {
maskLeft: this.maskLeft,
maskTop: this.maskTop,
maskRight: this.maskRight,
maskBottom: this.maskBottom,
});
},
maskRight (n) {let maskWidth = this.sourceData.width - parseInt(n) - parseInt(this.maskLeft);
if (maskWidth < 140 && maskWidth >= 100) {this.handerWidth = 20;} else if (maskWidth < 100) {this.handerWidth = 10;} else if (maskWidth >= 140) {this.handerWidth = 40;}
bus.$emit("changeCutMaskSize", {
maskLeft: this.maskLeft,
maskTop: this.maskTop,
maskRight: this.maskRight,
maskBottom: this.maskBottom,
});
},
maskBottom (n) {let maskHeight = this.sourceData.height - parseInt(n) - parseInt(this.maskTop);
if (maskHeight < 140 && maskHeight >= 100) {this.handerHeight = 20;} else if (maskHeight < 100) {this.handerHeight = 10;} else if (maskHeight >= 140) {this.handerHeight = 40;}
bus.$emit("changeCutMaskSize", {
maskLeft: this.maskLeft,
maskTop: this.maskTop,
maskRight: this.maskRight,
maskBottom: this.maskBottom,
});
},
},
methods: {
...mapMutations({
setSourceData: "setSourceData",
setCut: "setCut",
setSelectedBoxes: "setSelectedBoxes",
setSelectAll: "setSelectAll",
setActiveMakeGroup: "setActiveMakeGroup",
setActiveBreakGroup: "setActiveBreakGroup",
setActiveDeleteBox: "setActiveDeleteBox",
setGroupList: "setGroupList",
setSelectGroupIndex: "setSelectGroupIndex",
setMode: "setMode",
setShowBack: "setShowBack",
setMaskLeftMenu: "setMaskLeftMenu",
setIs_show_mask: "setIs_show_mask",
setBoxType: "setBoxType",
setAddBoxMode: "setAddBoxMode",
setActiveChangeLine: "setActiveChangeLine",
setActiveConnectLine: "setActiveConnectLine",
setCanvasZoom: "setCanvasZoom",
setActiveBreakLine: "setActiveBreakLine",
setDoUp: "setDoUp",
setDoBack: "setDoBack",
setCurrentMode: "setCurrentMode",
setNotAddBoxFlag: "setNotAddBoxFlag",
setGroupAngle: "setGroupAngle",
setBlackCanvasBackGorund: "setBlackCanvasBackGorund",
setAllGroupData: "setAllGroupData",
setEditCutFlag: "setEditCutFlag",
}),
// 吸附到箱体
adsorbentToBox (moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, index1, index2, index3, line1, type) {
let that = this;
let arr = [tlX, tlY, blX, blY, trX, trY, brX, brY];
let [moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [];
if (type == "add") {if (moveBox.angle / 90 % 2 == 1) {[moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
moveBox.x - moveBox.height / 2, moveBox.x + moveBox.height / 2,
moveBox.y - moveBox.width / 2, moveBox.y + moveBox.width / 2
];
} else {[moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
moveBox.x - moveBox.width / 2, moveBox.x + moveBox.width / 2,
moveBox.y - moveBox.height / 2, moveBox.y + moveBox.height / 2
];
}
// [moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
// moveBox.x - moveBox.width / 2, moveBox.x + moveBox.width / 2,
// moveBox.y - moveBox.height / 2, moveBox.y + moveBox.height / 2
// ];
} else if (type == "move") {if (moveBox.angle / 90 % 2 == 1) {[moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
moveBox.left - moveBox.height / 2, moveBox.left + moveBox.height / 2,
moveBox.top - moveBox.width / 2, moveBox.top + moveBox.width / 2
];
} else {[moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
moveBox.left - moveBox.width / 2, moveBox.left + moveBox.width / 2,
moveBox.top - moveBox.height / 2, moveBox.top + moveBox.height / 2
];
}
// [moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = [
// moveBox.left - moveBox.width / 2, moveBox.left + moveBox.width / 2,
// moveBox.top - moveBox.height / 2, moveBox.top + moveBox.height / 2
// ];
}
if (line1.indexOf("t") == 0) {if (moveBoxTY <= arr[index2] + that.adsorbent && moveBoxBY >= arr[index1] - that.adsorbent) {let top = isNaN(moveBox.top) ? moveBox.y : moveBox.top;
if (Math.abs(moveBoxTY - arr[index2]) <= that.adsorbent) {top = arr[index2] + (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
} else if (Math.abs(moveBoxBY - arr[index1]) <= that.adsorbent) {top = arr[index1] - (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
} else if (Math.abs(moveBoxTY - arr[index1]) <= that.adsorbent) {top = arr[index1] + (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
} else if (Math.abs(moveBoxBY - arr[index2]) <= that.adsorbent) {top = arr[index2] - (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
}
if (line1 == "tl") {if (type == "add") {moveBox.left = arr[index3] + (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
moveBox.top = top;
} else if (type == "move") {
moveBox.set({left: arr[index3] + (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2),
top,
}).setCoords();}
} else if (line1 == "tr") {if (type == "add") {moveBox.left = arr[index3] - (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
moveBox.top = top;
} else if (type == "move") {
moveBox.set({left: arr[index3] - (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2),
top,
}).setCoords();}
}
}
} else {if (moveBoxLX <= arr[index2] + that.adsorbent && moveBoxRX >= arr[index1] - that.adsorbent) {let left = isNaN(moveBox.left) ? moveBox.x : moveBox.left;
if (Math.abs(moveBoxLX - arr[index2]) <= that.adsorbent) {left = arr[index2] + (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
} else if (Math.abs(moveBoxRX - arr[index2]) <= that.adsorbent) {left = arr[index2] - (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
} else if (Math.abs(moveBoxLX - arr[index1]) <= that.adsorbent) {left = arr[index1] + (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
} else if (Math.abs(moveBoxRX - arr[index1]) <= that.adsorbent) {left = arr[index1] - (direction == 'h' ? moveBox.width / 2 : moveBox.height / 2);
}
if (line1 == "add") {if (type == "add") {
moveBox.left = left;
moveBox.top = arr[index3] + (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
} else if (type == "move") {
moveBox.set({
left,
top: arr[index3] + (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2),
}).setCoords();}
} else if (line1 == "reduce") {if (type == "add") {
moveBox.left = left;
moveBox.top = arr[index3] - (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2);
} else if (type == "move") {
moveBox.set({
left,
top: arr[index3] - (direction == 'h' ? moveBox.height / 2 : moveBox.width / 2),
}).setCoords();}
}
}
}
},
groupIsbler (isbl) {if (isbl) {canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj.set({ selectable: false});
console.log("所有箱体禁止挪动");
}
});
} else {canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj.set({ selectable: true, evented: true});
console.log("所有箱体能够挪动");
}
});
}
canvas.renderAll();},
upMethods () {
var that = this;
var returnDate = handleDataUtil.upEnything(this.dataSource, this.currentMode);
this.setDoBack(returnDate.isback);
this.setDoUp(returnDate.isup);
// if (returnDate.data) {
this.setRestBox(returnDate.data, res => {if (res == "400" || res.status == 302) {var resStatus = handleDataUtil.backEnything(this.dataSource, this.currentMode);
this.setDoBack(returnDate.isback);
this.setDoUp(returnDate.isup);
}
if (res.status == 302) {
Message({
duration: 2000,
message: res.msg,
type: "error",
});
}
if (res.status == 200) {var params = {};
params.obj = res.obj.box;
this.changeGroupList(res.obj.groupList);
this.refreshCanvas_backOrUp(params, true);
that.$nextTick(function () {let item = canvas.getActiveObjects();
});
if ((res.obj.groupStatus == 1 || res.obj.groupStatus == 2) && this.mode == "group") {this.setMode("canvas");
}
/**
* 分组操作
*/
if (this.mode == "group" && res.obj.groupStatus != 1 && res.obj.groupStatus != 2) {let objs = canvas.getObjects();
let groupList = JSON.parse(JSON.stringify(that.groupList));
objs.forEach((obj) => {if (obj.type == "group" && obj.id == returnDate.groupId) {canvas.discardActiveObject();
canvas.setActiveObject(obj);
that.setGroupAngle(parseFloat(returnDate.groupAngle)) % 360;
}
});
that.setGroupList(groupList);
}
if (this.mode == "box") {let item = canvas.getActiveObjects();
let boxes = [];
item.forEach(i => {if (i.id != "source" && i.type == "group" && i.groupId == "box") {boxes.push(i);
}
})
that.setSelectedBoxes(boxes);
let niceP = canvas.getActiveObject();
if (niceP) {requestAnimationFrame(() => {bus.$emit("getRightBoxDetail", niceP);
})
} else {bus.$emit("getRightBoxDetail", {});
}
}
}
}, 1);
// }
console.log("复原");
},
backMethods () {
var that = this;
var returnDate = handleDataUtil.backEnything(this.dataSource, this.currentMode);
this.setDoBack(returnDate.isback);
this.setDoUp(returnDate.isup);
this.setRestBox(returnDate.data, res => {if (res == "400" || res.status == 302) {var resStatus = handleDataUtil.upEnything(this.dataSource, this.currentMode);
this.setDoBack(resStatus.isback);
this.setDoUp(resStatus.isup);
}
if (res.status == 302) {
Message({
duration: 2000,
message: res.msg,
type: "error",
});
}
if (res.status == 200) {var params = {};
params.obj = res.obj.box;
// console.log(res.obj.groupList);
this.changeGroupList(res.obj.groupList);
this.refreshCanvas_backOrUp(params, true);
that.$nextTick(function () {let item = canvas.getActiveObjects();
});
if ((res.obj.groupStatus == 1 || res.obj.groupStatus == 2) && this.mode == "group") {this.setMode("canvas");
}
/**
* 分组操作
*/
if (this.mode == "group" && res.obj.groupStatus != 1 && res.obj.groupStatus != 2) {let objs = canvas.getObjects();
let groupList = JSON.parse(JSON.stringify(that.groupList));
objs.forEach((obj) => {if (obj.type == "group" && obj.id == returnDate.groupId) {canvas.discardActiveObject();
canvas.setActiveObject(obj);
that.setGroupAngle(parseFloat(returnDate.groupAngle)) % 360;
}
});
that.setGroupList(groupList);
}
if (this.mode == "box") {let item = canvas.getActiveObjects();
let boxes = [];
item.forEach(i => {if (i.id != "source" && i.type == "group" && i.groupId == "box") {boxes.push(i);
}
})
that.setSelectedBoxes(boxes);
let niceP = canvas.getActiveObject();
if (niceP) {requestAnimationFrame(() => {bus.$emit("getRightBoxDetail", niceP);
})
} else {bus.$emit("getRightBoxDetail", {});
}
}
}
}, 1);
// }
console.log("撤销");
},
getZoom (num) {
var e = event || window.event;
var scrollx = document.documentElement.scrollLeft || document.body.scrollTop;
var scrolly = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollx;
var y = e.pageY || e.clientY + scrolly;
console.log(x, y, "-----");
console.log(this.canvasZoom);
// if () {//}
var moseIndex_x = this.moveMouseX * (1 + num);
var moseIndex_y = this.moveMouseY * (1 + num);
this.moveMouseX = moseIndex_x;
this.moveMouseY = moseIndex_y;
console.log(moseIndex_x);
// if (n != o) {// console.log("iam login");
// var scrollTop = $("#canvasZone").scrollTop();
// var scrollLeft = $("#canvasZone").scrollLeft();
// if (n - o < 0) {// document.getElementById('canvasZone').scrollTop = scrollTop - 0.1 * this.canvasSize.height - 0.1 * this.canvasSize.height / 4;
// document.getElementById('canvasZone').scrollLeft = scrollLeft - 0.1 * this.canvasSize.width - 0.1 * this.canvasSize.width / 4;
// } else if (n - o > 0) {// document.getElementById('canvasZone').scrollTop = scrollTop + 0.1 * this.canvasSize.height + 0.1 * this.canvasSize.height / 4;
// document.getElementById('canvasZone').scrollLeft = scrollLeft + 0.1 * this.canvasSize.width + 0.1 * this.canvasSize.width / 4;
// }
// }
if (moseIndex_x - x > 0) {document.getElementById('canvasZone').scrollLeft = moseIndex_x - x + 100;
} else {document.getElementById('canvasZone').scrollLeft = 0;
}
if (moseIndex_y - y > 0) {document.getElementById('canvasZone').scrollTop = moseIndex_y - y + 90;
} else {document.getElementById('canvasZone').scrollLeft = 0;
}
let that = this
let oldZoom = that.canvasZoom;
if (this.canvasZoom + num <= 2 && this.canvasZoom + num > 0.1) {this.setCanvasZoom(Math.round((this.canvasZoom + num) * 10) / 10);
}
if (that.canvasZoom != oldZoom) {
let params = {
params: {scal: parseInt(that.canvasZoom * 100)
},
success (res) {that.zoomCanvas(that.canvasZoom, oldZoom);
},
error (res) {}}
that.$store.dispatch("setScal", params);
}
},
zoomDrop (num) {
let that = this
let oldZoom = that.canvasZoom;
if (num != oldZoom) {
let params = {
params: {scal: parseInt(num * 100)
},
success (res) {that.setCanvasZoom(num);
that.zoomCanvas(num, oldZoom);
},
error (res) {}}
that.$store.dispatch("setScal", params);
}
},
getFrame () {
var that = this;
this.$axios({
method: "post",
parmas: {areaId: that.areaId},
url: "/system/getFrame",
}).then((res) => {if (res.status == 200) {
that.frameMessage = res.obj.frame;
that.deepcolorMessage = res.obj.deepcolor;
}
});
},
zoomCanvas (n, o) {
// return;
canvas.setZoom(n);
this.initGrid();
let zoomedGridWidth = this.canvasSize.width * 2 * this.canvasZoom;
let zoomedGridHeight = this.canvasSize.height * 2 * this.canvasZoom;
let maskSourceCut = document.getElementById("maskArea");
maskSourceCut.style.left = (0 + this.canvasSize.width / 4) * this.canvasZoom + "px";
maskSourceCut.style.top = (0 + this.canvasSize.height / 4) * this.canvasZoom + "px";
maskSourceCut.style.width = this.source_crop.width * this.canvasZoom + "px";
maskSourceCut.style.height = this.source_crop.height * this.canvasZoom + "px";
this.canvasBox.setWidth(Math.max(zoomedGridWidth, document.getElementById("canvasBox").offsetWidth)
);
this.canvasBox.setHeight(Math.max(zoomedGridHeight, document.getElementById("canvasBox").offsetHeight)
);
if (zoomedGridWidth <= document.getElementById("canvasZone").offsetWidth) {document.getElementById("canvasContainer").style.width = "100%";
}
if (zoomedGridHeight <= document.getElementById("canvasZone").offsetHeight) {document.getElementById("canvasContainer").style.height = "100%";
}
this.gridLeft = (this.canvasSize.width * this.canvasZoom) / 4 + "px";
this.gridTop = (this.canvasSize.height * this.canvasZoom) / 4 + "px";
this.canvasBox.renderAll();
this.handleData2("init");
canvas.renderAll();
this.$nextTick(() => {bus.$emit("refreshChange");
});
},
limitSourcePosition (p, type) {let canGrid = document.getElementById("canGrid");
let [gridLeft, gridTop] = [
this.canvasSize.width / 4,
this.canvasSize.height / 4
];
let num = this.limitSourceSpace;
let {width, height} = p;
if (type == "scaling") {width = Math.round(p.getScaledWidth());
height = Math.round(p.getScaledHeight());
}
if (p.top + height <= gridTop + num) {p.top = gridTop + num - height;}
if (p.left + width <= gridLeft + num) {p.left = gridLeft + num - width;}
if (p.top >= gridTop + canGrid.height / this.canvasZoom - num) {p.top = gridTop + canGrid.height / this.canvasZoom - num;}
if (p.left >= gridLeft + canGrid.width / this.canvasZoom - num) {p.left = gridLeft + canGrid.width / this.canvasZoom - num;}
},
limitMovingPosition (p) {let [canvasWidth, canvasHeight] = [this.canvasBox.width / this.canvasZoom, this.canvasBox.height / this.canvasZoom];
let [minWidth, minHeight] = [0, 0];
let [rightWidth, bottomHeight] = [p.width, p.height];
if (p.id != "source" && p.groupId == "box") {[minWidth, minHeight] = [p.width / 2, p.height / 2];
[rightWidth, bottomHeight] = [p.width / 2, p.height / 2];
}
p.left = Math.max(minWidth, p.left);
p.left = Math.min(p.left, canvasWidth - rightWidth);
p.top = Math.max(minHeight, p.top);
p.top = Math.min(p.top, canvasHeight - bottomHeight);
},
getGroupName () {let names = [];
for (let i = 0; i < this.groupList.length; i++) {names.push(this.groupList[i].name);
}
for (let j = 0; j < this.groupList.length; j++) {if (names.indexOf(j + 1 + "") == -1) {return j + 1 + "";}
}
return this.groupList.length + 1 + "";
},
copy2Me (ports) {ports = [...new Set(ports)];
let indexArr = new Array(ports.length);
let items = this.selectedBoxes;
let data = [];
for (let i = 0; i < this.selectedBoxes.length; i++) {if (this.selectedBoxes[i].type == "group" && this.selectedBoxes[i].groupId != "box") {
Message({
duration: 2000,
message: this.$t('CannotCopyGroup'),
type: "error",
});
return;
}
}
for (let j = 0; j < ports.length; j++) {
let index = -1;
for (let k = 0; k < this.allData.length; k++) {if (this.allData[k].networkPort == ports[j]) {if (this.allData[k].index >= index) {index = this.allData[k].index;
}
}
}
indexArr[j] = index;
for (let i = 0; i < items.length; i++) {if (items[i].networkPort == ports[j]) {indexArr[j] += 1;
let [x, y] = [0, 0];
if (items.length == 1) {[x, y] = [items[i].left, items[i].top];
} else {[x, y] = [items[i].matrixCache.value[4], items[i].matrixCache.value[5]];
}
data.push({rotationAngle: items[i].angle,
areaId: this.areaId,
networkPort: items[i].networkPort,
index: indexArr[j],
type: null,
width: items[i].width,
height: items[i].height,
x: x + this.copyKeyNum * this.copyBoxSpace,
y: y + this.copyKeyNum * this.copyBoxSpace,
portId: items[i].portId,
slotId: items[i].slotId,
boxFileId: items[i].boxFileId,
});
}
}
}
let that = this;
this.setAddBox(data, (res) => {res.obj.forEach((o) => {o.id = o.boxId;});
that.allData = that.allData.concat(res.obj);
data.forEach((item, index) => {item.id = res.obj[index].boxId;
canvas.add(this.groupAdd(item, canvas));
});
that.handleData2("");
that.$nextTick(function () {handleDataUtil.doEnything(that.dataSource, that.allData, "canvas", this.groupList, "");
that.setDoBack(false);
that.setDoUp(true);
})
});
},
// 不删除矩形 --> 删除所有线段，三角，圆点，文字从新绘制
handleData (type) {let hiddenGroupIds = [];
for (let i = 0; i < this.groupList.length; i++) {if (this.groupList[i].hidden) {hiddenGroupIds.push(this.groupList[i].id);
}
}
// 获取所有箱体数据处理 start
canvas.forEachObject(function (obj, i) {if (["triangle", "line", "path", "textbox", "circle"].indexOf(obj.type) != -1) {canvas.remove(obj);
}
});
var typeWk = [];
this.allData.forEach((item) => {if (typeWk.indexOf(item.networkPort) == -1) {typeWk.push(item.networkPort);
}
});
//console.log('一共有几个网口', typeWk)
typeWk.forEach((item) => {var newarr = this.allData.filter(function (obj) {return obj.networkPort == item;});
newarr = newarr.sort((a, b) => {return a.index - b.index;});
newarr.forEach((m, n) => {m.index = n + 1;});
let result = [];
newarr.forEach((item) => {if (hiddenGroupIds.indexOf(item.groupId) == -1) {result.push(item);
}
});
this.initLines(result, canvas, type);
this.initMerge(result, canvas, type);
});
// 获取所有箱体数据处理 end
},
// 删除以后选中箱体
deleteBox () {
let that = this;
let item = canvas.getActiveObjects();
if (!item || !item.length) {return;}
let boxReqList = [];
let delGroups = [];
for (let index = 0; index < item.length; index++) {if (item[index].type == "group" && item[index].groupId != "box") {delGroups.push(item[index]);
let objs = item[index]._objects;
for (let j = 0; j < objs.length; j++) {for (let h = that.allData.length - 1; h >= 0; h--) {
if (objs[j].networkPort == that.allData[h].networkPort &&
objs[j].index == that.allData[h].index
) {
boxReqList.push({id: that.allData[h].id,
networkPort: that.allData[h].networkPort,
});
continue;
}
}
}
} else if (item[index].type == "group" && item[index].groupId == "box") {that.allData.forEach((e, h) => {if (item[index].id == e.id) {
boxReqList.push({
id: e.id,
networkPort: e.networkPort,
});
}
});
}
}
this.$axios({
method: "post",
url: "/box/deleteBox",
data: {
areaId: that.areaId,
deleteBox: boxReqList,
},
}).then((res) => {if (res && res.status == 200) {if (delGroups && delGroups.length) {let groupList = JSON.parse(JSON.stringify(that.groupList));
// 更新分组列表
for (let i = 0; i < delGroups.length; i++) {for (let j = 0; j < groupList.length; j++) {if (groupList[j].id == delGroups[i].id) {groupList.splice(j, 1);
}
}
}
that.setGroupList(groupList);
}
that.refreshCanvas(res);
this.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas",
that.groupList,
""
);
that.setDoBack(false);
that.setDoUp(true);
});
canvas.discardActiveObject();
this.setActiveDeleteBox(false);
this.setActiveBreakLine(false);
this.setActiveMakeGroup(false);
this.setActiveBreakGroup(false);
} else {that.$message(that.$t(res.msg))
}
});
let objs = canvas.getObjects();
if (objs.length == 1) {
// 箱体全副删完
this.setSelectAll(false);
this.setSelectedBoxes([]);
}
},
// 删除连线
deleteLine () {
let that = this;
// 删除以后箱体上的连线
let item = canvas.getActiveObjects();
if (!item || item.length == 0) {
this.$message({
duration: 2000,
message: this.$t('NotChooseBox'),
type: "error",
});
return;
} else if (
item.length == 0 &&
item[0].type == "group" &&
item[0].groupId != "box"
) {
this.$message({
duration: 2000,
message: this.$t('SelectBoxLine'),
type: "error",
});
return;
} else {for (let i = 0; i < item.length; i++) {if (item[i].type == "group" && item[i].groupId != "box") {
this.$message({
duration: 2000,
message: this.$t('SelectBoxLine'),
type: "error",
});
return;
}
}
}
let boxReqList = [];
for (let index = 0; index < item.length; index++) {that.allData.forEach((e, h) => {if (item[index].id == e.id) {
boxReqList.push({
id: e.id,
networkPort: 0,
oldNetworkPort: item[index].networkPort,
});
}
});
}
this.$axios({
method: "post",
url: "/box/updateBox",
data: {
flag: 1, // 接口是否返回最新的箱体列表，0 否；1 是
areaId: that.areaId,
refreshIndex: true,
list: that.printaCoords_y(boxReqList),
frame: 1, // 给后盾传参帧率，用于带载校验
},
}).then((res) => {if (res && res.status == 200) {for (var i = 0; i < res.obj.length; i++) {for (var j = 0; j < res.obj[i].list.length; j++) {res.obj[i].list[j].slotId = res.obj[i].slotId;
}
}
this.refreshCanvas(res);
that.$nextTick(function () {handleDataUtil.doEnything(that.dataSource, that.allData, "canvas_editLine", this.groupList, "");
this.setDoBack(false);
this.setDoUp(true);
});
} else {that.$message(that.$t(res.msg))
}
});
},
printaCoords_y (list) {
let canvasSize = this.canvasSize
let accMul1 = accMul(canvasSize.width, this.canvasZoom)
let width = accDiv(accMul1, 4) //canvasSize.width * this.canvasZoom / 4
let accMul2 = accMul(canvasSize.height, this.canvasZoom)
let height = accDiv(accMul2, 4)
var result = []
let num1 = accDiv(width, this.canvasZoom)
let num2 = accDiv(height, this.canvasZoom)
for (var i = 0; i < list.length; i++) {var date = JSON.parse(JSON.stringify(list[i]));
date.x = parseInt(accSub(date.x, num1));
date.y = parseInt(accSub(date.y, num2));
result.push(date);
}
// let result = {
// x: x - width / this.canvasZoom,
// y: y - height / this.canvasZoom,
// }
//console.log(result);
return result;
},
printaCoords_b (list) {// console.log(list);
let canvasSize = this.canvasSize
let width = canvasSize.width * this.canvasZoom / 4
let height = canvasSize.height * this.canvasZoom / 4
//console.log(width);
var result = []
for (var i = 0; i < list.length; i++) {var date = JSON.parse(JSON.stringify(list[i]));
date.x = date.x + width / this.canvasZoom;
date.y = date.y + height / this.canvasZoom;
result.push(date);
}
// let result = {
// x: x - width / this.canvasZoom,
// y: y - height / this.canvasZoom,
// }
//console.log(result);
return result;
},
// 批改箱体信息
setUpdateBox (boxReqList, successCallback, flag = 0) {if (boxReqList.length == 0) {return;}
let that = this;
return this.$axios({
method: "post",
url: "/box/updateBox",
data: {
flag: flag, // 接口是否返回最新的箱体列表，0 否；1 是
areaId: that.areaId,
list: that.printaCoords_y(boxReqList),
frame: 1, // 给后盾传参帧率，用于带载校验
},
}).then((res) => {
this.movup = false;
this.rotup = false;
if (res && res.status == 200) {for (var i = 0; i < res.obj.length; i++) {for (var j = 0; j < res.obj[i].list.length; j++) {res.obj[i].list[j].slotId = res.obj[i].slotId;
}
}
successCallback && successCallback(res);
return res;
} else {that.$message(that.$t(res.msg))
}
});
},
// 复写所有箱体
setRestBox (boxReqList, successCallback, flag = 0) {
let that = this;
return this.$axios({
method: "post",
url: "/box/saveBoxs",
data: {
areaId: that.areaId,
list: that.printaCoords_y(boxReqList.dataSource),
frame: 1, // 给后盾传参帧率，用于带载校验
groupList: boxReqList.groupList,
},
}).then((res) => {if (res && (res.status == 200 || res.status == 302)) {successCallback && successCallback(res);
return res
} else {successCallback && successCallback("400");
return "400";
}
});
}, // 查问箱体
getboxList (isflag, callback) {
var that = this;
return this.$axios({
method: "post",
url: "/box/selectBoxList",
data: {id: this.areaId,},
}).then((res) => {if (res.status == 200) {
canvas.forEachObject(obj => {if (obj.id != "source") {canvas.remove(obj);
}
});
let arr = [];
this.portIds = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
var param = {"portId": array[i].portId,
"networkPort": array[i].networkPort,
"outputId": array[i].outputId,
"slotId": array[i].slotId
}
this.portIds.push(param);
for (let index = 0; index < item.length; index++) {item[index].slotId = (array[i].slotId == undefined ? 0 : array[i].slotId);
item[index].portId = (array[i].portId == undefined ? 0 : array[i].portId); arr.push(item[index]);
}
}
}
arr = that.printaCoords_b(arr);
this.allData = arr;
handleDataUtil.doEnything(
this.dataSource,
this.allData,
"canvas",
this.groupList,
"init"
);
this.handleData2("init");
for (let i = 0; i < arr.length; i++) {canvas.add(this.groupAdd(arr[i], canvas));
}
if (!isflag) {this.initGroup();
}
this.allData2 = JSON.parse(JSON.stringify(this.allData));
callback && callback();
return arr;
} else {that.$message(that.$t(res.msg));
}
});
},
getboxList_yg (isflag, callback) {
var that = this;
return this.$axios({
method: "post",
url: "/box/selectBoxList",
data: {id: this.areaId,},
}).then((res) => {if (res.status == 200) {
canvas.forEachObject(obj => {if (obj.id != "source") {canvas.remove(obj);
}
});
let arr = [];
this.portIds = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
var param = {"portId": array[i].portId,
"networkPort": array[i].networkPort,
"outputId": array[i].outputId,
"slotId": array[i].slotId
}
this.portIds.push(param);
for (let index = 0; index < item.length; index++) {item[index].slotId = (array[i].slotId == undefined ? 0 : array[i].slotId);
item[index].portId = (array[i].portId == undefined ? 0 : array[i].portId); arr.push(item[index]);
}
}
}
arr = that.printaCoords_b(arr);
this.allData = arr;
this.handleData2("init");
for (let i = 0; i < arr.length; i++) {canvas.add(this.groupAdd(arr[i], canvas));
}
this.initGroup();
this.allData2 = JSON.parse(JSON.stringify(this.allData));
callback && callback();
return arr;
} else {that.$message(that.$t(res.msg));
}
});
},
// 增加在线箱体
addOnlineQuery (data, callback) {
let that = this;
return this.$store.dispatch("addOnlineQuery", {
params: {
list: data,
frame: 1, // 给后盾传参帧率，用于带载校验
},
success (res) {if (res.status == 200) {res.obj.forEach((item) => {for (let i = 0; i < that.allData.length; i++) {
if (that.allData[i].networkPort == item.networkPort &&
item.index == that.allData[i].index
) {that.allData[i] = item;
that.allData[i].id = item.boxId;
break;
}
}
let objs = canvas.getObjects();
objs.forEach((o) => {
if (
o.index == item.index &&
o.networkPort == item.networkPort &&
!o.id &&
o.type == "group"
) {
o.set({id: item.boxId,});
canvas.requestRenderAll();}
});
});
callback && callback(res);
} else {that.allData.pop();
let objs = canvas.getObjects();
objs.forEach((o) => {if (o.id == null) {canvas.remove(o);
}
});
}
},
error (res) {that.allData.pop();
let objs = canvas.getObjects();
objs.forEach((o) => {if (o.id == null) {canvas.remove(o);
}
});
},
});
},
// 增加离线箱体
setAddBox (data, callback) {
let that = this;
console.log("setAddBox");
return this.$store.dispatch("setAddBox", {
params: {list: that.printaCoords_y(data),
frame: 1, // 给后盾传参帧率，用于带载校验
},
success (res) {console.log("success");
if (res.status == 200) {res.obj = that.printaCoords_b(res.obj);
res.obj.forEach((item) => {for (let i = 0; i < that.allData.length; i++) {
if (that.allData[i].networkPort == item.networkPort &&
item.index == that.allData[i].index
) {that.allData[i] = item;
that.allData[i].id = item.boxId;
break;
}
}
let objs = canvas.getObjects();
objs.forEach((o) => {
o.set({huadongbs: false,});
if (
o.index == item.index &&
o.networkPort == item.networkPort &&
!o.id &&
o.type == "group"
) {
o.set({id: item.boxId,});
canvas.requestRenderAll();}
});
});
callback && callback(res);
} else {console.log("12311");
if (firstAdd) {canvas.remove(firstAdd);
firstAdd = "";
this.addBoxParams = [];
// console.log("isdrawBox = false");
// isdrawBox = false;
}
}
},
error (res) {console.log("error");
that.allData.pop();
let objs = canvas.getObjects();
if (firstAdd) {canvas.remove(firstAdd);
firstAdd = "";
this.addBoxParams = [];
// console.log("isdrawBox = false");
// isdrawBox = false;
}
objs.forEach((o) => {if (o.id == null) {canvas.remove(o);
}
});
},
});
},
initGroup (isLine16) {if (this.mode == 'box' && this.currentMode == 'canvas_editLine') {return}
// console.log("initGroup");
this.allGroup = [];
let objs = canvas.getObjects();
if (objs.length == 1) {
// 只有一个源，没有箱体
return;
}
canvas.discardActiveObject();
let boxes = [];
objs.map((item) => {if (item.id != "source" && item.type == "group" && item.groupId == "box") {boxes.push(item);
}
});
let hiddenGroupIds = [];
if (!isLine16) {for (let i = 0; i < this.groupList.length; i++) {if (this.groupList[i].hidden) {hiddenGroupIds.push(this.groupList[i].id);
}
}
}
for (let i = 0; i < this.groupList.length; i++) {let groupId = this.groupList[i].id;
let groupItems = [];
for (let j = 0; j < boxes.length; j++) {if (groupId == boxes[j].groupIdd) {groupItems.push(boxes[j]);
}
}
if (groupItems.length) {
var sel = new fabric.ActiveSelection(groupItems, {canvas: canvas,});
canvas.setActiveObject(sel);
let group = canvas.getActiveObject().toGroup({});
group.set({
id: groupId,
// borderColor: "blue",
// selectionBackgroundColor: "red",
});
if (hiddenGroupIds.indexOf(groupId) > -1) {
group.set({visible: false,});
}
this.allGroup.push(group);
canvas.requestRenderAll();
canvas.discardActiveObject();}
}
},
// 创立源
initSource (sourceData) {//console.log(sourceData);
sourceCanvas = new fabric.Rect({
left: sourceData.left,
top: sourceData.top,
originX: "left", // 绝对于坐标点地位
originY: "top", // 绝对于坐标点地位
width: sourceData.width,
height: sourceData.height,
hoverCursor: "normal",
fill: "green",
borderColor: "black", // 选中边框色
cornerStyle: "circle", // 手柄形态 正方形 rect|| 圆 circle
cornerColor: "black", // 手柄背景色
cornerStrokeColor: "black", // 手柄框边框
hasControls: true, // 手柄
hasBorders: true, // 手柄线
visible: true, // 是否可见
selectable: false, // 是否可抉择的对象
evented: false, // 是否拖动
centeredScaling: false, // 居中缩放
transparentCorners: false, // 选中框通明角
preserveObjectStacking: true,
opacity: 0.2,
id: "source",
});
sourceCanvas.setControlsVisibility({
mt: true,
mb: true,
bl: true,
br: true,
tl: true,
tr: true,
mr: true,
ml: true,
mtr: false,
});
var objs_ = canvas.getObjects();
for (var i = 0; i < objs_.length; i++) {if (objs_[i].id == 'source') {canvas.remove(objs_[i]);
}
}
canvas.add(sourceCanvas);
},
// 挪动和旋转
movAndrotat (p, type) {
let that = this;
if (!rightKey || ((that.currentMode == "canvas_offline" || that.currentMode == 'canvas_online') && firstAdd == "")) {if (p) {if (p.isCheckTo) {
// 单选
p._objects[2].set({angle: -parseFloat(p.angle) }); // 单个旋转文字角度不变
that.allData.forEach((item, k) => {if (item.id == p.id) {item.rotationAngle = parseFloat(p.angle) % 360;
item.x = p.calcOwnMatrix()[4];
item.y = p.calcOwnMatrix()[5];
item.operateType = "moving";
}
});
} else {
// 多选箱体
if (p.type == "group" && p.groupId != "box") {
// 页面间接抉择某分组
that.setGroupAngle(parseFloat(p.angle) % 360);
let objs = p._objects;
let ownMatrixCache = p.ownMatrixCache;
objs.forEach((obj, objIndex) => {that.allData.forEach((item) => {if (item.id == obj.id) {if (type == "moving") {
let gg = that.rotatoNi(obj.ownMatrixCache.value[4] + ownMatrixCache.value[4],
obj.ownMatrixCache.value[5] + ownMatrixCache.value[5],
ownMatrixCache.value[4],
ownMatrixCache.value[5],
parseFloat(p.angle)
);
item.x = gg.x;
item.y = gg.y;
} else if (type == "rotating") {item.rotationAngle = (parseFloat(obj.angle) + parseFloat(p.angle)) % 360;
let gg = that.rotatoNi(obj.ownMatrixCache.value[4] + ownMatrixCache.value[4],
obj.ownMatrixCache.value[5] + ownMatrixCache.value[5],
ownMatrixCache.value[4],
ownMatrixCache.value[5],
parseFloat(p.angle)
);
item.x = gg.x;
item.y = gg.y;
}
}
});
obj._objects[2].set({angle: -((parseFloat(p.angle) + parseFloat(obj.angle)) % 360) }).setCoords()});
} else {
var arr = p._objects;
if (
p.type == "activeSelection" &&
arr.length == 1 &&
arr[0].type == "group" &&
arr[0].id
) {
// 拖动旋转的是分组
let objs = arr[0]._objects;
let matrixCache = arr[0].matrixCache;
objs.forEach((obj, objIndex) => {that.allData.forEach((item) => {if (item.id == obj.id) {if (type == "moving") {item.x = obj.ownMatrixCache.value[4] + matrixCache.value[4];
item.y = obj.ownMatrixCache.value[5] + matrixCache.value[5];
} else if (type == "rotating") {item.rotationAngle = (parseFloat(obj.angle) + parseFloat(p.angle)) % 360;
let gg = that.rotatoNi(obj.ownMatrixCache.value[4] + matrixCache.value[4],
obj.ownMatrixCache.value[5] + matrixCache.value[5],
matrixCache.value[4],
matrixCache.value[5],
parseFloat(p.angle)
);
item.x = gg.x;
item.y = gg.y;
}
}
});
obj._objects[2].set({angle: -((parseFloat(p.angle) + parseFloat(obj.angle)) % 360) }).setCoords()});
} else {for (var i = 0; i < arr.length; i++) {if (arr[i].type == "group" && arr[i].groupId == "box") {
let angle =
parseInt(parseFloat(arr[i].angle) + parseFloat(p.angle)) % 360;
arr[i]._objects[2].set({angle: -angle}); // 单个旋转文字角度不变
that.allData.forEach((item) => {if (item.id == arr[i].id) {
item.rotationAngle = angle;
item.x = arr[i].matrixCache.value[4];
item.y = arr[i].matrixCache.value[5];
}
});
} else if (arr[i].type == "group" && arr[i].groupId != "box") {let _objs = arr[i]._objects;
let groupValue = arr[i].matrixCache.value;
//_objs.set({angle:_objs})
_objs.forEach((o, pp) => {that.allData.forEach((item) => {if (item.id == o.id) {// if (type == "moving") {// item.x = groupValue[4] + o.left;
// item.y = groupValue[5] + o.top;
// } else if (type == "rotating") {let x1 = groupValue[4] + o.left;
let y1 = groupValue[5] + o.top;
let gg = that.rotatoNi(
x1,
y1,
groupValue[4],
groupValue[5],
p.angle
);
item.x = gg.x;
item.y = gg.y;
let ang = (p.angle + parseFloat(o.angle)) % 360
item.rotationAngle = ang
o._objects[2].set({angle: 360 - ang})
//}
}
});
});
that.imrotat = true
}
}
}
}
}
that.handleDataMovingRotating(type);
canvas.renderAll();
that.activeTpye = true;
if (type == "moving") {that.movup = true;}
if (type == "rotating") {that.rotup = true;}
}
}
},
jsonAllData (id) {
let arr = this.allData2;
return arr.filter(function (obj, i) {return obj.id == id;});
},
// 依据接口返回的箱体列表，刷新画布内容（除了源）refreshCanvas (res, selectBoxesFlag, activeObject, isLine16) {
var that = this;
canvas.forEachObject((o) => {if (o.id != "source") {canvas.remove(o);
}
});
let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
this.allData = arr;
this.handleData2("init", isLine16);
for (let i = 0; i < arr.length; i++) {let data = JSON.parse(JSON.stringify(arr[i]));
let newItem = this.groupAdd(data, canvas);
canvas.add(newItem);
}
this.initGroup(isLine16);
selectBoxesFlag &&
this.activeBoxes(activeObject ? activeObject : this.selectedBoxes);
},
//yg
refreshCanvas_backOrUp (res, selectBoxesFlag, activeObject) {
var that = this;
canvas.forEachObject(o => {if (o.id != "source" && o.id != undefined && o.id != "") {canvas.remove(o);
}
})
let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
this.allData = arr;
this.handleData2('init')
for (let i = 0; i < arr.length; i++) {let data = JSON.parse(JSON.stringify(arr[i]));
let newItem = this.groupAdd(data, canvas);
canvas.add(newItem)
}
this.initGroup();
selectBoxesFlag && this.activeBoxes(activeObject ? activeObject : this.selectedBoxes);
},
// 画布勾销以后选中箱体，选中 selectedBoxes
activeBoxes (selectedBoxes) {canvas.discardActiveObject();
let boxes = [];
let sel = null;
if (selectedBoxes.length == 1) {canvas.forEachObject((item) => {
if (
item.type == "group" &&
item.groupId == "box" &&
item.id == selectedBoxes[0].id
) {sel = item;} else if (
item.type == "group" &&
item.groupId != "box" &&
item.id == selectedBoxes[0].id
) {sel = item;}
});
} else {var number = [];
var inNumber = [];
selectedBoxes.forEach((o) => {if (o.group && o.group.id != 0) {number.push(o.group.id);
}
canvas.forEachObject((item) => {
if (
item.id != "source" &&
item.type == "group" &&
item.groupId == "box" &&
item.id == o.id
) {boxes.push(item);
} else if (
item.id != "source" &&
item.type == "group" &&
item.groupId != "box" &&
item.id == o.id
) {boxes.push(item);
}
});
});
for (var j = 0; j < this.groupList.length; j++) {for (var i = 0; i < number.length; i++) {if (number[i] == this.groupList[j].id) {inNumber.push(number[i]);
}
}
}
if (number.length != inNumber.length) {boxes = [];
}
sel = new fabric.ActiveSelection(boxes, {canvas: canvas,});
}
canvas.setActiveObject(sel);
canvas.requestRenderAll();},
// 初始化 fabric 画布
initCanvas () {
let that = this;
var canvasDom = document.getElementById("can");
var width_ = this.canvasSize.width
? this.canvasSize.width * 2
: 1920 * 2;
// var height_ = this.canvasSize.height
// ? this.canvasSize.height * 2
// : 1080 * 2;
var domWidth = document.getElementById("canvasBox").style.width;
canvasDom.width = width_ < domWidth ? domWidth : width_;
canvasDom.width = this.canvasSize.width
? this.canvasSize.width * 2
: 1920 * 2;
canvasDom.height = this.canvasSize.height
? this.canvasSize.height * 2
: 1080 * 2;
canvas = this.canvasBox = new fabric.Canvas("can", { selection: true}); //selection 是否反对多选
canvas.on({"object:moving": function (e) {
var p = e.target;
if (p) {bus.$emit("getRightBoxDetail", p);
}
that.limitMovingPosition(p);
if (that.mode == "operateSource") {
that.movingSoureFlag = true;
// 限度源不能齐全拖出网格区域
that.limitSourcePosition(p, "moving");
that.setSourceData({left: Math.round(p.left),
top: Math.round(p.top),
width: Math.round(p.width),
height: Math.round(p.height),
});
bus.$emit("refreshChange");
} else {setTimeout(() => {that.movAndrotat(p, "moving");
}, 1)
that.movAndrotat(p, "moving");
}
if (p.type == 'group' && !p.isCheckTo) {that.setMode("group"); // 分组属性页
} else if (p.type == 'group' && p.isCheckTo) {that.setMode("box");
}
},
"object:rotating": function (e) {
var p = e.target;
that.limitMovingPosition(p);
if (p) {bus.$emit("getRightBoxDetail", p);
setTimeout(() => {that.movAndrotat(p, "rotating");
}, 1)
}
//p && that.movAndrotat(p, "rotating");
},
"object:scaling": function (e) {if (that.mode == "operateSource") {
var p = e.target;
that.scalingSourceFlag = true;
// 限度源不能齐全拖出网格区域
that.limitSourcePosition(p, "scaling");
if (p.left != that.sourceData.left || p.top != that.sourceData.top) {that.scaleOffsetFlag = true;}
// console.log(p.getScaledWidth());
that.setSourceData({left: Math.round(p.left),
top: Math.round(p.top),
width: Math.round(p.getScaledWidth()) - 1,
height: Math.round(p.getScaledHeight()) - 1
});
bus.$emit("refreshChange");
}
},
"mouse:down": function (e) {
var p = e.target;
that.copyNum = 1 // 还原复制箱体次数
that.copyKeyNum = 1 // 还原快捷键复制箱体次数
that.copyBoxFlag = false;
isdrawBox = true;
startDrawX = e.pointer.x;
startDrawY = e.pointer.y;
// console.log("点的坐标", p);
if (p) {if (that.mode == 'canvas' && that.currentMode == 'canvas') {that.setMode("box");
bus.$emit("getRightBoxDetail", p);
}
canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj._objects[0].set({stroke: "#136094",});
}
});
p._objects && p._objects[0].set({stroke: "#0099FF",});
// 右侧箱体坐标显示
if (that.isChangeLine && p.type == "group" && p.groupId == "box") {
// 激活自定义连线
if (that.addlineDash == 1) {
// 点终点箱体
that.startPort = {
networkPort: p.networkPort,
id: p.id,
index: p.index,
x: parseFloat(p.left),
y: parseFloat(p.top),
};
that.addlineDash = 2;
} else if (that.addlineDash == 2) {
// 点的第起点箱体
that.endPort = {
networkPort: p.networkPort,
id: p.id,
index: p.index,
x: parseFloat(p.left),
y: parseFloat(p.top),
};
}
that.lineDash = that.makeLine(
[
that.startPort.x,
that.startPort.y,
that.startPort.x + 10,
that.startPort.y + 10,
],
"",
[3, 2],
"",
that.startPort.id,
that.endPort.id
);
canvas.add(that.lineDash);
that.drawArrow(
canvas,
that.startPort.x,
that.startPort.y,
that.startPort.x + 5,
that.startPort.y + 5,
30,
10,
1,
"#fff",
that.startPort.id,
that.endPort.id
);
if (that.addlineDash == 2) {
// 点的起点箱体
if (that.startPort.networkPort != that.endPort.networkPort) {console.log("不同网口不能批改连线");
return;
}
if (that.startPort.index + 1 == that.endPort.index) {console.log("地位无批改");
return;
}
if (that.startPort.id == that.endPort.id) {console.log("间断点击同一个箱体");
return;
}
let list = that.allData.filter(function (obj, i) {return obj.networkPort == that.endPort.networkPort;});
let editLine = that.setArrIndex(that.startPort, that.endPort, list);
// console.log("批改连线以后所有同网口数据", editLine);
// that.startPort = {};
that.startPort = JSON.parse(JSON.stringify(that.endPort));
editLine.forEach((i) => {if (i.id == that.startPort.id) {that.startPort.index = i.index;}
})
that.endPort = {};
// that.addlineDash = 1;
canvas.forEachObject((obj, i) => {if ((obj.strokeDashArray && obj.strokeDashArray.length > 0) || obj.jt) {canvas.remove(obj);
}
});
// console.log("清空终点坐标", that.startPort);
that.setUpdateBox(
editLine,
(res) => {
// 获取箱体列表刷新画布
that.refreshCanvas(res);
canvas.forEachObject((obj, i) => {if (obj.type == "group" && obj.groupId == "box") {obj.set({ selectable: false});
}
});
},
1
);
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_editLine",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
}
}
} else {that.startPort = {};
// that.startPort = JSON.parse(JSON.stringify(that.endPort));
that.endPort = {};
that.addlineDash = 1;
canvas.forEachObject((obj, i) => {if (obj.type == "group") {obj._objects[0].set({stroke: "#136094",});
}
if ((obj.strokeDashArray && obj.strokeDashArray.length > 0) || obj.jt) {canvas.remove(obj);
}
});
}
if (p) {if (p.type == 'group' && !p.isCheckTo && that.currentMode != "canvas_editLine" && that.currentMode != 'canvas_connectionsLine') {that.setMode("group");// 分组属性页
} else if (p.type == 'group' && p.isCheckTo && that.currentMode != "canvas_editLine" && that.currentMode != 'canvas_connectionsLine') {that.setMode("box");
}
} else {if (that.mode != "operateSource" && that.mode != "boxLine16" && that.currentMode != "canvas_editLine" && that.currentMode != "canvas_offline" && that.currentMode != "canvas_online" && that.currentMode != 'canvas_connectionsLine') {that.setMode("canvas");
}
}
if ((rightKey) && that.addBoxParams.length) {
//return;
if (firstAdd == "" || that.newBoxes == []) {return;}
if (that.newBoxes.length <= 1) {
// 点了没拖动
that.setAddBoxMode(true);
let networkPort = that.parms.index; // 网口
let indexIndex = that.allData.filter(function (obj, i) {return obj.networkPort == networkPort;});
let _index = indexIndex.length + 1; // 序号
that.addBoxParams[0].areaId = that.areaId;
that.addBoxParams[0].x = p.left;
that.addBoxParams[0].y = p.top;
that.addBoxParams[0].rotationAngle = that.addAngle;
that.addBoxParams[0].index = _index;
if (that.gridAdsorbent) {if (that.allData.length > 0) { // 增加第一个箱体不思考吸附
let moveBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
let angle = moveBox.rotationAngle;
if ([0, 90, 180, 270, 360].indexOf(Number(angle)) > -1) {
// 增加单个箱体，且角度为 90°倍数 主动吸附到左近箱体
let direction = that.getDirection(angle);
for (let i = 0; i < that.allData.length; i++) {let data = that.allData[i];
that.adsorbentEvent(data, moveBox, direction, 'add');
};
} else {
// 任意角度的箱体吸附
// that.allData.forEach(data => {// if (data.id && data.groupId == 0 && data.rotationAngle == angle) {
// // 一期不做
// }
// });
}
that.addBoxParams[0].x = isNaN(moveBox.left) ? moveBox.x : moveBox.left;
that.addBoxParams[0].y = isNaN(moveBox.top) ? moveBox.y : moveBox.top;
canvas.renderAll();}
}
if (that.parms.type == "offline") {console.log('mouse:down 离线', that.newBoxes)
that.newBoxes = [];
let newBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
newBox.huadongbs = true;
that.newBoxes.push(newBox);
for (var i = 0; i < that.newBoxes.length; i++) {// that.newBoxes[i].index = _index + that.newBoxes[i].index;
yesSddBox = that.groupAdd(that.newBoxes[i], canvas);
canvas.add(yesSddBox);
}
return;
that.setAddBox(that.addBoxParams, (res) => {//console.log('看一看疾速点击能进来不', that.addBoxParams)
// let yesSddBox = that.groupAdd(that.addBoxParams[0], canvas);
// canvas.add(yesSddBox);
// yesSddBox
// .set({// id: res.obj[0].boxId,
// left: yesSddBox.left,
// top: yesSddBox.top,
// }).setCoords();
return;
that.allData.push(newBox);
that.handleData2("init");
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_offline",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
});
} else {
// 在线增加的
if (that.onlineBoxLength <= _index - 1) {return;}
var addData = that.parms.list[indexIndex.length];
for (let items of that.boxTypeList) {if (items.main_type == addData.mainType) {that.addBoxParams[0].width = items.scan_w;
that.addBoxParams[0].height = items.scan_h;
that.addBoxParams[0].boxFileId = items.id;
that.addBoxParams[0].type = items.main_type;
}
}
that.newBoxes = [];
let newBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
newBox.huadongbs = true;
that.newBoxes.push(newBox);
console.log('mouse:down 在线', that.newBoxes)
for (var i = 0; i < that.newBoxes.length; i++) {// that.newBoxes[i].index = _index + that.newBoxes[i].index;
yesSddBox = that.groupAdd(that.newBoxes[i], canvas);
canvas.add(yesSddBox);
}
return
that.addOnlineQuery(that.addBoxParams, (res) => {let yesSddBox = that.groupAdd(that.addBoxParams[0], canvas);
canvas.add(yesSddBox);
yesSddBox
.set({id: res.obj[0].boxId,
left: yesSddBox.left,
top: yesSddBox.top,
})
.setCoords();
let newBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
newBox.id = res.obj[0].boxId;
that.allData.push(newBox);
that.handleData2("init");
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_online",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
/** 增加实现后，更新下一个
**/
that.addOnlineRect(that.parms, '1');
});
}
}
}
},
"mouse:up": function (e) {
isdrawBox = false;
// canvas.forEachObject((obj, i) => {// if (obj.huadongbs) {// console.log("12312312313");
// canvas.remove(obj);
// }
// });
//console.log('只有抬起示意滑动增加完结', isdrawBox)
var p = e.target;
let item = canvas.getActiveObjects();
console.log(item);
let niceP = canvas.getActiveObject();
//console.log(niceP);
if (niceP) {requestAnimationFrame(() => {bus.$emit("getRightBoxDetail", niceP);
})
} else {bus.$emit("getRightBoxDetail", {});
}
let boxes = [];
item.forEach((i) => {if (i.id != "source" && i.type == "group" && i.groupId == "box") {boxes.push(i);
}
});
if (item.length > 0) {that.setSelectedBoxes(item);//boxes
} else {that.setSelectedBoxes([]);
}
/* -----------start 此处为 挪动或旋转 调用更新接口 ------------- */
if (that.movup || that.rotup) {let boxReqList = [];
if (item.length > 0) {
// 如果有选中数据
for (let i = 0; i < item.length; i++) {if (item[i].type == "group" && item[i].groupId != "box") {
// 以后操作的是一个分组
let _objs = item[i]._objects;
for (let i = 0; i < _objs.length; i++) {that.allData.forEach((k, h) => {if (_objs[i].id == k.id) {console.log(_objs[i], "查看拖动的分组中箱体信息", k);
k.rotationAngle = parseInt(k.rotationAngle) || 0;
boxReqList.push(k);
}
});
}
} else {
// 在 allData 中匹配出挪动或旋转的数据
that.allData.forEach((k, h) => {if (item[i].id == k.id) {k.rotationAngle = parseInt(k.rotationAngle);
boxReqList.push(k);
}
});
}
}
}
if (that.movup && that.gridAdsorbent) {
// 箱体拖拽 吸附到安装 版本一只思考 90°倍数无分组状况
if (item.length == 1 && item[0].type == "group" && item[0].groupId == "box") {let moveBox = item[0];
var copyMove = JSON.parse(JSON.stringify(moveBox));
let angle = moveBox.angle;
if ([0, 90, 180, 270, 360].indexOf(Number(angle)) > -1) {
// 拖拽单个箱体 且角度为 90°倍数 箱体主动吸附到左近箱体
let direction = that.getDirection(angle);
for (let i = 0; i < that.allData.length; i++) {let data = that.allData[i];
that.adsorbentEvent(data, moveBox, direction, 'move');
};
if (copyMove.left == moveBox.left && copyMove.top == moveBox.top) {that.adsorbentEvent_canvas(moveBox, direction, 'move');
}
} else {
// 任意角度的箱体吸附
// that.allData.forEach(data => {// if (data.id != moveBox.id && data.groupId == 0 && data.rotationAngle == angle) {
// // 一期不做
// }
// });
}
boxReqList[0].x = moveBox.left;
boxReqList[0].y = moveBox.top;
that.allData.forEach(data => {if (data.id == moveBox.id) {
data.x = moveBox.left;
data.y = moveBox.top;
}
});
that.handleData2('');
canvas.renderAll();} else {if (niceP.isCheckTo == true) {// 选中单个箱体} else { // 多选箱体吸附操作
var left = niceP.left;
var top = niceP.top;
var width = niceP.width;
var height = niceP.height;
}
}
}
// 拖动实现鼠标抬起批改更新箱体信息
//return
that.setUpdateBox(
boxReqList,
(res) => {
// 获取箱体列表刷新画布
// that.refreshCanvas(res, true, item); // 引发 bug2854
// that.refreshCanvas(res, true, niceP); // 引发 bug2854
let arr = [];
if (res.obj && res.obj.length > 0) {
let array = res.obj;
for (let i = 0; i < array.length; i++) {let item = array[i].list;
for (let index = 0; index < item.length; index++) {let data = item[index];
arr.push(data);
}
}
}
arr = that.printaCoords_b(arr);
that.allData = arr;
that.allData2 = JSON.parse(JSON.stringify(that.allData));
},
1
);
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
}
/* -----------end 此处为 挪动或旋转 调用更新接口 ------------- */
/* -----------start 此处为 鼠标抬起增加箱体 ------------- */
//|| (!rightKey && !isdrawBox)
if ((rightKey) && that.addBoxParams.length) {if (firstAdd == "" || that.newBoxes == []) {return;}
//console.log("看看单点时批量增加数据：", that.newBoxes);
if (that.newBoxes.length <= 1) {
//return
// 点了没拖动
that.setAddBoxMode(true);
let networkPort = that.parms.index; // 网口
let indexIndex = that.allData.filter(function (obj, i) {return obj.networkPort == networkPort;});
let _index = indexIndex.length + 1; // 序号
that.addBoxParams[0].areaId = that.areaId;
that.addBoxParams[0].x = that.newBoxes[0].x;
that.addBoxParams[0].y = that.newBoxes[0].y;
that.addBoxParams[0].rotationAngle = that.addAngle;
that.addBoxParams[0].index = _index;
if (that.allData.length > 0) { // 增加第一个箱体不思考吸附
let moveBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
let angle = moveBox.rotationAngle;
if ([0, 90, 180, 270, 360].indexOf(Number(angle)) > -1) {
// 增加单个箱体，且角度为 90°倍数 主动吸附到左近箱体
let direction = that.getDirection(angle);
for (let i = 0; i < that.allData.length; i++) {let data = that.allData[i];
that.adsorbentEvent(data, moveBox, direction, 'add');
};
} else {
// 任意角度的箱体吸附
// that.allData.forEach(data => {// if (data.id && data.groupId == 0 && data.rotationAngle == angle) {
// // 一期不做
// }
// });
}
that.addBoxParams[0].x = isNaN(moveBox.left) ? moveBox.x : moveBox.left;
that.addBoxParams[0].y = isNaN(moveBox.top) ? moveBox.y : moveBox.top;
canvas.renderAll();}
if (that.parms.type == "offline") {that.setAddBox(that.addBoxParams, (res) => {//console.log('看一看疾速点击能进来不', that.addBoxParams)
console.log('mouse:up 离线', that.newBoxes)
// let yesSddBox = that.groupAdd(that.addBoxParams[0], canvas);
// canvas.add(yesSddBox);
yesSddBox
.set({id: res.obj[0].boxId,
left: yesSddBox.left,
top: yesSddBox.top,
})
.setCoords();
let newBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
newBox.id = res.obj[0].boxId;
that.allData.push(newBox);
that.handleData2("init");
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_offline",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
});
} else {
// 在线增加的
if (that.onlineBoxLength <= _index - 1) {
// that.$message({
// duration: 2000,
// message: that.$t('ExceedingTheLoadOfTheBox'),
// type: "error",
// });
return;
}
var addData = that.parms.list[indexIndex.length];
for (let items of that.boxTypeList) {if (items.main_type == addData.mainType) {that.addBoxParams[0].width = items.scan_w;
that.addBoxParams[0].height = items.scan_h;
that.addBoxParams[0].boxFileId = items.id;
that.addBoxParams[0].type = items.main_type;
}
}
that.addOnlineQuery(that.addBoxParams, (res) => {console.log('mouse:up 在线', that.newBoxes)
// let yesSddBox = that.groupAdd(that.addBoxParams[0], canvas);
// canvas.add(yesSddBox);
yesSddBox
.set({id: res.obj[0].boxId,
left: yesSddBox.left,
top: yesSddBox.top,
})
.setCoords();
let newBox = JSON.parse(JSON.stringify(that.addBoxParams[0]));
newBox.id = res.obj[0].boxId;
that.allData.push(newBox);
that.handleData2("init");
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_online",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
/** 增加实现后，更新下一个
**/
that.addOnlineRect(that.parms, '1');
});
}
} else {//if (that.parms.type == "offline") {that.setAddBoxMode(true);
that.setAddBox(that.newBoxes, (res) => {
let boxes = res.obj;
//let boxes = JSON.parse(JSON.stringify(that.newBoxes));
boxes.forEach((newBox) => {newBox.id = newBox.boxId;});
that.allData = that.allData.concat(boxes);
that.handleData2("init");
that.$nextTick(function () {
handleDataUtil.doEnything(
that.dataSource,
that.allData,
"canvas_offline",
this.groupList,
""
);
this.setDoBack(false);
this.setDoUp(true);
});
});
}
}
/* -----------start 此处为 鼠标抬起增加箱体 ------------- */
// 操作源保留数据
if (p) {
// 源拖拽
if (
that.mode == "operateSource" &&
(that.movingSoureFlag || that.scalingSourceFlag)
) {let params = {};
let [gridLeft, gridTop] = [
that.canvasSize.width / 4,
that.canvasSize.height / 4
];
var scaleEn_ = 0;
var offsetEn_ = 0;
if (that.cutEnable) {if (p.width != that.cutData.w || p.height != that.cutData.h) {scaleEn_ = 1;}
} else {if (p.width != that.inputSource.initWidth || p.height != that.inputSource.initHeight) {scaleEn_ = 1;}
}
if (Math.round(p.left - gridLeft) != 0 || Math.round(p.top - gridTop) != 0) {offsetEn_ = 1;}
if (that.movingSoureFlag) {
that.movingSoureFlag = false;
params = {
params: {inputPortid: that.inputDetail[that.inputPortIndex].id, // 输出口表 id
cropEn: that.cropEn, // 视频裁剪使能 0：不使能；1：使能；scaleEn: scaleEn_, // 视频缩放使能 0：不使能；1：使能；// scaleEn 暂定始终发 1
offsetEn: offsetEn_, // 视频偏移使能 0：不使能；1：使能；// offsetEn 参数只有界面有偏移量就发 1
cropX: 0, // 裁剪起始左上角横坐标 X
cropY: 0, // 裁剪起始左上角纵坐标 Y
cropWidth: that.cut.w, // 裁剪宽度
cropHeight: that.cut.h, // 裁剪高度
scaleWidth: p.width, // 缩放宽度
scaleHeight: p.height, // 缩放高度
offsetX: Math.round(p.left - gridLeft), // 视频源横向偏移量 (p.left - that.originData.left)
offsetY: Math.round(p.top - gridTop), // 视频源纵向偏移量 (p.top - that.originData.top)
x: Math.round(p.left - gridLeft), // 视频源左上角横坐标 x
y: Math.round(p.top - gridTop), // 视频源左上角纵坐标 y
},
success (res) { },
error (res) {},};
} else if (that.scalingSourceFlag) {
that.scalingSourceFlag = false;
let [sourceW, sourceH] = [Math.max(that.sourceData.width, that.limitSourceSpace),
Math.max(that.sourceData.height, that.limitSourceSpace)
];
that.setSourceData({
left: that.sourceData.left,
top: that.sourceData.top,
width: sourceW,
height: sourceH,
});
params = {
params: {inputPortid: that.inputDetail[that.inputPortIndex].id, // 输出口表 id
cropEn: that.cropEn, // 视频裁剪使能 0：不使能；1：使能；scaleEn: scaleEn_, // 视频缩放使能 0：不使能；1：使能；// scaleEn 暂定始终发 1
offsetEn: offsetEn_, // 视频偏移使能 0：不使能；1：使能；// offsetEn 参数只有界面有偏移量就发 1
// offsetEn: that.scaleOffsetFlag ? 1 : 0, // 视频偏移使能 0：不使能；1：使能；// offsetEn 参数只有界面有偏移量就发 1
cropX: 0, // 裁剪起始左上角横坐标 X
cropY: 0, // 裁剪起始左上角纵坐标 Y
cropWidth: that.cut.w, // 裁剪宽度
cropHeight: that.cut.h, // 裁剪高度
scaleWidth: that.sourceData.width, // 缩放宽度
scaleHeight: that.sourceData.height, // 缩放高度
offsetX: Math.round(that.sourceData.left - gridLeft), // 视频源横向偏移量 that.sourceData.left
offsetY: Math.round(that.sourceData.top - gridTop), // 视频源纵向偏移量 that.sourceData.top
x: Math.round(that.sourceData.left - gridLeft), // 视频源左上角横坐标 x
y: Math.round(that.sourceData.top - gridTop), // 视频源左上角纵坐标 y
},
success (res) {
// that.setCut({
// cutLeft: 0,
// cutTop: 0,
// cutWidth: that.sourceData.width,
// cutHeight: that.sourceData.height,
// });
canvas.forEachObject(obj => {if (obj.id == "source") {canvas.remove(obj);
}
});
that.initSource(that.sourceData);
sourceCanvas.set({
hoverCursor: "pointer",
selectable: true,
evented: true,
});
canvas.setActiveObject(sourceCanvas);
canvas.requestRenderAll();
bus.$emit("refreshChange");
that.scaleOffsetFlag = false;
},
error (res) {that.scaleOffsetFlag = false;},
};
}
that.$store.dispatch("saveSource", params);
}
}
},
// 点击空白局部长按拖动箱体区域
"mouse:move": function (e) {
// var that = this;
let x = e.pointer.x;
let y = e.pointer.y;
that.moveMouseX = x;
that.moveMouseY = y;
let p = e.target;
// console.log('鼠标按下触发滑动增加箱体条件', isdrawBox, rightKey)
requestAnimationFrame(() => {//console.log("单个增加这里不应该进入", isdrawBox, rightKey);
if (isdrawBox && rightKey && firstAdd != "") {
// 代表此时为增加箱体按下还未放开，可进行拖动增加多个箱体
var drawWidth = Math.abs(x - startDrawX);
var drawHeight = Math.abs(y - startDrawY);
if (drawWidth < 30 && drawHeight < 30) {//console.log(drawWidth, drawHeight, "避免单点过快 进入拖动增加多个箱体逻辑");
return
}
let width = 0;
let height = 0;
let boxTypeId = that.parms.id
if (that.parms.type == "onLine") {boxTypeId = that.onLineBoxType}
for (let items of that.boxTypeList) {if (items.id == boxTypeId) {
width = items.scan_w;
height = items.scan_h;
}
}
width = that.addBoxParams[0].width || 100; // 临时采纳离线默认箱体类型宽高
height = that.addBoxParams[0].height || 100; // 临时采纳离线默认箱体类型宽高
width = width * that.canvasZoom;
height = height * that.canvasZoom;
var boxColumn = Math.floor(drawWidth / width) + 1; // 拖拽生成箱体的列
var boxRow = Math.floor(drawHeight / height) + 1; // 拖拽生成箱体的行
// var zouxian = "";
// var zouxianMode = "";
if (boxRow == 1 && boxColumn >= 2) {if (x > startDrawX) {that.zouxianMode = 1;} else if (x < startDrawX) {that.zouxianMode = 2;}
} else if (boxRow >= 2 && boxColumn == 1) {if (y > startDrawY) {that.zouxianMode = 3;} else if (y < startDrawY) {that.zouxianMode = 4;}
}
// else if (boxRow == 1 && boxColumn == 1) {
// zouxian = 0;
// }
// 获取走线形式
if (that.zouxianMode == 1) {if (y >= startDrawY) {that.zouxian = 0;} else {that.zouxian = 2;}
} else if (that.zouxianMode == 2) {that.zouxian = y >= startDrawY ? 1 : 3;} else if (that.zouxianMode == 3) {that.zouxian = x >= startDrawX ? 4 : 5;} else if (that.zouxianMode == 4) {that.zouxian = x >= startDrawX ? 6 : 7;}
// if (zouxian != "") {
// that.drawLineType = zouxian;
// console.log(that.drawLineType);
// } else {
// zouxian = that.drawLineType;
// console.log(zouxian);
// }
if (that.zouxian == null || that.zouxian < 0 || that.zouxian > 7) {that.zouxian = 0;}
// 依据走线形式生成箱体轨迹数据 dragBoxes
// zouxian = 4;
var orderArray = connectionMode.orderArray(that.zouxian, boxRow, boxColumn);
that.newBoxes = [];
for (var row = 0; row < boxRow; row++) {for (var col = 0; col < boxColumn; col++) {if (boxRow == 3 && boxColumn == 3) { }
var box = {
// color: backgroundColor,
width: width / that.canvasZoom,
height: height / that.canvasZoom,
index: 1 + orderArray[row][col],
// ratioX:ratioX,
// ratioY:ratioY,
};
// 获取几行几列箱体最左上角坐标
var startX = startDrawX;
var startY = startDrawY;
if (that.zouxian == 1 || that.zouxian == 5) {startX = startX - width * (boxColumn - 1);
} else if (that.zouxian == 2 || that.zouxian == 6) {startY = startY - height * (boxRow - 1);
} else if (that.zouxian == 3 || that.zouxian == 7) {startX = startX - width * (boxColumn - 1);
startY = startY - height * (boxRow - 1);
}
box.x = (startX + width * col) / that.canvasZoom;
box.y = (startY + height * row) / that.canvasZoom;
// 超出区域暗藏
var top = Math.abs(box.y);
var right = width;
var down = height;
var left = Math.abs(box.x);
if (box.x < 0 && box.y >= 0) {top = 0;} else if (box.x >= 0 && box.y < 0) {left = 0;} else if (box.x >= 0 && box.y >= 0) {
top = 0;
left = 0;
}
box.clipTop = top;
box.clipRight = right;
box.clipDown = down;
box.clipLeft = left;
box.boxFileId = that.boxType; // 箱体类型 id
box.type = that.boxType;
box.boxStatus = that.parms.type == "offline" ? 1 : 2;
box.networkPort = that.parms.index;
box.portId = that.parms.portId
box.rotationAngle = that.addAngle;
box.areaId = that.areaId;
box.slotId = that.parms.slotId;
box.huadongbs = true;
that.newBoxes.push(box);
}
}
// that.newBoxes.splice(0,1)
let networkPort = that.parms.index; // 网口
let indexIndex = that.allData.filter(function (obj, i) {return obj.networkPort == networkPort;});
let _index = indexIndex.length // 序号
let addzaixianbox = that.newBoxes.length + 1
if (that.parms.type == "onLine") {
let canAddBox = that.parms.list.length - indexIndex.length
if (addzaixianbox > canAddBox) {
that.$message({
duration: 2000,
message: that.$t('ExceedingTheLoadOfTheBox'),
type: "error",
});
let arrSort = that.newBoxes.sort((a, b) => {return a.index - b.index});
that.newBoxes = arrSort.slice(0, canAddBox)
}
}
var frameIn = that.frameMessage;
var colorDep = that.deepcolorMessage;
//console.log(frameIn + "_" + colorDep);
var dzWidth = 0;
// 带载能力限度
for (var i = 0; i < indexIndex.length; i++) {dzWidth = dzWidth + indexIndex[i].width * indexIndex[i].height * frameIn * colorDep;
}
for (var j = 0; j < that.newBoxes.length; j++) {dzWidth = dzWidth + that.newBoxes[j].width * that.newBoxes[j].height * frameIn * colorDep;
if (dzWidth > 1024 * 1024 * 930) {
that.$message({
duration: 2000,
message: that.$t('ExceedingTheLoadOfTheBox'),
type: "error",
});
if (j == 0) {that.newBoxes = []
} else {let arrSort = that.newBoxes.sort((a, b) => {return a.index - b.index});
that.newBoxes = arrSort.slice(0, j);
}
}
}
canvas.forEachObject((obj, i) => {if (obj.huadongbs) {canvas.remove(obj);
}
});
if (that.newBoxes.length > 0) {for (var i = 0; i < that.newBoxes.length; i++) {that.newBoxes[i].index = _index + that.newBoxes[i].index;
let yesSddBox = that.groupAdd(that.newBoxes[i], canvas);
canvas.add(yesSddBox);
console.log('mouse:move 箱体滑动连线', that.newBoxes)
}
that.initLines(that.newBoxes, canvas, "箱体滑动连线");
}
}
if (!isdrawBox) {that.newBoxes = [];
}
});
if (p) {//console.log('鼠标移开虚线追随', p)
if (that.isChangeLine && that.startPort.x) {
// 批改自定义连线
that.endPort = {
networkPort: p.networkPort,
id: p.id,
index: p.index,
x: p.id == that.startPort.id ? x / that.canvasZoom : parseFloat(p.left),
y: p.id == that.startPort.id ? y / that.canvasZoom : parseFloat(p.top),
};
// console.log(that.endPort.x);
canvas.forEachObject((obj, i) => {if ((obj.strokeDashArray && obj.strokeDashArray.length != 0) || obj.jt) {
// 删除虚线和箭头
canvas.remove(obj);
}
});
that.lineDash = that.makeLine([that.startPort.x, that.startPort.y, that.endPort.x, that.endPort.y],
"",
[3, 2],
"",
that.startPort.id,
that.endPort.id
);
canvas.add(that.lineDash);
that.drawArrow(
canvas,
that.startPort.x,
that.startPort.y,
(that.startPort.x + that.endPort.x) / 2,
(that.startPort.y + that.endPort.y) / 2,
30,
10,
1,
"#fff",
that.startPort.id,
that.endPort.id
);
canvas.renderAll();}
// 鼠标滑入分组时，分组高亮显示
if (p.type == "group" && p.groupId != "box") {
that.hoverGroupFlag = true;
p._objects.forEach(o => {o._objects[0].set({stroke: "#0099FF",})
})
canvas.renderAll();}
} else {if (that.isChangeLine && that.startPort.x) {
// 批改自定义连线
console.log("鼠标挪动查看终点坐标", that.startPort.x);
that.endPort = {x: parseFloat(x) / that.canvasZoom,
y: parseFloat(y) / that.canvasZoom,
};
canvas.forEachObject((obj, i) => {if ((obj.strokeDashArray && obj.strokeDashArray.length != 0) || obj.jt) {
// 删除虚线和箭头
canvas.remove(obj);
}
});
that.lineDash = that.makeLine([that.startPort.x, that.startPort.y, that.endPort.x, that.endPort.y],
"",
[3, 2],
"",
that.startPort.id,
that.endPort.id,
that.startPort.id,
that.endPort.id
);
canvas.add(that.lineDash);
that.drawArrow(
canvas,
that.startPort.x,
that.startPort.y,
(that.startPort.x + that.endPort.x) / 2,
(that.startPort.y + that.endPort.y) / 2,
30,
10,
1,
"#fff",
that.startPort.id,
that.endPort.id
);
canvas.renderAll();}
}
/* -----------start 此处为 增加箱体状态箱体追随 ------------- */
if (firstAdd && rightKey) {firstAdd.set({ visible: true, left: x / parseFloat(that.canvasZoom), top: y / parseFloat(that.canvasZoom) }).setCoords();
canvas.renderAll();
bus.$emit("getRightBoxDetail", firstAdd, that.boxType, that.parms.type);
}
/* -----------start 此处为 增加箱体状态箱体追随 ------------- */
},
// 鼠标滚动画布放大放大
"mouse:wheel": function (e) { },
"mouse:over": function (e) {
let t = e.target;
if (t) {if (t.type == "circle") {t.set({ radius: 6});
} else {t._objects && t._objects[0].set({stroke: "#0099FF",});
t.set({stroke: "#0099FF",});
that.allData.forEach((k, h) => {if (t.networkPort == k.networkPort && t.index == k.index) {
let parm = k
parm.aCoords = t.aCoords
parm.angle = t.angle
bus.$emit("getBoxDetail", k, true);
}
});
}
canvas.renderAll();}
if (firstAdd) {//console.log('进入画布', true)
rightKey = true;
firstAdd.set({visible: true});
canvas.renderAll(firstAdd);
}
},
// 来到画布
"mouse:out": function (e) {
let t = e.target;
if (t) {t._objects && t._objects[0].set({stroke: "#136094",});
let act = canvas.getActiveObject();
if (act && act.id == t.id) {t._objects && t._objects[0].set({stroke: "#0099FF"});
}
bus.$emit("getBoxDetail", {}, false);
if (t.type == "circle") {t.set({ radius: 4});
}
if (that.hoverGroupFlag) {
// 鼠标滑入分组时，分组高亮显示
if (t.type == "group" && t.groupId != "box") {
t._objects.forEach(o => {o._objects[0].set({stroke: "#136094",})
})
that.hoverGroupFlag = false;
}
}
canvas.renderAll();}
//that.isdrawBox = false
if (firstAdd && !that.isMouseoeut(e.e.x, e.e.y)) {if (!isdrawBox) {rightKey = false;}
//console.log('来到画布', false)
canvas.discardActiveObject();
firstAdd.set({visible: false});
canvas.renderAll(firstAdd);
}
},
"selection:created": function (e) {//console.log('选中数据', e)
},
"before:selection:cleared": function (e) {if (that.imrotat) {//console.log('cleared 革除数据', e)
that.getboxList();
that.getboxList(false, () => {that.imrotat = false});
}
},
});
fabric.Group.prototype.hasControls = true;
canvas.selectionLineWidth = 3;
fabric.Group.prototype.setControlsVisibility({
mt: false,
mb: false,
bl: false,
br: false,
tl: false,
tr: false,
mr: false,
ml: false,
mtr: true,
});
canvas.preserveObjectStacking = false;
},
getDirection (angle) {if ([0, 180, 360].indexOf(Number(angle)) > -1) {return 'h';} else {return 'v';}
},
get8Point (data) {
// tlX, tlY, blX, blY, trX, trY, brX, brY
if (data.rotationAngle / 90 % 2 == 1) {
return [
data.x - data.height / 2, data.y - data.width / 2, data.x - data.height / 2, data.y + data.width / 2,
data.x + data.height / 2, data.y - data.width / 2, data.x + data.height / 2, data.y + data.width / 2
];
} else {
return [
data.x - data.width / 2, data.y - data.height / 2, data.x - data.width / 2, data.y + data.height / 2,
data.x + data.width / 2, data.y - data.height / 2, data.x + data.width / 2, data.y + data.height / 2
];
}
},
getMoveBox4Point (moveBox, type) {
// moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY
if (type == "add") {if (moveBox.angle / 90 % 2 == 1) {
return [
moveBox.x - moveBox.height / 2, moveBox.x + moveBox.height / 2,
moveBox.y - moveBox.width / 2, moveBox.y + moveBox.width / 2
];
} else {
return [
moveBox.x - moveBox.width / 2, moveBox.x + moveBox.width / 2,
moveBox.y - moveBox.height / 2, moveBox.y + moveBox.height / 2
];
}
} else if (type == "move") {if (moveBox.angle / 90 % 2 == 1) {
return [
moveBox.left - moveBox.height / 2, moveBox.left + moveBox.height / 2,
moveBox.top - moveBox.width / 2, moveBox.top + moveBox.width / 2
];
} else {
return [
moveBox.left - moveBox.width / 2, moveBox.left + moveBox.width / 2,
moveBox.top - moveBox.height / 2, moveBox.top + moveBox.height / 2
];
}
}
},
adsorbentEvent (data, moveBox, direction, type) {//console.log("我进了吸附");
let [tlX, tlY, blX, blY, trX, trY, brX, brY] = this.get8Point(data);
let [moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = this.getMoveBox4Point(moveBox, type);
let leftWidth = this.canvasSize.width / 4;
if (data.id != moveBox.id && !data.groupId && [0, 90, 180, 270, 360].indexOf(Number(data.rotationAngle)) > -1) {if (Math.abs(moveBoxLX - tlX) <= this.adsorbent) { // moveBox 右边与 data 右边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 1, 3, 0, 'tl', type);
} else if (Math.abs(moveBoxLX - trX) <= this.adsorbent) { // moveBox 右边与 data 左边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 5, 7, 4, 'tl', type);
} else if (Math.abs(moveBoxRX - tlX) <= this.adsorbent) { // moveBox 左边与 data 右边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 1, 3, 0, 'tr', type);
} else if (Math.abs(moveBoxRX - trX) <= this.adsorbent) { // moveBox 左边与 data 左边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 5, 7, 4, 'tr', type);
}
if (Math.abs(moveBoxTY - tlY) <= this.adsorbent) { // moveBox 上边与 data 上边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 1, 'add', type);
} else if (Math.abs(moveBoxBY - blY) <= this.adsorbent) {// moveBox 下边与 data 下边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 3, 'reduce', type);
} else if (Math.abs(moveBoxBY - tlY) <= this.adsorbent) {// moveBox 下边与 data 上边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 1, 'reduce', type);
} else if (Math.abs(moveBoxTY - blY) <= this.adsorbent) {// moveBox 上边与 data 下边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 3, 'add', type);
}
};
},
adsorbentEvent_canvas (moveBox, direction, type) {
var canvas_width = this.canvasSize.width;
var canvas_height = this.canvasSize.height;
let [tlX, tlY, blX, blY, trX, trY, brX, brY] = [canvas_width / 4, canvas_height / 4, canvas_width / 4, canvas_height / 4 * 5,
canvas_width / 4 * 5, canvas_height / 4 * 5, canvas_width / 4 * 5, canvas_height / 4];
let [moveBoxLX, moveBoxRX, moveBoxTY, moveBoxBY] = this.getMoveBox4Point(moveBox, type);
if (Math.abs(moveBoxLX - tlX) <= this.adsorbent) { // moveBox 右边与 data 右边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 1, 3, 0, 'tl', type);
} else if (Math.abs(moveBoxLX - trX) <= this.adsorbent) { // moveBox 右边与 data 左边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 5, 7, 4, 'tl', type);
} else if (Math.abs(moveBoxRX - tlX) <= this.adsorbent) { // moveBox 左边与 data 右边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 1, 3, 0, 'tr', type);
} else if (Math.abs(moveBoxRX - trX) <= this.adsorbent) { // moveBox 左边与 data 左边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 5, 7, 4, 'tr', type);
}
if (Math.abs(moveBoxTY - tlY) <= this.adsorbent) { // moveBox 上边与 data 上边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 1, 'add', type);
} else if (Math.abs(moveBoxBY - blY) <= this.adsorbent) {// moveBox 下边与 data 下边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 3, 'reduce', type);
} else if (Math.abs(moveBoxBY - tlY) <= this.adsorbent) {// moveBox 下边与 data 上边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 1, 'reduce', type);
} else if (Math.abs(moveBoxTY - blY) <= this.adsorbent) {// moveBox 上边与 data 下边 平行且间隔小于 that.adsorbent
this.adsorbentToBox(moveBox, direction, tlX, tlY, blX, blY, trX, trY, brX, brY, 2, 6, 3, 'add', type);
}
// if (Math.abs(moveBoxLX - leftWidth) <= this.adsorbent) { //moveBox 右边与画布右边
// this.adsorbentToBox(moveBox, direction, leftWidth, moveBoxTY, leftWidth, moveBoxBY, leftWidth, moveBoxBY, leftWidth, moveBoxTY, 1, 3, 0, 'tl', type);
// } else if (Math.abs(moveBoxRX - leftWidth) <= this.adsorbent) { //moveBox 左边与画布左侧邻近
// this.adsorbentToBox(moveBox, direction, leftWidth, moveBoxTY, leftWidth, moveBoxBY, leftWidth, moveBoxBY, leftWidth, moveBoxTY, 1, 3, 0, 'tr', type);
// } else if (Math.abs(moveBoxLX - leftWidth * 5) <= this.adsorbent) { //moveBox 右边与画布右侧
// this.adsorbentToBox(moveBox, direction, leftWidth * 5, moveBoxTY, leftWidth * 5, moveBoxBY, leftWidth * 5, moveBoxBY, leftWidth * 5, moveBoxTY, 5, 7, 4, 'tl', type);
// } else if (Math.abs(moveBoxRX - leftWidth * 5) <= this.adsorbent) { //moveBox 左边与画布右侧
// this.adsorbentToBox(moveBox, direction, leftWidth * 5, moveBoxTY, leftWidth * 5, moveBoxBY, leftWidth * 5, moveBoxBY, leftWidth * 5, moveBoxTY, 5, 7, 4, 'tr', type);
// }
// if (Math.abs(moveBoxTY - leftWidth) <= this.adsorbent) { //moave 上边与画布上方
// this.adsorbentToBox(moveBox, direction, moveBoxLX, leftWidth, moveBoxLX, leftWidth, moveBoxRX, leftWidth, moveBoxRX, leftWidth, 2, 6, 1, 'add', type);
// }
},
moveSourceByKeyboard () {sourceCanvas.set(this.sourceData);
canvas.renderAll();
this.saveSourceMoving(this.sourceData);
},
saveSourceMoving (p) {
let that = this;
let [gridLeft, gridTop] = [
this.canvasSize.width / 4,
this.canvasSize.height / 4
];
let params = {
params: {inputPortid: that.inputDetail[that.inputPortIndex].id, // 输出口表 id
cropEn: that.cropEn, // 视频裁剪使能 0：不使能；1：使能；scaleEn: 1, // 视频缩放使能 0：不使能；1：使能；// scaleEn 暂定始终发 1
offsetEn: 1, // 视频偏移使能 0：不使能；1：使能；// offsetEn 参数只有界面有偏移量就发 1
cropX: 0, // 裁剪起始左上角横坐标 X
cropY: 0, // 裁剪起始左上角纵坐标 Y
cropWidth: p.width, // 裁剪宽度
cropHeight: p.height, // 裁剪高度
scaleWidth: p.width, // 缩放宽度
scaleHeight: p.height, // 缩放高度
offsetX: Math.round(p.left - that.originData.left), // 视频源横向偏移量
offsetY: Math.round(p.top - that.originData.top), // 视频源纵向偏移量
x: Math.round(p.left - gridLeft), // 视频源左上角横坐标 x
y: Math.round(p.top - gridTop), // 视频源左上角纵坐标 y
},
success (res) {bus.$emit("refreshChange");
},
error (res) {},};
that.$store.dispatch("saveSource", params);
},
// 初始化生成矩形
initRects (list, canvas) {list = list.sort((a, b) => {return a.index - b.index;});
for (var i = 0; i < list.length; i++) {
let tb = this.makeRect(list[i].x,
list[i].y,
{networkPort: list[i].networkPort,
index: list[i].index,
},
list[i].width,
list[i].height,
list[i].rotationAngle || 0,
list[i].groupId,
list[i].id,
list[i].boxFileId
);
canvas.add(tb);
}
},
// 初始化中心点, 直角三角形, 文本
initMerge (list, canvas, type) {list = list.sort((a, b) => {return a.index - b.index;});
for (var i = 0; i < list.length; i++) {
// 中心点
let tb2 = this.makeCircle2(list[i]);
canvas.add(tb2);
//tb2.bringToFront()
// 直角三角形
//if (list[i].operateType != 'moving' && list[i].operateType != 'rotating') {let tPath = this.creatPath(list[i], i, type);
canvas.add(tPath);
// 初始化生成文本
let tex = list[i].networkPort + "_" + list[i].index;
let tb = this.makeText(tex, list[i], i, type);
canvas.add(tb);
//}
}
},
handleDataMovingRotating (type) {
let that = this;
let activeSelection = canvas.getActiveObject();
let activeRectIds = [];
if (activeSelection) {if (activeSelection.isCheckTo) {activeRectIds.push(activeSelection.id);
} else {
let objs = activeSelection._objects;
objs.forEach((o) => {if (o.type == "group" && o.groupId != "box") {
let items = o._objects;
items.forEach((item) => {activeRectIds.push(item.id);
});
} else {activeRectIds.push(o.id);
}
});
}
}
canvas.forEachObject(function (obj, i) {if (["triangle", "line"].indexOf(obj.type) != -1) {
if ((obj.type == "line" && obj.startId && obj.strokeDashArray.length == 0) ||
obj.type == "triangle"
) {
let startId = obj.startId;
let endId = obj.endId;
if (activeRectIds.indexOf(startId) >= 0 ||
activeRectIds.indexOf(endId) >= 0
) {let [x1, y1, x2, y2] = [0, 0, 0, 0];
that.allData.forEach((data) => {if (data.id == startId) {[x1, y1] = [data.x, data.y];
} else if (data.id == endId) {[x2, y2] = [data.x, data.y];
}
});
if (obj.type == "line") {
obj
.set({
x1,
y1,
x2,
y2,
})
.setCoords();} else if (obj.type == "triangle") {
obj
.set({angle: that.getAngle(x1, y1, (x1 + x2) / 2, (y1 + y2) / 2),
left: (x1 + x2) / 2,
top: (y1 + y2) / 2,
})
.setCoords();}
}
}
}
});
},
// 从新连线
handleData2 (type, isLine16) {let hiddenGroupIds = [];
if (!isLine16) {for (let i = 0; i < this.groupList.length; i++) {if (this.groupList[i].hidden) {hiddenGroupIds.push(this.groupList[i].id);
}
}
}
// 获取所有箱体数据处理 start
canvas.forEachObject(function (obj, i) {if (["triangle", "line"].indexOf(obj.type) != -1) {canvas.remove(obj);
}
});
var typeWk = [];
this.allData.forEach((item) => {if (typeWk.indexOf(item.networkPort) == -1) {typeWk.push(item.networkPort);
}
});
//console.log('一共有几个网口', typeWk)
typeWk.forEach((item) => {var newarr = this.allData.filter(function (obj) {return obj.networkPort == item;});
newarr = newarr.sort((a, b) => {return a.index - b.index;});
newarr.forEach((m, n) => {m.index = n + 1;});
let result = [];
newarr.forEach((item) => {if (hiddenGroupIds.indexOf(item.groupId) == -1) {result.push(item);
}
});
this.initLines(result, canvas, type);
});
},
showHiddenLines () {
// 获取所有箱体数据处理 start
canvas.forEachObject(function (obj, i) {if (["triangle", "line"].indexOf(obj.type) != -1) {canvas.remove(obj);
}
});
var typeWk = [];
this.allData.forEach((item) => {if (typeWk.indexOf(item.networkPort) == -1) {typeWk.push(item.networkPort);
}
});
//console.log('一共有几个网口', typeWk)
typeWk.forEach((item) => {var newarr = this.allData.filter(function (obj) {return obj.networkPort == item;});
newarr = newarr.sort((a, b) => {return a.index - b.index;});
newarr.forEach((m, n) => {m.index = n + 1;});
this.initLines(newarr, canvas, "");
});
},
// 初始化生成线段
initLines (list, canvas, type) {list = list.sort((a, b) => {return a.index - b.index;});
for (var i = 0; i < list.length; i++) {var dot = list[i];
var todot = list[i];
if (parseInt(i) + 1 < list.length) {todot = list[parseInt(i) + 1];
}
if (parseInt(i) + 1 != list.length) {lineArr["AAA" + i] = this.makeLine([dot.x, dot.y, todot.x, todot.y],
list[i],
[],
"",
dot.id ? dot.id : dot.boxId,
todot.id ? todot.id : todot.boxId
);
canvas.add(lineArr["AAA" + i]);
triangle["AAA" + i] = this.createArrowHead(
dot.x,
dot.y,
(todot.x + dot.x) / 2,
(todot.y + dot.y) / 2,
10,
10,
list[i],
type,
dot.id ? dot.id : dot.boxId,
todot.id ? todot.id : todot.boxId
);
canvas.add(triangle["AAA" + i]);
}
}
},
// rgb 格局转换为 rgba, 透明度取 0.5
getRGBA (rgb) {if (rgb == null) {return;}
if (rgb.indexOf("rgb(") == 0) {let result = ["rgba("];
let startIndex = 4;
let endIndex = rgb.indexOf(")");
result.push(rgb.substring(startIndex, endIndex));
result.push(", 0.5");
return result.join("");
} else {return rgb;}
},
// 初始化 canvas 画布背景点
initGrid () {var canvas = document.getElementById("canGrid");
canvas.width = this.canvasSize.width
? this.canvasSize.width * this.canvasZoom
: 1920 * this.canvasZoom;
canvas.height = this.canvasSize.height
? this.canvasSize.height * this.canvasZoom
: 1080 * this.canvasZoom;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (this.gridShow) {
let space = this.canvasSpace * this.canvasZoom; // 网格距离
let size = 1; // 网格点宽高
let color = this.getRGBA(this.canvasColor); // 网格点色彩
if (space < 5) {ctx.clearRect(0, 0, canvas.width, canvas.height);
return;
}
let numX = Math.floor(canvas.width / space);
let numY = Math.floor(canvas.height / space);
for (let j = 1; j < numY; j++) {for (let i = 1; i < numX; i++) {ctx.beginPath();
ctx.fillStyle = color;
ctx.fillRect(space * i, space * j, size, size);
}
}
}
},
resizeDown (e, type) {
var that = this;
console.log(that.cutData);
this.cutMaskFlag = true;
this.cutMaskType = type;
this.cutRate =
(this.source_crop.width - parseInt(this.maskLeft) - parseInt(this.maskRight)) /
(this.source_crop.height - parseInt(this.maskTop) - parseInt(this.maskBottom));
console.log(this.cutRate);
},
resizeMoving () {if (this.cutMaskFlag) {this.setEditCutFlag(true);
let type = this.cutMaskType;
let rate = this.cutRate;
let [mouse, maskL, maskT] = [
this.mousePosition,
this.getOffsetLeft(document.getElementById("maskSourceCut")),
this.getOffsetTop(document.getElementById("maskSourceCut"))
// this.source_crop.x + this.canvasSize.width / 4 + 100,
// this.source_crop.y + this.canvasSize.height / 4 + 92,
];
let [greenMaskL, greenMaskT] = [parseInt(document.getElementById("maskSourceCut").style.left * this.canvasZoom),
parseInt(document.getElementById("maskSourceCut").style.top * this.canvasZoom)];
// console.log(greenMaskT);
// return;
if (type.indexOf("c") == -1) {
// 等比例裁剪
console.log(type);
if (
type == "lt" &&
mouse.y >= maskT &&
mouse.y <=
maskT +
this.source_crop.height * this.canvasZoom -
this.cutMinHeight * this.canvasZoom -
parseInt(this.maskBottom) &&
mouse.x >= maskL &&
mouse.x <=
maskL + this.source_crop.width * this.canvasZoom - this.cutMinWidth * this.canvasZoom - parseInt(this.maskRight)
) {if ((mouse.y - maskT) * rate >= mouse.x - maskL) {
this.maskLeft = mouse.x - maskL + "px";
let width =
this.source_crop.width * this.canvasZoom -
parseInt(this.maskLeft) -
parseInt(this.maskRight);
let height = width / rate;
this.maskTop =
this.source_crop.height * this.canvasZoom - parseInt(this.maskBottom) - height + "px";
} else {
this.maskTop = mouse.y - maskT + "px";
let height =
this.source_crop.height * this.canvasZoom -
parseInt(this.maskTop) -
parseInt(this.maskBottom);
let width = height * rate;
this.maskLeft =
this.source_crop.width * this.canvasZoom - parseInt(this.maskRight) - width + "px";
}
} else if (
type == "rt" &&
mouse.y > maskT &&
mouse.y <
maskT +
this.source_crop.height * this.canvasZoom -
this.cutMinHeight * this.canvasZoom -
parseInt(this.maskBottom) &&
mouse.x < maskL + this.source_crop.width * this.canvasZoom &&
mouse.x > maskL + parseInt(this.maskLeft) + this.cutMinWidth * this.canvasZoom
) {if ((mouse.y - maskT) * rate >= maskL + this.source_crop.width * this.canvasZoom - mouse.x) {
this.maskRight = maskL + this.source_crop.width * this.canvasZoom - mouse.x + "px";
let width =
this.source_crop.width * this.canvasZoom -
parseInt(this.maskLeft) -
parseInt(this.maskRight);
let height = width / rate;
this.maskTop =
this.source_crop.height * this.canvasZoom - parseInt(this.maskBottom) - height + "px";
} else {
this.maskTop = mouse.y - maskT + "px";
let height =
this.source_crop.height * this.canvasZoom -
parseInt(this.maskTop) -
parseInt(this.maskBottom);
let width = height * rate;
this.maskRight =
this.source_crop.width * this.canvasZoom - parseInt(this.maskLeft) - width + "px";
}
} else if (
type == "rb" &&
mouse.x < maskL + this.source_crop.width * this.canvasZoom &&
mouse.x > maskL + parseInt(this.maskLeft) + this.cutMinWidth * this.canvasZoom &&
mouse.y < maskT + this.source_crop.height * this.canvasZoom &&
mouse.y > maskT + parseInt(this.maskTop) + this.cutMinHeight * this.canvasZoom
) {console.log("我进入 rb")
if ((maskT + this.source_crop.height * this.canvasZoom - mouse.y) * rate >=
maskL + this.source_crop.width * this.canvasZoom - mouse.x
) {
this.maskRight = maskL + this.source_crop.width * this.canvasZoom - mouse.x + "px";
let width =
this.source_crop.width * this.canvasZoom -
parseInt(this.maskLeft) -
parseInt(this.maskRight);
let height = width / rate;
this.maskBottom =
this.source_crop.height * this.canvasZoom - parseInt(this.maskTop) - height + "px";
} else {
this.maskBottom = maskT + this.source_crop.height * this.canvasZoom - mouse.y + "px";
let height =
this.source_crop.height * this.canvasZoom -
parseInt(this.maskTop) -
parseInt(this.maskBottom);
let width = height * rate;
this.maskRight =
this.source_crop.width * this.canvasZoom - parseInt(this.maskLeft) - width + "px";
}
} else if (
type == "lb" &&
mouse.x > maskL &&
mouse.x <
maskL +
this.source_crop.width * this.canvasZoom -
this.cutMinWidth * this.canvasZoom -
parseInt(this.maskRight) &&
mouse.y < maskT + this.source_crop.height * this.canvasZoom &&
mouse.y > maskT + parseInt(this.maskTop) + this.cutMinHeight
) {console.log("lb");
if ((maskT + this.source_crop.height * this.canvasZoom - mouse.y) * rate >= mouse.x - maskL) {
this.maskLeft = mouse.x - maskL + "px";
// console.log(this.maskLeft);
// console.log(this.maskRight);
// return;
let width =
this.source_crop.width * this.canvasZoom -
parseInt(this.maskLeft) -
parseInt(this.maskRight);
let height = width / rate;
this.maskBottom =
this.source_crop.height * this.canvasZoom - parseInt(this.maskTop) - height + "px";
} else {console.log("down");
this.maskBottom = maskT + this.source_crop.height * this.canvasZoom - mouse.y + "px";
let height =
this.source_crop.height * this.canvasZoom -
parseInt(this.maskTop) -
parseInt(this.maskBottom);
let width = height * rate;
this.maskLeft =
this.source_crop.width * this.canvasZoom - parseInt(this.maskRight) - width + "px";
}
}
} else {
// 单边裁剪
console.log(type);
console.log(mouse);
if (
type == "ct" &&
mouse.y >= maskT &&
mouse.y <=
maskT +
this.source_crop.height * this.canvasZoom -
this.cutMinHeight * this.canvasZoom -
parseInt(this.maskBottom)
) {this.maskTop = mouse.y - maskT + "px";} else if (
type == "cb" &&
mouse.y <= maskT + this.source_crop.height * this.canvasZoom &&
mouse.y >= maskT + parseInt(this.maskTop) + this.cutMinHeight * this.canvasZoom
) {
this.maskBottom = maskT + this.source_crop.height * this.canvasZoom - mouse.y + "px";
console.log(this.maskBottom);
} else if (
type == "lc" &&
mouse.x >= maskL &&
mouse.x <=
maskL + this.source_crop.width * this.canvasZoom - this.cutMinWidth * this.canvasZoom
) {this.maskLeft = mouse.x - maskL + "px";} else if (
type == "rc" &&
mouse.x <= maskL + this.source_crop.width * this.canvasZoom &&
mouse.x >= maskL + parseInt(this.maskLeft) + this.cutMinWidth * this.canvasZoom
) {console.log(mouse.x);
this.maskRight = maskL + this.source_crop.width * this.canvasZoom - mouse.x + "px";
}
}
let canGrid = document.getElementById("canGrid");
let num = this.limitSourceSpace;
console.log(num);
let [left, top, width, height] = [this.source_crop.left + parseInt(this.maskLeft), this.source_crop.top + parseInt(this.maskTop), this.source_crop.width - parseInt(this.maskLeft) - parseInt(this.maskRight), this.source_crop.height - parseInt(this.maskTop) - parseInt(this.maskBottom)];
// // 限度上边
// if (top + height <= parseInt(canGrid.style.top) + num) {// this.maskBottom = greenMaskT + this.sourceData.height - parseInt(canGrid.style.top) - num
// }
// // 限度右边
// if (left + width <= parseInt(canGrid.style.left) + num) {// console.log("12312");
// this.maskRight = greenMaskL + this.source_crop.width - parseInt(canGrid.style.left) - num;
// }
// // 限度底边
// if (top >= parseInt(canGrid.style.top) + canGrid.height - num) {// top = parseInt(canGrid.style.top) + canGrid.height - num;
// this.maskTop = top - this.sourceData.top;
// }
// // 限度左边
// if (left >= parseInt(canGrid.style.left) + canGrid.width - num) {// console.log("12312__");
// left = parseInt(canGrid.style.left) + canGrid.width - num;
// this.maskLeft = left - this.sourceData.left;
// }
}
},
resizeMove (e, type) {// 具体逻辑见 resizeMoving},
resizeUp (e, type) {
this.cutMaskFlag = false;
let clientX = e.clientX;
let clientY = e.clientY;
this.cutMaskType = "";
this.cutRate = 1;
},
quitAddRect () {console.log("勾选敞开");
if ('canvas_online' == this.currentMode) {bus.$emit("backUpPortList", "");
this.leaveOnLine();}
this.addBoxParams = []; // 点勾选清空上次新增追随箱体
//str-- 右键退出自定义连线状态
this.isChangeLine = false;
this.startPort = {};
this.endPort = {};
this.addlineDash = 1;
//end-- 右键退出自定义连线状态
rightKey = false;
this.setActiveChangeLine(true);
canvas.forEachObject((obj, i) => {if ((obj.strokeDashArray && obj.strokeDashArray.length != 0) || obj.jt) {canvas.remove(obj);
}
if (obj.type == "group" && obj.groupId == "box") {obj.set({ selectable: true});
}
});
this.handleData2('')
canvas.renderAll();
if (firstAdd) {canvas.discardActiveObject();
canvas.remove(firstAdd);
firstAdd = "";
}
this.setMode("canvas");
this.setCurrentMode("canvas");
},
// 增加在离线箱体前抉择网口
addRect (parms) {
//type: 离线在线, group：卡槽 index：网口
if (firstAdd) {canvas.remove(firstAdd);
firstAdd = "";
this.addBoxParams = [];
this.newBoxes = [];}
this.addAngle = 0;
this.parms = parms;
let ids = {};
rightKey = true;
if (parms.type == "offline") {if (!parms.group) {
// 没选卡槽 网口
ids = {
networkPort: 0,
index: 0,
portId: 0,
slotId: 0
};
} else {
ids = {
networkPort: parms.index,
index: 0,
portId: parms.portId,
slotId: parms.slotId
};
}
let boxList = this.boxTypeList.filter((obj, i) => {return obj.id == this.boxType;});
let par = {width: boxList.length>0?boxList[0].scan_w : 100,
height: boxList.length>0?boxList[0].scan_h : 100,
type: boxList.length>0?boxList[0].name :5,
x: -100,
y: -100,
boxFileId: this.boxType,
boxStatus: 1,
rotationAngle: 0,
visible: true,
};
let arr = Object.assign(ids, par);
this.addBoxParams.push(arr);
firstAdd = this.groupAdd(arr, canvas);
canvas.add(firstAdd);
}
},
clickOnLine (item) {
var _this = this;
let params = {
params: {
nSlotId: item.slotId,
nPortId: item.portId,
method: 2
},
success (res) { },
error (res) {// _this.$message.error(_this.$t('findBoxFileFail'));
},
};
_this.$store.dispatch("sendOSD", params);
},
leaveOnLine () {
var _this = this;
let params = {
params: {method: 0},
success (res) { },
error (res) {// _this.$message.error(_this.$t('findBoxFileFail'));
},
};
_this.$store.dispatch("sendOSD", params);
},
// 增加在线箱体前抉择网口
addOnlineRect (parms, type) {
this.addAngle = 0;
// bus.$emit("updatePortList","1");
var that = this;
if (firstAdd) {canvas.remove(firstAdd);
firstAdd = "";
this.addBoxParams = [];}
// parms.networkPort = parms.portId;
this.parms = {
type: "onLine",
group: parms.networkPort,
index: parms.networkPort,
portId: parms.portId,
slotId: parms.slotId,
list: parms.list,
networkPort: parms.networkPort,
rotationAngle: 0,
};
rightKey = true;
let indexIndex = that.allData.filter(function (obj, i) {return obj.networkPort == parms.networkPort;});
let ids = {
networkPort: parms.networkPort,
index: 0,
};
let _index = indexIndex.length + 1;
this.onlineBoxLength = parms.list.length;
if (_index > this.onlineBoxLength) {this.leaveOnLine();
if (type != "1") {this.setCurrentMode("canvas");
this.quitAddRect();
this.setShowBack(false);
this.setAddBoxMode(false);
this.setMaskLeftMenu(false);
this.setActiveChangeLine(true);
this.setActiveConnectLine(true);
this.$message({
duration: 2000,
message: that.$t('ExceedingTheLoadOfTheBox'),
type: "error",
});
} else {
this.$message({
duration: 2000,
message: that.$t("TheNetPortWithLoadBoxHasBeenAdded"),
type: "error",
});
}
return
}
this.clickOnLine(parms);
var addData = parms.list[_index - 1];
let addRectWidth = 100;
let addRectHeight = 100;
for (let items of this.boxTypeList) {if (items.main_type == addData.mainType) {
addRectWidth = items.scan_w;
addRectHeight = items.scan_h;
this.onLineBoxType = items.id; // 箱体类型 id
}
}
if (this.onLineBoxType == "") {
this.$message({
duration: 2000,
message: this.$t('checkBoxFile'),
type: "error",
});
this.setCurrentMode("canvas");
return;
}
let par = {
width: addRectWidth,
height: addRectHeight,
type: this.onLineBoxType,
x: -100,
y: -100,
boxFileId: this.onLineBoxType,
boxStatus: 2,
rotationAngle: 0,
visible: true,
portId: parms.portId,
slotId: parms.slotId,
};
let arr = Object.assign(ids, par);
this.addBoxParams.push(arr);
firstAdd = this.groupAdd(arr, canvas);
canvas.add(firstAdd);
},
getOffsetLeft (el) {
// 获取鼠标 X 轴
el = el.getBoundingClientRect();
return el.left + window.scrollX;
},
getOffsetTop (el) {
// 获取鼠标 Y 轴
el = el.getBoundingClientRect();
return el.top + window.scrollY;
},
activeBoxOption (array, type) {
let that = this;
array.forEach((pp) => {canvas.forEachObject((obj, i) => {let rectList = that.allData.filter(function (objs, i) {return objs.id == obj.id;});
if (obj.id == pp.id) {if (obj.type == "circle") {
obj.set({left: rectList[0].x,
top: rectList[0].y,
angle: rectList[0].rotationAngle,
});
//console.log(i + 1, '输入多个矩形坐标角度：', pp.rotationAngle, obj.type, obj, pp)
} else {let x1 = rectList[0].x - rectList[0].width / 2;
let y1 = rectList[0].y - rectList[0].height / 2;
let prot = that.rotatoNi(
x1,
y1,
rectList[0].x,
rectList[0].y,
parseInt(rectList[0].rotationAngle)
);
let x = (prot.x - rectList[0].x) / 1.5 + rectList[0].x;
let y = (prot.y - rectList[0].y) / 1.5 + rectList[0].y;
if (obj.type == "textbox") {
obj.set({
left: x,
top: y,
});
}
if (obj.type == "path") {//console.log(rectList, '以后箱体旋转类型：', obj.type, obj)
obj.set({
left: prot.x,
top: prot.y,
angle: rectList[0].rotationAngle,
});
}
}
}
});
});
if (array.length > 1) {canvas.forEachObject((obj, i) => {if (["triangle", "line"].indexOf(obj.type) != -1) {canvas.remove(obj);
}
});
that.initLines(that.allData, canvas, "123");
}
},
changeGroupList (groupList) {
var that = this;
groupList.forEach(item => {if (item.isShow == "0") {item.hidden = false;} else if (item.isShow == "1") {item.hidden = true;}
});
that.setGroupList(groupList);
// for (let i = 0; i < groupList.length; i++) {// if (groupList[i].areaId == that.areaId && groupList[i].id == groupId) {// that.setSelectGroupIndex(i);
// break;
// }
// }
},
},
};
</script>
<style lang="less" scoped>
#canvasContainer {
position: relative;
width: calc(100% + 100px);
height: calc(100% + 100px);
}
#canvasBox {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
#canGrid {
background: #262829;
position: absolute;
overflow: hidden;
z-index: 1;
}
/deep/ .canvas-container {
position: absolute !important;
z-index: 2 !important;
}
#cutSourceZone {
position: absolute;
display: none;
}
#maskArea {
z-index: 4;
display: none;
position: absolute;
border: white dashed 1px;
}
#maskSourceCut {
// background-color: green;
opacity: 0.5;
z-index: 5;
display: none;
position: absolute;
.mask {
position: absolute;
background: #409eff;
opacity: 0.3;
z-index: 6;
.hander {
position: absolute;
background-color: white;
border-radius: 5px;
}
.hander_lt {
left: -5px;
top: -5px;
cursor: se-resize;
}
.hander_ct {
height: 10px;
left: 50%;
top: -5px;
transform: translateX(-50%);
border-radius: 5px 5px 0 0;
cursor: s-resize;
}
.hander_rt {
right: -5px;
top: -5px;
cursor: sw-resize;
}
.hander_rc {
width: 10px;
right: -5px;
top: 50%;
transform: translateY(-50%);
border-radius: 0 5px 5px 0;
cursor: w-resize;
}
.hander_rb {
right: -5px;
bottom: -5px;
cursor: nw-resize;
}
.hander_cb {
height: 5px;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
border-radius: 0 0 5px 5px;
cursor: n-resize;
}
.hander_lb {
left: -5px;
bottom: -5px;
cursor: ne-resize;
}
.hander_lc {
width: 10px;
left: -5px;
top: 50%;
transform: translateY(-50%);
border-radius: 5px 0 0 5px;
cursor: e-resize;
}
.maskCenter {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
background-color: #409eff;
}
}
}
</style>