From d353afa5dd253173cd3506c257eb099a34bde4fd Mon Sep 17 00:00:00 2001 From: joylink_fanyuhong <18706759286@163.com> Date: Tue, 5 Nov 2024 18:05:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9A=82=E6=8F=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/drawIcon.svg | 10 ++ .../FAS/NonFirePowerSupplyInteraction.ts | 44 ++++++ .../FAS/SignalButterflyValveInteraction.ts | 44 ++++++ .../FAS/WaterFlowIndicatorInteraction.ts | 44 ++++++ src/drawApp/iscsApp.ts | 60 ++++++++ .../nonFirePowerSupply/NonFirePowerSupply.ts | 68 +++++++++ .../NonFirePowerSupplyAssistant.ts | 131 ++++++++++++++++++ src/graphics/FAS/pndDevice/PngDevice.json | 12 +- .../SignalButterflyValve.ts | 69 +++++++++ .../SignalButterflyValveAssistant.ts | 131 ++++++++++++++++++ .../waterFlowIndicator/WaterFlowIndicator.ts | 69 +++++++++ .../WaterFlowIndicatorAssistant.ts | 131 ++++++++++++++++++ src/layouts/IscsDrawLayout.vue | 6 + 13 files changed, 813 insertions(+), 6 deletions(-) create mode 100644 src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts create mode 100644 src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts create mode 100644 src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts create mode 100644 src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply.ts create mode 100644 src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant.ts create mode 100644 src/graphics/FAS/signalButterflyValve/SignalButterflyValve.ts create mode 100644 src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant.ts create mode 100644 src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator.ts create mode 100644 src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant.ts diff --git a/public/drawIcon.svg b/public/drawIcon.svg index 4b12113..eace1d7 100644 --- a/public/drawIcon.svg +++ b/public/drawIcon.svg @@ -140,4 +140,14 @@ + + + + + + + + + + diff --git a/src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts b/src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts new file mode 100644 index 0000000..873725e --- /dev/null +++ b/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(); + } + + 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); + } +} diff --git a/src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts b/src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts new file mode 100644 index 0000000..9e2122f --- /dev/null +++ b/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(); + } + + 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); + } +} diff --git a/src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts b/src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts new file mode 100644 index 0000000..871a00e --- /dev/null +++ b/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(); + } + + 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); + } +} diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts index f2f4f41..db1a59f 100644 --- a/src/drawApp/iscsApp.ts +++ b/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 { 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; diff --git a/src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply.ts b/src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply.ts new file mode 100644 index 0000000..540a247 --- /dev/null +++ b/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(); + } + + doRepaint(): void {} +} + +export class NonFirePowerSupplyTemplate extends JlGraphicTemplate { + 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 { + 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; + } +} diff --git a/src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant.ts b/src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant.ts new file mode 100644 index 0000000..237b221 --- /dev/null +++ b/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.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 { + 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), + }); + } +} diff --git a/src/graphics/FAS/pndDevice/PngDevice.json b/src/graphics/FAS/pndDevice/PngDevice.json index e6ef53c..397a439 100644 --- a/src/graphics/FAS/pndDevice/PngDevice.json +++ b/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 }, diff --git a/src/graphics/FAS/signalButterflyValve/SignalButterflyValve.ts b/src/graphics/FAS/signalButterflyValve/SignalButterflyValve.ts new file mode 100644 index 0000000..9cb80fb --- /dev/null +++ b/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(); + } + + doRepaint(): void {} +} + +export class SignalButterflyValveTemplate extends JlGraphicTemplate { + 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 { + 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; + } +} diff --git a/src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant.ts b/src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant.ts new file mode 100644 index 0000000..678059e --- /dev/null +++ b/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.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 { + 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), + }); + } +} diff --git a/src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator.ts b/src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator.ts new file mode 100644 index 0000000..e9d403f --- /dev/null +++ b/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(); + } + + doRepaint(): void {} +} + +export class WaterFlowIndicatorTemplate extends JlGraphicTemplate { + 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 { + 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; + } +} diff --git a/src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant.ts b/src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant.ts new file mode 100644 index 0000000..06155ad --- /dev/null +++ b/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.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 { + 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), + }); + } +} diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue index 9f38406..5b80422 100644 --- a/src/layouts/IscsDrawLayout.vue +++ b/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) => {