From f4812c7187e8dc68d38f5c116e9eebb7cb854ba7 Mon Sep 17 00:00:00 2001 From: joylink_fanyuhong <18706759286@163.com> Date: Fri, 8 Nov 2024 09:52:43 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/drawIcon.svg | 11 ++ ...ectricFireExtinguishingValveInteraction.ts | 47 ++++++ ...FireIntercommunicationSignalInteraction.ts | 47 ++++++ .../graphics/FAS/FireValveInteraction.ts | 41 ++++++ src/drawApp/iscsApp.ts | 69 +++++++++ .../ElectricFireExtinguishingValve.ts | 78 ++++++++++ ...ElectricFireExtinguishingValveAssistant.ts | 136 ++++++++++++++++++ .../FireIntercommunicationSignal.ts | 75 ++++++++++ .../FireIntercommunicationSignalAssistant.ts | 135 +++++++++++++++++ src/graphics/FAS/fireValve/FireValve.ts | 70 +++++++++ .../FAS/fireValve/FireValveAssistant.ts | 117 +++++++++++++++ src/layouts/IscsDrawLayout.vue | 6 + 12 files changed, 832 insertions(+) create mode 100644 src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts create mode 100644 src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts create mode 100644 src/drawApp/graphics/FAS/FireValveInteraction.ts create mode 100644 src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve.ts create mode 100644 src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant.ts create mode 100644 src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal.ts create mode 100644 src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant.ts create mode 100644 src/graphics/FAS/fireValve/FireValve.ts create mode 100644 src/graphics/FAS/fireValve/FireValveAssistant.ts diff --git a/public/drawIcon.svg b/public/drawIcon.svg index ead0a01..d5b6d50 100644 --- a/public/drawIcon.svg +++ b/public/drawIcon.svg @@ -173,4 +173,15 @@ + + + + + + + + + + + diff --git a/src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts b/src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts new file mode 100644 index 0000000..a3b275d --- /dev/null +++ b/src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts @@ -0,0 +1,47 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + ElectricFireExtinguishingValve, + IElectricFireExtinguishingValveData, +} from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class ElectricFireExtinguishingValveData + extends GraphicDataBase + implements IElectricFireExtinguishingValveData +{ + constructor(data?: iscsGraphicData.ElectricFireExtinguishingValve) { + let electricFireExtinguishingValve; + if (data) { + electricFireExtinguishingValve = data; + } else { + electricFireExtinguishingValve = + new iscsGraphicData.ElectricFireExtinguishingValve({ + common: GraphicDataBase.defaultCommonInfo( + ElectricFireExtinguishingValve.Type + ), + }); + } + super(electricFireExtinguishingValve); + } + + public get data(): iscsGraphicData.ElectricFireExtinguishingValve { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): ElectricFireExtinguishingValveData { + return new ElectricFireExtinguishingValveData(this.data.cloneMessage()); + } + copyFrom(data: ElectricFireExtinguishingValveData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: ElectricFireExtinguishingValveData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts b/src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts new file mode 100644 index 0000000..2b1f270 --- /dev/null +++ b/src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts @@ -0,0 +1,47 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + FireIntercommunicationSignal, + IFireIntercommunicationSignalData, +} from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class FireIntercommunicationSignalData + extends GraphicDataBase + implements IFireIntercommunicationSignalData +{ + constructor(data?: iscsGraphicData.FireIntercommunicationSignal) { + let fireIntercommunicationSignal; + if (data) { + fireIntercommunicationSignal = data; + } else { + fireIntercommunicationSignal = + new iscsGraphicData.FireIntercommunicationSignal({ + common: GraphicDataBase.defaultCommonInfo( + FireIntercommunicationSignal.Type + ), + }); + } + super(fireIntercommunicationSignal); + } + + public get data(): iscsGraphicData.FireIntercommunicationSignal { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): FireIntercommunicationSignalData { + return new FireIntercommunicationSignalData(this.data.cloneMessage()); + } + copyFrom(data: FireIntercommunicationSignalData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: FireIntercommunicationSignalData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/graphics/FAS/FireValveInteraction.ts b/src/drawApp/graphics/FAS/FireValveInteraction.ts new file mode 100644 index 0000000..ece3c2f --- /dev/null +++ b/src/drawApp/graphics/FAS/FireValveInteraction.ts @@ -0,0 +1,41 @@ +import * as pb_1 from 'google-protobuf'; +import { GraphicDataBase } from '../GraphicDataBase'; +import { + FireValve, + IFireValveData, +} from 'src/graphics/FAS/fireValve/FireValve'; +import { iscsGraphicData } from 'src/protos/iscs_graphic_data'; + +export class FireValveData extends GraphicDataBase implements IFireValveData { + constructor(data?: iscsGraphicData.FireValve) { + let fireValve; + if (data) { + fireValve = data; + } else { + fireValve = new iscsGraphicData.FireValve({ + common: GraphicDataBase.defaultCommonInfo(FireValve.Type), + }); + } + super(fireValve); + } + + public get data(): iscsGraphicData.FireValve { + return this.getData(); + } + + get code(): string { + return this.data.code; + } + set code(v: string) { + this.data.code = v; + } + clone(): FireValveData { + return new FireValveData(this.data.cloneMessage()); + } + copyFrom(data: FireValveData): void { + pb_1.Message.copyInto(data.data, this.data); + } + eq(other: FireValveData): boolean { + return pb_1.Message.equals(this.data, other.data); + } +} diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts index dff98f8..5109ad4 100644 --- a/src/drawApp/iscsApp.ts +++ b/src/drawApp/iscsApp.ts @@ -152,6 +152,24 @@ import { ElectricButterflyValveTemplate, } from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValve'; import { ElectricButterflyValveData } from './graphics/FAS/ElectricButterflyValveInteraction'; +import { FireValveDraw } from 'src/graphics/FAS/fireValve/FireValveAssistant'; +import { + FireValve, + FireValveTemplate, +} from 'src/graphics/FAS/fireValve/FireValve'; +import { FireValveData } from './graphics/FAS/FireValveInteraction'; +import { ElectricFireExtinguishingValveData } from './graphics/FAS/ElectricFireExtinguishingValveInteraction'; +import { ElectricFireExtinguishingValveDraw } from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant'; +import { + ElectricFireExtinguishingValve, + ElectricFireExtinguishingValveTemplate, +} from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve'; +import { FireIntercommunicationSignalData } from './graphics/FAS/FireIntercommunicationSignalInteraction'; +import { FireIntercommunicationSignalDraw } from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant'; +import { + FireIntercommunicationSignal, + FireIntercommunicationSignalTemplate, +} from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal'; // import { getOnlyToken } from 'src/configs/TokenManage'; let drawApp: IDrawApp | null = null; @@ -254,6 +272,19 @@ export function initIscsDrawApp(): IDrawApp { app, new ElectricButterflyValveTemplate(new ElectricButterflyValveData()) ); + new FireValveDraw(app, new FireValveTemplate(new FireValveData())); + new ElectricFireExtinguishingValveDraw( + app, + new ElectricFireExtinguishingValveTemplate( + new ElectricFireExtinguishingValveData() + ) + ); + new FireIntercommunicationSignalDraw( + app, + new FireIntercommunicationSignalTemplate( + new FireIntercommunicationSignalData() + ) + ); app.addKeyboardListener( new KeyListener({ @@ -502,6 +533,27 @@ export async function loadDrawDatas(): Promise { ); } ); + fasOfPlatformAlarm.fireValves.forEach((fireValve) => { + datas.push(new FireValveData(fireValve)); + }); + fasOfPlatformAlarm.electricFireExtinguishingValves.forEach( + (electricFireExtinguishingValve) => { + datas.push( + new ElectricFireExtinguishingValveData( + electricFireExtinguishingValve + ) + ); + } + ); + fasOfPlatformAlarm.fireIntercommunicationSignals.forEach( + (fireIntercommunicationSignal) => { + datas.push( + new FireIntercommunicationSignalData( + fireIntercommunicationSignal + ) + ); + } + ); break; } } @@ -713,6 +765,23 @@ export function saveDrawDatas(app: IDrawApp) { fasStorage.electricButterflyValves.push( (electricButterflyValveData as ElectricButterflyValveData).data ); + } else if (g instanceof FireValve) { + const fireValveData = g.saveData(); + fasStorage.fireValves.push((fireValveData as FireValveData).data); + } else if (g instanceof ElectricFireExtinguishingValve) { + const electricFireExtinguishingValveData = g.saveData(); + fasStorage.electricFireExtinguishingValves.push( + ( + electricFireExtinguishingValveData as ElectricFireExtinguishingValveData + ).data + ); + } else if (g instanceof FireIntercommunicationSignal) { + const fireIntercommunicationSignalData = g.saveData(); + fasStorage.fireIntercommunicationSignals.push( + ( + fireIntercommunicationSignalData as FireIntercommunicationSignalData + ).data + ); } }); storage.fasOfPlatformAlarmStorages[i] = fasStorage; diff --git a/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve.ts b/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve.ts new file mode 100644 index 0000000..c991522 --- /dev/null +++ b/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve.ts @@ -0,0 +1,78 @@ +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 IElectricFireExtinguishingValveData extends GraphicData { + get code(): string; + set code(v: string); +} + +interface ElectricFireExtinguishingValveTextures { + normal: Texture; + fireAlarm: Texture; + fault: Texture; + interruption: Texture; +} + +export class ElectricFireExtinguishingValve extends JlGraphic { + static Type = 'ElectricFireExtinguishingValve'; + _electricFireExtinguishingValve: Sprite; + electricFireExtinguishingValveTextures: ElectricFireExtinguishingValveTextures; + __state = 0; + + constructor( + electricFireExtinguishingValveTextures: ElectricFireExtinguishingValveTextures + ) { + super(ElectricFireExtinguishingValve.Type); + this._electricFireExtinguishingValve = new Sprite(); + this.electricFireExtinguishingValveTextures = + electricFireExtinguishingValveTextures; + this._electricFireExtinguishingValve.anchor.set(0.5); + this.addChild(this._electricFireExtinguishingValve); + this._electricFireExtinguishingValve.texture = + this.electricFireExtinguishingValveTextures.normal; + } + get code(): string { + return this.datas.code; + } + get datas(): IElectricFireExtinguishingValveData { + return this.getDatas(); + } + + doRepaint(): void {} +} + +export class ElectricFireExtinguishingValveTemplate extends JlGraphicTemplate { + electricFireExtinguishingValveTextures?: ElectricFireExtinguishingValveTextures; + constructor(dataTemplate: IElectricFireExtinguishingValveData) { + super(ElectricFireExtinguishingValve.Type, { dataTemplate }); + this.loadAssets(); + } + new(): ElectricFireExtinguishingValve { + if (this.electricFireExtinguishingValveTextures) { + const g = new ElectricFireExtinguishingValve( + this.electricFireExtinguishingValveTextures + ); + g.loadData(this.datas); + return g; + } + throw new Error('资源未加载/加载失败'); + } + async loadAssets(): Promise { + const texture = await Assets.load(FasDeviceAssets); + const electricFireExtinguishingValveSheet = new Spritesheet( + texture, + FasDeviceJson + ); + const result = await electricFireExtinguishingValveSheet.parse(); + this.electricFireExtinguishingValveTextures = { + normal: result['electricFireExtinguishingValveNormal.png'], + fireAlarm: result['_electricFireExtinguishingValveFireAlarm.png'], + fault: result['_electricFireExtinguishingValveFault.png'], + interruption: result['electricFireExtinguishingValveInterruption.png'], + }; + return this + .electricFireExtinguishingValveTextures as ElectricFireExtinguishingValveTextures; + } +} diff --git a/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant.ts b/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant.ts new file mode 100644 index 0000000..df347ec --- /dev/null +++ b/src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant.ts @@ -0,0 +1,136 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { + ElectricFireExtinguishingValve, + IElectricFireExtinguishingValveData, + ElectricFireExtinguishingValveTemplate, +} from './ElectricFireExtinguishingValve'; + +export class ElectricFireExtinguishingValveDraw extends GraphicDrawAssistant< + ElectricFireExtinguishingValveTemplate, + IElectricFireExtinguishingValveData +> { + _electricFireExtinguishingValve: ElectricFireExtinguishingValve | null = null; + constructor(app: IDrawApp, template: ElectricFireExtinguishingValveTemplate) { + super( + app, + template, + 'svguse:../drawIcon.svg#icon-electric-fire-extinguishing-valve', + '电动防烟防火阀' + ); + ElectricFireExtinguishingValveInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._electricFireExtinguishingValve) { + this._electricFireExtinguishingValve = this.graphicTemplate.new(); + this.container.addChild(this._electricFireExtinguishingValve); + } + } + + public get electricFireExtinguishingValve(): ElectricFireExtinguishingValve { + if (!this._electricFireExtinguishingValve) { + this._electricFireExtinguishingValve = this.graphicTemplate.new(); + this.container.addChild(this._electricFireExtinguishingValve); + } + return this._electricFireExtinguishingValve; + } + + redraw(cp: Point): void { + this.electricFireExtinguishingValve.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.electricFireExtinguishingValve.position.copyFrom( + this.toCanvasCoordinates(e.global) + ); + this.createAndStore(true); + } + prepareData(data: IElectricFireExtinguishingValveData): boolean { + data.transform = this.electricFireExtinguishingValve.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param electricFireExtinguishingValve + */ +function buildAbsorbablePositions( + electricFireExtinguishingValve: ElectricFireExtinguishingValve +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const electricFireExtinguishingValves = + electricFireExtinguishingValve.queryStore.queryByType( + ElectricFireExtinguishingValve.Type + ); + const canvas = electricFireExtinguishingValve.getCanvas(); + electricFireExtinguishingValves.forEach((item) => { + if (item.id === electricFireExtinguishingValve.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 ElectricFireExtinguishingValveInteraction extends GraphicInteractionPlugin { + static Name = 'electric_fire_extinguishing_valve_transform'; + constructor(app: IDrawApp) { + super(ElectricFireExtinguishingValveInteraction.Name, app); + } + static init(app: IDrawApp) { + return new ElectricFireExtinguishingValveInteraction(app); + } + filter( + ...grahpics: JlGraphic[] + ): ElectricFireExtinguishingValve[] | undefined { + return grahpics + .filter((g) => g.type === ElectricFireExtinguishingValve.Type) + .map((g) => g as ElectricFireExtinguishingValve); + } + bind(g: ElectricFireExtinguishingValve): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: ElectricFireExtinguishingValve): 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 electricFireExtinguishingValve = + target.getGraphic() as ElectricFireExtinguishingValve; + electricFireExtinguishingValve.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions( + electricFireExtinguishingValve + ), + }); + } +} diff --git a/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal.ts b/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal.ts new file mode 100644 index 0000000..985c73f --- /dev/null +++ b/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal.ts @@ -0,0 +1,75 @@ +import { Graphics } from 'pixi.js'; +import { + GraphicData, + JlGraphic, + JlGraphicTemplate, + VectorText, +} from 'jl-graphic'; + +export interface IFireIntercommunicationSignalData extends GraphicData { + get code(): string; // 编号 + set code(v: string); + clone(): IFireIntercommunicationSignalData; + copyFrom(data: IFireIntercommunicationSignalData): void; + eq(other: IFireIntercommunicationSignalData): boolean; +} + +const fireIntercommunicationSignalConsts = { + rectWidth: 64, + rectHeight: 24, + rectBackground: '0x99ccff', + textColor: '0x33cc00', + text: '2号线', + fontSize: 12, +}; + +export class FireIntercommunicationSignal extends JlGraphic { + static Type = 'FireIntercommunicationSignal'; + rectGraphic: Graphics = new Graphics(); + textGraphic: VectorText = new VectorText(); + constructor() { + super(FireIntercommunicationSignal.Type); + this.addChild(this.rectGraphic); + this.addChild(this.textGraphic); + } + + get datas(): IFireIntercommunicationSignalData { + return this.getDatas(); + } + doRepaint(): void { + const rectGraphic = this.rectGraphic; + rectGraphic.clear(); + rectGraphic.beginFill(fireIntercommunicationSignalConsts.rectBackground); + rectGraphic.drawRect( + 0, + 0, + fireIntercommunicationSignalConsts.rectWidth, + fireIntercommunicationSignalConsts.rectHeight + ); + rectGraphic.endFill(); + + this.textGraphic.text = fireIntercommunicationSignalConsts.text; + this.textGraphic.setVectorFontSize( + fireIntercommunicationSignalConsts.fontSize + ); + this.textGraphic.anchor.set(0.5); + this.textGraphic.style.fill = fireIntercommunicationSignalConsts.textColor; + this.textGraphic.position.set( + fireIntercommunicationSignalConsts.rectWidth / 2, + fireIntercommunicationSignalConsts.rectHeight / 2 + ); + } +} + +export class FireIntercommunicationSignalTemplate extends JlGraphicTemplate { + constructor(dataTemplate: IFireIntercommunicationSignalData) { + super(FireIntercommunicationSignal.Type, { + dataTemplate, + }); + } + new(): FireIntercommunicationSignal { + const fireIntercommunicationSignal = new FireIntercommunicationSignal(); + fireIntercommunicationSignal.loadData(this.datas); + return fireIntercommunicationSignal; + } +} diff --git a/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant.ts b/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant.ts new file mode 100644 index 0000000..1632918 --- /dev/null +++ b/src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant.ts @@ -0,0 +1,135 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { + IFireIntercommunicationSignalData, + FireIntercommunicationSignal, + FireIntercommunicationSignalTemplate, +} from './FireIntercommunicationSignal'; + +export class FireIntercommunicationSignalDraw extends GraphicDrawAssistant< + FireIntercommunicationSignalTemplate, + IFireIntercommunicationSignalData +> { + _fireIntercommunicationSignal: FireIntercommunicationSignal | null = null; + constructor(app: IDrawApp, template: FireIntercommunicationSignalTemplate) { + super( + app, + template, + 'svguse:../drawIcon.svg#icon-fire-intercommunication-signal', + '火灾互联互通信号' + ); + FireIntercommunicationSignalInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._fireIntercommunicationSignal) { + this._fireIntercommunicationSignal = this.graphicTemplate.new(); + this.container.addChild(this._fireIntercommunicationSignal); + this._fireIntercommunicationSignal.doRepaint(); + } + } + + public get fireIntercommunicationSignal(): FireIntercommunicationSignal { + if (!this._fireIntercommunicationSignal) { + this._fireIntercommunicationSignal = this.graphicTemplate.new(); + this.container.addChild(this._fireIntercommunicationSignal); + } + return this._fireIntercommunicationSignal; + } + + redraw(cp: Point): void { + this.fireIntercommunicationSignal.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.fireIntercommunicationSignal.position.copyFrom( + this.toCanvasCoordinates(e.global) + ); + this.createAndStore(true); + } + prepareData(data: IFireIntercommunicationSignalData): boolean { + data.transform = this.fireIntercommunicationSignal.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param fireIntercommunicationSignal + */ +function buildAbsorbablePositions( + fireIntercommunicationSignal: FireIntercommunicationSignal +): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const fireIntercommunicationSignals = + fireIntercommunicationSignal.queryStore.queryByType( + FireIntercommunicationSignal.Type + ); + const canvas = fireIntercommunicationSignal.getCanvas(); + fireIntercommunicationSignals.forEach((item) => { + if (item.id === fireIntercommunicationSignal.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 FireIntercommunicationSignalInteraction extends GraphicInteractionPlugin { + static Name = 'fire_intercommunication_signal_transform'; + constructor(app: IDrawApp) { + super(FireIntercommunicationSignalInteraction.Name, app); + } + static init(app: IDrawApp) { + return new FireIntercommunicationSignalInteraction(app); + } + filter(...grahpics: JlGraphic[]): FireIntercommunicationSignal[] | undefined { + return grahpics + .filter((g) => g.type === FireIntercommunicationSignal.Type) + .map((g) => g as FireIntercommunicationSignal); + } + bind(g: FireIntercommunicationSignal): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: FireIntercommunicationSignal): 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 fireIntercommunicationSignal = + target.getGraphic() as FireIntercommunicationSignal; + fireIntercommunicationSignal.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions( + fireIntercommunicationSignal + ), + }); + } +} diff --git a/src/graphics/FAS/fireValve/FireValve.ts b/src/graphics/FAS/fireValve/FireValve.ts new file mode 100644 index 0000000..7a691d0 --- /dev/null +++ b/src/graphics/FAS/fireValve/FireValve.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 IFireValveData extends GraphicData { + get code(): string; + set code(v: string); +} + +interface FireValveTextures { + normal: Texture; + fireAlarm: Texture; + fault: Texture; + interruption: Texture; + isolate: Texture; +} + +export class FireValve extends JlGraphic { + static Type = 'FireValve'; + _fireValve: Sprite; + fireValveTextures: FireValveTextures; + __state = 0; + + constructor(fireValveTextures: FireValveTextures) { + super(FireValve.Type); + this._fireValve = new Sprite(); + this.fireValveTextures = fireValveTextures; + this._fireValve.anchor.set(0.5); + this.addChild(this._fireValve); + this._fireValve.texture = this.fireValveTextures.normal; + } + get code(): string { + return this.datas.code; + } + get datas(): IFireValveData { + return this.getDatas(); + } + + doRepaint(): void {} +} + +export class FireValveTemplate extends JlGraphicTemplate { + fireValveTextures?: FireValveTextures; + constructor(dataTemplate: IFireValveData) { + super(FireValve.Type, { dataTemplate }); + this.loadAssets(); + } + new(): FireValve { + if (this.fireValveTextures) { + const g = new FireValve(this.fireValveTextures); + g.loadData(this.datas); + return g; + } + throw new Error('资源未加载/加载失败'); + } + async loadAssets(): Promise { + const texture = await Assets.load(FasDeviceAssets); + const fireValveSheet = new Spritesheet(texture, FasDeviceJson); + const result = await fireValveSheet.parse(); + this.fireValveTextures = { + normal: result['fireValveNormal.png'], + fireAlarm: result['fireValveFireAlarm.png'], + fault: result['fireValveFault.png'], + interruption: result['fireValveInterruption.png'], + isolate: result['fireValveIsolate.png'], + }; + return this.fireValveTextures as FireValveTextures; + } +} diff --git a/src/graphics/FAS/fireValve/FireValveAssistant.ts b/src/graphics/FAS/fireValve/FireValveAssistant.ts new file mode 100644 index 0000000..106530a --- /dev/null +++ b/src/graphics/FAS/fireValve/FireValveAssistant.ts @@ -0,0 +1,117 @@ +import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js'; +import { + AbsorbableLine, + AbsorbablePosition, + GraphicDrawAssistant, + GraphicInteractionPlugin, + GraphicTransformEvent, + IDrawApp, + JlGraphic, +} from 'jl-graphic'; +import { IFireValveData, FireValve, FireValveTemplate } from './FireValve'; + +export class FireValveDraw extends GraphicDrawAssistant< + FireValveTemplate, + IFireValveData +> { + _fireValve: FireValve | null = null; + constructor(app: IDrawApp, template: FireValveTemplate) { + super(app, template, 'svguse:../drawIcon.svg#icon-fire-valve', '防火阀'); + FireValveInteraction.init(app); + } + + bind(): void { + super.bind(); + if (!this._fireValve) { + this._fireValve = this.graphicTemplate.new(); + this.container.addChild(this._fireValve); + } + } + + public get fireValve(): FireValve { + if (!this._fireValve) { + this._fireValve = this.graphicTemplate.new(); + this.container.addChild(this._fireValve); + } + return this._fireValve; + } + + redraw(cp: Point): void { + this.fireValve.position.copyFrom(cp); + } + onLeftUp(e: FederatedMouseEvent): void { + this.fireValve.position.copyFrom(this.toCanvasCoordinates(e.global)); + this.createAndStore(true); + } + prepareData(data: IFireValveData): boolean { + data.transform = this.fireValve.saveTransform(); + return true; + } + onEsc(): void { + this.finish(); + } +} + +/** + * 构建吸附线 + * @param fireValve + */ +function buildAbsorbablePositions(fireValve: FireValve): AbsorbablePosition[] { + const aps: AbsorbablePosition[] = []; + const fireValves = fireValve.queryStore.queryByType( + FireValve.Type + ); + const canvas = fireValve.getCanvas(); + fireValves.forEach((item) => { + if (item.id === fireValve.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 FireValveInteraction extends GraphicInteractionPlugin { + static Name = 'fire_valve_transform'; + constructor(app: IDrawApp) { + super(FireValveInteraction.Name, app); + } + static init(app: IDrawApp) { + return new FireValveInteraction(app); + } + filter(...grahpics: JlGraphic[]): FireValve[] | undefined { + return grahpics + .filter((g) => g.type === FireValve.Type) + .map((g) => g as FireValve); + } + bind(g: FireValve): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.scalable = true; + g.rotatable = true; + g.on('transformstart', this.transformstart, this); + } + unbind(g: FireValve): 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 fireValve = target.getGraphic() as FireValve; + fireValve.getGraphicApp().setOptions({ + absorbablePositions: buildAbsorbablePositions(fireValve), + }); + } +} diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue index bca20bd..8d72ee0 100644 --- a/src/layouts/IscsDrawLayout.vue +++ b/src/layouts/IscsDrawLayout.vue @@ -340,6 +340,9 @@ import { StartPumpButton } from 'src/graphics/FAS/startPumpButton/StartPumpButto import { TemperatureCable } from 'src/graphics/FAS/temperatureCable/TemperatureCable'; import { ElevatorLiftToTop } from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTop'; import { ElectricButterflyValve } from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValve'; +import { FireValve } from 'src/graphics/FAS/fireValve/FireValve'; +import { ElectricFireExtinguishingValve } from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve'; +import { FireIntercommunicationSignal } from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal'; const $q = useQuasar(); const route = useRoute(); @@ -444,6 +447,9 @@ function handleUtilsOption() { drawAssistantsTypes.push(TemperatureCable.Type); drawAssistantsTypes.push(ElevatorLiftToTop.Type); drawAssistantsTypes.push(ElectricButterflyValve.Type); + drawAssistantsTypes.push(FireValve.Type); + drawAssistantsTypes.push(ElectricFireExtinguishingValve.Type); + drawAssistantsTypes.push(FireIntercommunicationSignal.Type); break; } drawAssistantsTypes.forEach((type) => {