设备添加

public/drawIcon.svg

@@ -108,6 +108,14 @@
     <path d="M618.496 453.12c32.768-13.824 61.952-33.28 87.04-58.88 25.088-25.088 45.056-54.272 58.88-87.04 14.336-33.792 21.504-69.632 21.504-106.496h-31.232c0 133.632-108.544 242.688-242.688 242.688S269.312 334.336 269.312 200.704h-31.232c0 36.864 7.168 72.704 21.504 106.496 13.824 32.768 33.28 61.952 58.88 87.04s54.272 45.056 87.04 58.88c33.792 14.336 69.632 21.504 106.496 21.504s72.704-7.168 106.496-21.504z" p-id="6710"></path>
   </symbol>
   <symbol id="icon-smoke-detector" viewBox="0 0 1024 1024" fill="fff" width="24" height="24">
-    <path d="M334.147368 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947369 2.694737-51.2 64.673684-26.947368 107.789474-8.08421 142.821052 24.252632 37.726316 37.726316 67.368421-8.084211 123.957895zM485.052632 307.2c-5.389474 8.084211-5.389474 18.863158 2.694736 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 21.557895 37.726316 37.726316 67.368421-8.08421 123.957895zM633.263158 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778947 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473685-164.378948-18.863158-35.031579-32.336842-56.589474 5.389473-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 24.252632 37.726316 37.726316 67.368421-8.08421 123.957895zM940.463158 781.473684h-56.589474l-97.010526-323.368421c-16.168421-45.810526-43.115789-61.978947-78.147369-64.673684H336.842105c-48.505263 0-78.147368 10.778947-99.705263 67.368421L142.821053 781.473684H83.536842c-26.947368 0-48.505263 21.557895-48.505263 48.505263v107.789474c0 26.947368 21.557895 48.505263 48.505263 48.505263h854.231579c26.947368 0 48.505263-21.557895 48.505263-48.505263v-107.789474c2.694737-24.252632-18.863158-48.505263-45.810526-48.505263z m-188.631579-309.894737l56.589474 188.631579h-118.568421V431.157895c35.031579 0 48.505263 5.389474 61.978947 40.421052z m-220.968421 188.631579V431.157895h121.263158v229.052631h-121.263158z m-158.989474 0V431.157895h121.263158v229.052631h-121.263158z m-37.726316-231.747368v229.052631H218.273684l56.589474-188.631578c10.778947-32.336842 24.252632-37.726316 59.28421-40.421053z m-126.652631 269.473684h611.705263l24.252632 86.231579H180.547368l26.947369-86.231579z m743.747368 242.526316c0 5.389474-5.389474 10.778947-10.778947 10.778947H83.536842c-5.389474 0-10.778947-5.389474-10.778947-10.778947v-107.789474c0-5.389474 5.389474-10.778947 10.778947-10.778947h854.231579c5.389474 0 10.778947 5.389474 10.778947 10.778947v107.789474z" fill="#101010" p-id="7798"></path>
+    <path d="M334.147368 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947369 2.694737-51.2 64.673684-26.947368 107.789474-8.08421 142.821052 24.252632 37.726316 37.726316 67.368421-8.084211 123.957895zM485.052632 307.2c-5.389474 8.084211-5.389474 18.863158 2.694736 26.947368 2.694737 2.694737 8.084211 5.389474 10.778948 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473684-164.378948-18.863158-35.031579-32.336842-56.589474 5.389474-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 21.557895 37.726316 37.726316 67.368421-8.08421 123.957895zM633.263158 307.2c-5.389474 8.084211-5.389474 18.863158 2.694737 26.947368 2.694737 2.694737 8.084211 5.389474 10.778947 5.389474 5.389474 0 10.778947-2.694737 13.473684-8.08421 61.978947-75.452632 35.031579-123.957895 13.473685-164.378948-18.863158-35.031579-32.336842-56.589474 5.389473-102.4 5.389474-8.084211 5.389474-18.863158-2.694737-26.947368-8.084211-5.389474-18.863158-5.389474-26.947368 2.694737-51.2 64.673684-26.947368 107.789474-8.084211 142.821052 24.252632 37.726316 37.726316 67.368421-8.08421 123.957895zM940.463158 781.473684h-56.589474l-97.010526-323.368421c-16.168421-45.810526-43.115789-61.978947-78.147369-64.673684H336.842105c-48.505263 0-78.147368 10.778947-99.705263 67.368421L142.821053 781.473684H83.536842c-26.947368 0-48.505263 21.557895-48.505263 48.505263v107.789474c0 26.947368 21.557895 48.505263 48.505263 48.505263h854.231579c26.947368 0 48.505263-21.557895 48.505263-48.505263v-107.789474c2.694737-24.252632-18.863158-48.505263-45.810526-48.505263z m-188.631579-309.894737l56.589474 188.631579h-118.568421V431.157895c35.031579 0 48.505263 5.389474 61.978947 40.421052z m-220.968421 188.631579V431.157895h121.263158v229.052631h-121.263158z m-158.989474 0V431.157895h121.263158v229.052631h-121.263158z m-37.726316-231.747368v229.052631H218.273684l56.589474-188.631578c10.778947-32.336842 24.252632-37.726316 59.28421-40.421053z m-126.652631 269.473684h611.705263l24.252632 86.231579H180.547368l26.947369-86.231579z m743.747368 242.526316c0 5.389474-5.389474 10.778947-10.778947 10.778947H83.536842c-5.389474 0-10.778947-5.389474-10.778947-10.778947v-107.789474c0-5.389474 5.389474-10.778947 10.778947-10.778947h854.231579c5.389474 0 10.778947 5.389474 10.778947 10.778947v107.789474z" fill="#ffffff" p-id="7798"></path>
+  </symbol>
+  <symbol id="icon-temperature-detector" viewBox="120 120 1024 1024" fill="fff" width="32" height="32">
+    <path d="M762.1632 344.7296H260.8128c-34.5856 0-52.1216 15.36-52.1216 46.08v94.0288a69.2736 69.2736 0 0 0 15.5392 44.672c23.9104 28.3904 68.1472 79.1296 77.5424 79.1296h10.24a12.8 12.8 0 0 0-0.3072 3.6608v13.0048a12.8 12.8 0 0 0 10.6752 13.6704 12.0576 12.0576 0 0 0 11.1616-13.184v-13.568c0-1.0496-0.3072-2.56-0.3072-3.6608h12.4416a963.6352 963.6352 0 0 0 39.1424 107.52c7.68 12.416 79.6928 14.2336 121.856 14.2336 20.3264 0 122.112-0.768 132.1472-13.952a648.9344 648.9344 0 0 0 35.84-108.0064h16.9728a12.8 12.8 0 0 0-0.3072 3.6608v13.0048a12.8 12.8 0 0 0 10.6752 13.6704 12.0576 12.0576 0 0 0 11.1616-13.184v-13.568c0-1.0496-0.3072-2.56-0.3072-3.6608h8.7552c9.1648 0 53.76-50.432 77.8752-78.7456a69.12 69.12 0 0 0 15.7696-44.9536V390.5536c-0.9472-30.4128-18.4832-45.824-53.0944-45.824zM425.4208 679.3216l-44.2368-4.7104v-47.5392l44.2368 5.4784v46.7712z m21.5296 0l6.0672-46.08h113.3312l5.12 46.08z m190.08-6.6304l-40.0128 6.5536v-46.8736l40.0128-5.4784z m158.4384-230.912H227.8144v-11.7504h567.6544z" p-id="2346"></path>
+  </symbol>
+  <symbol id="icon-fire-shutter" viewBox="0 0 1024 1024" fill="none" width="24" height="24">
+    <path d="M896 128v768H128V128h768m51.2-51.2H76.8v870.4h870.4V76.8z" fill="#ffffff" p-id="3528"></path>
+    <path d="M791.04 384h-563.2c-15.36 0-25.6-10.24-25.6-25.6s10.24-25.6 25.6-25.6h563.2c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zM253.44 384h25.6v512h-25.6zM739.84 384h25.6v512h-25.6z" fill="#ffffff" p-id="3529"></path>
+    <path d="M279.04 435.2h460.8v25.6h-460.8zM279.04 512h460.8v25.6h-460.8zM279.04 588.8h460.8v25.6h-460.8zM279.04 665.6h460.8v25.6h-460.8zM279.04 742.4h460.8v25.6h-460.8zM279.04 819.2h460.8v25.6h-460.8z" fill="#ffffff" p-id="3530"></path>
   </symbol>
 </svg>

