代码暂提

public/drawIcon.svg

@@ -140,4 +140,14 @@
   <symbol id="icon-acs"  width="28" height="28" viewBox="0 0 31 37" fill="none">
     <path d="M1.65057 24H0.357955L4.09659 13.8182H5.36932L9.10795 24H7.81534L4.77273 15.429H4.69318L1.65057 24ZM2.12784 20.0227H7.33807V21.1165H2.12784V20.0227ZM18.4086 17H17.1756C17.1027 16.6454 16.9751 16.3338 16.7928 16.0653C16.6138 15.7969 16.3951 15.5715 16.1365 15.3892C15.8813 15.2036 15.598 15.0644 15.2864 14.9716C14.9748 14.8788 14.65 14.8324 14.312 14.8324C13.6955 14.8324 13.137 14.9882 12.6365 15.2997C12.1394 15.6113 11.7433 16.0703 11.4483 16.6768C11.1567 17.2834 11.0108 18.0275 11.0108 18.9091C11.0108 19.7907 11.1567 20.5348 11.4483 21.1413C11.7433 21.7479 12.1394 22.2069 12.6365 22.5185C13.137 22.83 13.6955 22.9858 14.312 22.9858C14.65 22.9858 14.9748 22.9394 15.2864 22.8466C15.598 22.7538 15.8813 22.6162 16.1365 22.4339C16.3951 22.2483 16.6138 22.0213 16.7928 21.7528C16.9751 21.4811 17.1027 21.1695 17.1756 20.8182H18.4086C18.3158 21.3385 18.1467 21.8042 17.9015 22.2152C17.6562 22.6262 17.3513 22.9759 16.9867 23.2642C16.6221 23.5492 16.2128 23.7663 15.7587 23.9155C15.3079 24.0646 14.8257 24.1392 14.312 24.1392C13.4436 24.1392 12.6713 23.9271 11.9952 23.5028C11.3191 23.0786 10.7871 22.4754 10.3993 21.6932C10.0115 20.911 9.81765 19.983 9.81765 18.9091C9.81765 17.8352 10.0115 16.9072 10.3993 16.125C10.7871 15.3428 11.3191 14.7396 11.9952 14.3153C12.6713 13.8911 13.4436 13.679 14.312 13.679C14.8257 13.679 15.3079 13.7536 15.7587 13.9027C16.2128 14.0518 16.6221 14.2706 16.9867 14.5589C17.3513 14.844 17.6562 15.192 17.9015 15.603C18.1467 16.0107 18.3158 16.4763 18.4086 17ZM25.9691 16.3636C25.9094 15.8598 25.6675 15.4688 25.2433 15.1903C24.819 14.9119 24.2987 14.7727 23.6822 14.7727C23.2314 14.7727 22.837 14.8456 22.4989 14.9915C22.1642 15.1373 21.9023 15.3378 21.7134 15.593C21.5278 15.8482 21.435 16.1383 21.435 16.4631C21.435 16.7348 21.4996 16.9685 21.6289 17.1641C21.7615 17.3563 21.9305 17.517 22.136 17.6463C22.3415 17.7723 22.5569 17.8767 22.7823 17.9595C23.0077 18.0391 23.2148 18.1037 23.4038 18.1534L24.4379 18.4318C24.703 18.5014 24.998 18.5975 25.3228 18.7202C25.6509 18.8428 25.9641 19.0102 26.2624 19.2223C26.564 19.4311 26.8126 19.6996 27.0082 20.0277C27.2037 20.3558 27.3015 20.7585 27.3015 21.2358C27.3015 21.786 27.1573 22.2831 26.869 22.7273C26.5839 23.1714 26.1663 23.5244 25.6161 23.7862C25.0692 24.0481 24.4047 24.179 23.6225 24.179C22.8933 24.179 22.262 24.0613 21.7283 23.826C21.198 23.5907 20.7804 23.2625 20.4755 22.8416C20.1739 22.4207 20.0032 21.9318 19.9634 21.375H21.2362C21.2693 21.7595 21.3986 22.0777 21.6239 22.3295C21.8526 22.5781 22.141 22.7637 22.489 22.8864C22.8403 23.0057 23.2182 23.0653 23.6225 23.0653C24.0932 23.0653 24.5157 22.9891 24.8903 22.8366C25.2648 22.6809 25.5614 22.4654 25.7802 22.1903C25.9989 21.9119 26.1083 21.5871 26.1083 21.2159C26.1083 20.8778 26.0138 20.6027 25.8249 20.3906C25.636 20.1785 25.3874 20.0062 25.0792 19.8736C24.771 19.741 24.4379 19.625 24.0799 19.5256L22.8271 19.1676C22.0316 18.9389 21.4019 18.6125 20.9379 18.1882C20.4738 17.764 20.2418 17.2088 20.2418 16.5227C20.2418 15.9527 20.396 15.4555 20.7042 15.0312C21.0157 14.6037 21.4334 14.2723 21.957 14.0369C22.484 13.7983 23.0723 13.679 23.7219 13.679C24.3782 13.679 24.9615 13.7966 25.4719 14.032C25.9824 14.264 26.3867 14.5821 26.685 14.9865C26.9866 15.3909 27.1457 15.8499 27.1623 16.3636H25.9691Z" fill="white"/>
   </symbol>
