添加火灾报警主机

public/drawIcon.svg

@@ -96,4 +96,8 @@
     <symbol id="icon-flood-gate" viewBox="0 0 129 139" fill="none">
     <path fill-rule="evenodd" stroke="rgba(255, 255, 255, 1)"  stroke-width="5" d="M0 1.5L61.5 1.5M61.5 1.5L123 1.5M61.5 1.5L61.5 137.5L0 137.5L123 137.5"/>
   </symbol>
+  <symbol id="icon-fas-failure-control-host" viewBox="0 0 1024 1024" fill="none" width="24" height="24">
+    <path d="M876.606061 62.060606a62.060606 62.060606 0 0 0-62.060606-62.060606H209.454545a62.060606 62.060606 0 0 0-62.060606 62.060606v899.878788a62.060606 62.060606 0 0 0 62.060606 62.060606h605.09091a62.060606 62.060606 0 0 0 62.060606-62.060606V62.060606z m-62.060606 929.093818zM209.454545 62.060606h599.272728l-0.093091 899.878788H209.454545V62.060606z m543.030303 77.575758a31.030303 31.030303 0 0 0-31.030303-31.030303H287.030303a31.030303 31.030303 0 0 0-31.030303 31.030303v108.60606a31.030303 31.030303 0 0 0 31.030303 31.030303h434.424242a31.030303 31.030303 0 0 0 31.030303-31.030303V139.636364z m-62.060606 77.575757H318.060606v-46.545454h372.363636v46.545454z m62.060606 139.636364a31.030303 31.030303 0 0 0-31.030303-31.030303H287.030303a31.030303 31.030303 0 0 0-31.030303 31.030303v108.60606a31.030303 31.030303 0 0 0 31.030303 31.030303h434.424242a31.030303 31.030303 0 0 0 31.030303-31.030303v-108.60606z m-62.060606 77.575757H318.060606v-46.545454h372.363636v46.545454z m-65.427394 244.363637a130.59103 130.59103 0 1 0-130.59103 130.59103 130.730667 130.730667 0 0 0 130.59103-130.59103z m-130.59103 68.530424a68.530424 68.530424 0 1 1 68.530424-68.530424 68.608 68.608 0 0 1-68.530424 68.530424zM442.181818 837.818182h-77.575757a31.030303 31.030303 0 0 0 0 62.060606h77.575757a31.030303 31.030303 0 0 0 0-62.060606z m201.69697 0h-77.575758a31.030303 31.030303 0 0 0 0 62.060606h77.575758a31.030303 31.030303 0 0 0 0-62.060606z" fill="#ffffff" p-id="4368"></path>
+  </symbol>
+
 </svg>

rtss-proto-msg

@@ -1 +1 @@
-Subproject commit 4ce6d5206d9ac578adb4305df8cbff59746d8d2f
+Subproject commit c3ebea56bd46e93f4bd5204bdc3966b5b9fb9d58

src/drawApp/graphics/FAS/FasFailureControlHostInteraction.ts

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

src/drawApp/iscsApp.ts

@@ -32,6 +32,12 @@ import { getWebsocketUrl } from 'src/configs/UrlManage';
 import { sync_data_message } from 'src/protos/sync_data_message';
 import { useAuthStore } from 'src/stores/auth-store';
 import { common } from 'src/protos/common';
