Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop

rtss-proto-msg

@@ -1 +1 @@
-Subproject commit cf2e52a1e02d3f8c001c05ba6480fc201b016bef
+Subproject commit 236252fc0fa258e6beaae5b5ac0a7e28ebbcb04b

src/components/Iscs/CCTVMonitoring.vue

@@ -2,8 +2,8 @@
   <div>
     <div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
     <div class="monitoring-layout">
-      <div class="video-control">
+      <div class="video-control-text">视频控制</div>
-        <div class="video-text">视频控制</div>
+      <div class="video-control-content">
         <div>
           <div class="video-control-item">
             <div>画面布局：</div>
@@ -11,7 +11,15 @@
               dense
               outlined
               v-model="pictureLayout"
-              :options="options"
+              :options="pictureLayoutOtions"
+              style="width: 125px"
+            />
+            <q-btn
+              class="btn-padding"
+              style="margin-left: 15px"
+              label="全屏显示"
+              color="white"
+              text-color="black"
             />
           </div>
           <div class="video-control-item">
@@ -20,8 +28,9 @@
               dense
               outlined
               disable
-              v-model="pictureLayout"
+              v-model="chooseStation"
-              :options="options"
+              :options="stationOptions"
+              style="width: 220px"
             />
           </div>
           <div class="video-control-item">
@@ -30,8 +39,9 @@
               dense
               outlined
               disable
-              v-model="pictureLayout"
+              v-model="chooseTrain"
-              :options="options"
+              :options="trainOptions"
+              style="width: 220px"
             />
           </div>
           <div class="video-control-item">
@@ -39,80 +49,293 @@
             <q-select
               dense
               outlined
-              v-model="pictureLayout"
+              v-model="chooseCamera"
-              :options="options"
+              :options="cameraOptions"
+              emit-value
+              map-options
+              options-dense
+              style="width: 205px"
             />
           </div>
-          <div>
+          <q-separator />
+          <div class="mode-handle">
             <div>模式操作</div>
             <div class="video-control-item">
-              <div>显示模式操作：</div>
+              <div>显示模式选择：</div>
               <q-select
                 dense
                 outlined
-                v-model="pictureLayout"
+                v-model="chooseDisplayMode"
-                :options="options"
+                :options="displayModeOptions"
+                style="width: 190px"
               />
             </div>
-            <div class="q-gutter-sm">
+            <div class="display-mode-button">
-              <q-btn label="新增" color="white" text-color="black" />
+              <q-btn
-              <q-btn label="删除" color="white" text-color="black" />
+                class="btn-padding"
+                label="新增"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="删除"
+                color="white"
+                text-color="black"
+              />
             </div>
-            <div class="video-control-item">
+            <div class="video-control-item poll-mode">
-              <div>轮询模式操作：</div>
+              <div>轮询模式选择：</div>
               <q-select
                 dense
                 outlined
-                v-model="pictureLayout"
+                v-model="choosePollMode"
-                :options="options"
+                :options="pollModeOptions"
+                style="width: 190px"
               />
             </div>
-            <div class="q-gutter-sm">
+            <div class="poll-mode-button">
-              <q-btn label="启动" color="white" text-color="black" />
+              <q-btn
-              <q-btn label="停止" color="white" text-color="black" />
+                class="btn-padding"
-              <q-btn label="新增" color="white" text-color="black" />
+                label="启动"
-              <q-btn label="修改" color="white" text-color="black" />
+                color="white"
-              <q-btn label="删除" color="white" text-color="black" />
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="停止"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="新增"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="修改"
+                color="white"
+                text-color="black"
+              />
+              <q-btn
+                class="btn-padding"
+                label="删除"
+                color="white"
+                text-color="black"
+              />
             </div>
           </div>
+          <q-separator />
           <div>
             <div>预置位管理</div>
