Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop

2024-10-11 09:57:41 +08:00 · 2024-10-11 09:57:41 +08:00 · c5beb9fbfd
commit c5beb9fbfd
parent fd0bfb0ab2 63eff006b0
4 changed files with 163 additions and 124 deletions
--- a/src/components/draw-app/properties/RectProperty.vue
+++ b/src/components/draw-app/properties/RectProperty.vue
@ -61,6 +61,7 @@
    <q-input
      outlined
      v-model="rectModel.alpha"
+      mask="#.###"
      @blur="onUpdate"
      label="透明度"
      lazy-rules
@ -93,7 +94,7 @@
      @blur="onUpdate"
      label="圆角半径"
      lazy-rules
-      :rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
    />
  </q-form>
 </template>
--- a/src/drawApp/iscsApp.ts
+++ b/src/drawApp/iscsApp.ts
@ -18,7 +18,10 @@ import {
 } from './commonApp';
 import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
 import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import {
+  CCTVButton,
+  CCTVButtonTemplate,
+} from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
@ -279,6 +282,7 @@ export function saveDrawDatas(app: IDrawApp) {
      )
    );
  }
+  const graphics = app.queryStore.getAllGraphics();
  switch (drawStore.selectSubmenuAndStation.submenu) {
    case '火灾报警平面图':
      for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
@ -316,6 +320,15 @@ export function saveDrawDatas(app: IDrawApp) {
            app,
            cctvOfStationControl
          ) as iscsGraphicData.CCTVOfStationControlStorage;
+
+          graphics.forEach((g) => {
+            if (g instanceof CCTVButton) {
+              const cctvButtonData = g.saveData();
+              cctvStorage.cctvButtons.push(
+                (cctvButtonData as CCTVButtonData).data
+              );
+            }
+          });
          storage.cctvOfStationControlStorages[i] = cctvStorage;
          break;
        }
@ -325,12 +338,6 @@ export function saveDrawDatas(app: IDrawApp) {
    default:
      break;
  }
-  const graphics = app.queryStore.getAllGraphics();
-  /*  graphics.forEach((g) => {
-    if (TrackSection.Type === g.type) {
-      const trackSectionData = (g as TrackSection).saveData();
-      storage.trackSections.push((trackSectionData as TrackSectionData).data);
-    } }) */
  console.log(storage, '保存数据', graphics);
  const base64 = fromUint8Array(storage.serialize());
  return base64;
--- a/src/graphics/rect/RectDrawAssistant.ts
+++ b/src/graphics/rect/RectDrawAssistant.ts
@ -1,9 +1,10 @@
-import { FederatedPointerEvent, Graphics, Point } from 'pixi.js';
+import { FederatedPointerEvent, Graphics, IHitArea, Point } from 'pixi.js';
 import {
  GraphicDrawAssistant,
  GraphicInteractionPlugin,
  IDrawApp,
  JlGraphic,
+  linePoint,
 } from 'jl-graphic';

 import { IRectData, Rect, RectTemplate } from './Rect';
@ -72,6 +73,28 @@ export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
  }
 }

