信号机故障报警仪图形调整

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

@@ -1,8 +1,12 @@
 <template>
-  <draggable-dialog seamless title="采集列表" :width="600" :height="500">
+  <draggable-dialog seamless title="采集列表" :width="600" :height="485">
     <div class="row" v-for="row in setCellMessage.rows" :key="row">
       <div
         class="ceil"
+        :class="{
+          heightLight:
+            ciCjList.cjList[col - 1].bitList[row - 1].refRelays.length,
+        }"
         v-for="col in setCellMessage.cols"
         :key="col"
         @click="handleCellClick(row, col)"
@@ -93,4 +97,7 @@ function handleCellClick(row: number, col: number) {
   text-align: center;
   line-height: 30px;
 }
+.heightLight {
+  background-color: red;
+}
 </style>

src/graphics/signalFaultAlarm/SignalFaultAlarm.ts

@@ -1,11 +1,11 @@
-import { Assets, Sprite, Texture } from 'pixi.js';
+import { Color, Graphics, Rectangle } from 'pixi.js';
 import {
   GraphicData,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
+  getRectangleCenter,
 } from 'src/jl-graphic';
-import signalFaultAlarmSprites from './signalFaultAlarmSprites.png';
 
 export interface ISignalFaultAlarmData extends GraphicData {
   get code(): string; // 编号
@@ -16,27 +16,19 @@ export interface ISignalFaultAlarmData extends GraphicData {
 }
 
 export const signalFaultAlarmConsts = {
-  scaleX: 0.2,
-  scaleY: 0.2,
+  width: 480,
+  height: 60,
+  lineWidth: 3,
 };
 export class SignalFaultAlarm extends JlGraphic {
   static Type = 'SignalFaultAlarm';
-  signalFaultAlarm: Sprite;
-  signalFaultAlarmTextures: Texture;
+  signalFaultAlarmGraphic: Graphics = new Graphics();
   labelGraphic = new VectorText();
 
-  constructor(signalFaultAlarmTextures: Texture) {
+  constructor() {
     super(SignalFaultAlarm.Type);
-    this.signalFaultAlarmTextures = signalFaultAlarmTextures;
-    this.signalFaultAlarm = new Sprite();
-    this.signalFaultAlarm.texture = this.signalFaultAlarmTextures;
-    this.signalFaultAlarm.anchor.set(0.5, 0.5);
-    this.signalFaultAlarm.scale.set(
-      signalFaultAlarmConsts.scaleX,
-      signalFaultAlarmConsts.scaleY
-    );
-    this.addChild(this.signalFaultAlarm);
-    this.setTextGraphic(this.labelGraphic, 'label');
+    this.addChild(this.signalFaultAlarmGraphic);
+    this.setTextGraphic(this.labelGraphic);
     this.addChild(this.labelGraphic);
   }
 
@@ -44,37 +36,51 @@ export class SignalFaultAlarm extends JlGraphic {
     return this.getDatas<ISignalFaultAlarmData>();
   }
   doRepaint(): void {
+    this.datas.code = this.datas.code || '信号机故障报警仪';
     this.labelGraphic.text = this.datas.code;
-    this.labelGraphic.position.set(0, 25);
+    const signalFaultAlarmGraphic = this.signalFaultAlarmGraphic;
+    const color =
+      '0X' +
+      (
+        this.getCanvas() as unknown as { backgroundColor: string }
+      ).backgroundColor.substring(1);
+    signalFaultAlarmGraphic
+      .clear()
+      .lineStyle(signalFaultAlarmConsts.lineWidth, new Color(color))
+      .beginFill(color)
+      .drawRect(
+        0,
+        0,
+        signalFaultAlarmConsts.width,
+        signalFaultAlarmConsts.height
+      );
+    signalFaultAlarmGraphic.pivot = getRectangleCenter(
+      new Rectangle(
+        0,
+        0,
+        signalFaultAlarmConsts.width,
+        signalFaultAlarmConsts.height
+      )
+    );
+    signalFaultAlarmGraphic.endFill;
   }
-  setTextGraphic(g: VectorText, name: string) {
+  setTextGraphic(g: VectorText) {
     g.setVectorFontSize(10);
     g.anchor.set(0.5);
     g.style.fill = '#0f0';
-    g.transformSave = true;
-    g.name = name;
+    g.position.set(0, 0);
   }
 }
 
 export class SignalFaultAlarmTemplate extends JlGraphicTemplate<SignalFaultAlarm> {
-  signalFaultAlarmTextures?: Texture;
   constructor(dataTemplate: ISignalFaultAlarmData) {
     super(SignalFaultAlarm.Type, {
       dataTemplate,
     });
   }
   new(): SignalFaultAlarm {
-    if (this.signalFaultAlarmTextures) {
-      const signalFaultAlarm = new SignalFaultAlarm(
-        this.signalFaultAlarmTextures
-      );
-      signalFaultAlarm.loadData(this.datas);
-      return signalFaultAlarm;
-    }
-    throw new Error('资源未加载/加载失败');
-  }
-  async loadAssets(): Promise<Texture> {
-    this.signalFaultAlarmTextures = await Assets.load(signalFaultAlarmSprites);
-    return this.signalFaultAlarmTextures as Texture;
+    const relay = new SignalFaultAlarm();
+    relay.loadData(this.datas);
+    return relay;
   }
 }

src/graphics/signalFaultAlarm/SignalFaultAlarmDrawAssistant.ts

@@ -23,18 +23,18 @@ export class SignalFaultAlarmDraw extends GraphicDrawAssistant<
   SignalFaultAlarmTemplate,
   ISignalFaultAlarmData
 > {
-  signalFaultAlarmGraphic: SignalFaultAlarm | null = null;
+  signalFaultAlarmGraphic: SignalFaultAlarm;
 
   constructor(app: IDrawApp, template: SignalFaultAlarmTemplate) {
     super(app, template, 'notifications_active', '信号机故障报警仪');
+    this.signalFaultAlarmGraphic = this.graphicTemplate.new();
+    this.container.addChild(this.signalFaultAlarmGraphic);
     signalFaultAlarmInteraction.init(app);
   }
   bind(): void {
     super.bind();
-    if (!this.signalFaultAlarmGraphic) {
-      this.signalFaultAlarmGraphic = this.graphicTemplate.new();
-      this.container.addChild(this.signalFaultAlarmGraphic);
-    }
+    this.signalFaultAlarmGraphic.loadData(this.graphicTemplate.datas);
+    this.signalFaultAlarmGraphic.doRepaint();
   }
 
   onLeftDown(e: FederatedPointerEvent): void {