-            <div class="video-control-item">
+            <div class="preset-manage">
-              <div>预置位选择：</div>
+              <div class="video-control-item">
-              <q-select
+                <div>预置位选择：</div>
-                dense
+                <q-select
-                outlined
+                  dense
-                v-model="pictureLayout"
+                  outlined
-                :options="options"
+                  v-model="choosePresetPosition"
-              />
+                  :options="presetPositionOptions"
-            </div>
+                  style="width: 175px"
-            <div class="video-control-item">
+                />
-              <div>预置位名称：</div>
+              </div>
-              <q-input dense outlined v-model="presetPositionName" />
+              <div class="video-control-item">
-            </div>
+                <div>预置位名称：</div>
-            <div class="q-gutter-sm">
+                <q-input
-              <q-btn label="保存" color="white" text-color="black" />
+                  dense
-              <q-btn label="重命名" color="white" text-color="black" />
+                  outlined
-              <q-btn label="删除" color="white" text-color="black" />
+                  v-model="presetPositionName"
+                  style="width: 175px"
+                />
+              </div>
+              <div class="perset-button">
+                <q-btn
+                  class="btn-padding"
+                  label="保存"
+                  color="white"
+                  text-color="black"
+                />
+                <q-btn
+                  class="btn-padding"
+                  label="重命名"
+                  color="white"
+                  text-color="black"
+                />
+                <q-btn
+                  class="btn-padding"
+                  label="删除"
+                  color="white"
+                  text-color="black"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div>云台控制</div>
+      <q-separator />
+      <div class="ptz-control">云台控制</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { CCTV_Camera_name } from 'src/configs/cctvCamera';
 
 const props = defineProps<{
   stationName: string;
 }>();
 
 const pictureLayout = ref('2x2');
-const options = ['1x1', '2x2'];
+const pictureLayoutOtions = ['1x1', '2x2'];
+const chooseStation = ref('');
+const stationOptions = [];
+const chooseTrain = ref('');
+const trainOptions = [];
+const chooseCamera = ref(0);
+const cameraOptions = [
+  {
+    label: '备品柜',
+    value: CCTV_Camera_name.SparePartsCabinet,
+  },
+  {
+    label: '备品区',
+    value: CCTV_Camera_name.PartsArea,
+  },
+  {
+    label: '站厅',
+    value: CCTV_Camera_name.StationHall,
+  },
+  {
+    label: '上行站台',
+    value: CCTV_Camera_name.UpPlatform,
+  },
+  {
+    label: '下行站台',
+    value: CCTV_Camera_name.DownPlatform,
+  },
+  {
+    label: '站厅A出口',
+    value: CCTV_Camera_name.StationHallAExit,
+  },
+  {
+    label: 'A入口',
+    value: CCTV_Camera_name.AEntrance,
+  },
+  {
+    label: 'A口通道',
+    value: CCTV_Camera_name.APassage,
+  },
+  {
+    label: '站厅B出口',
+    value: CCTV_Camera_name.StationHallBExit,
+  },
+  {
+    label: 'B入口',
+    value: CCTV_Camera_name.BEntrance,
+  },
+  {
+    label: 'B口通道',
+    value: CCTV_Camera_name.BPassage,
+  },
+  {
+    label: '站厅C出口',
+    value: CCTV_Camera_name.StationHallCExit,
+  },
+  {
+    label: 'C入口',
+    value: CCTV_Camera_name.CEntrance,
+  },
+  {
+    label: 'C口通道',
+    value: CCTV_Camera_name.CPassage,
+  },
+  {
+    label: '站厅D出口',
+    value: CCTV_Camera_name.StationHallDExit,
+  },
+  {
+    label: 'D入口',
+    value: CCTV_Camera_name.DEntrance,
+  },
+  {
+    label: 'D口通道',
+    value: CCTV_Camera_name.DPassage,
+  },
+  {
+    label: 'A端扶梯下部开关',
+    value: CCTV_Camera_name.ALowerStepSwitch,
+  },
+  {
+    label: 'A端TVM',
+    value: CCTV_Camera_name.ATVM,
+  },
+  {
+    label: 'A端进站闸机',
+    value: CCTV_Camera_name.AInboundGate,
+  },
+  {
+    label: 'A端出站闸机',
+    value: CCTV_Camera_name.AExitGate,
+  },
+  {
+    label: 'A端扶梯上部',
+    value: CCTV_Camera_name.AUpperStep,
+  },
+  {
+    label: 'A端扶梯下部',
+    value: CCTV_Camera_name.ALowerStep,
+  },
+  {
+    label: 'A端站厅步梯口',
+    value: CCTV_Camera_name.AGangway,
+  },
+  {
+    label: 'B端扶梯下部开关',
+    value: CCTV_Camera_name.BLowerStepSwitch,
+  },
+  {
+    label: 'B端TVM',
+    value: CCTV_Camera_name.BTVM,
+  },
+  {
+    label: 'B端进站闸机',
+    value: CCTV_Camera_name.BInboundGate,
+  },
+  {
+    label: 'B端出站闸机',
+    value: CCTV_Camera_name.BExitGate,
+  },
+  {
+    label: 'B端扶梯上部',
+    value: CCTV_Camera_name.BUpperStep,
+  },
+  {
+    label: 'B端扶梯下部',
+    value: CCTV_Camera_name.BLowerStep,
+  },
+  {
+    label: 'B端站厅步梯口',
+    value: CCTV_Camera_name.BGangway,
+  },
+  {
+    label: '商铺',
+    value: CCTV_Camera_name.Shop,
+  },
+];
+const chooseDisplayMode = ref('');
+const displayModeOptions = [];
+const choosePollMode = ref('');
+const pollModeOptions = [];
+const choosePresetPosition = ref('');
+const presetPositionOptions = [];
 const presetPositionName = ref('');
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
 </script>
 
 <style lang="scss" scoped>