src/drawApp/graphics/FAS/FasAlarmInteraction.ts

@@ -5,15 +5,15 @@ import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 
 export class FasAlarmData extends GraphicDataBase implements IFasAlarmData {
   constructor(data?: iscsGraphicData.FasAlarm) {
-    let cctvButton;
+    let fasAlarm;
     if (data) {
-      cctvButton = data;
+      fasAlarm = data;
     } else {
-      cctvButton = new iscsGraphicData.FasAlarm({
+      fasAlarm = new iscsGraphicData.FasAlarm({
         common: GraphicDataBase.defaultCommonInfo(FasAlarm.Type),
       });
     }
-    super(cctvButton);
+    super(fasAlarm);
   }
 
   public get data(): iscsGraphicData.FasAlarm {

src/drawApp/graphics/FAS/FasFailureControlHostInteraction.ts

@@ -11,15 +11,15 @@ export class FasFailureControlHostData
   implements IFasFailureControlHostData
 {
   constructor(data?: iscsGraphicData.FasFailureControlHost) {
-    let cctvButton;
+    let fasFailureControlHost;
     if (data) {
-      cctvButton = data;
+      fasFailureControlHost = data;
     } else {
-      cctvButton = new iscsGraphicData.FasFailureControlHost({
+      fasFailureControlHost = new iscsGraphicData.FasFailureControlHost({
         common: GraphicDataBase.defaultCommonInfo(FasFailureControlHost.Type),
       });
     }
-    super(cctvButton);
+    super(fasFailureControlHost);
   }
 
   public get data(): iscsGraphicData.FasFailureControlHost {

src/drawApp/graphics/FAS/FireShutterInteraction.ts

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

src/drawApp/graphics/FAS/ManualAlarmButtonInteraction.ts

@@ -11,15 +11,15 @@ export class ManualAlarmButtonData
   implements IManualAlarmButtonData
 {
   constructor(data?: iscsGraphicData.ManualAlarmButton) {
-    let cctvButton;
+    let manualAlarmButton;
     if (data) {
-      cctvButton = data;
+      manualAlarmButton = data;
     } else {
-      cctvButton = new iscsGraphicData.ManualAlarmButton({
+      manualAlarmButton = new iscsGraphicData.ManualAlarmButton({
         common: GraphicDataBase.defaultCommonInfo(ManualAlarmButton.Type),
       });
     }
-    super(cctvButton);
+    super(manualAlarmButton);
   }
 
   public get data(): iscsGraphicData.ManualAlarmButton {

src/drawApp/graphics/FAS/SmokeDetectorInteraction.ts

@@ -11,15 +11,15 @@ export class SmokeDetectorData
   implements ISmokeDetectorData
 {
   constructor(data?: iscsGraphicData.SmokeDetector) {
-    let cctvButton;
+    let smokeDetector;
     if (data) {
-      cctvButton = data;
+      smokeDetector = data;
     } else {
-      cctvButton = new iscsGraphicData.SmokeDetector({
+      smokeDetector = new iscsGraphicData.SmokeDetector({
         common: GraphicDataBase.defaultCommonInfo(SmokeDetector.Type),
       });
     }
-    super(cctvButton);
+    super(smokeDetector);
   }
 
   public get data(): iscsGraphicData.SmokeDetector {

src/drawApp/graphics/FAS/TemperatureDetectorInteraction.ts

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

src/drawApp/iscsApp.ts

@@ -47,6 +47,18 @@ import {
 } from 'src/graphics/FAS/smokeDetector/SmokeDetector';
 import { SmokeDetectorData } from './graphics/FAS/SmokeDetectorInteraction';
 import { SmokeDetectorDraw } from 'src/graphics/FAS/smokeDetector/SmokeDetectorAssistant';
+import {
+  TemperatureDetector,
+  TemperatureDetectorTemplate,
+} from 'src/graphics/FAS/temperatureDetector/TemperatureDetector';
+import { TemperatureDetectorData } from './graphics/FAS/TemperatureDetectorInteraction';
+import { TemperatureDetectorDraw } from 'src/graphics/FAS/temperatureDetector/TemperatureDetectorAssistant';
+import {
+  FireShutter,
+  FireShutterTemplate,
+} from 'src/graphics/FAS/fireShutter/FireShutter';
+import { FireShutterData } from './graphics/FAS/FireShutterInteraction';
+import { FireShutterDraw } from 'src/graphics/FAS/fireShutter/FireShutterAssistant';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -94,6 +106,11 @@ export function initIscsDrawApp(): IDrawApp {
     app,
     new SmokeDetectorTemplate(new SmokeDetectorData())
   );
+  new TemperatureDetectorDraw(
+    app,
+    new TemperatureDetectorTemplate(new TemperatureDetectorData())
+  );
+  new FireShutterDraw(app, new FireShutterTemplate(new FireShutterData()));
 
   app.addKeyboardListener(
     new KeyListener({
@@ -271,6 +288,14 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
             fasOfPlatformAlarm.smokeDetectors.forEach((smokeDetector) => {
               datas.push(new SmokeDetectorData(smokeDetector));
             });
+            fasOfPlatformAlarm.temperatureDetectors.forEach(
+              (temperatureDetector) => {
+                datas.push(new TemperatureDetectorData(temperatureDetector));
+              }
+            );
+            fasOfPlatformAlarm.fireShutters.forEach((fireShutter) => {
+              datas.push(new FireShutterData(fireShutter));
+            });
             break;
           }
         }
@@ -375,6 +400,16 @@ export function saveDrawDatas(app: IDrawApp) {
               fasStorage.smokeDetectors.push(
                 (smokeDetectorData as SmokeDetectorData).data
               );
+            } else if (g instanceof TemperatureDetector) {
+              const temperatureDetectorData = g.saveData();
+              fasStorage.temperatureDetectors.push(
+                (temperatureDetectorData as TemperatureDetectorData).data
+              );
+            } else if (g instanceof FireShutter) {
+              const fireShutterData = g.saveData();
+              fasStorage.fireShutters.push(
+                (fireShutterData as FireShutterData).data
+              );
             }
           });
           storage.fasOfPlatformAlarmStorages[i] = fasStorage;

src/graphics/FAS/firePump/FirePump.json

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

src/graphics/FAS/fireShutter/FireShutter.json

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

src/graphics/FAS/fireShutter/FireShutter.ts

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

src/graphics/FAS/fireShutter/FireShutterAssistant.ts

@@ -0,0 +1,128 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import {
+  IFireShutterData,
+  FireShutter,
+  FireShutterTemplate,
+} from './FireShutter';
+
+export class FireShutterDraw extends GraphicDrawAssistant<
+  FireShutterTemplate,
+  IFireShutterData
+> {
+  _fireShutter: FireShutter | null = null;
+  constructor(app: IDrawApp, template: FireShutterTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../drawIcon.svg#icon-fire-shutter',
+      '防火卷帘'
+    );
+    FireShutterInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._fireShutter) {
+      this._fireShutter = this.graphicTemplate.new();
+      this.container.addChild(this._fireShutter);
+    }
+  }
+
+  public get fireShutter(): FireShutter {
+    if (!this._fireShutter) {
+      this._fireShutter = this.graphicTemplate.new();
+      this.container.addChild(this._fireShutter);
+    }
+    return this._fireShutter;
+  }
+
+  redraw(cp: Point): void {
+    this.fireShutter.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.fireShutter.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: IFireShutterData): boolean {
+    data.transform = this.fireShutter.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param fireShutter
+ */
+function buildAbsorbablePositions(
+  fireShutter: FireShutter
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const fireShutters = fireShutter.queryStore.queryByType<FireShutter>(
+    FireShutter.Type
+  );
+  const canvas = fireShutter.getCanvas();
+  fireShutters.forEach((item) => {
+    if (item.id === fireShutter.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 FireShutterInteraction extends GraphicInteractionPlugin<FireShutter> {
+  static Name = 'fas_alarm_transform';
+  constructor(app: IDrawApp) {
+    super(FireShutterInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new FireShutterInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): FireShutter[] | undefined {
+    return grahpics
+      .filter((g) => g.type === FireShutter.Type)
+      .map((g) => g as FireShutter);
+  }
+  bind(g: FireShutter): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: FireShutter): 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 fireShutter = target.getGraphic() as FireShutter;
+    fireShutter.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(fireShutter),
+    });
+  }
+}

src/graphics/FAS/temperatureDetector/TemperatureDetector.json

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

src/graphics/FAS/temperatureDetector/TemperatureDetector.ts

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

src/graphics/FAS/temperatureDetector/TemperatureDetectorAssistant.ts

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

src/layouts/IscsDrawLayout.vue

@@ -310,6 +310,8 @@ import { FasFailureControlHost } from 'src/graphics/FAS/fireFailureControlHost/F
 import { FasAlarm } from 'src/graphics/FAS/fasAlarm/FasAlarm';
 import { ManualAlarmButton } from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButton';
 import { SmokeDetector } from 'src/graphics/FAS/smokeDetector/SmokeDetector';
+import { TemperatureDetector } from 'src/graphics/FAS/temperatureDetector/TemperatureDetector';
+import { FireShutter } from 'src/graphics/FAS/fireShutter/FireShutter';
 
 const $q = useQuasar();
 const route = useRoute();
@@ -398,6 +400,8 @@ function handleUtilsOption() {
       drawAssistantsTypes.push(FasAlarm.Type);
       drawAssistantsTypes.push(ManualAlarmButton.Type);
       drawAssistantsTypes.push(SmokeDetector.Type);
+      drawAssistantsTypes.push(TemperatureDetector.Type);
+      drawAssistantsTypes.push(FireShutter.Type);
       break;
   }
   drawAssistantsTypes.forEach((type) => {