继电器柜网状结构

src/components/draw-app/dialogs/BatchBuildRelayCabinetOrRelay.vue

@@ -44,36 +44,18 @@ import {
 import { containBoth } from 'src/graphics/relayCabinet/RelayCabinetDrawAssistant';
 import { GraphicIdGenerator } from 'src/jl-graphic';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { ref } from 'vue';
 
 const relayCabinetStore = useRelayCabinetStore();
-const relayCabinetModel = reactive(new RelayCabinetData());
 const oneClickRelayCabinets = ref(1);
-const oneClickRelays = ref(32);
+const oneClickRelays = ref(110);
-
-relayCabinetStore.$subscribe;
-watch(
-  () => relayCabinetStore.selectedGraphic,
-  (val) => {
-    if (val && val.type == RelayCabinet.Type) {
-      relayCabinetModel.copyFrom(val.saveData() as RelayCabinetData);
-    }
-  }
-);
-
-onMounted(() => {
-  const RelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
-  if (RelayCabinet) {
-    relayCabinetModel.copyFrom(RelayCabinet.saveData());
-  }
-});
 
 function oneClickRelayCabinet(direction: number) {
-  const selectRelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  const selectRelayCabinet = relayCabinetStore.selectedGraphic;
-  if (selectRelayCabinet) {
+  if (selectRelayCabinet && selectRelayCabinet instanceof RelayCabinet) {
-    let offsetX = 300;
+    let offsetX = relayCabinetConsts.width + 80;
     if (direction == -1) {
-      offsetX = -300;
+      offsetX = -offsetX;
     }
     const relayCabinets: RelayCabinet[] = [];
     for (let i = 0; i < oneClickRelayCabinets.value; i++) {
@@ -92,26 +74,33 @@ function oneClickRelayCabinet(direction: number) {
 }
 
 function oneClickRelay() {
-  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  const relayCabinet = relayCabinetStore.selectedGraphic;
-  if (relayCabinet) {
+  if (relayCabinet && relayCabinet instanceof RelayCabinet) {
     const containRelays = relayCabinet.queryStore
       .queryByType<Relay>(Relay.Type)
       .filter((g) => containBoth(relayCabinet, g));
     if (!containRelays.length) {
-      const numRows = 4;
+      const numRows = 12;
-      const numCols = Math.ceil(oneClickRelays.value / numRows);
+      const numCols = Math.ceil((oneClickRelays.value + 22) / numRows);
-      const remainder = oneClickRelays.value % numRows;
+      const remainder = (oneClickRelays.value + 22) % numRows;
       const relays: Relay[][] = new Array(numRows);
       for (let i = 0; i < numRows; i++) {
         relays[i] = new Array(numCols);
         for (let j = 0; j < numCols; j++) {
           if (j == numCols - 1 && remainder !== 0 && i >= remainder) break;
+          if (i == 0 || j == 0) {
+            continue;
+          }
           const relay = new Relay();
           relay.loadData(new RelayData());
           relay.id = GraphicIdGenerator.next();
           relay.position.set(
-            relayCabinet.x - relayCabinetConsts.width / 2 + 30 + i * 47,
+            relayCabinet.x -
-            relayCabinet.y - relayCabinetConsts.height / 2 + 30 + j * 49
+              relayCabinetConsts.width / 2 +
+              (i + 1 / 2) * relayCabinetConsts.cellWidth,
+            relayCabinet.y -
+              relayCabinetConsts.height / 2 +
+              (j + 1 / 2) * relayCabinetConsts.cellHeight
           );
           relays[i][j] = relay;
         }

src/graphics/relay/Relay.ts

@@ -15,7 +15,7 @@ export interface IRelayData extends GraphicData {
 }
 
 export const relayConsts = {
-  radius: 15,
+  radius: 8,
   lineWidth: 3,
   lineColor: '0xff0000',
 };
@@ -43,7 +43,7 @@ export class Relay extends JlGraphic {
     if (labelPosition) {
       this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
     } else {
-      this.labelGraphic.position.set(0, 25);
+      this.labelGraphic.position.set(0, 20);
     }
     const relayGraphic = this.relayGraphic;
     relayGraphic

src/graphics/relay/RelayDrawAssistant.ts

@@ -4,7 +4,7 @@ import {
   AbsorbablePosition,
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
-  JlDrawApp,
+  IDrawApp,
   JlGraphic,
 } from 'src/jl-graphic';
 
@@ -17,7 +17,7 @@ export interface IRelayDrawOptions {
 export class RelayDraw extends GraphicDrawAssistant<RelayTemplate, IRelayData> {
   relayGraphic: Relay;
 
-  constructor(app: JlDrawApp, template: RelayTemplate) {
+  constructor(app: IDrawApp, template: RelayTemplate) {
     super(app, template, 'sym_o_circle', '继电器Relay');
     this.relayGraphic = this.graphicTemplate.new();
     this.container.addChild(this.relayGraphic);
@@ -69,10 +69,10 @@ function buildAbsorbablePositions(relayCabinet: Relay): AbsorbablePosition[] {
 
 export class relayInteraction extends GraphicInteractionPlugin<Relay> {
   static Name = 'relay_transform';
-  constructor(app: JlDrawApp) {
+  constructor(app: IDrawApp) {
     super(relayInteraction.Name, app);
   }
-  static init(app: JlDrawApp) {
+  static init(app: IDrawApp) {
     return new relayInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Relay[] | undefined {

src/graphics/relayCabinet/RelayCabinet.ts

@@ -1,4 +1,4 @@
-import { Color, Graphics, Rectangle } from 'pixi.js';
+import { Color, Container, Graphics, Rectangle } from 'pixi.js';
 import {
   GraphicData,
   JlGraphic,
@@ -16,21 +16,28 @@ export interface IRelayCabinetData extends GraphicData {
 }
 
 export const relayCabinetConsts = {
-  width: 200,
+  width: 600,
-  height: 406,
+  height: 715,
   lineWidth: 3,
   lineColor: '0x0fe81f',
+  cellWidth: 50,
+  cellHeight: 65,
+  cellLineWidth: 1,
 };
 
 export class RelayCabinet extends JlGraphic {
   static Type = 'RelayCabinet';
   relayCabinetGraphic: Graphics = new Graphics();
+  cellGraphic: Container = new Container();
+  posText: Container = new Container();
   labelGraphic = new VectorText();
   constructor() {
     super(RelayCabinet.Type);
     this.addChild(this.relayCabinetGraphic);
     this.setTextGraphic(this.labelGraphic, 'label');
     this.addChild(this.labelGraphic);
+    this.addChild(this.cellGraphic);
+    this.addChild(this.posText);
   }
 
   get datas(): IRelayCabinetData {
@@ -66,6 +73,56 @@ export class RelayCabinet extends JlGraphic {
       relayCabinetConsts.height
     );
     relayCabinetGraphic.pivot = getRectangleCenter(rectP);
+    this.batchBuild();
+  }
+  batchBuild() {
+    this.cellGraphic.children.forEach((rect) => {
+      (rect as Graphics).destroy();
+    });
+    const numRows = 12;
+    const numCols = 11;
+    const relays = new Array(numRows);
+    for (let i = 0; i < numRows; i++) {
+      relays[i] = new Array(numCols);
+      for (let j = 0; j < numCols; j++) {
+        if (i == 0 || j == 0) {
+          const text = new VectorText();
+          text.setVectorFontSize(14);
+          text.style.fill = '#0f0';
+          text.anchor.set(0.5);
+          if (i == 0 && j == 0) {
+            text.text = '位置';
+          } else {
+            text.text = i == 0 ? numCols - j : i;
+          }
+          text.position.set(
+            -relayCabinetConsts.width / 2 +
+              (i + 1 / 2) * relayCabinetConsts.cellWidth,
+            -relayCabinetConsts.height / 2 +
+              (j + 1 / 2) * relayCabinetConsts.cellHeight
+          );
+          this.posText.addChild(text);
+        }
+        const relay = new Graphics();
+        relay
+          .clear()
+          .lineStyle(
+            relayCabinetConsts.cellLineWidth,
+            new Color(relayCabinetConsts.lineColor)
+          );
+        relay.drawRect(
+          0,
+          0,
+          relayCabinetConsts.cellWidth,
+          relayCabinetConsts.cellHeight
+        );
+        relay.position.set(
+          -relayCabinetConsts.width / 2 + i * relayCabinetConsts.cellWidth,
+          -relayCabinetConsts.height / 2 + j * relayCabinetConsts.cellHeight
+        );
+        this.cellGraphic.addChild(relay);
+      }
+    }
   }
   setTextGraphic(g: VectorText, name: string) {
     g.setVectorFontSize(14);

src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts

@@ -7,7 +7,7 @@ import {
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
   GraphicTransformEvent,
-  JlDrawApp,
+  IDrawApp,
   JlGraphic,
   linePoint,
 } from 'src/jl-graphic';
@@ -43,7 +43,7 @@ export class RelayCabinetDraw extends GraphicDrawAssistant<
 > {
   relayCabinetGraphic: RelayCabinet;
 
-  constructor(app: JlDrawApp, template: RelayCabinetTemplate) {
+  constructor(app: IDrawApp, template: RelayCabinetTemplate) {
     super(app, template, 'sym_o_square', '继电器柜RelayCabinet');
     this.relayCabinetGraphic = this.graphicTemplate.new();
     this.container.addChild(this.relayCabinetGraphic);
@@ -126,10 +126,10 @@ export class relayCabinetInteraction extends GraphicInteractionPlugin<RelayCabin
   static Name = 'relayCabinet_transform';
   containRelays: Relay[] = [];
   dragStartDatas: GraphicData[] = [];
-  constructor(app: JlDrawApp) {
+  constructor(app: IDrawApp) {
     super(relayCabinetInteraction.Name, app);
   }
-  static init(app: JlDrawApp) {
+  static init(app: IDrawApp) {
     return new relayCabinetInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): RelayCabinet[] | undefined {

src/stores/relayCabinet-store.ts

@@ -4,6 +4,7 @@ import {
   getDrawApp,
   initDrawApp,
 } from 'src/drawApp/relayCabinetLayoutApp';
+import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
 import { DrawAssistant, IJlCanvas, IDrawApp, JlGraphic } from 'src/jl-graphic';
 
 export const useRelayCabinetStore = defineStore('relayCabinet', {
@@ -68,7 +69,16 @@ export const useRelayCabinetStore = defineStore('relayCabinet', {
         }
       });
       app.on('graphicselectedchange', () => {
-        this.selectedGraphics = app.selectedGraphics;
+        if (this.selectedObjName == '多选') {
+          this.selectedGraphics = app.selectedGraphics.filter(
+            (g) => !(g instanceof RelayCabinet)
+          );
+          if (this.selectedGraphics.length) {
+            app.updateSelected(...(this.selectedGraphics as JlGraphic[]));
+          }
+        } else {
+          this.selectedGraphics = app.selectedGraphics;
+        }
       });
       this.selectedGraphics = [];
       return app;