@@ -124,18 +347,54 @@ const presetPositionName = ref('');
   font-size: 28px;
 }
 .monitoring-layout {
-  width: 370px;
+  width: 320px;
   background-color: white;
-  .video-control {
+  .video-control-text {
-    padding: 10px;
+    margin-left: 5px;
-    .video-text {
+    font-size: 16px;
-      font-size: 16px;
+    font-weight: 600;
-    }
+  }
+  .video-control-content {
+    margin-bottom: 8px;
+    padding: 0 15px;
     .video-control-item {
       display: flex;
       align-items: center;
       margin-bottom: 20px;
     }
+    .mode-handle {
+      margin-bottom: 10px;
+      .display-mode-button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 45px;
+      }
+      .poll-mode {
+        margin-top: 10px;
+      }
+      .poll-mode-button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+    .preset-manage {
+      margin-left: 28px;
+    }
+    .perset-button {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+  .ptz-control {
+    margin-left: 5px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .btn-padding {
+    padding: 0px 10px;
   }
 }
 </style>

src/configs/cctvCamera.ts

@@ -0,0 +1,41 @@
+export enum CCTV_Camera_name{
+	//VehicleControlRoom,//车控室
+	SparePartsCabinet,//备品柜
+	PartsArea,//备品区
+	StationHall,//站厅
+	UpPlatform,//上行站台
+	DownPlatform,//下行站台
+	//APassageway,//A出入口
+	StationHallAExit,//站厅A出口
+	AEntrance,//A入口
+	APassage,//A口通道
+	//BPassageway,//B出入口
+	StationHallBExit,//站厅B出口
+	BEntrance,//B入口
+	BPassage,//B口通道
+	//CPassageway,//C出入口
+	StationHallCExit,//站厅C出口
+	CEntrance,//C入口
+	CPassage,//C口通道
+	//DPassageway,//D出入口
+	StationHallDExit,//站厅D出口
+	DEntrance,//D入口
+	DPassage,//D口通道
+	//StaionHallA,//站厅A端
+	ALowerStepSwitch,//A端扶梯下部开关
+	ATVM,//A端TVM
+	AInboundGate,//A端进站闸机
+	AExitGate,//A端出站闸机
+	AUpperStep,//A端扶梯上部
+	ALowerStep,//A端扶梯下部
+	AGangway,//A端站厅步梯口
+	//StationHallB,//站厅B端
+	BLowerStepSwitch,//B端扶梯下部开关
+	BTVM,//B端TVM
+	BInboundGate,//B端进站闸机
+	BExitGate,//B端出站闸机
+	BUpperStep,//B端扶梯上部
+	BLowerStep,//B端扶梯下部
+	BGangway,//B端站厅步梯口
+	Shop,//商铺
+}

src/drawApp/graphics/BAS/EscalatorInteraction.ts

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

src/drawApp/iscsApp.ts

@@ -59,6 +59,12 @@ import {
 } from 'src/graphics/FAS/fireShutter/FireShutter';
 import { FireShutterData } from './graphics/FAS/FireShutterInteraction';
 import { FireShutterDraw } from 'src/graphics/FAS/fireShutter/FireShutterAssistant';
+import { EscalatorDraw } from 'src/graphics/BAS/escalator/EscalatorDrawAssistant';
+import {
+  Escalator,
+  EscalatorTemplate,
+} from 'src/graphics/BAS/escalator/Escalator';
+import { EscalatorData } from './graphics/BAS/EscalatorInteraction';
 // import { getOnlyToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
@@ -93,6 +99,7 @@ export function initIscsDrawApp(): IDrawApp {
 
   const app = drawApp;
   initCommonDrawApp(app);
+  new EscalatorDraw(app, new EscalatorTemplate(new EscalatorData()));
   new FasFailureControlHostDraw(
     app,
     new FasFailureControlHostTemplate(new FasFailureControlHostData())
@@ -316,6 +323,21 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
             break;
           }
         }
+      case '电扶梯':
+        for (let i = 0; i < storage.basOfEscalatorStorages.length; i++) {
+          const basOfEscalator = storage.basOfEscalatorStorages[i];
+          if (
+            basOfEscalator.stationName ==
+            drawStore.selectSubmenuAndStation.station
+          ) {
+            canvasProperty = basOfEscalator.canvas;
+            datas = loadCommonDrawDatas(basOfEscalator);
+            basOfEscalator.escalators.forEach((escalator) => {
+              datas.push(new EscalatorData(escalator));
+            });
+            break;
+          }
+        }
       default:
         break;
     }
@@ -363,6 +385,16 @@ export function saveDrawDatas(app: IDrawApp) {
       }
     });
   }
