feat: 进一步完善设备布点模块

src/views/deviceSetting/components/deviceSelect.vue

@@ -224,6 +224,12 @@ const dragItem = (event, deviceItem) => {
 
 // 渲染设备到点位图上
 function renderDeviceToCanvas(record) {
+  // 先更新画布，再重新渲染
+  canvasEditor.canvas.getObjects().forEach(item => {
+    if (item.name === "device") {
+      canvasEditor.canvas.remove(item);
+    }
+  });
   const startArr = record;
   const finalArr = [];
   startArr.map(deviceItem => {

src/views/deviceSetting/components/previewCurrent.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-26 11:32:07
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-30 10:56:13
+ * @LastEditTime: 2024-08-30 14:16:10
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\previewCurrent.vue
  * @Description: 预览组件
 -->
@@ -12,7 +12,7 @@ import { useDeviceObject } from "../hooks/useDeviceObject";
 import device_video_bg_gray from "@/assets/modelSetting/device_video_bg_gray.png";
 import device_video_bg from "@/assets/modelSetting/device_video_bg.png";
 
-const { initDeviceGroupObjects } = useDeviceObject();
+const { initDeviceGroupObjects, isInCurrViewBoundaries } = useDeviceObject();
 const props = defineProps({
   picture: {
     type: String
@@ -36,40 +36,19 @@ const canvasRef = ref<any>(null);
 const cvs = ref<any>(null);
 
 // 获取边界的几个坐标
-function getBoundaryPoints() {
-  const canvasObject = cvs.value;
-  const { backgroundImage } = canvasObject;
-  const startLeft =
-    (viewData.value.width - backgroundImage.width * backgroundImage.scaleX) / 2;
-  const startTop =
-    (viewData.value.height - backgroundImage.height * backgroundImage.scaleY) /
-    2;
-  const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX;
-  const endTop = startTop + backgroundImage.height * backgroundImage.scaleY;
-  return { startLeft, startTop, endLeft, endTop };
-}
 
 // 在切换图片后重新计算元素位置并标记
 function refreshDevicePosition() {
   // const { scale } = toRaw(viewPicOptions.value);
   const canvasObject = cvs.value;
-  const { startLeft, startTop, endLeft, endTop } = getBoundaryPoints();
   const notInVisableIds = [];
   canvasObject.getObjects().forEach(deviceItem => {
-    const objLeft = deviceItem.left;
-    const objTop = deviceItem.top;
-    const targetBgImage = deviceItem.getObjects()[0];
-    const targetTextBox = deviceItem.getObjects()[2];
-    const targetDelIcon = deviceItem.getObjects()[3];
-
+    const targetBgImage = deviceItem.getObjects()[0]; // 设备背景图片
+    const targetTextBox = deviceItem.getObjects()[2]; // 设备文本
+    const targetDelIcon = deviceItem.getObjects()[3]; // 设备待删图标
     console.log(targetBgImage, "notInVisableIds", deviceItem);
     let notInVisable = false; // 默认在边界内
-    if (
-      objLeft < startLeft ||
-      objTop < startTop ||
-      objLeft + deviceItem.width * deviceItem.scaleX > endLeft ||
-      objTop + deviceItem.heigth * deviceItem.scaleY > endTop
-    ) {
+    if (isInCurrViewBoundaries(canvasObject, deviceItem)) {
       // 在边界外
       notInVisable = true;
       notInVisableIds.push(Number(deviceItem?.deviceInfo?.id));

src/views/deviceSetting/hooks/useDeviceObject.ts

@@ -82,7 +82,6 @@ export const useDeviceObject = () => {
       top
     };
   }
-  // 获取图片对象尺寸
 
   // 可操作区域的各点位相对坐标【限定可操作区域边界】
   function fetchViewsBoundaries(viewObj, activeObj) {
@@ -119,7 +118,7 @@ export const useDeviceObject = () => {
     };
   }
 
-  // 判断设备是否在可视区域内
+  // 操作区判断设备是否在可视区域内
   function isInViewBoundaries(viewObj, deviceObj): boolean {
     const { x_min, x_max, y_min, y_max } = fetchViewsBoundaries(
       viewObj,
@@ -142,6 +141,63 @@ export const useDeviceObject = () => {
     return true;
   }
 
+  // 预览判断当前的图片图层内
+  function isInCurrViewBoundaries(viewObj, deviceObj): boolean {
+    const objLeft = deviceObj.left;
+    const objTop = deviceObj.top;
+    const canvasObject = viewObj;
+    const { backgroundImage } = canvasObject; // backgroundImage 背景图片
+    const currIconWidth = deviceObj?.width * deviceObj?.scaleX;
+    const currIconHeight = deviceObj?.height * deviceObj?.scaleY;
+    const y_mistake = -8 * deviceObj?.scaleY; // 上下边界误差
+    const x_mistake = 1; // 左右边界误差
+    const startLeft =
+      (canvasObject.width - backgroundImage.width * backgroundImage.scaleX) /
+        2 -
+      currIconWidth / 2;
+    const startTop =
+      (canvasObject.height - backgroundImage.height * backgroundImage.scaleY) /
+        2 -
+      currIconHeight -
+      y_mistake;
+    const endLeft = startLeft + backgroundImage.width * backgroundImage.scaleX;
+    const endTop = startTop + backgroundImage.height * backgroundImage.scaleY;
+
+    console.log(
+      backgroundImage.getBoundingClientRect(),
+      canvasObject.width,
+      canvasObject.scaleX,
+      backgroundImage.width,
+      backgroundImage.scaleX,
+      currIconWidth,
+      "isInCurrViewBoundaries",
+      backgroundImage.scaleX,
+      deviceObj,
+      "startLeft",
+      startLeft,
+      "startTop",
+      startTop,
+      "endLeft",
+      endLeft,
+      "endTop",
+      endTop
+    );
+    if (
+      objLeft < startLeft - x_mistake ||
+      objTop < startTop ||
+      objLeft > endLeft + x_mistake ||
+      objTop > endTop
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  function isInView() {
+    // TODO 用三角函数判断
+    return;
+  }
+
   // 设备对象是否移动
   function isMoveDevice(activeObject, viewObj) {
     const x_ordinate_history = activeObject.get(deviceInfoKey)?.x_ordinate;
@@ -179,10 +235,6 @@ export const useDeviceObject = () => {
     return x_move || y_move;
   }
 
-  // function fetchDeviceObjectBySeemKey(targetDeviceItem, viewObj) {
-  //   console.log(targetDeviceItem, viewObj, "fetchDeviceObjectBySeemKey");
-  // }
-
   // 初始化设备对象
   const initDeviceGroupObjects: Record<string, any> = (
     record,
@@ -213,6 +265,7 @@ export const useDeviceObject = () => {
       bgDeviceImage = device_video_bg;
     }
     return {
+      name: "device",
       id: uuid(),
       deviceInfo: record, // 设备信息
       left: record?.left ? Number(record?.left) : 0,
@@ -228,7 +281,7 @@ export const useDeviceObject = () => {
       originX: "left",
       originY: "top",
       width: 132,
-      height: 66,
+      height: 62,
       fill: "rgb(0,0,0)",
       stroke: null,
       strokeWidth: 0,
@@ -437,7 +490,7 @@ export const useDeviceObject = () => {
     isMoveDevice,
     fetchViewsBoundaries,
     fetchOrdinateByView,
-    fetchMoveDeviceObjectOrdinate
-    // fetchDeviceObjectBySeemKey
+    fetchMoveDeviceObjectOrdinate,
+    isInCurrViewBoundaries
   };
 };

src/views/deviceSetting/index.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-02 10:52:32
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-30 11:11:29
+ * @LastEditTime: 2024-08-30 13:37:45
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
  * @Description: 设备点位管理设置
  @ 交互说明
@@ -117,7 +117,7 @@ const refreshCanvas = (isLoadDevice = true) => {
       const canvasHeight = cvs.height;
       // Calculate the center position for the image
       // TODO 计算合适的缩放比
-      const startScale = 0.8;
+      const startScale = 1;
       const left = (canvasWidth - img.width * startScale) / 2;
       const top = (canvasHeight - img.height * startScale) / 2;
       img.set({