+  <symbol id="icon-non-fire-power-supply" viewBox="0 0 1024 1024" fill="none" width="28" height="28">
+    <path d="M777.898667 85.333333c28.202667 0 51.754667 24.106667 54.101333 53.034667v679.765333c0 28.928-25.898667 53.034667-54.101333 53.034667h-117.674667v50.645333a16.298667 16.298667 0 0 1-16.469333 16.853334 16.298667 16.298667 0 0 1-16.469334-16.853334v-50.645333h-98.816v50.645333A16.298667 16.298667 0 0 1 512 938.666667a16.298667 16.298667 0 0 1-16.469333-16.853334v-50.645333H396.714667v50.645333a16.298667 16.298667 0 0 1-16.469334 16.853334 16.298667 16.298667 0 0 1-16.469333-16.853334v-48.213333H246.101333A53.333333 53.333333 0 0 1 192 820.565333V138.325333C192 109.482667 217.898667 85.333333 246.101333 85.333333z m-72.96 79.530667H319.061333c-28.245333 0-54.101333 24.106667-54.101333 53.034667v523.093333a53.333333 53.333333 0 0 0 54.101333 53.034667h383.530667c28.245333 0 54.101333-24.106667 54.101333-53.034667V215.509333c0-28.928-23.509333-50.645333-51.754666-50.645333z" p-id="4599"></path><path d="M643.754667 246.826667H380.245333c-21.205333 0-35.285333 16.896-35.285333 36.181333v89.173333c0 21.717333 16.469333 36.181333 35.285333 36.181334h261.162667c21.162667 0 35.285333-16.896 35.285333-36.181334V285.44c2.346667-21.674667-14.08-38.570667-32.938666-38.570667zM481.024 619.178667H435.2c-5.973333 0-10.112-6.570667-7.978667-12.714667l45.525334-131.114667a8.576 8.576 0 0 1 7.978666-6.016h76.8c6.016 0 10.154667 6.741333 7.893334 12.885334l-26.496 71.381333H588.8c7.338667 0 11.221333 9.514667 6.4 15.530667l-122.282667 152.96c-5.973333 7.424-16.981333 0.981333-14.677333-8.533334l22.784-94.378666z" p-id="4600"></path>
+  </symbol>
+  <symbol id="icon-water-flow-indicator" width="24" height="24" viewBox="0 0 32 32" fill="none" >
+    <circle cx="16" cy="16" r="16" fill="#D9D9D9"/>
+    <path d="M14.233 21V10.8182H15.4659V19.9062H20.1989V21H14.233Z" fill="white"/>
+  </symbol>
+  <symbol id="icon-signal-butterfly-valve" width="28" height="28" viewBox="0 0 1024 1024" fill="none" >
+    <path d="M510.95 461.47c-96.06 0-173.93 77.87-173.93 173.93s77.87 173.93 173.93 173.93 173.93-77.87 173.93-173.93c-0.11-96.01-77.92-173.82-173.93-173.93z m0 0" p-id="6763"></path><path d="M510.95 308.81c-180.4 0-326.63 146.24-326.63 326.63 0 180.4 146.24 326.64 326.63 326.64s326.64-146.24 326.64-326.64c-0.2-180.31-146.32-326.43-326.64-326.63z m0 557.32c-127.43 0-230.74-103.3-230.74-230.73 0-127.43 103.3-230.74 230.74-230.74 127.43 0 230.74 103.3 230.74 230.74-0.14 127.38-103.36 230.6-230.74 230.73z m0 0M469.54 66.33h82.87c50.58 0 75.86 25.29 75.86 75.86v53.6c0 50.58-25.29 75.86-75.86 75.86h-82.87c-50.58 0-75.86-25.29-75.86-75.86v-53.6c0-50.57 25.29-75.86 75.86-75.86z m0 0M702.75 264.33c-16.57 0-30-13.43-30-30V97.92c0-16.57 13.43-30 30-30s30 13.43 30 30v136.4c0 16.57-13.43 30.01-30 30.01z" p-id="6764"></path>
+  </symbol>
 </svg>