+  if (!storage?.basOfEscalatorStorages.length) {
+    stationOption.forEach((station) =>
+      storage?.basOfEscalatorStorages.push(
+        new iscsGraphicData.BASOfEscalatorStorage({
+          stationName: station,
+          commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+        })
+      )
+    );
+  }
   const graphics = app.queryStore.getAllGraphics();
   switch (drawStore.selectSubmenuAndStation.submenu) {
     case '火灾报警平面图':
@@ -447,6 +479,35 @@ export function saveDrawDatas(app: IDrawApp) {
         }
       }
       break;
+    case '电扶梯':
+      for (let i = 0; i < storage.basOfEscalatorStorages.length; i++) {
+        let basOfEscalator = storage.basOfEscalatorStorages[i];
+        if (
+          basOfEscalator.stationName ==
+          drawStore.selectSubmenuAndStation.station
+        ) {
+          basOfEscalator = new iscsGraphicData.BASOfEscalatorStorage({
+            stationName: drawStore.selectSubmenuAndStation.station,
+            commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+          });
+          const basOfEscalatorStorage = saveCommonDrawDatas(
+            app,
+            basOfEscalator
+          ) as iscsGraphicData.BASOfEscalatorStorage;
+
+          graphics.forEach((g) => {
+            if (g instanceof Escalator) {
+              const escalatorData = g.saveData();
+              basOfEscalatorStorage.escalators.push(
+                (escalatorData as EscalatorData).data
+              );
+            }
+          });
+          storage.basOfEscalatorStorages[i] = basOfEscalatorStorage;
+          break;
+        }
+      }
+      break;
 
     default:
       break;

src/graphics/BAS/escalator/Escalator.ts

