<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 yesSddBoximport 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>