代码暂提

package-lock.json

@@ -11,7 +11,7 @@
         "@quasar/extras": "^1.16.4",
         "axios": "^1.2.1",
         "google-protobuf": "^3.21.4",
-        "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.18",
+        "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.19",
         "js-base64": "^3.7.5",
         "pinia": "^2.0.11",
         "quasar": "^2.16.0",
@@ -4436,8 +4436,8 @@
     },
     "node_modules/jl-graphic": {
       "name": "graphic-pixi",
-      "version": "0.1.14",
-      "resolved": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#8b0ad14f7324a5eaba58239645a1fa0452e87ab4",
+      "version": "0.1.18",
+      "resolved": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#1c803d096585e258be3f60d3d95d1bd0c318d316",
       "dependencies": {
         "@pixi/graphics-extras": "^7.3.2",
         "@pixi/utils": "^7.3.2",

src/drawApp/graphics/FAS/ElectricButterflyValveInteraction.ts

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

src/drawApp/graphics/FAS/ElevatorLiftToTopInteraction.ts

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

src/drawApp/graphics/FAS/EmergencyLightingInteraction.ts

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

src/drawApp/graphics/FAS/TemperatureCableInteraction.ts

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

src/drawApp/iscsApp.ts

@@ -128,6 +128,30 @@ import {
   StartPumpButtonTemplate,
 } from 'src/graphics/FAS/startPumpButton/StartPumpButton';
 import { StartPumpButtonData } from './graphics/FAS/StartPumpButtonInteraction';
+import { TemperatureCableDraw } from 'src/graphics/FAS/temperatureCable/TemperatureCableAssistant';
+import {
+  TemperatureCable,
+  TemperatureCableTemplate,
+} from 'src/graphics/FAS/temperatureCable/TemperatureCable';
+import { TemperatureCableData } from './graphics/FAS/TemperatureCableInteraction';
+import { EmergencyLightingDraw } from 'src/graphics/FAS/emergencyLighting/EmergencyLightingAssistant';
+import {
+  EmergencyLighting,
+  EmergencyLightingTemplate,
+} from 'src/graphics/FAS/emergencyLighting/EmergencyLighting';
+import { EmergencyLightingData } from './graphics/FAS/EmergencyLightingInteraction';
+import { ElevatorLiftToTopDraw } from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTopAssistant';
+import {
+  ElevatorLiftToTop,
+  ElevatorLiftToTopTemplate,
+} from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTop';
+import { ElevatorLiftToTopData } from './graphics/FAS/ElevatorLiftToTopInteraction';
+import { ElectricButterflyValveDraw } from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValveAssistant';
+import {
+  ElectricButterflyValve,
+  ElectricButterflyValveTemplate,
+} from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValve';
+import { ElectricButterflyValveData } from './graphics/FAS/ElectricButterflyValveInteraction';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -214,6 +238,22 @@ export function initIscsDrawApp(): IDrawApp {
     app,
     new StartPumpButtonTemplate(new StartPumpButtonData())
   );
+  new TemperatureCableDraw(
+    app,
+    new TemperatureCableTemplate(new TemperatureCableData())
+  );
+  new EmergencyLightingDraw(
+    app,
+    new EmergencyLightingTemplate(new EmergencyLightingData())
+  );
+  new ElevatorLiftToTopDraw(
+    app,
+    new ElevatorLiftToTopTemplate(new ElevatorLiftToTopData())
+  );
+  new ElectricButterflyValveDraw(
+    app,
+    new ElectricButterflyValveTemplate(new ElectricButterflyValveData())
+  );
 
   app.addKeyboardListener(
     new KeyListener({
@@ -442,6 +482,26 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
             fasOfPlatformAlarm.startPumpButtons.forEach((startPumpButton) => {
               datas.push(new StartPumpButtonData(startPumpButton));
             });
+            fasOfPlatformAlarm.temperatureCables.forEach((temperatureCable) => {
+              datas.push(new TemperatureCableData(temperatureCable));
+            });
+            fasOfPlatformAlarm.emergencyLightings.forEach(
+              (emergencyLighting) => {
+                datas.push(new EmergencyLightingData(emergencyLighting));
+              }
+            );
+            fasOfPlatformAlarm.elevatorLiftToTops.forEach(
+              (elevatorLiftToTop) => {
+                datas.push(new ElevatorLiftToTopData(elevatorLiftToTop));
+              }
+            );
+            fasOfPlatformAlarm.electricButterflyValves.forEach(
+              (electricButterflyValve) => {
+                datas.push(
+                  new ElectricButterflyValveData(electricButterflyValve)
+                );
+              }
+            );
             break;
           }
         }
@@ -633,6 +693,26 @@ export function saveDrawDatas(app: IDrawApp) {
               fasStorage.startPumpButtons.push(
                 (startPumpButtonData as StartPumpButtonData).data
               );
+            } else if (g instanceof TemperatureCable) {
+              const temperatureCableData = g.saveData();
+              fasStorage.temperatureCables.push(
+                (temperatureCableData as TemperatureCableData).data
+              );
+            } else if (g instanceof EmergencyLighting) {
+              const emergencyLightingData = g.saveData();
+              fasStorage.emergencyLightings.push(
+                (emergencyLightingData as EmergencyLightingData).data
+              );
+            } else if (g instanceof ElevatorLiftToTop) {
+              const elevatorLiftToTopData = g.saveData();
+              fasStorage.elevatorLiftToTops.push(
+                (elevatorLiftToTopData as ElevatorLiftToTopData).data
+              );
+            } else if (g instanceof ElectricButterflyValve) {
+              const electricButterflyValveData = g.saveData();
+              fasStorage.electricButterflyValves.push(
+                (electricButterflyValveData as ElectricButterflyValveData).data
+              );
             }
           });
           storage.fasOfPlatformAlarmStorages[i] = fasStorage;

src/graphics/FAS/electricButterflyValve/ElectricButterflyValve.ts

@@ -0,0 +1,70 @@
+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 IElectricButterflyValveData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface ElectricButterflyValveTextures {
+  normal: Texture;
+  fireFault: Texture;
+  fault: Texture;
+  interruption: Texture;
+}
+
+export class ElectricButterflyValve extends JlGraphic {
+  static Type = 'ElectricButterflyValve';
+  _electricButterflyValve: Sprite;
+  electricButterflyValveTextures: ElectricButterflyValveTextures;
+  __state = 0;
+
+  constructor(electricButterflyValveTextures: ElectricButterflyValveTextures) {
+    super(ElectricButterflyValve.Type);
+    this._electricButterflyValve = new Sprite();
+    this.electricButterflyValveTextures = electricButterflyValveTextures;
+    this._electricButterflyValve.anchor.set(0.5);
+    this.addChild(this._electricButterflyValve);
+    this._electricButterflyValve.texture =
+      this.electricButterflyValveTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IElectricButterflyValveData {
+    return this.getDatas<IElectricButterflyValveData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class ElectricButterflyValveTemplate extends JlGraphicTemplate<ElectricButterflyValve> {
+  electricButterflyValveTextures?: ElectricButterflyValveTextures;
+  constructor(dataTemplate: IElectricButterflyValveData) {
+    super(ElectricButterflyValve.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): ElectricButterflyValve {
+    if (this.electricButterflyValveTextures) {
+      const g = new ElectricButterflyValve(this.electricButterflyValveTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<ElectricButterflyValveTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const electricButterflyValveSheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await electricButterflyValveSheet.parse();
+    this.electricButterflyValveTextures = {
+      normal: result['electricButterflyValveNormal.png'],
+      fireFault: result['electricButterflyValveFireFault.png'],
+      fault: result['electricButterflyValveFault.png'],
+      interruption: result['electricButterflyValveInterruption.png'],
+    };
+    return this
+      .electricButterflyValveTextures as ElectricButterflyValveTextures;
+  }
+}

src/graphics/FAS/electricButterflyValve/ElectricButterflyValveAssistant.ts

@@ -0,0 +1,132 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  ElectricButterflyValve,
+  IElectricButterflyValveData,
+  ElectricButterflyValveTemplate,
+} from './ElectricButterflyValve';
+
+export class ElectricButterflyValveDraw extends GraphicDrawAssistant<
+  ElectricButterflyValveTemplate,
+  IElectricButterflyValveData
+> {
+  _electricButterflyValve: ElectricButterflyValve | null = null;
+  constructor(app: IDrawApp, template: ElectricButterflyValveTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-elevator-lift-to-top',
+      '电动蝶阀'
+    );
+    ElectricButterflyValveInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._electricButterflyValve) {
+      this._electricButterflyValve = this.graphicTemplate.new();
+      this.container.addChild(this._electricButterflyValve);
+    }
+  }
+
+  public get electricButterflyValve(): ElectricButterflyValve {
+    if (!this._electricButterflyValve) {
+      this._electricButterflyValve = this.graphicTemplate.new();
+      this.container.addChild(this._electricButterflyValve);
+    }
+    return this._electricButterflyValve;
+  }
+
+  redraw(cp: Point): void {
+    this.electricButterflyValve.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.electricButterflyValve.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IElectricButterflyValveData): boolean {
+    data.transform = this.electricButterflyValve.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param electricButterflyValve
+ */
+function buildAbsorbablePositions(
+  electricButterflyValve: ElectricButterflyValve
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const electricButterflyValves =
+    electricButterflyValve.queryStore.queryByType<ElectricButterflyValve>(
+      ElectricButterflyValve.Type
+    );
+  const canvas = electricButterflyValve.getCanvas();
+  electricButterflyValves.forEach((item) => {
+    if (item.id === electricButterflyValve.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 ElectricButterflyValveInteraction extends GraphicInteractionPlugin<ElectricButterflyValve> {
+  static Name = 'electric_butter_fly_valve_transform';
+  constructor(app: IDrawApp) {
+    super(ElectricButterflyValveInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new ElectricButterflyValveInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): ElectricButterflyValve[] | undefined {
+    return grahpics
+      .filter((g) => g.type === ElectricButterflyValve.Type)
+      .map((g) => g as ElectricButterflyValve);
+  }
+  bind(g: ElectricButterflyValve): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: ElectricButterflyValve): 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 electricButterflyValve =
+      target.getGraphic() as ElectricButterflyValve;
+    electricButterflyValve.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(electricButterflyValve),
+    });
+  }
+}

src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTop.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 IElevatorLiftToTopData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface ElevatorLiftToTopTextures {
+  normal: Texture;
+  fireFault: Texture;
+  fault: Texture;
+  interruption: Texture;
+}
+
+export class ElevatorLiftToTop extends JlGraphic {
+  static Type = 'ElevatorLiftToTop';
+  _elevatorLiftToTop: Sprite;
+  elevatorLiftToTopTextures: ElevatorLiftToTopTextures;
+  __state = 0;
+
+  constructor(elevatorLiftToTopTextures: ElevatorLiftToTopTextures) {
+    super(ElevatorLiftToTop.Type);
+    this._elevatorLiftToTop = new Sprite();
+    this.elevatorLiftToTopTextures = elevatorLiftToTopTextures;
+    this._elevatorLiftToTop.anchor.set(0.5);
+    this.addChild(this._elevatorLiftToTop);
+    this._elevatorLiftToTop.texture = this.elevatorLiftToTopTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IElevatorLiftToTopData {
+    return this.getDatas<IElevatorLiftToTopData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class ElevatorLiftToTopTemplate extends JlGraphicTemplate<ElevatorLiftToTop> {
+  elevatorLiftToTopTextures?: ElevatorLiftToTopTextures;
+  constructor(dataTemplate: IElevatorLiftToTopData) {
+    super(ElevatorLiftToTop.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): ElevatorLiftToTop {
+    if (this.elevatorLiftToTopTextures) {
+      const g = new ElevatorLiftToTop(this.elevatorLiftToTopTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<ElevatorLiftToTopTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const elevatorLiftToTopSheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await elevatorLiftToTopSheet.parse();
+    this.elevatorLiftToTopTextures = {
+      normal: result['elevatorLiftToTopNormal.png'],
+      fireFault: result['elevatorLiftToTopFireFault.png'],
+      fault: result['elevatorLiftToTopFault.png'],
+      interruption: result['elevatorLiftToTopInterruption.png'],
+    };
+    return this.elevatorLiftToTopTextures as ElevatorLiftToTopTextures;
+  }
+}

src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTopAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  ElevatorLiftToTop,
+  IElevatorLiftToTopData,
+  ElevatorLiftToTopTemplate,
+} from './ElevatorLiftToTop';
+
+export class ElevatorLiftToTopDraw extends GraphicDrawAssistant<
+  ElevatorLiftToTopTemplate,
+  IElevatorLiftToTopData
+> {
+  _elevatorLiftToTop: ElevatorLiftToTop | null = null;
+  constructor(app: IDrawApp, template: ElevatorLiftToTopTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-elevator-lift-to-top',
+      '电梯归首'
+    );
+    ElevatorLiftToTopInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._elevatorLiftToTop) {
+      this._elevatorLiftToTop = this.graphicTemplate.new();
+      this.container.addChild(this._elevatorLiftToTop);
+    }
+  }
+
+  public get elevatorLiftToTop(): ElevatorLiftToTop {
+    if (!this._elevatorLiftToTop) {
+      this._elevatorLiftToTop = this.graphicTemplate.new();
+      this.container.addChild(this._elevatorLiftToTop);
+    }
+    return this._elevatorLiftToTop;
+  }
+
+  redraw(cp: Point): void {
+    this.elevatorLiftToTop.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.elevatorLiftToTop.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IElevatorLiftToTopData): boolean {
+    data.transform = this.elevatorLiftToTop.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param elevatorLiftToTop
+ */
+function buildAbsorbablePositions(
+  elevatorLiftToTop: ElevatorLiftToTop
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const elevatorLiftToTops =
+    elevatorLiftToTop.queryStore.queryByType<ElevatorLiftToTop>(
+      ElevatorLiftToTop.Type
+    );
+  const canvas = elevatorLiftToTop.getCanvas();
+  elevatorLiftToTops.forEach((item) => {
+    if (item.id === elevatorLiftToTop.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 ElevatorLiftToTopInteraction extends GraphicInteractionPlugin<ElevatorLiftToTop> {
+  static Name = 'elevator_lift_to_top_transform';
+  constructor(app: IDrawApp) {
+    super(ElevatorLiftToTopInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new ElevatorLiftToTopInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): ElevatorLiftToTop[] | undefined {
+    return grahpics
+      .filter((g) => g.type === ElevatorLiftToTop.Type)
+      .map((g) => g as ElevatorLiftToTop);
+  }
+  bind(g: ElevatorLiftToTop): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: ElevatorLiftToTop): 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 elevatorLiftToTop = target.getGraphic() as ElevatorLiftToTop;
+    elevatorLiftToTop.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(elevatorLiftToTop),
+    });
+  }
+}

src/graphics/FAS/emergencyLighting/EmergencyLighting.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 IEmergencyLightingData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface EmergencyLightingTextures {
+  normal: Texture;
+  run: Texture;
+  fault: Texture;
+  interruption: Texture;
+}
+
+export class EmergencyLighting extends JlGraphic {
+  static Type = 'EmergencyLighting';
+  _emergencyLighting: Sprite;
+  emergencyLightingTextures: EmergencyLightingTextures;
+  __state = 0;
+
+  constructor(emergencyLightingTextures: EmergencyLightingTextures) {
+    super(EmergencyLighting.Type);
+    this._emergencyLighting = new Sprite();
+    this.emergencyLightingTextures = emergencyLightingTextures;
+    this._emergencyLighting.anchor.set(0.5);
+    this.addChild(this._emergencyLighting);
+    this._emergencyLighting.texture = this.emergencyLightingTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IEmergencyLightingData {
+    return this.getDatas<IEmergencyLightingData>();
+  }
+
+  doRepaint(): void {}
+}
+
+export class EmergencyLightingTemplate extends JlGraphicTemplate<EmergencyLighting> {
+  emergencyLightingTextures?: EmergencyLightingTextures;
+  constructor(dataTemplate: IEmergencyLightingData) {
+    super(EmergencyLighting.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): EmergencyLighting {
+    if (this.emergencyLightingTextures) {
+      const g = new EmergencyLighting(this.emergencyLightingTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<EmergencyLightingTextures> {
+    const texture = await Assets.load(FasDeviceAssets);
+    const emergencyLightingSheet = new Spritesheet(texture, FasDeviceJson);
+    const result = await emergencyLightingSheet.parse();
+    this.emergencyLightingTextures = {
+      normal: result['emergencyLightingNormal.png'],
+      run: result['emergencyLightingRun.png'],
+      fault: result['emergencyLightingFault.png'],
+      interruption: result['emergencyLightingInterruption.png'],
+    };
+    return this.emergencyLightingTextures as EmergencyLightingTextures;
+  }
+}

src/graphics/FAS/emergencyLighting/EmergencyLightingAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  IEmergencyLightingData,
+  EmergencyLighting,
+  EmergencyLightingTemplate,
+} from './EmergencyLighting';
+
+export class EmergencyLightingDraw extends GraphicDrawAssistant<
+  EmergencyLightingTemplate,
+  IEmergencyLightingData
+> {
+  _emergencyLighting: EmergencyLighting | null = null;
+  constructor(app: IDrawApp, template: EmergencyLightingTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-emergency-lighting',
+      '应急照明'
+    );
+    EmergencyLightingInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._emergencyLighting) {
+      this._emergencyLighting = this.graphicTemplate.new();
+      this.container.addChild(this._emergencyLighting);
+    }
+  }
+
+  public get emergencyLighting(): EmergencyLighting {
+    if (!this._emergencyLighting) {
+      this._emergencyLighting = this.graphicTemplate.new();
+      this.container.addChild(this._emergencyLighting);
+    }
+    return this._emergencyLighting;
+  }
+
+  redraw(cp: Point): void {
+    this.emergencyLighting.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.emergencyLighting.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IEmergencyLightingData): boolean {
+    data.transform = this.emergencyLighting.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param emergencyLighting
+ */
+function buildAbsorbablePositions(
+  emergencyLighting: EmergencyLighting
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const emergencyLightings =
+    emergencyLighting.queryStore.queryByType<EmergencyLighting>(
+      EmergencyLighting.Type
+    );
+  const canvas = emergencyLighting.getCanvas();
+  emergencyLightings.forEach((item) => {
+    if (item.id === emergencyLighting.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 EmergencyLightingInteraction extends GraphicInteractionPlugin<EmergencyLighting> {
+  static Name = 'emergency_lighting_transform';
+  constructor(app: IDrawApp) {
+    super(EmergencyLightingInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new EmergencyLightingInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): EmergencyLighting[] | undefined {
+    return grahpics
+      .filter((g) => g.type === EmergencyLighting.Type)
+      .map((g) => g as EmergencyLighting);
+  }
+  bind(g: EmergencyLighting): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: EmergencyLighting): 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 emergencyLighting = target.getGraphic() as EmergencyLighting;
+    emergencyLighting.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(emergencyLighting),
+    });
+  }
+}

src/graphics/FAS/startPumpButton/StartPumpButton.ts

@@ -12,9 +12,9 @@ export interface IStartPumpButtonData extends GraphicData {
 }
 
 const startPumpConsts = {
-  circleR: 32,
+  circleR: 16,
   circleBackground: '0x99ccff',
-  textColor: '0x33cc00',
+  textColor: '0xffffff',
   text: 'ON',
   fontSize: 18,
 };
@@ -47,10 +47,7 @@ export class StartPumpButton extends JlGraphic {
     this.textGraphic.setVectorFontSize(startPumpConsts.fontSize);
     this.textGraphic.anchor.set(0.5);
     this.textGraphic.style.fill = startPumpConsts.textColor;
-    this.textGraphic.position.set(
-      startPumpConsts.circleR / 2,
-      startPumpConsts.circleR / 2
-    );
+    this.textGraphic.position.set(0, 0);
   }
 }
 

src/graphics/FAS/temperatureCable/TemperatureCable.ts

@@ -0,0 +1,73 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'jl-graphic';
+
+export interface ITemperatureCableData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  clone(): ITemperatureCableData;
+  copyFrom(data: ITemperatureCableData): void;
+  eq(other: ITemperatureCableData): boolean;
+}
+
+const temperatureCableConsts = {
+  rectWidth: 64,
+  rectHeight: 24,
+  rectBackground: '0x99ccff',
+  textColor: '0x33cc00',
+  text: '电缆',
+  fontSize: 12,
+};
+
+export class TemperatureCable extends JlGraphic {
+  static Type = 'TemperatureCable';
+  rectGraphic: Graphics = new Graphics();
+  textGraphic: VectorText = new VectorText();
+  constructor() {
+    super(TemperatureCable.Type);
+    this.addChild(this.rectGraphic);
+    this.addChild(this.textGraphic);
+  }
+
+  get datas(): ITemperatureCableData {
+    return this.getDatas<ITemperatureCableData>();
+  }
+  doRepaint(): void {
+    const rectGraphic = this.rectGraphic;
+    rectGraphic.clear();
+    rectGraphic.beginFill(temperatureCableConsts.rectBackground);
+    rectGraphic.drawRect(
+      0,
+      0,
+      temperatureCableConsts.rectWidth,
+      temperatureCableConsts.rectHeight
+    );
+    rectGraphic.endFill();
+
+    this.textGraphic.text = temperatureCableConsts.text;
+    this.textGraphic.setVectorFontSize(temperatureCableConsts.fontSize);
+    this.textGraphic.anchor.set(0.5);
+    this.textGraphic.style.fill = temperatureCableConsts.textColor;
+    this.textGraphic.position.set(
+      temperatureCableConsts.rectWidth / 2,
+      temperatureCableConsts.rectHeight / 2
+    );
+  }
+}
+
+export class TemperatureCableTemplate extends JlGraphicTemplate<TemperatureCable> {
+  constructor(dataTemplate: ITemperatureCableData) {
+    super(TemperatureCable.Type, {
+      dataTemplate,
+    });
+  }
+  new(): TemperatureCable {
+    const temperatureCable = new TemperatureCable();
+    temperatureCable.loadData(this.datas);
+    return temperatureCable;
+  }
+}

src/graphics/FAS/temperatureCable/TemperatureCableAssistant.ts

@@ -0,0 +1,130 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  ITemperatureCableData,
+  TemperatureCable,
+  TemperatureCableTemplate,
+} from './TemperatureCable';
+
+export class TemperatureCableDraw extends GraphicDrawAssistant<
+  TemperatureCableTemplate,
+  ITemperatureCableData
+> {
+  _temperatureCable: TemperatureCable | null = null;
+  constructor(app: IDrawApp, template: TemperatureCableTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-temperature-cable',
+      '感温电缆'
+    );
+    TemperatureCableInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._temperatureCable) {
+      this._temperatureCable = this.graphicTemplate.new();
+      this.container.addChild(this._temperatureCable);
+      this._temperatureCable.doRepaint();
+    }
+  }
+
+  public get temperatureCable(): TemperatureCable {
+    if (!this._temperatureCable) {
+      this._temperatureCable = this.graphicTemplate.new();
+      this.container.addChild(this._temperatureCable);
+    }
+    return this._temperatureCable;
+  }
+
+  redraw(cp: Point): void {
+    this.temperatureCable.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.temperatureCable.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: ITemperatureCableData): boolean {
+    data.transform = this.temperatureCable.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param temperatureCable
+ */
+function buildAbsorbablePositions(
+  temperatureCable: TemperatureCable
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const temperatureCables =
+    temperatureCable.queryStore.queryByType<TemperatureCable>(
+      TemperatureCable.Type
+    );
+  const canvas = temperatureCable.getCanvas();
+  temperatureCables.forEach((item) => {
+    if (item.id === temperatureCable.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 TemperatureCableInteraction extends GraphicInteractionPlugin<TemperatureCable> {
+  static Name = 'temperature_cable_transform';
+  constructor(app: IDrawApp) {
+    super(TemperatureCableInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new TemperatureCableInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TemperatureCable[] | undefined {
+    return grahpics
+      .filter((g) => g.type === TemperatureCable.Type)
+      .map((g) => g as TemperatureCable);
+  }
+  bind(g: TemperatureCable): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: TemperatureCable): 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 temperatureCable = target.getGraphic() as TemperatureCable;
+    temperatureCable.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(temperatureCable),
+    });
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -337,6 +337,9 @@ import { SignalButterflyValve } from 'src/graphics/FAS/signalButterflyValve/Sign
 import { PressureSwitch } from 'src/graphics/FAS/pressureSwitch/PressureSwitch';
 import { FaultValve } from 'src/graphics/FAS/faultValve/FaultValve';
 import { StartPumpButton } from 'src/graphics/FAS/startPumpButton/StartPumpButton';
+import { TemperatureCable } from 'src/graphics/FAS/temperatureCable/TemperatureCable';
+import { ElevatorLiftToTop } from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTop';
+import { ElectricButterflyValve } from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValve';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -438,6 +441,9 @@ function handleUtilsOption() {
       drawAssistantsTypes.push(PressureSwitch.Type);
       drawAssistantsTypes.push(FaultValve.Type);
       drawAssistantsTypes.push(StartPumpButton.Type);
+      drawAssistantsTypes.push(TemperatureCable.Type);
+      drawAssistantsTypes.push(ElevatorLiftToTop.Type);
+      drawAssistantsTypes.push(ElectricButterflyValve.Type);
       break;
   }
   drawAssistantsTypes.forEach((type) => {