@@ -0,0 +1,75 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'jl-graphic';
+import tcc_Light_Assets from './escalator-spritesheet.png';
+import tcc_Light_JSON from './escalator-data.json';
+
+import { Assets, Sprite, Spritesheet, Texture } from 'pixi.js';
+
+interface EscalatorTextures {
+  redOn: Texture;
+  redOff: Texture;
+  greenOn: Texture;
+  greenOff: Texture;
+  blueOn: Texture;
+  blueOff: Texture;
+}
+
+export interface IescalatorData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+export class Escalator extends JlGraphic {
+  static Type = 'Escalator';
+  _escalator: Sprite;
+  escalatorTextures: EscalatorTextures;
+  __state = 0;
+
+  constructor(escalatorTextures: EscalatorTextures) {
+    super(Escalator.Type);
+    this.escalatorTextures = escalatorTextures;
+    this._escalator = new Sprite();
+    this._escalator.texture = this.escalatorTextures.greenOff;
+    this._escalator.scale.set(0.25);
+    this._escalator.anchor.set(0.5);
+    this.addChild(this._escalator);
+  }
+  get code(): string {
+    return this.datas.code;
+  }
+  get datas(): IescalatorData {
+    return this.getDatas<IescalatorData>();
+  }
+  doRepaint(): void {
+    this._escalator.texture = this.escalatorTextures.greenOn;
+  }
+}
+
+export class EscalatorTemplate extends JlGraphicTemplate<Escalator> {
+  escalatorTextures?: EscalatorTextures;
+  constructor(dataTemplate: IescalatorData) {
+    super(Escalator.Type, { dataTemplate });
+    this.loadAssets();
+  }
+  new(): Escalator {
+    if (this.escalatorTextures) {
+      const g = new Escalator(this.escalatorTextures);
+      g.loadData(this.datas);
+      return g;
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<EscalatorTextures> {
+    const texture = await Assets.load(tcc_Light_Assets);
+    const escalatorSheet = new Spritesheet(texture, tcc_Light_JSON);
+    const result = await escalatorSheet.parse();
+    this.escalatorTextures = {
+      redOff: result['red-off.png'],
+      redOn: result['red-on.png'],
+      blueOff: result['blue-off.png'],
+      blueOn: result['blue-on.png'],
+      greenOff: result['green-off.png'],
+      greenOn: result['green-on.png'],
+    };
+    return this.escalatorTextures as EscalatorTextures;
+  }
+}

src/graphics/BAS/escalator/EscalatorDrawAssistant.ts

@@ -0,0 +1,117 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  IDrawApp,
+  JlGraphic,
+} from 'jl-graphic';
+import { IescalatorData, Escalator, EscalatorTemplate } from './Escalator';
+
+export class EscalatorDraw extends GraphicDrawAssistant<
+  EscalatorTemplate,
+  IescalatorData
+> {
+  _escalator: Escalator | null = null;
+  constructor(app: IDrawApp, template: EscalatorTemplate) {
+    super(app, template, 'sym_o_lightbulb', '自动扶梯');
+    EscalatorInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this._escalator) {
+      this._escalator = this.graphicTemplate.new();
+      this.container.addChild(this._escalator);
+    }
+  }
+
+  public get escalator(): Escalator {
+    if (!this._escalator) {
+      this._escalator = this.graphicTemplate.new();
+      this.container.addChild(this._escalator);
+    }
+    return this._escalator;
+  }
+
+  redraw(cp: Point): void {
+    this.escalator.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.escalator.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+  prepareData(data: IescalatorData): boolean {
+    data.transform = this.escalator.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+/**
+ * 构建吸附线
+ * @param escalator
+ */
+function buildAbsorbablePositions(escalator: Escalator): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const escalators = escalator.queryStore.queryByType<Escalator>(
+    Escalator.Type
+  );
+  const canvas = escalator.getCanvas();
+  escalators.forEach((item) => {
+    if (item.id === escalator.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 EscalatorInteraction extends GraphicInteractionPlugin<Escalator> {
+  static Name = 'tcc_light_transform';
+  constructor(app: IDrawApp) {
+    super(EscalatorInteraction.Name, app);
+  }
+  static init(app: IDrawApp) {
+    return new EscalatorInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Escalator[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Escalator.Type)
+      .map((g) => g as Escalator);
+  }
+  bind(g: Escalator): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: Escalator): 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 escalator = target.getGraphic() as Escalator;
+    escalator.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(escalator),
+    });
+  }
+}

src/graphics/BAS/escalator/escalator-data.json

@@ -0,0 +1,29 @@
+{
+  "frames": {
+    "green-off.png": {
+      "frame": { "x": 0, "y": 0, "w": 128, "h": 128 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 128, "h": 128 },
+      "sourceSize": { "w": 128, "h": 128 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    },
+    "green-on.png": {
+      "frame": { "x": 128, "y": 0, "w": 128, "h": 128 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 128, "h": 128 },
+      "sourceSize": { "w": 128, "h": 64 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    }
+  },
+  "meta": {
+    "app": "https://www.codeandweb.com/texturepacker",
+    "version": "1.1",
+    "image": "tcc-light.png",
+    "format": "RGBA8888",
+    "size": { "w": 256, "h": 128 },
+    "scale": "0.5",
+    "smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+  }
+}

src/layouts/IscsDrawLayout.vue

@@ -155,7 +155,7 @@
         id="component-container"
       >
         <q-scroll-area
-          :style="`width: ${showComponent.width}px;height: ${showComponent.height}px`"
+          :style="`width: ${showComponent.width}px;height: ${showComponent.height}px;background-color: #c8d0f1;`"
         >
           <div class="show-component">
             <cCTV-monitoring
@@ -310,6 +310,7 @@ 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 { Escalator } from 'src/graphics/BAS/escalator/Escalator';
 import { TemperatureDetector } from 'src/graphics/FAS/temperatureDetector/TemperatureDetector';
 import { FireShutter } from 'src/graphics/FAS/fireShutter/FireShutter';
 
@@ -392,8 +393,8 @@ function handleUtilsOption() {
     Button.Type,
   ];
   switch (drawStore.selectSubmenuAndStation.submenu) {
-    case 'CCTV设备布局图':
+    case '电扶梯':
-      //drawAssistantsTypes.push(CCTVButton.Type);
+      drawAssistantsTypes.push(Escalator.Type);
       break;
     case '火灾报警平面图':
       drawAssistantsTypes.push(FasFailureControlHost.Type);
@@ -1023,7 +1024,6 @@ onUnmounted(() => {
 .show-component {
   display: flex;
   justify-content: center;
-  background-color: #c8d0f1;
   overflow: auto;
 }
 </style>

src/protos/iscs_graphic_data.ts

@@ -11,9 +11,10 @@ export namespace iscsGraphicData {
         constructor(data?: any[] | {
             cctvOfEquipmentLayoutStorages?: CCTVOfEquipmentLayoutStorage[];
             fasOfPlatformAlarmStorages?: FASOfPlatformAlarmStorage[];
+            basOfEscalatorStorages?: BASOfEscalatorStorage[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [1, 2, 3], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("cctvOfEquipmentLayoutStorages" in data && data.cctvOfEquipmentLayoutStorages != undefined) {
                     this.cctvOfEquipmentLayoutStorages = data.cctvOfEquipmentLayoutStorages;
@@ -21,6 +22,9 @@ export namespace iscsGraphicData {
                 if ("fasOfPlatformAlarmStorages" in data && data.fasOfPlatformAlarmStorages != undefined) {
                     this.fasOfPlatformAlarmStorages = data.fasOfPlatformAlarmStorages;
                 }
+                if ("basOfEscalatorStorages" in data && data.basOfEscalatorStorages != undefined) {
+                    this.basOfEscalatorStorages = data.basOfEscalatorStorages;
+                }
             }
         }
         get cctvOfEquipmentLayoutStorages() {
@@ -35,9 +39,16 @@ export namespace iscsGraphicData {
         set fasOfPlatformAlarmStorages(value: FASOfPlatformAlarmStorage[]) {
             pb_1.Message.setRepeatedWrapperField(this, 2, value);
         }
+        get basOfEscalatorStorages() {
+            return pb_1.Message.getRepeatedWrapperField(this, BASOfEscalatorStorage, 3) as BASOfEscalatorStorage[];
+        }
+        set basOfEscalatorStorages(value: BASOfEscalatorStorage[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 3, value);
+        }
         static fromObject(data: {
             cctvOfEquipmentLayoutStorages?: ReturnType<typeof CCTVOfEquipmentLayoutStorage.prototype.toObject>[];
             fasOfPlatformAlarmStorages?: ReturnType<typeof FASOfPlatformAlarmStorage.prototype.toObject>[];
+            basOfEscalatorStorages?: ReturnType<typeof BASOfEscalatorStorage.prototype.toObject>[];
         }): IscsGraphicStorage {
             const message = new IscsGraphicStorage({});
             if (data.cctvOfEquipmentLayoutStorages != null) {
@@ -46,12 +57,16 @@ export namespace iscsGraphicData {
             if (data.fasOfPlatformAlarmStorages != null) {
                 message.fasOfPlatformAlarmStorages = data.fasOfPlatformAlarmStorages.map(item => FASOfPlatformAlarmStorage.fromObject(item));
             }
+            if (data.basOfEscalatorStorages != null) {
+                message.basOfEscalatorStorages = data.basOfEscalatorStorages.map(item => BASOfEscalatorStorage.fromObject(item));
+            }
             return message;
         }
         toObject() {
             const data: {
                 cctvOfEquipmentLayoutStorages?: ReturnType<typeof CCTVOfEquipmentLayoutStorage.prototype.toObject>[];
                 fasOfPlatformAlarmStorages?: ReturnType<typeof FASOfPlatformAlarmStorage.prototype.toObject>[];
+                basOfEscalatorStorages?: ReturnType<typeof BASOfEscalatorStorage.prototype.toObject>[];
             } = {};
             if (this.cctvOfEquipmentLayoutStorages != null) {
                 data.cctvOfEquipmentLayoutStorages = this.cctvOfEquipmentLayoutStorages.map((item: CCTVOfEquipmentLayoutStorage) => item.toObject());
@@ -59,6 +74,9 @@ export namespace iscsGraphicData {
             if (this.fasOfPlatformAlarmStorages != null) {
                 data.fasOfPlatformAlarmStorages = this.fasOfPlatformAlarmStorages.map((item: FASOfPlatformAlarmStorage) => item.toObject());
             }
+            if (this.basOfEscalatorStorages != null) {
+                data.basOfEscalatorStorages = this.basOfEscalatorStorages.map((item: BASOfEscalatorStorage) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -69,6 +87,8 @@ export namespace iscsGraphicData {
                 writer.writeRepeatedMessage(1, this.cctvOfEquipmentLayoutStorages, (item: CCTVOfEquipmentLayoutStorage) => item.serialize(writer));
             if (this.fasOfPlatformAlarmStorages.length)
                 writer.writeRepeatedMessage(2, this.fasOfPlatformAlarmStorages, (item: FASOfPlatformAlarmStorage) => item.serialize(writer));
+            if (this.basOfEscalatorStorages.length)
+                writer.writeRepeatedMessage(3, this.basOfEscalatorStorages, (item: BASOfEscalatorStorage) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -84,6 +104,9 @@ export namespace iscsGraphicData {
                     case 2:
                         reader.readMessage(message.fasOfPlatformAlarmStorages, () => pb_1.Message.addToRepeatedWrapperField(message, 2, FASOfPlatformAlarmStorage.deserialize(reader), FASOfPlatformAlarmStorage));
                         break;
+                    case 3:
+                        reader.readMessage(message.basOfEscalatorStorages, () => pb_1.Message.addToRepeatedWrapperField(message, 3, BASOfEscalatorStorage.deserialize(reader), BASOfEscalatorStorage));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -2164,6 +2187,357 @@ export namespace iscsGraphicData {
             return TemperatureDetector.deserialize(bytes);
         }
     }
+    export class BASOfEscalatorStorage extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            stationName?: string;
+            canvas?: dependency_1.common.Canvas;
+            commonGraphicStorage?: CommonGraphicStorage;
+            escalators?: Escalator[];
+            verticalElevator?: VerticalElevator[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4, 5], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("stationName" in data && data.stationName != undefined) {
+                    this.stationName = data.stationName;
+                }
+                if ("canvas" in data && data.canvas != undefined) {
+                    this.canvas = data.canvas;
+                }
+                if ("commonGraphicStorage" in data && data.commonGraphicStorage != undefined) {
+                    this.commonGraphicStorage = data.commonGraphicStorage;
+                }
+                if ("escalators" in data && data.escalators != undefined) {
+                    this.escalators = data.escalators;
+                }
+                if ("verticalElevator" in data && data.verticalElevator != undefined) {
+                    this.verticalElevator = data.verticalElevator;
+                }
+            }
+        }
+        get stationName() {
+            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+        }
+        set stationName(value: string) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        get canvas() {
+            return pb_1.Message.getWrapperField(this, dependency_1.common.Canvas, 2) as dependency_1.common.Canvas;
+        }
+        set canvas(value: dependency_1.common.Canvas) {
+            pb_1.Message.setWrapperField(this, 2, value);
+        }
+        get has_canvas() {
+            return pb_1.Message.getField(this, 2) != null;
+        }
+        get commonGraphicStorage() {
+            return pb_1.Message.getWrapperField(this, CommonGraphicStorage, 3) as CommonGraphicStorage;
+        }
+        set commonGraphicStorage(value: CommonGraphicStorage) {
+            pb_1.Message.setWrapperField(this, 3, value);
+        }
+        get has_commonGraphicStorage() {
+            return pb_1.Message.getField(this, 3) != null;
+        }
+        get escalators() {
+            return pb_1.Message.getRepeatedWrapperField(this, Escalator, 4) as Escalator[];
+        }
+        set escalators(value: Escalator[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
+        get verticalElevator() {
+            return pb_1.Message.getRepeatedWrapperField(this, VerticalElevator, 5) as VerticalElevator[];
+        }
+        set verticalElevator(value: VerticalElevator[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 5, value);
+        }
+        static fromObject(data: {
+            stationName?: string;
+            canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
+            commonGraphicStorage?: ReturnType<typeof CommonGraphicStorage.prototype.toObject>;
+            escalators?: ReturnType<typeof Escalator.prototype.toObject>[];
+            verticalElevator?: ReturnType<typeof VerticalElevator.prototype.toObject>[];
+        }): BASOfEscalatorStorage {
+            const message = new BASOfEscalatorStorage({});
+            if (data.stationName != null) {
+                message.stationName = data.stationName;
+            }
+            if (data.canvas != null) {
+                message.canvas = dependency_1.common.Canvas.fromObject(data.canvas);
+            }
+            if (data.commonGraphicStorage != null) {
+                message.commonGraphicStorage = CommonGraphicStorage.fromObject(data.commonGraphicStorage);
+            }
+            if (data.escalators != null) {
+                message.escalators = data.escalators.map(item => Escalator.fromObject(item));
+            }
+            if (data.verticalElevator != null) {
+                message.verticalElevator = data.verticalElevator.map(item => VerticalElevator.fromObject(item));
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                stationName?: string;
+                canvas?: ReturnType<typeof dependency_1.common.Canvas.prototype.toObject>;
+                commonGraphicStorage?: ReturnType<typeof CommonGraphicStorage.prototype.toObject>;
+                escalators?: ReturnType<typeof Escalator.prototype.toObject>[];
+                verticalElevator?: ReturnType<typeof VerticalElevator.prototype.toObject>[];
+            } = {};
+            if (this.stationName != null) {
+                data.stationName = this.stationName;
+            }
+            if (this.canvas != null) {
+                data.canvas = this.canvas.toObject();
+            }
+            if (this.commonGraphicStorage != null) {
+                data.commonGraphicStorage = this.commonGraphicStorage.toObject();
+            }
+            if (this.escalators != null) {
+                data.escalators = this.escalators.map((item: Escalator) => item.toObject());
+            }
+            if (this.verticalElevator != null) {
+                data.verticalElevator = this.verticalElevator.map((item: VerticalElevator) => item.toObject());
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.stationName.length)
+                writer.writeString(1, this.stationName);
+            if (this.has_canvas)
+                writer.writeMessage(2, this.canvas, () => this.canvas.serialize(writer));
+            if (this.has_commonGraphicStorage)
+                writer.writeMessage(3, this.commonGraphicStorage, () => this.commonGraphicStorage.serialize(writer));
+            if (this.escalators.length)
+                writer.writeRepeatedMessage(4, this.escalators, (item: Escalator) => item.serialize(writer));
+            if (this.verticalElevator.length)
+                writer.writeRepeatedMessage(5, this.verticalElevator, (item: VerticalElevator) => item.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): BASOfEscalatorStorage {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new BASOfEscalatorStorage();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.stationName = reader.readString();
+                        break;
+                    case 2:
+                        reader.readMessage(message.canvas, () => message.canvas = dependency_1.common.Canvas.deserialize(reader));
+                        break;
+                    case 3:
+                        reader.readMessage(message.commonGraphicStorage, () => message.commonGraphicStorage = CommonGraphicStorage.deserialize(reader));
+                        break;
+                    case 4:
+                        reader.readMessage(message.escalators, () => pb_1.Message.addToRepeatedWrapperField(message, 4, Escalator.deserialize(reader), Escalator));
+                        break;
+                    case 5:
+                        reader.readMessage(message.verticalElevator, () => pb_1.Message.addToRepeatedWrapperField(message, 5, VerticalElevator.deserialize(reader), VerticalElevator));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): BASOfEscalatorStorage {
+            return BASOfEscalatorStorage.deserialize(bytes);
+        }
+    }
+    export class Escalator extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.common.CommonInfo;
+            code?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.common.CommonInfo, 1) as dependency_1.common.CommonInfo;
+        }
+        set common(value: dependency_1.common.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+            code?: string;
+        }): Escalator {
+            const message = new Escalator({});
+            if (data.common != null) {
+                message.common = dependency_1.common.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+                code?: string;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Escalator {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Escalator();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.common.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Escalator {
+            return Escalator.deserialize(bytes);
+        }
+    }
+    export class VerticalElevator extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: dependency_1.common.CommonInfo;
+            code?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, dependency_1.common.CommonInfo, 1) as dependency_1.common.CommonInfo;
+        }
+        set common(value: dependency_1.common.CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+            code?: string;
+        }): VerticalElevator {
+            const message = new VerticalElevator({});
+            if (data.common != null) {
+                message.common = dependency_1.common.CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof dependency_1.common.CommonInfo.prototype.toObject>;
+                code?: string;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): VerticalElevator {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new VerticalElevator();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = dependency_1.common.CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): VerticalElevator {
+            return VerticalElevator.deserialize(bytes);
+        }
+    }
     export class CCTVOfEquipmentLayoutStorage extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {