|
|
|
|
@ -6,23 +6,27 @@
|
|
|
|
|
import video_type_1 from "@/assets/modelSetting/video_type_1.png";
|
|
|
|
|
import video_type_2 from "@/assets/modelSetting/video_type_2.png";
|
|
|
|
|
import video_type_3 from "@/assets/modelSetting/video_type_3.png";
|
|
|
|
|
import device_video_bg from "@/assets/modelSetting/device_video_bg.png";
|
|
|
|
|
import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png";
|
|
|
|
|
import notInVisableIcon from "@/assets/modelSetting/notInVisableIcon.png";
|
|
|
|
|
|
|
|
|
|
import { v4 as uuid } from "uuid";
|
|
|
|
|
|
|
|
|
|
const deviceInfoKey = "deviceInfo";
|
|
|
|
|
|
|
|
|
|
export const useDeviceObject = () => {
|
|
|
|
|
// 移动到画布上的设备对象的相对坐标
|
|
|
|
|
function getDragDeviceObjectOrdinate(event, canvasObj, deviceObj) {
|
|
|
|
|
const { left, top } = canvasObj
|
|
|
|
|
.getSelectionElement()
|
|
|
|
|
.getBoundingClientRect();
|
|
|
|
|
// 移动到画布上的设备对象的相对坐标，使用相对图片的左边系，而不是画布的坐标系
|
|
|
|
|
function getDragDeviceObjectOrdinate(event, viewObj, deviceObj) {
|
|
|
|
|
// const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
|
|
|
|
|
const { left, top } = viewObj.getSelectionElement().getBoundingClientRect();
|
|
|
|
|
const point = {
|
|
|
|
|
x: event.x - left,
|
|
|
|
|
y: event.y - top
|
|
|
|
|
x: event.x - left - imgObjects.left,
|
|
|
|
|
y: event.y - top - imgObjects.top
|
|
|
|
|
};
|
|
|
|
|
const pointerVpt = canvasObj.restorePointerVpt(point);
|
|
|
|
|
const x_ordinate = pointerVpt.x - deviceObj.width / 2;
|
|
|
|
|
const y_ordinate = pointerVpt.y;
|
|
|
|
|
const pointerVpt = viewObj.restorePointerVpt(point);
|
|
|
|
|
const x_ordinate = pointerVpt.x - (deviceObj.width * deviceObj.scaleX) / 2;
|
|
|
|
|
const y_ordinate = pointerVpt.y - (deviceObj.height * deviceObj.scaleY) / 2;
|
|
|
|
|
console.log(x_ordinate, y_ordinate, "getDragDeviceObjectOrdinate");
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
@ -35,72 +39,90 @@ export const useDeviceObject = () => {
|
|
|
|
|
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
|
|
|
|
|
const startLeft =
|
|
|
|
|
(cvsObjects.width - imgObjects.width * imgObjects.scaleX) / 2;
|
|
|
|
|
(cvsObjects.width * cvsObjects.scaleX -
|
|
|
|
|
imgObjects.width * imgObjects.scaleX) /
|
|
|
|
|
2;
|
|
|
|
|
const startTop =
|
|
|
|
|
(cvsObjects.height - imgObjects.height * imgObjects.scaleY) / 2;
|
|
|
|
|
const endLeft = startLeft + imgObjects.width;
|
|
|
|
|
const endTop = startTop + imgObjects.height;
|
|
|
|
|
(cvsObjects.height * cvsObjects.scaleY -
|
|
|
|
|
imgObjects.height * imgObjects.scaleY) /
|
|
|
|
|
2;
|
|
|
|
|
const endLeft = startLeft + imgObjects.width * imgObjects.scaleX;
|
|
|
|
|
const endTop = startTop + imgObjects.height * imgObjects.scaleY;
|
|
|
|
|
return {
|
|
|
|
|
x_max: imgObjects.width * imgObjects.scaleX,
|
|
|
|
|
y_max: imgObjects.height * imgObjects.scaleY,
|
|
|
|
|
startLeft,
|
|
|
|
|
startTop,
|
|
|
|
|
endLeft,
|
|
|
|
|
endTop,
|
|
|
|
|
moveLeft: endLeft - activeObj.width * activeObj.scaleX,
|
|
|
|
|
moveTop: endTop - activeObj.height * activeObj.scaleY
|
|
|
|
|
moveLeft: endLeft - activeObj?.width * activeObj?.scaleX,
|
|
|
|
|
moveTop: endTop - activeObj?.height * activeObj?.scaleY
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 判断设备是否在可视区域内
|
|
|
|
|
function isInViewBoundaries(deviceObj, viewObj): boolean {
|
|
|
|
|
const { startLeft, startTop, moveLeft, moveTop } = fetchViewsBoundaries(
|
|
|
|
|
viewObj,
|
|
|
|
|
deviceObj
|
|
|
|
|
);
|
|
|
|
|
const { x_max, y_max } = fetchViewsBoundaries(viewObj, deviceObj);
|
|
|
|
|
const { x_ordinate, y_ordinate } = deviceObj;
|
|
|
|
|
// 获取对象的当前尺寸和位置
|
|
|
|
|
const objLeft = x_ordinate;
|
|
|
|
|
const objTop = y_ordinate;
|
|
|
|
|
|
|
|
|
|
// 限制对象在画布内移动
|
|
|
|
|
if (objLeft < startLeft) {
|
|
|
|
|
if (objLeft < 0) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objTop < startTop) {
|
|
|
|
|
if (objTop < 0) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objLeft > moveLeft) {
|
|
|
|
|
if (objLeft > x_max) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objTop > moveTop) {
|
|
|
|
|
if (objTop > y_max) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 设备对象是否移动
|
|
|
|
|
function isMoveDevice(activeObject) {
|
|
|
|
|
function isMoveDevice(activeObject, viewObj) {
|
|
|
|
|
const { x_ordinate, y_ordinate } = activeObject.get(deviceInfoKey);
|
|
|
|
|
const { startLeft, startTop } = fetchViewsBoundaries(viewObj);
|
|
|
|
|
// 误差设置为 0.1
|
|
|
|
|
const errorValue = [1, 1];
|
|
|
|
|
let x_move = true;
|
|
|
|
|
let y_move = true;
|
|
|
|
|
const x_move_value = Math.abs(
|
|
|
|
|
Number(activeObject.left) - Number(x_ordinate) - Number(startLeft)
|
|
|
|
|
);
|
|
|
|
|
const y_move_value = Math.abs(
|
|
|
|
|
Number(activeObject.top) - Number(y_ordinate) - Number(startTop)
|
|
|
|
|
);
|
|
|
|
|
console.log(
|
|
|
|
|
"startLeft" + startLeft,
|
|
|
|
|
"startTop" + startTop,
|
|
|
|
|
"isMoveDevice",
|
|
|
|
|
"x_move_value" + x_move_value,
|
|
|
|
|
"y_move_value" + y_move_value,
|
|
|
|
|
activeObject.left,
|
|
|
|
|
x_ordinate,
|
|
|
|
|
activeObject.top,
|
|
|
|
|
y_ordinate,
|
|
|
|
|
Math.abs(Number(activeObject.top) - Number(y_ordinate)),
|
|
|
|
|
Math.abs(Number(activeObject.left) - Number(x_ordinate))
|
|
|
|
|
Math.abs(
|
|
|
|
|
Number(activeObject.top) - Number(y_ordinate) - Number(startTop)
|
|
|
|
|
),
|
|
|
|
|
Math.abs(
|
|
|
|
|
Number(activeObject.left) - Number(x_ordinate) - Number(startLeft)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
if (
|
|
|
|
|
Math.abs(Number(activeObject.left) - Number(x_ordinate)) < errorValue[0]
|
|
|
|
|
) {
|
|
|
|
|
// TODO 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
|
|
|
|
|
if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (x_move_value < errorValue[0]) {
|
|
|
|
|
x_move = false;
|
|
|
|
|
}
|
|
|
|
|
if (
|
|
|
|
|
Math.abs(Number(activeObject.top) - Number(y_ordinate)) < errorValue[1]
|
|
|
|
|
) {
|
|
|
|
|
if (y_move_value < errorValue[1]) {
|
|
|
|
|
y_move = false;
|
|
|
|
|
}
|
|
|
|
|
return x_move || y_move;
|
|
|
|
|
@ -111,7 +133,10 @@ export const useDeviceObject = () => {
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 初始化设备对象
|
|
|
|
|
const initDeviceGroupObjects: Record<string, any> = record => {
|
|
|
|
|
const initDeviceGroupObjects: Record<string, any> = (
|
|
|
|
|
record,
|
|
|
|
|
restDeviceItem = {}
|
|
|
|
|
) => {
|
|
|
|
|
console.log(record, "initDeviceGroupObjects");
|
|
|
|
|
// const { value } = record;
|
|
|
|
|
let iconObjectSrc = video_type_1;
|
|
|
|
|
@ -127,11 +152,20 @@ export const useDeviceObject = () => {
|
|
|
|
|
iconObjectSrc = video_type_1;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
let bgDeviceImage;
|
|
|
|
|
const fontStyle = { fill: "#333333" };
|
|
|
|
|
// 不在可视区域内的设备
|
|
|
|
|
if (record?.notInVisable) {
|
|
|
|
|
bgDeviceImage = device_video_bg_gray;
|
|
|
|
|
fontStyle.fill = "gray";
|
|
|
|
|
} else {
|
|
|
|
|
bgDeviceImage = device_video_bg;
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
id: uuid(),
|
|
|
|
|
deviceInfo: record, // 设备信息
|
|
|
|
|
left: record?.x_ordinate ? Number(record?.x_ordinate) : 0,
|
|
|
|
|
top: record?.y_ordinate ? Number(record?.y_ordinate) : 0,
|
|
|
|
|
left: record?.left ? Number(record?.left) : 0,
|
|
|
|
|
top: record?.top ? Number(record?.top) : 0,
|
|
|
|
|
selectable: true,
|
|
|
|
|
hasControls: true,
|
|
|
|
|
lockUniScaling: true, // 当设置为true，Object将无法被锁定比例进行缩放。默认值为false。
|
|
|
|
|
@ -142,8 +176,7 @@ export const useDeviceObject = () => {
|
|
|
|
|
version: "5.3.0",
|
|
|
|
|
originX: "left",
|
|
|
|
|
originY: "top",
|
|
|
|
|
|
|
|
|
|
width: 113,
|
|
|
|
|
width: 132,
|
|
|
|
|
height: 66,
|
|
|
|
|
fill: "rgb(0,0,0)",
|
|
|
|
|
stroke: null,
|
|
|
|
|
@ -174,10 +207,10 @@ export const useDeviceObject = () => {
|
|
|
|
|
version: "5.3.0",
|
|
|
|
|
originX: "left",
|
|
|
|
|
originY: "top",
|
|
|
|
|
left: -56.5,
|
|
|
|
|
left: -66,
|
|
|
|
|
top: -33,
|
|
|
|
|
width: 113,
|
|
|
|
|
height: 66,
|
|
|
|
|
width: 264,
|
|
|
|
|
height: 132,
|
|
|
|
|
fill: "rgb(0,0,0)",
|
|
|
|
|
stroke: null,
|
|
|
|
|
strokeWidth: 0,
|
|
|
|
|
@ -187,8 +220,8 @@ export const useDeviceObject = () => {
|
|
|
|
|
strokeLineJoin: "miter",
|
|
|
|
|
strokeUniform: false,
|
|
|
|
|
strokeMiterLimit: 4,
|
|
|
|
|
scaleX: 1,
|
|
|
|
|
scaleY: 1,
|
|
|
|
|
scaleX: 0.5,
|
|
|
|
|
scaleY: 0.5,
|
|
|
|
|
angle: 0,
|
|
|
|
|
flipX: false,
|
|
|
|
|
flipY: false,
|
|
|
|
|
@ -205,7 +238,7 @@ export const useDeviceObject = () => {
|
|
|
|
|
cropY: 0,
|
|
|
|
|
selectable: false,
|
|
|
|
|
hasControls: false,
|
|
|
|
|
src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEzIiBoZWlnaHQ9IjY2IiB2aWV3Qm94PSIwIDAgMTEzIDY2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9kXzIyMDNfMTAzMTgpIj4KPG1hc2sgaWQ9InBhdGgtMS1pbnNpZGUtMV8yMjAzXzEwMzE4IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMkM3Ljc5MDg2IDIgNiAzLjc5MDg2IDYgNlY0NEM2IDQ2LjIwOTEgNy43OTA4NiA0OCAxMCA0OEg0OS44TDU3IDU2TDY0LjIgNDhIMTAzQzEwNS4yMDkgNDggMTA3IDQ2LjIwOTEgMTA3IDQ0VjZDMTA3IDMuNzkwODYgMTA1LjIwOSAyIDEwMyAySDEwWiIvPgo8L21hc2s+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMkM3Ljc5MDg2IDIgNiAzLjc5MDg2IDYgNlY0NEM2IDQ2LjIwOTEgNy43OTA4NiA0OCAxMCA0OEg0OS44TDU3IDU2TDY0LjIgNDhIMTAzQzEwNS4yMDkgNDggMTA3IDQ2LjIwOTEgMTA3IDQ0VjZDMTA3IDMuNzkwODYgMTA1LjIwOSAyIDEwMyAySDEwWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC44IiBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiLz4KPHBhdGggZD0iTTQ5LjggNDhMNTAuNTQzMyA0Ny4zMzFMNTAuMjQ1NCA0N0g0OS44VjQ4Wk01NyA1Nkw1Ni4yNTY3IDU2LjY2OUw1NyA1Ny40OTQ4TDU3Ljc0MzMgNTYuNjY5TDU3IDU2Wk02NC4yIDQ4VjQ3SDYzLjc1NDZMNjMuNDU2NyA0Ny4zMzFMNjQuMiA0OFpNNyA2QzcgNC4zNDMxNSA4LjM0MzE1IDMgMTAgM1YxQzcuMjM4NTggMSA1IDMuMjM4NTcgNSA2SDdaTTcgNDRWNkg1VjQ0SDdaTTEwIDQ3QzguMzQzMTUgNDcgNyA0NS42NTY5IDcgNDRINUM1IDQ2Ljc2MTQgNy4yMzg1NyA0OSAxMCA0OVY0N1pNNDkuOCA0N0gxMFY0OUg0OS44VjQ3Wk00OS4wNTY3IDQ4LjY2OUw1Ni4yNTY3IDU2LjY2OUw1Ny43NDMzIDU1LjMzMUw1MC41NDMzIDQ3LjMzMUw0OS4wNTY3IDQ4LjY2OVpNNTcuNzQzMyA1Ni42NjlMNjQuOTQzMyA0OC42NjlMNjMuNDU2NyA0Ny4zMzFMNTYuMjU2NyA1NS4zMzFMNTcuNzQzMyA1Ni42NjlaTTEwMyA0N0g2NC4yVjQ5SDEwM1Y0N1pNMTA2IDQ0QzEwNiA0NS42NTY5IDEwNC42NTcgNDcgMTAzIDQ3VjQ5QzEwNS43NjEgNDkgMTA4IDQ2Ljc2MTQgMTA4IDQ0SDEwNlpNMTA2IDZWNDRIMTA4VjZIMTA2Wk0xMDMgM0MxMDQuNjU3IDMgMTA2IDQuMzQzMTUgMTA2IDZIMTA4QzEwOCAzLjIzODU4IDEwNS43NjEgMSAxMDMgMVYzWk0xMCAzSDEwM1YxSDEwVjNaIiBmaWxsPSJ3aGl0ZSIgbWFzaz0idXJsKCNwYXRoLTEtaW5zaWRlLTFfMjIwM18xMDMxOCkiLz4KPC9nPgo8ZGVmcz4KPGZpbHRlciBpZD0iZmlsdGVyMF9kXzIyMDNfMTAzMTgiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMTMiIGhlaWdodD0iNjYiIGZpbHRlclVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMTI3IDAiIHJlc3VsdD0iaGFyZEFscGhhIi8+CjxmZU9mZnNldCBkeT0iNCIvPgo8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIzIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfMjIwM18xMDMxOCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfZHJvcFNoYWRvd18yMjAzXzEwMzE4IiByZXN1bHQ9InNoYXBlIi8+CjwvZmlsdGVyPgo8L2RlZnM+Cjwvc3ZnPgo=",
|
|
|
|
|
src: bgDeviceImage,
|
|
|
|
|
crossOrigin: null,
|
|
|
|
|
filters: []
|
|
|
|
|
},
|
|
|
|
|
@ -214,7 +247,7 @@ export const useDeviceObject = () => {
|
|
|
|
|
version: "5.3.0",
|
|
|
|
|
originX: "left",
|
|
|
|
|
originY: "top",
|
|
|
|
|
left: -40.6281,
|
|
|
|
|
left: -50.6281,
|
|
|
|
|
top: -22.9893,
|
|
|
|
|
width: 48,
|
|
|
|
|
height: 48,
|
|
|
|
|
@ -254,11 +287,11 @@ export const useDeviceObject = () => {
|
|
|
|
|
version: "5.3.0",
|
|
|
|
|
originX: "left",
|
|
|
|
|
originY: "top",
|
|
|
|
|
left: -7.3377,
|
|
|
|
|
left: -14.3377,
|
|
|
|
|
top: -15.4904,
|
|
|
|
|
width: 320,
|
|
|
|
|
height: 90.4,
|
|
|
|
|
fill: "#333333",
|
|
|
|
|
fill: fontStyle.fill,
|
|
|
|
|
stroke: null,
|
|
|
|
|
strokeWidth: 1,
|
|
|
|
|
strokeDashArray: null,
|
|
|
|
|
@ -301,8 +334,49 @@ export const useDeviceObject = () => {
|
|
|
|
|
pathAlign: "baseline",
|
|
|
|
|
selectable: false,
|
|
|
|
|
hasControls: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "image",
|
|
|
|
|
version: "5.3.0",
|
|
|
|
|
originX: "left",
|
|
|
|
|
originY: "top",
|
|
|
|
|
left: -47.6281,
|
|
|
|
|
top: -19.9893,
|
|
|
|
|
width: 40,
|
|
|
|
|
height: 40,
|
|
|
|
|
fill: "rgb(0,0,0)",
|
|
|
|
|
stroke: null,
|
|
|
|
|
strokeWidth: 0,
|
|
|
|
|
strokeDashArray: null,
|
|
|
|
|
strokeLineCap: "butt",
|
|
|
|
|
strokeDashOffset: 0,
|
|
|
|
|
strokeLineJoin: "miter",
|
|
|
|
|
strokeUniform: false,
|
|
|
|
|
strokeMiterLimit: 4,
|
|
|
|
|
scaleX: 0.6174,
|
|
|
|
|
scaleY: 0.6174,
|
|
|
|
|
angle: 0,
|
|
|
|
|
flipX: false,
|
|
|
|
|
flipY: false,
|
|
|
|
|
opacity: 1,
|
|
|
|
|
shadow: null,
|
|
|
|
|
visible: false,
|
|
|
|
|
backgroundColor: "",
|
|
|
|
|
fillRule: "nonzero",
|
|
|
|
|
paintFirst: "fill",
|
|
|
|
|
globalCompositeOperation: "source-over",
|
|
|
|
|
skewX: 0,
|
|
|
|
|
skewY: 0,
|
|
|
|
|
cropX: 0,
|
|
|
|
|
cropY: 0,
|
|
|
|
|
selectable: false,
|
|
|
|
|
hasControls: false,
|
|
|
|
|
src: notInVisableIcon,
|
|
|
|
|
crossOrigin: null,
|
|
|
|
|
filters: []
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
],
|
|
|
|
|
...restDeviceItem
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
return {
|
|
|
|
|
|
