|
|
|
|
@ -9,76 +9,134 @@ 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 { workspaceIDConf } from "@/config/attribute/viewType";
|
|
|
|
|
import { v4 as uuid } from "uuid";
|
|
|
|
|
|
|
|
|
|
const deviceInfoKey = "deviceInfo";
|
|
|
|
|
|
|
|
|
|
// TODO 设计实现点位绑定设备实体的位置偏移问题
|
|
|
|
|
/**
|
|
|
|
|
* @交互说明
|
|
|
|
|
* 1. 基于画布中心点建立坐标系。画布中心点坐标为(0,0)
|
|
|
|
|
*/
|
|
|
|
|
export const useDeviceObject = () => {
|
|
|
|
|
// 移动到画布上的设备对象的相对坐标，使用相对图片的左边系，而不是画布的坐标系
|
|
|
|
|
// 拖拽新增获取设备对象在画布上的坐标
|
|
|
|
|
function getDragDeviceObjectOrdinate(event, viewObj, deviceObj) {
|
|
|
|
|
// const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
// 移动到画布上的设备对象的相对坐标，使用相对图片的坐标系，而不是画布的坐标系
|
|
|
|
|
const currWorkSpaceData = document
|
|
|
|
|
.getElementById(workspaceIDConf)
|
|
|
|
|
.getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
|
|
|
|
|
const { left, top } = viewObj.getSelectionElement().getBoundingClientRect();
|
|
|
|
|
const point = {
|
|
|
|
|
x: event.x - left - imgObjects.left,
|
|
|
|
|
y: event.y - top - imgObjects.top
|
|
|
|
|
const { left, top, width, height } = currWorkSpaceData;
|
|
|
|
|
// .getSelectionElement()
|
|
|
|
|
// .getBoundingClientRect();
|
|
|
|
|
// 该设备基于当前画布的坐标信息
|
|
|
|
|
const currPointView = {
|
|
|
|
|
x: event.clientX - left,
|
|
|
|
|
y: event.clientY - top
|
|
|
|
|
};
|
|
|
|
|
// const pointerVpt = viewObj.restorePointerVpt(currPointView);
|
|
|
|
|
const x_ordinate =
|
|
|
|
|
currPointView.x - width / 2 - (deviceObj.width * deviceObj.scaleX) / 2;
|
|
|
|
|
const y_ordinate =
|
|
|
|
|
height / 2 - currPointView.y + (deviceObj.height * deviceObj.scaleY) / 2;
|
|
|
|
|
console.log(
|
|
|
|
|
"currWorkSpace:",
|
|
|
|
|
currWorkSpaceData,
|
|
|
|
|
"cvsObjects:",
|
|
|
|
|
cvsObjects,
|
|
|
|
|
"event:",
|
|
|
|
|
event,
|
|
|
|
|
"getDragDeviceObjectOrdinate",
|
|
|
|
|
"imgObjects:",
|
|
|
|
|
imgObjects.getCenterPoint(),
|
|
|
|
|
x_ordinate,
|
|
|
|
|
y_ordinate
|
|
|
|
|
);
|
|
|
|
|
return {
|
|
|
|
|
x_ordinate,
|
|
|
|
|
y_ordinate
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
// 在画布上移动后设备对象坐标
|
|
|
|
|
function fetchMoveDeviceObjectOrdinate(viewObj, activeObject) {
|
|
|
|
|
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const x_ordinate = activeObject.get("left") - cvsObjects.width / 2;
|
|
|
|
|
const y_ordinate = cvsObjects.height / 2 - activeObject.get("top");
|
|
|
|
|
return {
|
|
|
|
|
x_ordinate,
|
|
|
|
|
y_ordinate
|
|
|
|
|
};
|
|
|
|
|
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");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 使用相对坐标换实际位置的方法
|
|
|
|
|
function fetchOrdinateByView(viewObj, deviceItem) {
|
|
|
|
|
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const { x_ordinate, y_ordinate } = deviceItem;
|
|
|
|
|
const left = cvsObjects.width / 2 + parseFloat(x_ordinate);
|
|
|
|
|
const top = cvsObjects.height / 2 - parseFloat(y_ordinate);
|
|
|
|
|
console.log(cvsObjects, "fetchOrdinateByView", left, top);
|
|
|
|
|
return {
|
|
|
|
|
x_ordinate: x_ordinate,
|
|
|
|
|
y_ordinate: y_ordinate
|
|
|
|
|
left,
|
|
|
|
|
top
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
// 可操作区域的相对坐标
|
|
|
|
|
// 获取图片对象尺寸
|
|
|
|
|
|
|
|
|
|
// 可操作区域的各点位相对坐标【限定可操作区域边界】
|
|
|
|
|
function fetchViewsBoundaries(viewObj, activeObj) {
|
|
|
|
|
// 图片原点为中心图标
|
|
|
|
|
const cvsObjects = viewObj.getObjects()[0]; // 获取画布对象
|
|
|
|
|
const imgObjects = viewObj.getObjects()[1]; // 获取图片对象
|
|
|
|
|
const y_mistake = -8 * activeObj?.scaleY; // 上下边界误差
|
|
|
|
|
const currIconWidth = activeObj?.width * activeObj?.scaleX;
|
|
|
|
|
const currIconHeight = activeObj?.height * activeObj?.scaleY;
|
|
|
|
|
const startLeft =
|
|
|
|
|
(cvsObjects.width * cvsObjects.scaleX -
|
|
|
|
|
imgObjects.width * imgObjects.scaleX) /
|
|
|
|
|
2;
|
|
|
|
|
2 -
|
|
|
|
|
currIconWidth / 2;
|
|
|
|
|
const startTop =
|
|
|
|
|
(cvsObjects.height * cvsObjects.scaleY -
|
|
|
|
|
imgObjects.height * imgObjects.scaleY) /
|
|
|
|
|
2;
|
|
|
|
|
2 -
|
|
|
|
|
currIconHeight -
|
|
|
|
|
y_mistake;
|
|
|
|
|
const endLeft = startLeft + imgObjects.width * imgObjects.scaleX;
|
|
|
|
|
const endTop = startTop + imgObjects.height * imgObjects.scaleY;
|
|
|
|
|
const currImgWidth = imgObjects.width * imgObjects.scaleX;
|
|
|
|
|
const currImgHeight = imgObjects.height * imgObjects.scaleY;
|
|
|
|
|
return {
|
|
|
|
|
x_max: imgObjects.width * imgObjects.scaleX,
|
|
|
|
|
y_max: imgObjects.height * imgObjects.scaleY,
|
|
|
|
|
x_min: -currImgWidth / 2 - currIconWidth / 2,
|
|
|
|
|
y_min: -currImgHeight / 2 - currIconHeight,
|
|
|
|
|
x_max: currImgWidth / 2 + currIconWidth / 2,
|
|
|
|
|
y_max: currImgHeight / 2,
|
|
|
|
|
startLeft,
|
|
|
|
|
startTop,
|
|
|
|
|
endLeft,
|
|
|
|
|
endTop,
|
|
|
|
|
moveLeft: endLeft - activeObj?.width * activeObj?.scaleX,
|
|
|
|
|
moveTop: endTop - activeObj?.height * activeObj?.scaleY
|
|
|
|
|
endTop
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 判断设备是否在可视区域内
|
|
|
|
|
function isInViewBoundaries(deviceObj, viewObj): boolean {
|
|
|
|
|
const { x_max, y_max } = fetchViewsBoundaries(viewObj, deviceObj);
|
|
|
|
|
function isInViewBoundaries(viewObj, deviceObj): boolean {
|
|
|
|
|
const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries(
|
|
|
|
|
viewObj,
|
|
|
|
|
deviceObj
|
|
|
|
|
);
|
|
|
|
|
const { x_ordinate, y_ordinate } = deviceObj;
|
|
|
|
|
// 获取对象的当前尺寸和位置
|
|
|
|
|
const objLeft = x_ordinate;
|
|
|
|
|
const objTop = y_ordinate;
|
|
|
|
|
|
|
|
|
|
// 限制对象在画布内移动
|
|
|
|
|
if (objLeft < 0) {
|
|
|
|
|
if (x_ordinate < x_min) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objTop < 0) {
|
|
|
|
|
if (y_ordinate < y_min) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objLeft > x_max) {
|
|
|
|
|
if (x_ordinate > x_max) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
if (objTop > y_max) {
|
|
|
|
|
if (y_ordinate > y_max) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
@ -86,45 +144,38 @@ export const useDeviceObject = () => {
|
|
|
|
|
|
|
|
|
|
// 设备对象是否移动
|
|
|
|
|
function isMoveDevice(activeObject, viewObj) {
|
|
|
|
|
const { x_ordinate, y_ordinate } = activeObject.get(deviceInfoKey);
|
|
|
|
|
const { startLeft, startTop } = fetchViewsBoundaries(viewObj);
|
|
|
|
|
const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate;
|
|
|
|
|
const y_ordinate_history = activeObject.get(deviceInfoKey)?.y_ordinate;
|
|
|
|
|
const { x_ordinate, y_ordinate } = fetchMoveDeviceObjectOrdinate(
|
|
|
|
|
viewObj,
|
|
|
|
|
activeObject
|
|
|
|
|
);
|
|
|
|
|
// 误差设置为 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)
|
|
|
|
|
Number(x_ordinate_history) - Number(x_ordinate)
|
|
|
|
|
);
|
|
|
|
|
const y_move_value = Math.abs(
|
|
|
|
|
Number(activeObject.top) - Number(y_ordinate) - Number(startTop)
|
|
|
|
|
Number(y_ordinate_history) - Number(y_ordinate)
|
|
|
|
|
);
|
|
|
|
|
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) - Number(startTop)
|
|
|
|
|
),
|
|
|
|
|
Math.abs(
|
|
|
|
|
Number(activeObject.left) - Number(x_ordinate) - Number(startLeft)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
// TODO 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
|
|
|
|
|
if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 重新绑定车间的设备没有坐标信息，暂时不判断设备是否移动【默认没有移动】
|
|
|
|
|
// if (Number.isNaN(x_move_value) || Number.isNaN(y_move_value)) {
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
if (x_move_value < errorValue[0]) {
|
|
|
|
|
x_move = false;
|
|
|
|
|
}
|
|
|
|
|
if (y_move_value < errorValue[1]) {
|
|
|
|
|
y_move = false;
|
|
|
|
|
}
|
|
|
|
|
console.log(
|
|
|
|
|
"isMoveDevice:" + (x_move || y_move),
|
|
|
|
|
"x_move_value" + x_move_value,
|
|
|
|
|
"y_move_value" + y_move_value
|
|
|
|
|
);
|
|
|
|
|
return x_move || y_move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -384,7 +435,9 @@ export const useDeviceObject = () => {
|
|
|
|
|
isInViewBoundaries,
|
|
|
|
|
getDragDeviceObjectOrdinate,
|
|
|
|
|
isMoveDevice,
|
|
|
|
|
fetchViewsBoundaries
|
|
|
|
|
fetchViewsBoundaries,
|
|
|
|
|
fetchOrdinateByView,
|
|
|
|
|
fetchMoveDeviceObjectOrdinate
|
|
|
|
|
// fetchDeviceObjectBySeemKey
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