src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import {
+  NonFirePowerSupply,
+  INonFirePowerSupplyData,
+} from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class NonFirePowerSupplyData
+  extends GraphicDataBase
+  implements INonFirePowerSupplyData
+{
+  constructor(data?: iscsGraphicData.NonFirePowerSupply) {
+    let nonFirePowerSupply;
+    if (data) {
+      nonFirePowerSupply = data;
+    } else {
+      nonFirePowerSupply = new iscsGraphicData.NonFirePowerSupply({
+        common: GraphicDataBase.defaultCommonInfo(NonFirePowerSupply.Type),
+      });
+    }
+    super(nonFirePowerSupply);
+  }
+
+  public get data(): iscsGraphicData.NonFirePowerSupply {
+    return this.getData<iscsGraphicData.NonFirePowerSupply>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): NonFirePowerSupplyData {
+    return new NonFirePowerSupplyData(this.data.cloneMessage());
+  }
+  copyFrom(data: NonFirePowerSupplyData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: NonFirePowerSupplyData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import {
+  SignalButterflyValve,
+  ISignalButterflyValveData,
+} from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class SignalButterflyValveData
+  extends GraphicDataBase
+  implements ISignalButterflyValveData
+{
+  constructor(data?: iscsGraphicData.SignalButterflyValve) {
+    let signalButterflyValve;
+    if (data) {
+      signalButterflyValve = data;
+    } else {
+      signalButterflyValve = new iscsGraphicData.SignalButterflyValve({
+        common: GraphicDataBase.defaultCommonInfo(SignalButterflyValve.Type),
+      });
+    }
+    super(signalButterflyValve);
+  }
+
+  public get data(): iscsGraphicData.SignalButterflyValve {
+    return this.getData<iscsGraphicData.SignalButterflyValve>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): SignalButterflyValveData {
+    return new SignalButterflyValveData(this.data.cloneMessage());
+  }
+  copyFrom(data: SignalButterflyValveData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SignalButterflyValveData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts

@@ -0,0 +1,44 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from '../GraphicDataBase';
+import {
+  WaterFlowIndicator,
+  IWaterFlowIndicatorData,
+} from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class WaterFlowIndicatorData
+  extends GraphicDataBase
+  implements IWaterFlowIndicatorData
+{
+  constructor(data?: iscsGraphicData.WaterFlowIndicator) {
+    let waterFlowIndicator;
+    if (data) {
+      waterFlowIndicator = data;
+    } else {
+      waterFlowIndicator = new iscsGraphicData.WaterFlowIndicator({
+        common: GraphicDataBase.defaultCommonInfo(WaterFlowIndicator.Type),
+      });
+    }
+    super(waterFlowIndicator);
+  }
+
+  public get data(): iscsGraphicData.WaterFlowIndicator {
+    return this.getData<iscsGraphicData.WaterFlowIndicator>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): WaterFlowIndicatorData {
+    return new WaterFlowIndicatorData(this.data.cloneMessage());
+  }
+  copyFrom(data: WaterFlowIndicatorData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: WaterFlowIndicatorData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/iscsApp.ts

@@ -92,6 +92,24 @@ import { AcsData } from './graphics/FAS/AcsInteraction';
 import { AfcDraw } from 'src/graphics/FAS/afc/AfcAssistant';
 import { Afc, AfcTemplate } from 'src/graphics/FAS/afc/Afc';
 import { AfcData } from './graphics/FAS/AfcInteraction';
+import { NonFirePowerSupplyDraw } from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant';
+import {
+  NonFirePowerSupply,
+  NonFirePowerSupplyTemplate,
+} from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply';
+import { NonFirePowerSupplyData } from './graphics/FAS/NonFirePowerSupplyInteraction';
+import { WaterFlowIndicatorDraw } from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant';
+import {
+  WaterFlowIndicator,
+  WaterFlowIndicatorTemplate,
+} from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator';
+import { WaterFlowIndicatorData } from './graphics/FAS/WaterFlowIndicatorInteraction';
+import { SignalButterflyValveDraw } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant';
+import {
+  SignalButterflyValve,
+  SignalButterflyValveTemplate,
+} from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve';
+import { SignalButterflyValveData } from './graphics/FAS/SignalButterflyValveInteraction';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -157,6 +175,18 @@ export function initIscsDrawApp(): IDrawApp {
   );
   new AcsDraw(app, new AcsTemplate(new AcsData()));
   new AfcDraw(app, new AfcTemplate(new AfcData()));
+  new NonFirePowerSupplyDraw(
+    app,
+    new NonFirePowerSupplyTemplate(new NonFirePowerSupplyData())
+  );
+  new WaterFlowIndicatorDraw(
+    app,
+    new WaterFlowIndicatorTemplate(new WaterFlowIndicatorData())
+  );
+  new SignalButterflyValveDraw(
+    app,
+    new SignalButterflyValveTemplate(new SignalButterflyValveData())
+  );
 
   app.addKeyboardListener(
     new KeyListener({
@@ -361,6 +391,21 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
             fasOfPlatformAlarm.afc.forEach((afc) => {
               datas.push(new AfcData(afc));
             });
+            fasOfPlatformAlarm.nonFirePowerSupplies.forEach(
+              (nonFirePowerSupply) => {
+                datas.push(new NonFirePowerSupplyData(nonFirePowerSupply));
+              }
+            );
+            fasOfPlatformAlarm.waterFlowIndicators.forEach(
+              (waterFlowIndicator) => {
+                datas.push(new WaterFlowIndicatorData(waterFlowIndicator));
+              }
+            );
+            fasOfPlatformAlarm.signalButterflyValves.forEach(
+              (signalButterflyValve) => {
+                datas.push(new SignalButterflyValveData(signalButterflyValve));
+              }
+            );
             break;
           }
         }
@@ -522,6 +567,21 @@ export function saveDrawDatas(app: IDrawApp) {
             } else if (g instanceof Afc) {
               const afcData = g.saveData();
               fasStorage.afc.push((afcData as AfcData).data);
+            } else if (g instanceof NonFirePowerSupply) {
+              const nonFirePowerSupplyData = g.saveData();
+              fasStorage.nonFirePowerSupplies.push(
+                (nonFirePowerSupplyData as NonFirePowerSupplyData).data
+              );
+            } else if (g instanceof WaterFlowIndicator) {
+              const waterFlowIndicatorData = g.saveData();
+              fasStorage.waterFlowIndicators.push(
+                (waterFlowIndicatorData as WaterFlowIndicatorData).data
+              );
+            } else if (g instanceof SignalButterflyValve) {
+              const signalButterflyValveData = g.saveData();
+              fasStorage.signalButterflyValves.push(
+                (signalButterflyValveData as SignalButterflyValveData).data
+              );
             }
           });
           storage.fasOfPlatformAlarmStorages[i] = fasStorage;

src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply.ts

@@ -0,0 +1,68 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+import FasDeviceJson from '../pndDevice/PngDevice.json';
+import FasDeviceAssets from '../pndDevice/FasDevice.png';
+
+export interface INonFirePowerSupplyData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface NonFirePowerSupplyTextures {
+  normal: Texture;
+  run: Texture;
+  fault: Texture;
+  interruption: Texture;
+}
+
+export class NonFirePowerSupply extends JlGraphic {
+  static Type = 'NonFirePowerSupply';
+  _nonFirePowerSupply: Sprite;
+  nonFirePowerSupplyTextures: NonFirePowerSupplyTextures;
+  __state = 0;
+
+  constructor(nonFirePowerSupplyTextures: NonFirePowerSupplyTextures) {
+    super(NonFirePowerSupply.Type);
+    this._nonFirePowerSupply = new Sprite();
+    this.nonFirePowerSupplyTextures = nonFirePowerSupplyTextures;
+    this._nonFirePowerSupply.anchor.set(0.5);
+    this.addChild(this._nonFirePowerSupply);
+    this._nonFirePowerSupply.texture = this.nonFirePowerSupplyTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): INonFirePowerSupplyData {
+    return this.getDatas<INonFirePowerSupplyData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class NonFirePowerSupplyTemplate extends JlGraphicTemplate<NonFirePowerSupply> {
+  nonFirePowerSupplyTextures?: NonFirePowerSupplyTextures;
+  constructor(dataTemplate: INonFirePowerSupplyData) {
+    super(NonFirePowerSupply.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): NonFirePowerSupply {
+    if (this.nonFirePowerSupplyTextures) {
+      const g = new NonFirePowerSupply(this.nonFirePowerSupplyTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<NonFirePowerSupplyTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const nonFirePowerSupplySheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await nonFirePowerSupplySheet.parse();
+    this.nonFirePowerSupplyTextures = {
+      normal: result['nonFirePowerSupplyNormal.png'],
+      run: result['nonFirePowerSupplyRun.png'],
+      fault: result['nonFirePowerSupplyFault.png'],
+      interruption: result['nonFirePowerSupplyInterruption.png'],
+    };
+    return this.nonFirePowerSupplyTextures as NonFirePowerSupplyTextures;
+  }
+}

src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  INonFirePowerSupplyData,
+  NonFirePowerSupply,
+  NonFirePowerSupplyTemplate,
+} from './NonFirePowerSupply';
+
+export class NonFirePowerSupplyDraw extends GraphicDrawAssistant<
+  NonFirePowerSupplyTemplate,
+  INonFirePowerSupplyData
+> {
+  _nonFirePowerSupply: NonFirePowerSupply | null = null;
+  constructor(app: IDrawApp, template: NonFirePowerSupplyTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-non-fire-power-supply',
+      '非消防电源'
+    );
+    NonFirePowerSupplyInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._nonFirePowerSupply) {
+      this._nonFirePowerSupply = this.graphicTemplate.new();
+      this.container.addChild(this._nonFirePowerSupply);
+    }
+  }
+
+  public get nonFirePowerSupply(): NonFirePowerSupply {
+    if (!this._nonFirePowerSupply) {
+      this._nonFirePowerSupply = this.graphicTemplate.new();
+      this.container.addChild(this._nonFirePowerSupply);
+    }
+    return this._nonFirePowerSupply;
+  }
+
+  redraw(cp: Point): void {
+    this.nonFirePowerSupply.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.nonFirePowerSupply.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: INonFirePowerSupplyData): boolean {
+    data.transform = this.nonFirePowerSupply.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param nonFirePowerSupply
+ */
+function buildAbsorbablePositions(
+  nonFirePowerSupply: NonFirePowerSupply
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const nonFirePowerSupplys =
+    nonFirePowerSupply.queryStore.queryByType<NonFirePowerSupply>(
+      NonFirePowerSupply.Type
+    );
+  const canvas = nonFirePowerSupply.getCanvas();
+  nonFirePowerSupplys.forEach((item) => {
+    if (item.id === nonFirePowerSupply.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+
+  return aps;
+}
+
+export class NonFirePowerSupplyInteraction extends GraphicInteractionPlugin<NonFirePowerSupply> {
+  static Name = 'non_fire_power_supply_transform';
+  constructor(app: IDrawApp) {
+    super(NonFirePowerSupplyInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new NonFirePowerSupplyInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): NonFirePowerSupply[] | undefined {
+    return grahpics
+      .filter((g) => g.type === NonFirePowerSupply.Type)
+      .map((g) => g as NonFirePowerSupply);
+  }
+  bind(g: NonFirePowerSupply): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: NonFirePowerSupply): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const nonFirePowerSupply = target.getGraphic() as NonFirePowerSupply;
+    nonFirePowerSupply.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(nonFirePowerSupply),
+    });
+  }
+}

src/graphics/FAS/pndDevice/PngDevice.json

@@ -209,7 +209,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "fasAlarmAlarm": {
-      "frame": { "x": 356, "y": 32, "w": 32, "h": 32 },
+      "frame": { "x": 352, "y": 32, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },
@@ -217,7 +217,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "fasAlarmNormal": {
-      "frame": { "x": 388, "y": 32, "w": 32, "h": 32 },
+      "frame": { "x": 384, "y": 32, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },
@@ -225,7 +225,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "fasAlarmIsolate": {
-      "frame": { "x": 420, "y": 32, "w": 32, "h": 32 },
+      "frame": { "x": 416, "y": 32, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },
@@ -233,7 +233,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "fasAlarmFault": {
-      "frame": { "x": 456, "y": 32, "w": 32, "h": 32 },
+      "frame": { "x": 448, "y": 32, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },
@@ -241,7 +241,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "fasAlarmInterruption": {
-      "frame": { "x": 488, "y": 32, "w": 32, "h": 32 },
+      "frame": { "x": 480, "y": 32, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },
@@ -705,7 +705,7 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "electricFireExtinguishingValveInterruption": {
-      "frame": { "x": 352, "y": 160, "w": 32, "h": 32 },
+      "frame": { "x": 384, "y": 160, "w": 32, "h": 32 },
       "rotated": false,
       "trimmed": false,
       "spriteSourceSize": { "x": 0, "y": 0, "w": 512, "h": 194 },

src/graphics/FAS/signalButterflyValve/SignalButterflyValve.ts

@@ -0,0 +1,69 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+import FasDeviceJson from '../pndDevice/PngDevice.json';
+import FasDeviceAssets from '../pndDevice/FasDevice.png';
+
+export interface ISignalButterflyValveData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface SignalButterflyValveTextures {
+  normal: Texture;
+  run: Texture;
+  stop: Texture;
+  interruption: Texture;
+}
+
+export class SignalButterflyValve extends JlGraphic {
+  static Type = 'SignalButterflyValve';
+  _signalButterflyValve: Sprite;
+  signalButterflyValveTextures: SignalButterflyValveTextures;
+  __state = 0;
+
+  constructor(signalButterflyValveTextures: SignalButterflyValveTextures) {
+    super(SignalButterflyValve.Type);
+    this._signalButterflyValve = new Sprite();
+    this.signalButterflyValveTextures = signalButterflyValveTextures;
+    this._signalButterflyValve.anchor.set(0.5);
+    this.addChild(this._signalButterflyValve);
+    this._signalButterflyValve.texture =
+      this.signalButterflyValveTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): ISignalButterflyValveData {
+    return this.getDatas<ISignalButterflyValveData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class SignalButterflyValveTemplate extends JlGraphicTemplate<SignalButterflyValve> {
+  signalButterflyValveTextures?: SignalButterflyValveTextures;
+  constructor(dataTemplate: ISignalButterflyValveData) {
+    super(SignalButterflyValve.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): SignalButterflyValve {
+    if (this.signalButterflyValveTextures) {
+      const g = new SignalButterflyValve(this.signalButterflyValveTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<SignalButterflyValveTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const signalButterflyValveSheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await signalButterflyValveSheet.parse();
+    this.signalButterflyValveTextures = {
+      normal: result['signalButterflyValveNormal.png'],
+      run: result['signalButterflyValveRun.png'],
+      stop: result['signalButterflyValveStop.png'],
+      interruption: result['signalButterflyValveInterruption.png'],
+    };
+    return this.signalButterflyValveTextures as SignalButterflyValveTextures;
+  }
+}

src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  ISignalButterflyValveData,
+  SignalButterflyValve,
+  SignalButterflyValveTemplate,
+} from './SignalButterflyValve';
+
+export class SignalButterflyValveDraw extends GraphicDrawAssistant<
+  SignalButterflyValveTemplate,
+  ISignalButterflyValveData
+> {
+  _signalButterflyValve: SignalButterflyValve | null = null;
+  constructor(app: IDrawApp, template: SignalButterflyValveTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-signal-butterfly-valve',
+      '信号蝶阀'
+    );
+    SignalButterflyValveInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._signalButterflyValve) {
+      this._signalButterflyValve = this.graphicTemplate.new();
+      this.container.addChild(this._signalButterflyValve);
+    }
+  }
+
+  public get signalButterflyValve(): SignalButterflyValve {
+    if (!this._signalButterflyValve) {
+      this._signalButterflyValve = this.graphicTemplate.new();
+      this.container.addChild(this._signalButterflyValve);
+    }
+    return this._signalButterflyValve;
+  }
+
+  redraw(cp: Point): void {
+    this.signalButterflyValve.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.signalButterflyValve.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: ISignalButterflyValveData): boolean {
+    data.transform = this.signalButterflyValve.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param signalButterflyValve
+ */
+function buildAbsorbablePositions(
+  signalButterflyValve: SignalButterflyValve
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const signalButterflyValves =
+    signalButterflyValve.queryStore.queryByType<SignalButterflyValve>(
+      SignalButterflyValve.Type
+    );
+  const canvas = signalButterflyValve.getCanvas();
+  signalButterflyValves.forEach((item) => {
+    if (item.id === signalButterflyValve.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+
+  return aps;
+}
+
+export class SignalButterflyValveInteraction extends GraphicInteractionPlugin<SignalButterflyValve> {
+  static Name = 'signal_butterfly_valve_transform';
+  constructor(app: IDrawApp) {
+    super(SignalButterflyValveInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new SignalButterflyValveInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): SignalButterflyValve[] | undefined {
+    return grahpics
+      .filter((g) => g.type === SignalButterflyValve.Type)
+      .map((g) => g as SignalButterflyValve);
+  }
+  bind(g: SignalButterflyValve): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: SignalButterflyValve): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const signalButterflyValve = target.getGraphic() as SignalButterflyValve;
+    signalButterflyValve.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(signalButterflyValve),
+    });
+  }
+}

src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator.ts

@@ -0,0 +1,69 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+// import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import FasDeviceJson from '../pndDevice/PngDevice.json';
+import FasDeviceAssets from '../pndDevice/FasDevice.png';
+
+export interface IWaterFlowIndicatorData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface WaterFlowIndicatorTextures {
+  normal: Texture;
+  run: Texture;
+  stop: Texture;
+  interruption: Texture;
+}
+
+export class WaterFlowIndicator extends JlGraphic {
+  static Type = 'WaterFlowIndicator';
+  _waterFlowIndicator: Sprite;
+  waterFlowIndicatorTextures: WaterFlowIndicatorTextures;
+  __state = 0;
+
+  constructor(waterFlowIndicatorTextures: WaterFlowIndicatorTextures) {
+    super(WaterFlowIndicator.Type);
+    this._waterFlowIndicator = new Sprite();
+    this.waterFlowIndicatorTextures = waterFlowIndicatorTextures;
+    this._waterFlowIndicator.anchor.set(0.5);
+    this.addChild(this._waterFlowIndicator);
+    this._waterFlowIndicator.texture = this.waterFlowIndicatorTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IWaterFlowIndicatorData {
+    return this.getDatas<IWaterFlowIndicatorData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class WaterFlowIndicatorTemplate extends JlGraphicTemplate<WaterFlowIndicator> {
+  waterFlowIndicatorTextures?: WaterFlowIndicatorTextures;
+  constructor(dataTemplate: IWaterFlowIndicatorData) {
+    super(WaterFlowIndicator.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): WaterFlowIndicator {
+    if (this.waterFlowIndicatorTextures) {
+      const g = new WaterFlowIndicator(this.waterFlowIndicatorTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<WaterFlowIndicatorTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const waterFlowIndicatorSheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await waterFlowIndicatorSheet.parse();
+    this.waterFlowIndicatorTextures = {
+      normal: result['waterFlowIndicatorNormal.png'],
+      run: result['waterFlowIndicatorRun.png'],
+      stop: result['waterFlowIndicatorStop.png'],
+      interruption: result['waterFlowIndicatorInterruption.png'],
+    };
+    return this.waterFlowIndicatorTextures as WaterFlowIndicatorTextures;
+  }
+}

src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  IWaterFlowIndicatorData,
+  WaterFlowIndicator,
+  WaterFlowIndicatorTemplate,
+} from './WaterFlowIndicator';
+
+export class WaterFlowIndicatorDraw extends GraphicDrawAssistant<
+  WaterFlowIndicatorTemplate,
+  IWaterFlowIndicatorData
+> {
+  _waterFlowIndicator: WaterFlowIndicator | null = null;
+  constructor(app: IDrawApp, template: WaterFlowIndicatorTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-water-flow-indicator',
+      '水流指示器'
+    );
+    WaterFlowIndicatorInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._waterFlowIndicator) {
+      this._waterFlowIndicator = this.graphicTemplate.new();
+      this.container.addChild(this._waterFlowIndicator);
+    }
+  }
+
+  public get waterFlowIndicator(): WaterFlowIndicator {
+    if (!this._waterFlowIndicator) {
+      this._waterFlowIndicator = this.graphicTemplate.new();
+      this.container.addChild(this._waterFlowIndicator);
+    }
+    return this._waterFlowIndicator;
+  }
+
+  redraw(cp: Point): void {
+    this.waterFlowIndicator.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.waterFlowIndicator.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IWaterFlowIndicatorData): boolean {
+    data.transform = this.waterFlowIndicator.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param waterFlowIndicator
+ */
+function buildAbsorbablePositions(
+  waterFlowIndicator: WaterFlowIndicator
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const waterFlowIndicators =
+    waterFlowIndicator.queryStore.queryByType<WaterFlowIndicator>(
+      WaterFlowIndicator.Type
+    );
+  const canvas = waterFlowIndicator.getCanvas();
+  waterFlowIndicators.forEach((item) => {
+    if (item.id === waterFlowIndicator.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+
+  return aps;
+}
+
+export class WaterFlowIndicatorInteraction extends GraphicInteractionPlugin<WaterFlowIndicator> {
+  static Name = 'water_flow_indicator_transform';
+  constructor(app: IDrawApp) {
+    super(WaterFlowIndicatorInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new WaterFlowIndicatorInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): WaterFlowIndicator[] | undefined {
+    return grahpics
+      .filter((g) => g.type === WaterFlowIndicator.Type)
+      .map((g) => g as WaterFlowIndicator);
+  }
+  bind(g: WaterFlowIndicator): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: WaterFlowIndicator): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const waterFlowIndicator = target.getGraphic() as WaterFlowIndicator;
+    waterFlowIndicator.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(waterFlowIndicator),
+    });
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -330,6 +330,9 @@ import { StabilizedPressurePump } from 'src/graphics/FAS/stabilizedPressurePump/
 import { Acs } from 'src/graphics/FAS/acs/Acs';
 import { VerticalElevator } from 'src/graphics/BAS/verticalElevator/VerticalElevator';
 import { Afc } from 'src/graphics/FAS/afc/Afc';
+import { NonFirePowerSupply } from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply';
+import { WaterFlowIndicator } from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator';
+import { SignalButterflyValve } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -425,6 +428,9 @@ function handleUtilsOption() {
       drawAssistantsTypes.push(StabilizedPressurePump.Type);
       drawAssistantsTypes.push(Acs.Type);
       drawAssistantsTypes.push(Afc.Type);
+      drawAssistantsTypes.push(NonFirePowerSupply.Type);
+      drawAssistantsTypes.push(WaterFlowIndicator.Type);
+      drawAssistantsTypes.push(SignalButterflyValve.Type);
       break;
   }
   drawAssistantsTypes.forEach((type) => {