+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: Rect;
+  constructor(rect: Rect) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const datas = this.rect.datas;
+    const tolerance = datas.lineWidth;
+    const p1 = new Point(0, 0);
+    const p2 = new Point(p1.x + datas.width, p1.y);
+    const p3 = new Point(p1.x + datas.width, p1.y + datas.height);
+    const p4 = new Point(p1.x, p1.y + datas.height);
+    const p = new Point(x, y);
+    contains = contains || linePoint(p1, p2, p, tolerance);
+    contains = contains || linePoint(p2, p3, p, tolerance);
+    contains = contains || linePoint(p3, p4, p, tolerance);
+    contains = contains || linePoint(p4, p1, p, tolerance);
+    return contains;
+  }
+}
 export class rectInteraction extends GraphicInteractionPlugin<Rect> {
  static Name = 'platform_transform';
  constructor(app: IDrawApp) {
@ -88,6 +111,7 @@ export class rectInteraction extends GraphicInteractionPlugin<Rect> {
    g.cursor = 'pointer';
    g.scalable = true;
    g.rotatable = true;
+    g.rectGraphic.hitArea = new RectGraphicHitArea(g);
  }
  unbind(g: Rect): void {
    g.eventMode = 'none';
--- a/src/layouts/IscsDrawLayout.vue
+++ b/src/layouts/IscsDrawLayout.vue
@ -308,7 +308,7 @@ function toggleRightDrawer() {

 //工具栏所用
 const selectUtil = ref();
-const utilsOption: ControlItem[] = reactive([]);
+let utilsOption: ControlItem[] = reactive([]);

 function drawSelect(item: string) {
  drawStore.getDrawApp().interactionPlugin(item).resume();
@ -330,6 +330,34 @@ class ControlItem {
    }
  }
 }
+
+function handleUtilsOption() {
+  utilsOption = [];
+  const drawAssistantsTypes = [
+    Arrow.Type,
+    TextContent.Type,
+    Rect.Type,
+    Line.Type,
+  ];
+  switch (drawStore.selectSubmenuAndStation.submenu) {
+    case '监控布局图':
+      drawAssistantsTypes.push(CCTVButton.Type);
+      break;
+  }
+  drawAssistantsTypes.forEach((type) => {
+    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
+    if (drawAssistant) {
+      utilsOption.push(
+        new ControlItem(
+          drawAssistant.name,
+          drawAssistant.icon,
+          drawAssistant.description || drawAssistant.name
+        )
+      );
+    }
+  });
+  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
+}
 //左侧功能按钮
 const leftMenuConfig = [
  { label: '保存', click: saveAllDrawDatas },
@ -378,122 +406,99 @@ onMounted(() => {
  } else {
    drawStore.setDraftId(null);
  }
-
-  function handleUnDoData(op: JlOperation) {
-    const drawApp = drawStore.getDrawApp();
-    let operationType = op.type;
-    if (operationType == 'graphic-create') {
-      operationType = 'graphic-delete';
-    } else if (operationType == 'graphic-delete') {
-      operationType = 'graphic-create';
-    }
-    const syncData = {
-      operationType: operationType,
-      datas: [],
-      submenu: drawStore.selectSubmenuAndStation.submenu,
-      station: drawStore.selectSubmenuAndStation.station,
-      userId: useAuthStore().userId,
-    };
-    if (op.type === 'update-canvas') {
-      const canvasData = op.obj.saveData();
-      syncData.datas.push(
-        new sync_data_message.UpdataData({
-          id: 0,
-          type: op.obj.type,
-          data: new common.Canvas({
-            width: canvasData.width,
-            height: canvasData.height,
-            backgroundColor: canvasData.backgroundColor,
-            viewportTransform: toStorageTransform(canvasData.viewportTransform),
-          }).serialize(),
-        })
-      );
-    } else {
-      op.obj.forEach((g) => {
-        const gData = g.saveData();
-        syncData.datas.push(
-          new sync_data_message.UpdataData({
-            id: g.id,
-            type: g.type,
-            data: gData.data.serialize(),
-          })
-        );
-      });
-    }
-    drawApp.publishMessage(
-      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
-      new sync_data_message.SyncData({ ...syncData }).serialize()
-    );
-  }
-
-  function handleRecordData(op: JlOperation) {
-    const drawApp = drawStore.getDrawApp();
-    const syncData = {
-      operationType: op.type,
-      datas: [],
-      submenu: drawStore.selectSubmenuAndStation.submenu,
-      station: drawStore.selectSubmenuAndStation.station,
-      userId: useAuthStore().userId,
-    };
-    if (op.type === 'update-canvas') {
-      const canvasData = op.obj.saveData();
-      console.log(canvasData, 'canvasData');
-      syncData.datas.push(
-        new sync_data_message.UpdataData({
-          id: 0,
-          type: op.obj.type,
-          data: new common.Canvas({
-            width: canvasData.width,
-            height: canvasData.height,
-            backgroundColor: canvasData.backgroundColor,
-            viewportTransform: toStorageTransform(canvasData.viewportTransform),
-          }).serialize(),
-        })
-      );
-    } else {
-      op.obj.forEach((g) => {
-        const gData = g.saveData();
-        syncData.datas.push(
-          new sync_data_message.UpdataData({
-            id: g.id,
-            type: g.type,
-            data: gData.data.serialize(),
-          })
-        );
-      });
-    }
-
-    drawApp.publishMessage(
-      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
-      new sync_data_message.SyncData({ ...syncData }).serialize()
-    );
-  }
-  // function handleReDoData(op: JlOperation) {
-  //   console.log('redoData', op);
-  // }
-
-  const drawAssistantsTypes = [
-    Arrow.Type,
-    TextContent.Type,
-    Rect.Type,
-    Line.Type,
-    CCTVButton.Type,
-  ];
-  drawAssistantsTypes.forEach((type) => {
-    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
-    if (drawAssistant) {
-      utilsOption.push(
-        new ControlItem(
-          drawAssistant.name,
-          drawAssistant.icon,
-          drawAssistant.description || drawAssistant.name
-        )
-      );
-    }
-  });
-  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
+  handleUtilsOption();
 });

+function handleUnDoData(op: JlOperation) {
+  const drawApp = drawStore.getDrawApp();
+  let operationType = op.type;
+  if (operationType == 'graphic-create') {
+    operationType = 'graphic-delete';
+  } else if (operationType == 'graphic-delete') {
+    operationType = 'graphic-create';
+  }
+  const syncData = {
+    operationType: operationType,
+    datas: [],
+    submenu: drawStore.selectSubmenuAndStation.submenu,
+    station: drawStore.selectSubmenuAndStation.station,
+    userId: useAuthStore().userId,
+  };
+  if (op.type === 'update-canvas') {
+    const canvasData = op.obj.saveData();
+    syncData.datas.push(
+      new sync_data_message.UpdataData({
+        id: 0,
+        type: op.obj.type,
+        data: new common.Canvas({
+          width: canvasData.width,
+          height: canvasData.height,
+          backgroundColor: canvasData.backgroundColor,
+          viewportTransform: toStorageTransform(canvasData.viewportTransform),
+        }).serialize(),
+      })
+    );
+  } else {
+    op.obj.forEach((g) => {
+      const gData = g.saveData();
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: g.id,
+          type: g.type,
+          data: gData.data.serialize(),
+        })
+      );
+    });
+  }
+  drawApp.publishMessage(
+    `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    new sync_data_message.SyncData({ ...syncData }).serialize()
+  );
+}
+
+function handleRecordData(op: JlOperation) {
+  const drawApp = drawStore.getDrawApp();
+  const syncData = {
+    operationType: op.type,
+    datas: [],
+    submenu: drawStore.selectSubmenuAndStation.submenu,
+    station: drawStore.selectSubmenuAndStation.station,
+    userId: useAuthStore().userId,
+  };
+  if (op.type === 'update-canvas') {
+    const canvasData = op.obj.saveData();
+    console.log(canvasData, 'canvasData');
+    syncData.datas.push(
+      new sync_data_message.UpdataData({
+        id: 0,
+        type: op.obj.type,
+        data: new common.Canvas({
+          width: canvasData.width,
+          height: canvasData.height,
+          backgroundColor: canvasData.backgroundColor,
+          viewportTransform: toStorageTransform(canvasData.viewportTransform),
+        }).serialize(),
+      })
+    );
+  } else {
+    op.obj.forEach((g) => {
+      const gData = g.saveData();
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: g.id,
+          type: g.type,
+          data: gData.data.serialize(),
+        })
+      );
+    });
+  }
+
+  drawApp.publishMessage(
+    `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    new sync_data_message.SyncData({ ...syncData }).serialize()
+  );
+}
+
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
@ -581,6 +586,7 @@ function selectedMenu(menuName: string) {
      break;
    }
  }
+  handleUtilsOption();
 }

 const selectSubMenuName = ref('');
@ -588,6 +594,7 @@ const subMenuOption = ref([]);
 function selectedSubMenu(subName: string) {
  drawStore.selectSubmenuAndStation.submenu = subName;
  forceReloadDate();
+  handleUtilsOption();
 }

 let iscsTypeConfig: {