+import {
+  FasFailureControlHost,
+  FasFailureControlHostTemplate,
+} from 'src/graphics/FAS/fireFailureControlHost/FasFailureControlHost';
+import { FasFailureControlHostData } from './graphics/FAS/FasFailureControlHostInteraction';
+import { FasFailureControlHostDraw } from 'src/graphics/FAS/fireFailureControlHost/FasFailureContorlHostAssistant';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -67,6 +73,10 @@ export function initIscsDrawApp(): IDrawApp {
   const app = drawApp;
   initCommonDrawApp(app);
   new CCTVButtonDraw(app, new CCTVButtonTemplate(new CCTVButtonData()));
+  new FasFailureControlHostDraw(
+    app,
+    new FasFailureControlHostTemplate(new FasFailureControlHostData())
+  );
 
   app.addKeyboardListener(
     new KeyListener({
@@ -225,6 +235,13 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
           ) {
             canvasProperty = fasOfPlatformAlarm.canvas;
             datas = loadCommonDrawDatas(fasOfPlatformAlarm);
+            fasOfPlatformAlarm.fasFailureControlHosts.forEach(
+              (fasFailureControlHost) => {
+                datas.push(
+                  new FasFailureControlHostData(fasFailureControlHost)
+                );
+              }
+            );
             break;
           }
         }
@@ -306,6 +323,14 @@ export function saveDrawDatas(app: IDrawApp) {
             app,
             fasOfPlatformAlarm
           ) as iscsGraphicData.FASOfPlatformAlarmStorage;
+          graphics.forEach((g) => {
+            if (g instanceof FasFailureControlHost) {
+              const fasFailureControlHostData = g.saveData();
+              fasStorage.fasFailureControlHosts.push(
+                (fasFailureControlHostData as FasFailureControlHostData).data
+              );
+            }
+          });
           storage.fasOfPlatformAlarmStorages[i] = fasStorage;
           break;
         }

src/graphics/FAS/fireFailureControlHost/FasFailureContorlHostAssistant.ts

@@ -0,0 +1,131 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  IFasFailureControlHostData,
+  FasFailureControlHost,
+  FasFailureControlHostTemplate,
+} from './FasFailureControlHost';
+
+export class FasFailureControlHostDraw extends GraphicDrawAssistant<
+  FasFailureControlHostTemplate,
+  IFasFailureControlHostData
+> {
+  _fasFailureControlHost: FasFailureControlHost | null = null;
+  constructor(app: IDrawApp, template: FasFailureControlHostTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-fas-failure-control-host',
+      '火灾故障控制主机'
+    );
+    FasFailureControlHostInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._fasFailureControlHost) {
+      this._fasFailureControlHost = this.graphicTemplate.new();
+      this.container.addChild(this._fasFailureControlHost);
+    }
+  }
+
+  public get fasFailureControlHost(): FasFailureControlHost {
+    if (!this._fasFailureControlHost) {
+      this._fasFailureControlHost = this.graphicTemplate.new();
+      this.container.addChild(this._fasFailureControlHost);
+    }
+    return this._fasFailureControlHost;
+  }
+
+  redraw(cp: Point): void {
+    this.fasFailureControlHost.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.fasFailureControlHost.position.copyFrom(
+      this.toCanvasCoordinates(e.global)
+    );
+    this.createAndStore(true);
+  }
+  prepareData(data: IFasFailureControlHostData): boolean {
+    data.transform = this.fasFailureControlHost.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param fasFailureControlHost
+ */
+function buildAbsorbablePositions(
+  fasFailureControlHost: FasFailureControlHost
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const fasFailureControlHosts =
+    fasFailureControlHost.queryStore.queryByType<FasFailureControlHost>(
+      FasFailureControlHost.Type
+    );
+  const canvas = fasFailureControlHost.getCanvas();
+  fasFailureControlHosts.forEach((item) => {
+    if (item.id === fasFailureControlHost.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 FasFailureControlHostInteraction extends GraphicInteractionPlugin<FasFailureControlHost> {
+  static Name = 'fas_failure_control_host_transform';
+  constructor(app: IDrawApp) {
+    super(FasFailureControlHostInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new FasFailureControlHostInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): FasFailureControlHost[] | undefined {
+    return grahpics
+      .filter((g) => g.type === FasFailureControlHost.Type)
+      .map((g) => g as FasFailureControlHost);
+  }
+  bind(g: FasFailureControlHost): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: FasFailureControlHost): 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 fasFailureControlHost = target.getGraphic() as FasFailureControlHost;
+    fasFailureControlHost.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(fasFailureControlHost),
+    });
+  }
+}

src/graphics/FAS/fireFailureControlHost/FasFailureControlHost.json

@@ -0,0 +1,21 @@
+{
+  "frames": {
+    "normal.png": {
+      "frame": { "x": 0, "y": 0, "w": 32, "h": 53 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 53 },
+      "sourceSize": { "w": 32, "h": 53 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.1",
+    "image": "FasFailureControlHost.png",
+    "format": "RGBA8888",
+    "size": { "w": 32, "h": 53 },
+    "scale": "1",
+    "smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+  }
+}

src/graphics/FAS/fireFailureControlHost/FasFailureControlHost.ts

@@ -0,0 +1,70 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+// import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import FasFailureControlHostJson from './FasFailureControlHost.json';
+import FasFailureControlHostAssets from './FasFailureControlHost.png';
+
+export interface IFasFailureControlHostData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+interface FasFailureControlHostTextures {
+  normal: Texture;
+}
+
+export class FasFailureControlHost extends JlGraphic {
+  static Type = 'FasFailureControlHost';
+  _fasFailureControlHost: Sprite;
+  fasFailureControlHostTextures: FasFailureControlHostTextures;
+  __state = 0;
+
+  constructor(fasFailureControlHostTextures: FasFailureControlHostTextures) {
+    super(FasFailureControlHost.Type);
+    this._fasFailureControlHost = new Sprite();
+    this.fasFailureControlHostTextures = fasFailureControlHostTextures;
+    this._fasFailureControlHost.anchor.set(0.5);
+    this.addChild(this._fasFailureControlHost);
+    this._fasFailureControlHost.texture =
+      this.fasFailureControlHostTextures.normal;
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IFasFailureControlHostData {
+    return this.getDatas<IFasFailureControlHostData>();
+  }
+
+  doRepaint(): void {
+    // this._fasFailureControlHost.texture =
+    //   this.fasFailureControlHostTextures.normal;
+  }
+}
+
+export class FasFailureControlHostTemplate extends JlGraphicTemplate<FasFailureControlHost> {
+  fasFailureControlHostTextures?: FasFailureControlHostTextures;
+  constructor(dataTemplate: IFasFailureControlHostData) {
+    super(FasFailureControlHost.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): FasFailureControlHost {
+    if (this.fasFailureControlHostTextures) {
+      const g = new FasFailureControlHost(this.fasFailureControlHostTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<FasFailureControlHostTextures> {
+    const texture = await Assets.load(FasFailureControlHostAssets);
+    const fasFailureControlHostSheet = new Spritesheet(
+      texture,
+      FasFailureControlHostJson
+    );
+    const result = await fasFailureControlHostSheet.parse();
+    this.fasFailureControlHostTextures = {
+      normal: result['normal.png'],
+    };
+    return this.fasFailureControlHostTextures as FasFailureControlHostTextures;
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -306,6 +306,7 @@ import { Circle } from 'src/graphics/circle/Circle';
 import IscsBottomAlarm from 'src/components/Iscs/IscsBottomAlarm.vue';
 import CCTVMonitoring from 'src/components/Iscs/CCTVMonitoring.vue';
 import FASPlaneGraph from 'src/components/Iscs/FASPlaneGraph.vue';
+import { FasFailureControlHost } from 'src/graphics/FAS/fireFailureControlHost/FasFailureControlHost';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -388,6 +389,9 @@ function handleUtilsOption() {
     case '监控布局图':
       drawAssistantsTypes.push(CCTVButton.Type);
       break;
+    case '火灾报警平面图':
+      drawAssistantsTypes.push(FasFailureControlHost.Type);
+      break;
   }
   drawAssistantsTypes.forEach((type) => {
     const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
@@ -566,19 +570,16 @@ const showComponent = reactive({
 });
 
 function onHeaderResize(size: { height: number; width: number }) {
-  console.log(size, '11111');
   headerHeight.value = size.height;
   onResize();
 }
 
 function onFooterResize(size: { height: number; width: number }) {
-  console.log(size, '----');
   footerHeight.value = size.height;
   onResize();
 }
 
 function onRightResize(size: { height: number; width: number }) {
-  console.log(size, '===');
   rightWidth.value = size.width;
   onResize();
 }
@@ -683,6 +684,11 @@ const subMenuOption = ref<
 >([]);
 function selectedSubMenu(subName: string) {
   drawStore.selectSubmenuAndStation.submenu = subName;
+  if (drawStore.selectSubmenuAndStation.submenu === '火灾报警平面图') {
+    drawStore.selectSubmenuAndStation.partition = '设备分区一';
+  } else {
+    drawStore.selectSubmenuAndStation.partition = '';
+  }
   subMenuDisplayForm.value = subMenuOption.value.find(
     (subMenu) => subMenu.value == subName
   ).displayForm;