Squashed commit of the following:

commit a4e63a4ab6
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Mon Nov 18 17:07:07 2024 +0800

    电子地图管理

commit 2544f5e131
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Nov 14 14:23:30 2024 +0800

    代码调整

commit 5400acf7e3
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Nov 13 17:59:00 2024 +0800

    电子地图绘制备用

commit c06acfd0b8
Merge: 3c41293 fdca6c4
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Nov 12 13:41:21 2024 +0800

    Merge branch 'develop' of https://gitea.joylink.club/joylink/rtsa-client into develop

commit 3c41293f0b
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Nov 12 13:41:17 2024 +0800

    获取用户id调整

commit fdca6c490b
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Tue Nov 12 13:18:57 2024 +0800

    密码去掉加盐

commit b429bf5ce3
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Tue Nov 12 10:51:32 2024 +0800

    登录注册备用

commit 1d2c1c337e
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Mon Nov 11 17:56:21 2024 +0800

    代码调整

commit dee2b5ca7f
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Mon Nov 11 17:30:55 2024 +0800

    烟感设备调整

commit f4812c7187
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Fri Nov 8 09:52:43 2024 +0800

    代码提交

commit 23ed471da1
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Nov 7 17:30:32 2024 +0800

    代码暂提

commit 429d6679f4
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Wed Nov 6 21:12:19 2024 +0800

    问题调整

commit 28859d0fc1
Merge: cffefa0 f76ec13
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Wed Nov 6 20:59:49 2024 +0800

    Merge branch 'develop' of https://gitea.joylink.club/joylink/rtsa-client into develop

commit cffefa06c6
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Wed Nov 6 20:59:43 2024 +0800

    代码暂提

commit f76ec13940
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Nov 6 16:54:44 2024 +0800

    模式控制暂提

commit d353afa5dd
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Nov 5 18:05:09 2024 +0800

    代码暂提

commit 9e5905cb55
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Oct 31 16:58:01 2024 +0800

    更新子模块

commit cac4f38d64
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Oct 31 16:53:45 2024 +0800

    删除旧的子模块

commit a36b425b12
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Oct 30 10:15:47 2024 +0800

    调整

commit 8260753cf7
Merge: 3f240a7 9e0bc3e
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 29 13:29:38 2024 +0800

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

commit 3f240a7b57
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 29 13:29:36 2024 +0800

    代码提交

commit 9e0bc3ea0b
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Mon Oct 28 16:53:12 2024 +0800

    屏蔽门系统图

commit 3c67d4b5b7
Merge: f5d87ac eb9d073
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 24 09:30:11 2024 +0800

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

commit f5d87acd4c
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 24 09:29:44 2024 +0800

    fas设备添加

commit eb9d0734ae
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Oct 23 15:51:18 2024 +0800

    垂直电梯备用

commit afd27d4b3e
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 22 17:52:37 2024 +0800

    消防泵代码提交

commit 61911d9ee5
Merge: 98b1db6 a7968d1
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 22 17:20:47 2024 +0800

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

commit 98b1db6290
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 22 17:16:24 2024 +0800

    设备添加

commit a7968d11da
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Mon Oct 21 18:03:30 2024 +0800

    bas自动扶梯备用

commit d16bedfbf4
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Fri Oct 18 16:21:27 2024 +0800

    绘制组件调整

commit 124c9a2784
Merge: b451f4f 07b35b5
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 17:52:03 2024 +0800

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

commit b451f4fa3e
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 17:52:02 2024 +0800

    FAS新增设备

commit 07b35b5360
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Oct 17 14:50:52 2024 +0800

    cctv加分层

commit d03f30d4cc
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Thu Oct 17 13:50:52 2024 +0800

    CCTV设备布局图

commit 31d09306b4
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 11:45:40 2024 +0800

    调整icon

commit cfc5adb953
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 11:45:18 2024 +0800

    调整警铃icon

commit 083c17edd1
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 11:31:38 2024 +0800

    添加火灾警铃设备

commit dbed83df26
Merge: 5bddef1 259d351
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 09:34:31 2024 +0800

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

commit 5bddef10cd
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Thu Oct 17 09:32:55 2024 +0800

    添加火灾报警主机

commit 259d3518bb
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Oct 16 17:25:10 2024 +0800

    增加button label颜色

commit 3c91608189
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Wed Oct 16 17:09:36 2024 +0800

    通用的button-类似组件button

commit f5bc7c9aa9
Author: fan <fanyuhong@joylink.club>
Date:   Wed Oct 16 16:55:57 2024 +0800

    protoc

commit 7ab75c722e
Author: fan <fanyuhong@joylink.club>
Date:   Wed Oct 16 16:54:53 2024 +0800

    fas数据调整

commit d8c55a011b
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Wed Oct 16 14:01:58 2024 +0800

    添加FAS平面图分区

commit 9948e87fa0
Author: fan <fanyuhong@joylink.club>
Date:   Wed Oct 16 09:39:34 2024 +0800

    protoc

commit 702cc229a3
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Tue Oct 15 18:16:18 2024 +0800

    加滚动条

commit ed3392d378
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Tue Oct 15 17:37:56 2024 +0800

    绘制加组件显示

commit 1891981a23
Author: joylink_fanyuhong <18706759286@163.com>
Date:   Tue Oct 15 16:50:36 2024 +0800

    抽屉调整

.gitea/workflows/cicd_local_test.yml

@@ -0,0 +1,53 @@
+name: local-test-CICD
+on:
+  push:
+    branches:
+      - local-test
+
+jobs:
+  Docker-Build:
+    runs-on: joylink-local233
+    steps:
+      - name: 检出代码
+        uses: https://gitea.joylink.club/actions/checkout@v4
+        with:
+          submodules: recursive
+      - name: 设置node环境
+        uses: https://gitea.joylink.club/actions/local-setup-node@v0.1.2
+        with:
+          version: 'v18.19.1'
+          cache: 'yarn'
+          cache-dependency-path: 'yarn.lock'
+      - name: 安装yarn,并run build
+        run: |
+          node -v
+          npm -v
+          npm config set registry https://registry.npmmirror.com
+          npm install --global yarn
+          yarn config set registry https://registry.npmmirror.com
+          yarn
+          yarn run build:local
+          tar czvf ./dist-test.tar.gz ./dist
+      - name: 打包发送到本地测试环境
+        uses: https://gitea.joylink.club/appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.LOCAL_233_SSH_HOST }}
+          username: ${{ secrets.LOCAL_233_SSH_USER }}
+          password: ${{ secrets.LOCAL_233_SSH_PASSWORD }}
+          port: ${{ secrets.LOCAL_233_SSH_PORT }}
+          source: ./dist-test.tar.gz
+          target: /home/minio/oss/rtss-simulation-app-client
+          overwrite: true
+      - name: SSH连接233并解压发布
+        uses: https://gitea.joylink.club/appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.LOCAL_233_SSH_HOST }}
+          port: ${{ secrets.LOCAL_233_SSH_PORT }}
+          username: ${{ secrets.LOCAL_233_SSH_USER }}
+          password: ${{ secrets.LOCAL_233_SSH_PASSWORD }}
+          script: |
+            cd /home/minio/oss/rtss-simulation-app-client
+            rm -rf /usr/local/joylink/client/rtsa
+            mkdir -p /usr/local/joylink/client
+            tar xz --strip 2 -C /usr/local/joylink/client -f dist-test.tar.gz
+      - run: echo "This job's status is ${{ job.status }}."

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "rtss-proto-msg"]
-	path = rtss-proto-msg
-	url = https://gitea.joylink.club/joylink/rtss-proto-msg.git
+[submodule "rtsa-proto-msg"]
+	path = rtsa-proto-msg
+	url = https://gitea.joylink.club/joylink/rtsa-proto-msg.git

index.html

@@ -3,17 +3,40 @@
   <head>
     <title><%= productName %></title>
 
-    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />
 
-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="128x128"
+      href="icons/favicon-128x128.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="icons/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="icons/favicon-16x16.png"
+    />
+    <link rel="icon" type="image/ico" href="logo_changan.png" />
   </head>
   <body>
     <!-- quasar:entry-point -->

package-lock.json

@@ -11,7 +11,7 @@
         "@quasar/extras": "^1.16.4",
         "axios": "^1.2.1",
         "google-protobuf": "^3.21.4",
-        "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15",
+        "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.19",
         "js-base64": "^3.7.5",
         "pinia": "^2.0.11",
         "quasar": "^2.16.0",
@@ -30,6 +30,7 @@
         "eslint-config-prettier": "^8.1.0",
         "eslint-plugin-vue": "^9.0.0",
         "prettier": "^2.5.1",
+        "ts-md5": "^1.3.1",
         "typescript": "~5.5.4",
         "vite-plugin-checker": "^0.7.2",
         "vue-tsc": "2.0.29"
@@ -4436,8 +4437,8 @@
     },
     "node_modules/jl-graphic": {
       "name": "graphic-pixi",
-      "version": "0.1.14",
-      "resolved": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#8b0ad14f7324a5eaba58239645a1fa0452e87ab4",
+      "version": "0.1.18",
+      "resolved": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#1c803d096585e258be3f60d3d95d1bd0c318d316",
       "dependencies": {
         "@pixi/graphics-extras": "^7.3.2",
         "@pixi/utils": "^7.3.2",
@@ -6398,6 +6399,15 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-md5": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/ts-md5/-/ts-md5-1.3.1.tgz",
+      "integrity": "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.7.0.tgz",

package.json

@@ -11,13 +11,14 @@
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
+    "build:local": "URL_ENV=local_test quasar build",
     "protoc": "node scripts/proto.cjs"
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
     "google-protobuf": "^3.21.4",
-    "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15",
+    "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.19",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",
     "quasar": "^2.16.0",
@@ -26,10 +27,10 @@
   },
   "devDependencies": {
     "@quasar/app-vite": "^1.9.0",
+    "@types/google-protobuf": "^3.15.6",
     "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@types/google-protobuf": "^3.15.6",
     "autoprefixer": "^10.4.2",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -38,7 +39,8 @@
     "prettier": "^2.5.1",
     "typescript": "~5.5.4",
     "vite-plugin-checker": "^0.7.2",
-    "vue-tsc": "2.0.29"
+    "vue-tsc": "2.0.29",
+    "ts-md5": "^1.3.1"
   },
   "engines": {
     "node": "^20 || ^18 || ^16",

quasar.config.js

@@ -10,7 +10,7 @@
 require('dotenv').config();
 const { configure } = require('quasar/wrappers');
 
-const BasePath = '';
+const BasePath = 'rtsa';
 
 module.exports = configure(function (/* ctx */) {
   return {
@@ -78,7 +78,7 @@ module.exports = configure(function (/* ctx */) {
       // polyfillModulePreload: true,
       // distDir
       // distDir: `dist/${BasePath}`,
-      distDir: 'dist',
+      distDir: 'dist/rtsa',
 
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},

rtsa-proto-msg

@@ -0,0 +1 @@
+Subproject commit 64e48a0441eedd0b7bc926ca922b2fb58075467b

rtss-proto-msg

@@ -1 +0,0 @@
-Subproject commit 4029b6c96f132115bba08c87bfd3470f3e2d872b

scripts/proto.cjs

@@ -7,7 +7,7 @@ const os = require('os');
 
 const { exec } = require('child_process');
 
-const messageDir = resolve(__dirname, '../rtss-proto-msg');
+const messageDir = resolve(__dirname, '../rtsa-proto-msg');
 const protoDir = resolve(messageDir, 'src');
 const destDir = resolve(__dirname, '../src/protos');
 

src/App.vue

@@ -3,7 +3,20 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue';
+import { useAuthStore } from 'src/stores/auth-store';
+import { getLoginUserInfo } from 'src/api/UserApi';
+import { getJwtToken } from './configs/TokenManage';
 defineOptions({
-  name: 'App'
+  name: 'App',
+});
+
+const authStore = useAuthStore();
+
+onMounted(async () => {
+  if (getJwtToken()) {
+    const res = await getLoginUserInfo();
+    authStore.setUserId(res.loginUserInfo.id);
+  }
 });
 </script>

src/api/DraftApi.ts

@@ -21,6 +21,14 @@ export const iscsStyleOption = [
   },
 ];
 
+export const searchTscsStyleOption = [
+  {
+    label: '全部',
+    value: IscsStyle.UNKNOWN,
+  },
+  ...iscsStyleOption,
+];
+
 export interface DraftItem {
   id: number;
   name: string;
@@ -33,8 +41,11 @@ export interface DraftItem {
   createdAt: string;
   updatedAt: string;
   defaultReleaseDataName: string;
+  userName: string;
+}
+export interface IscsDataOptions {
+  style: IscsStyle;
 }
-
 export interface PagingQueryParams {
   paging: {
     page: number;
@@ -42,9 +53,10 @@ export interface PagingQueryParams {
   };
   query: {
     dataType: DraftDataType;
-    userId?: number;
+    options?: IscsDataOptions;
     name?: string;
     isShared?: boolean;
+    userId?: number;
   };
 }
 export interface DraftIscsDataDto {
@@ -52,9 +64,6 @@ export interface DraftIscsDataDto {
   options: IscsDataOptions;
 }
 
-export interface IscsDataOptions {
-  style: IscsStyle;
-}
 export async function draftPageQuery(
   params: PagingQueryParams
 ): Promise<PageDto<DraftIscsDataDto>> {
@@ -63,7 +72,7 @@ export async function draftPageQuery(
     userDraftIscsDataPaging(paging: $paging, query: $query) {
       total
       items {
-        draftData {id name dataType userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        draftData {id name dataType userName defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
         options {style}
       }
     }
@@ -84,7 +93,7 @@ export async function sharedDraftPageQuery(
     sharedDraftIscsDataPaging(paging: $paging, query: $query) {
       total
       items {
-        draftData {id name dataType userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        draftData {id name dataType userName userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
         options {style}
       }
     }
@@ -97,6 +106,25 @@ export async function sharedDraftPageQuery(
   return response.data.data.sharedDraftIscsDataPaging;
 }
 
+/**
+ * 检查新建的草稿名字是否已有
+ * @param id 草稿id
+ */
+export function draftDataExist(variables: {
+  dataType: DraftDataType;
+  name: string;
+}) {
+  const query = `
+  query draftDataExist($dataType: DataType,$name: String) {
+    draftDataExist(dataType: $dataType,name: $name)
+  }
+`;
+  return api.post('', {
+    query,
+    variables,
+  });
+}
+
 /**
  * 创建草稿
  * @param params
@@ -208,10 +236,7 @@ export function saveDraft(variables: { id: number; data: string }) {
  * @param variables
  * @returns
  */
-export async function saveAsDraft(variables: {
-  id: number;
-  name: string;
-}) {
+export async function saveAsDraft(variables: { id: number; name: string }) {
   const mutation = `
   mutation saveAsNewDraftData($id: Int,$name: String) {
     saveAsNewDraftData(id: $id,name: $name){

src/api/ElectronicMapDraftApi.ts

@@ -0,0 +1,138 @@
+import { api } from 'src/boot/axios';
+import { PageDto } from './ApiCommon';
+import { DraftDataType } from './DraftApi';
+
+export enum LineType {
+  UNKNOWN,
+  UR = 'UR',
+  IR = 'IR',
+  CR = 'CR',
+}
+
+export const lineTypeOption = [
+  {
+    label: '城市轨道交通',
+    value: LineType.UR,
+  },
+  {
+    label: '城际轨道交通',
+    value: LineType.IR,
+  },
+  {
+    label: '市域轨道交通',
+    value: LineType.CR,
+  },
+];
+
+export const searchLineTypeOption = [
+  {
+    label: '全部',
+    value: LineType.UNKNOWN,
+  },
+  ...lineTypeOption,
+];
+
+export interface DraftItem {
+  id: number;
+  name: string;
+  dataType: DraftDataType;
+  options: string;
+  data: string;
+  userId: number;
+  defaultReleaseDataId: number;
+  isShared: boolean;
+  createdAt: string;
+  updatedAt: string;
+  defaultReleaseDataName: string;
+  userName: string;
+}
+export interface LineInfoOptionsInput {
+  lineType: LineType;
+  city?: string;
+  lineCode?: string;
+}
+export interface PagingQueryParams {
+  paging: {
+    page: number;
+    itemsPerPage: number;
+  };
+  query: {
+    dataType: DraftDataType;
+    options?: LineInfoOptionsInput;
+    name?: string;
+    isShared?: boolean;
+    userId?: number;
+  };
+}
+export interface DraftEmDataDto {
+  draftData: DraftItem;
+  options: LineInfoOptionsInput;
+}
+
+export async function draftPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<DraftEmDataDto>> {
+  const query = `
+  query userDraftEmDataPaging($paging: PageQueryDto, $query: UserDraftEmDataFilterDto) {
+    userDraftEmDataPaging(paging: $paging, query: $query) {
+      total
+      items {
+        draftData {id name dataType userName defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        options {lineType city lineCode}
+      }
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+    variables: params,
+  });
+  return response.data.data.userDraftEmDataPaging;
+}
+
+export async function sharedDraftPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<DraftEmDataDto>> {
+  const query = `
+  query sharedDraftEmDataPaging($paging: PageQueryDto, $query: SharedDraftEmDataFilterDto) {
+    sharedDraftEmDataPaging(paging: $paging, query: $query) {
+      total
+      items {
+        draftData {id name dataType userName userId defaultReleaseDataId createdAt updatedAt isShared defaultReleaseDataName}
+        options {lineType city lineCode}
+      }
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+    variables: params,
+  });
+  return response.data.data.sharedDraftEmDataPaging;
+}
+
+
+/**
+ * 创建草稿
+ * @param params
+ * @returns
+ */
+interface CreateDraftEmDto {
+  input: {
+    name: string;
+    options: LineInfoOptionsInput;
+  };
+}
+export function createDraft(params: CreateDraftEmDto) {
+  const mutation = `
+  mutation createDraftEmData($input: CreateDraftEmDto) {
+    createDraftEmData(input: $input) {
+      name
+    }
+  }
+`;
+  return api.post('', {
+    query: mutation,
+    variables: params,
+  });
+}

src/api/ElectronicMapPublishApi.ts

@@ -0,0 +1,63 @@
+import { api } from 'src/boot/axios';
+import { PageDto } from './ApiCommon';
+import { DraftDataType } from './DraftApi';
+import { LineInfoOptionsInput } from './ElectronicMapDraftApi';
+
+export interface PublishItem {
+  id: number;
+  name: string;
+  dataType: DraftDataType;
+  options: string;
+  data: string;
+  usedVersionId: number;
+  userId: number;
+  isPublished: boolean;
+  createdAt: string;
+  updatedAt: string;
+  description: string;
+  userName: string;
+}
+
+interface PagingQueryParams {
+  page: {
+    page: number;
+    itemsPerPage: number;
+  };
+  query: {
+    dataType: DraftDataType;
+    userId?: number;
+    name?: string;
+    isPublished?: boolean;
+    options?: LineInfoOptionsInput;
+  };
+}
+export interface PublishEmDataDto {
+  releaseData: PublishItem;
+  options: LineInfoOptionsInput;
+}
+
+/**
+ * 分页查询
+ * @param params
+ * @returns
+ */
+export async function publishPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<PublishEmDataDto>> {
+  const query = `
+  query releaseEmDataPaging($page: PageQueryDto, $query: ReleaseEmDataFilterDto) {
+    releaseEmDataPaging(page: $page, query: $query) {
+      total
+      items {
+        releaseData {id name dataType  usedVersionId userName isPublished createdAt updatedAt description }
+        options {lineType city lineCode}
+      }
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+    variables: params,
+  });
+  return response.data.data.releaseEmDataPaging;
+}

src/api/PublishApi.ts

@@ -14,6 +14,7 @@ export interface PublishItem {
   createdAt: string;
   updatedAt: string;
   description: string;
+  userName: string;
 }
 
 interface PagingQueryParams {
@@ -26,6 +27,7 @@ interface PagingQueryParams {
     userId?: number;
     name?: string;
     isPublished?: boolean;
+    options?: IscsDataOptions;
   };
 }
 export interface PublishIscsDataDto {
@@ -52,6 +54,25 @@ export function setDefaultPublish(variables: {
   });
 }
 
+/**
+ * 检查发布的草稿名字是否已有
+ * @param id 草稿id
+ */
+ export function isReleaseDataNameExists(variables: {
+  dataType: DraftDataType;
+  name: string;
+}) {
+  const query = `
+  query isReleaseDataNameExists($dataType: DataType,$name: String) {
+    isReleaseDataNameExists(dataType: $dataType,name: $name)
+  }
+`;
+  return api.post('', {
+    query,
+    variables,
+  });
+}
+
 /**
  * 草稿图发布
  * @param draftId 草稿id
@@ -110,7 +131,7 @@ export async function publishPageQuery(
     releaseIscsDataPaging(page: $page, query: $query) {
       total
       items {
-        releaseData {id name dataType  usedVersionId userId isPublished createdAt updatedAt description }
+        releaseData {id name dataType  usedVersionId userName isPublished createdAt updatedAt description }
         options {style}
       }
     }
@@ -162,7 +183,7 @@ export async function getPublishHistoryById(variables: {
     releaseDataVersionPaging(dataId: $dataId, page: $page) {
       total
       items {
-        id releaseDataId description userId createdAt
+        id releaseDataId description userName createdAt
       }
     }
   }

src/api/UserApi.ts

@@ -0,0 +1,329 @@
+import { api } from 'src/boot/axios';
+import { PageDto } from './ApiCommon';
+import { Md5 } from 'ts-md5';
+
+interface RegisterInfo {
+  username: string;
+  nickname: string;
+  password: string;
+  mobile?: string;
+  email?: string;
+}
+
+//const PasswordSult = '4a6d74126bfd06d69406fcccb7e7d5d9'; // 密码加盐
+function encryptPassword(password: string): string {
+  const md5 = new Md5();
+  return md5.appendStr(password).end() as string;
+}
+
+/**
+ * 用户注册
+ * @param info
+ * @returns
+ */
+export async function register(registerInfo: RegisterInfo) {
+  const register = {
+    ...registerInfo,
+    password: encryptPassword(registerInfo.password),
+  };
+  const mutation = `
+  mutation registerUser($register: RegisterUserDto) {
+    registerUser(register: $register){
+      username
+    }
+  }
+`;
+  return api.post('', {
+    query: mutation,
+    variables: { register },
+  });
+}
+
+/**
+ * 检查用户名是否存在
+ * @param username
+ */
+export function usernameExists(username: string) {
+  const query = `
+  query usernameExists($username: String) {
+    usernameExists(username: $username,)
+  }
+`;
+  return api.post('', {
+    query,
+    variables: { username },
+  });
+}
+
+/**
+ * 检查邮箱是否存在
+ * @param email
+ */
+export function emailExists(email: string) {
+  const query = `
+  query emailExists($email: String) {
+    emailExists(email: $email,)
+  }
+`;
+  return api.post('', {
+    query,
+    variables: { email },
+  });
+}
+
+/**
+ * 检查手机号是否存在
+ * @param mobile
+ */
+export function mobileExists(mobile: string) {
+  const query = `
+  query mobileExists($mobile: String) {
+    mobileExists(mobile: $mobile,)
+  }
+`;
+  return api.post('', {
+    query,
+    variables: { mobile },
+  });
+}
+
+interface LoginInfo {
+  username: string;
+  password: string;
+  orgId?: number;
+}
+
+/**
+ * 用户登录
+ * @param loginInfo
+ * @returns
+ */
+export async function login(userLoginDto: LoginInfo) {
+  const info = {
+    ...userLoginDto,
+    password: encryptPassword(userLoginDto.password),
+  };
+  const query = `
+  query userLogin($info: UserLoginDto) {
+    userLogin(info: $info)
+  }
+`;
+  return api.post('', {
+    query,
+    variables: { info },
+  });
+}
+
+export interface User {
+  id: number;
+  username: string;
+  nickname: string;
+  mobile: string;
+  email: string;
+  roles: [];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PagingQueryParams {
+  page: {
+    page: number;
+    itemsPerPage: number;
+  };
+  query: {
+    id?: string;
+    username?: string;
+    nickname?: string;
+    mobile?: string;
+    email?: string;
+    roles?: [];
+  };
+}
+
+/**
+ * 分页查询用户信息
+ * @param params
+ * @returns
+ */
+export async function userPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<User>> {
+  const query = `
+  query userPaging($page: PageQueryDto, $query: UserQueryDto) {
+    userPaging(page: $page, query: $query) {
+      total
+      items {
+        id username nickname mobile email roles createdAt updatedAt
+      }
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+    variables: params,
+  });
+  return response.data.data.userPaging;
+}
+
+/**
+ * 获取获取用户信息
+ */
+export async function getLoginUserInfo() {
+  const query = `
+  query loginUserInfo {
+    loginUserInfo{
+      id username nickname mobile email roles createdAt updatedAt
+    }
+  }
+`;
+  const response = await api.post('', {
+    query,
+  });
+  return response.data.data;
+}
+
+export enum Role {
+  UNKNOWN,
+  ADMIN = 'ADMIN',
+  USER = 'USER',
+  ORG_MANAGER = 'ORG_MANAGER', //组织管理员
+  ORG_TEACHER = 'ORG_TEACHER', //组织教师
+  ORG_STUDENT = 'ORG_STUDENT', //组织学生
+  ORG_GUEST = 'ORG_GUEST', //组织访客
+}
+
+export const rolesOptions = [
+  { label: '系统管理员', value: Role.ADMIN },
+  { label: '普通用户', value: Role.USER },
+  { label: '组织管理员', value: Role.ORG_MANAGER },
+  { label: '组织教师', value: Role.ORG_TEACHER },
+  { label: '组织学生', value: Role.ORG_STUDENT },
+  { label: '组织访客', value: Role.ORG_GUEST },
+];
+
+/**
+ * 更改用户角色
+ * @param variables
+ * @returns
+ */
+export async function updateUserRoles(variables: {
+  userId: number;
+  roles: Role[];
+}) {
+  const mutation = `
+  mutation updateUserRoles($userId: Int,$roles: [Role!]) {
+    updateUserRoles(userId: $userId,roles: $roles,){
+      id
+    }
+  }
+`;
+  return api.post('', {
+    query: mutation,
+    variables,
+  });
+}
+
+/**
+ * 获取默认组织信息
+ */
+export async function getDefaultOrg() {
+  const query = `
+  query getDefaultOrg {
+    getDefaultOrg{
+      id code name creatorId
+    }
+  }
+`;
+  const response = await api.post('', {
+    query: query,
+  });
+  return response.data.data.getDefaultOrg;
+}
+
+/**
+ * 获取组织信息
+ * @param id
+ * @returns
+ */
+export async function getOrgById(id: number) {
+  const query = `
+  query getOrg($id: Int) {
+    getOrg(id: $id){
+      id code name creatorId
+    }
+  }
+`;
+  const variables = {
+    id,
+  };
+  const response = await api.post('', {
+    query,
+    variables,
+  });
+  return response.data.data.getOrg;
+}
+
+/**
+ * 获取组织信息
+ * @param code
+ * @returns
+ */
+export async function getOrgByCode(code: string) {
+  const query = `
+  query getOrgByCode($code: String) {
+    getOrgByCode(code: $code){
+      id code name creatorId
+    }
+  }
+`;
+  const variables = {
+    code,
+  };
+  const response = await api.post('', {
+    query,
+    variables,
+  });
+  return response.data.data.getOrg;
+}
+
+/**
+ * 获取组织用户信息
+ * @param orgId
+ * @param userId
+ * @returns
+ */
+export async function getOrgUserInfo(orgId: number, userId: number) {
+  const query = `
+  query orgUserInfo($orgId: Int,$userId: Int) {
+    orgUserInfo(orgId: $orgId,userId: $userId){
+      id orgId userId studentId roles
+    }
+  }
+`;
+  const variables = {
+    orgId,
+    userId,
+  };
+  const response = await api.post('', {
+    query,
+    variables,
+  });
+  return response.data.data;
+}
+
+/**
+ * 获取登录用户的组织用户信息
+ */
+export async function loginOrgUserInfo() {
+  const query = `
+  query loginOrgUserInfo {
+    loginOrgUserInfo{
+      id orgId userId studentId roles
+    }
+  }
+`;
+  const response = await api.post('', {
+    query: query,
+  });
+  return response.data.data.getDefaultOrg;
+}

src/boot/axios.ts

@@ -2,7 +2,7 @@ import axios, { AxiosInstance } from 'axios';
 import { AxiosError } from 'axios';
 import { Dialog } from 'quasar';
 import { boot } from 'quasar/wrappers';
-//import { getJwtToken } from 'src/configs/TokenManage';
+import { getJwtToken } from 'src/configs/TokenManage';
 import { getHttpBase } from 'src/configs/UrlManage';
 
 declare module '@vue/runtime-core' {
@@ -70,15 +70,15 @@ let isOpenDialog = false; // 认证弹窗是否打开
 
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
-export default boot(({ app, router }) => {
+export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
 
   // 拦截请求，添加
   api.interceptors.request.use(
     (config) => {
-      //config.headers.Authorization = getJwtToken();
-      config.headers.Authorization = 'Bearer 1e2d0d5d96034f4a0805af6512051ddc';
-      config.headers['Token'] = '1e2d0d5d96034f4a0805af6512051ddc';
+      const token = getJwtToken();
+      config.headers.Authorization = `Bearer ${token}`;
+      config.headers['Token'] = token;
       config.cancelToken = source.token;
       if (isOpenDialog) {
         source.cancel();
@@ -103,7 +103,7 @@ export default boot(({ app, router }) => {
           persistent: true,
         })
           .onOk(() => {
-            router.push({ name: 'login' });
+            // router.push({ name: 'login' });
             isOpenDialog = false;
           })
           .onCancel(() => {

src/components/Iscs/CCTVMonitoring.vue

@@ -0,0 +1,400 @@
+<template>
+  <div>
+    <div class="monitoring-title">{{ props.stationName }}摄像头监控</div>
+    <div class="monitoring-layout">
+      <div class="video-control-text">视频控制</div>
+      <div class="video-control-content">
+        <div>
+          <div class="video-control-item">
+            <div>画面布局：</div>
+            <q-select
+              dense
+              outlined
+              v-model="pictureLayout"
+              :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">
+            <div>选择车站：</div>
+            <q-select
+              dense
+              outlined
+              disable
+              v-model="chooseStation"
+              :options="stationOptions"
+              style="width: 220px"
+            />
+          </div>
+          <div class="video-control-item">
+            <div>选择列车：</div>
+            <q-select
+              dense
+              outlined
+              disable
+              v-model="chooseTrain"
+              :options="trainOptions"
+              style="width: 220px"
+            />
+          </div>
+          <div class="video-control-item">
+            <div>选择摄像头：</div>
+            <q-select
+              dense
+              outlined
+              v-model="chooseCamera"
+              :options="cameraOptions"
+              emit-value
+              map-options
+              options-dense
+              style="width: 205px"
+            />
+          </div>
+          <q-separator />
+          <div class="mode-handle">
+            <div>模式操作</div>
+            <div class="video-control-item">
+              <div>显示模式选择：</div>
+              <q-select
+                dense
+                outlined
+                v-model="chooseDisplayMode"
+                :options="displayModeOptions"
+                style="width: 190px"
+              />
+            </div>
+            <div class="display-mode-button">
+              <q-btn
+                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 poll-mode">
+              <div>轮询模式选择：</div>
+              <q-select
+                dense
+                outlined
+                v-model="choosePollMode"
+                :options="pollModeOptions"
+                style="width: 190px"
+              />
+            </div>
+            <div class="poll-mode-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"
+              />
+              <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="preset-manage">
+              <div class="video-control-item">
+                <div>预置位选择：</div>
+                <q-select
+                  dense
+                  outlined
+                  v-model="choosePresetPosition"
+                  :options="presetPositionOptions"
+                  style="width: 175px"
+                />
+              </div>
+              <div class="video-control-item">
+                <div>预置位名称：</div>
+                <q-input
+                  dense
+                  outlined
+                  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>
+      <q-separator />
+      <div class="ptz-control">云台控制</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { CCTV_Camera_name } from 'src/configs/cctvCamera';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+
+const pictureLayout = ref('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>
+.monitoring-title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+.monitoring-layout {
+  width: 320px;
+  background-color: white;
+  .video-control-text {
+    margin-left: 5px;
+    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/components/Iscs/FASPlaneGraph.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <div class="row">
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区一'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区一"
+        @click="changePartition('设备分区一')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区二'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区二"
+        @click="changePartition('设备分区二')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区三'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区三"
+        @click="changePartition('设备分区三')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区四'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区四"
+        @click="changePartition('设备分区四')"
+      ></q-btn>
+    </div>
+    <div class="row">
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区五'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区五"
+        @click="changePartition('设备分区五')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区六'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区六"
+        @click="changePartition('设备分区六')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区七'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区七"
+        @click="changePartition('设备分区七')"
+      ></q-btn>
+      <q-btn
+        :color="`${
+          drawStore.selectSubmenuAndStation.partition === '设备分区八'
+            ? 'yellow-5'
+            : 'grey-9'
+        }`"
+        label="设备分区八"
+        @click="changePartition('设备分区八')"
+      ></q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDrawStore } from 'src/stores/draw-store';
+const drawStore = useDrawStore();
+
+function changePartition(partition: string) {
+  drawStore.selectSubmenuAndStation.partition = partition;
+}
+</script>
+
+<style lang="scss" scoped></style>

src/components/Iscs/IscsBottomAlarm.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="bottom-alarm">
+    <div class="bottom-alarm-left">
+      <div class="left-up">
+        <div class="left-up-icon">
+          <q-icon size="20px" color="indigo-8" name="notifications" />
+        </div>
+        <q-separator vertical />
+        <div class="left-up-text">
+          <div class="left-up-text-up">
+            当前报警总数：{{ showData.currentAlarmTotal }}
+          </div>
+          <div>未确认报警数：{{ showData.noConfirmNumber }}</div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="left-down">
+        <div>当前用户：{{ showData.currentUser }}</div>
+        <div>
+          当前用户组：<span class="left-down-text">{{
+            showData.currentUserGroup
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <q-markup-table separator="cell" ref="tableRef" class="bottom-alarm-middle">
+      <thead class="table-head">
+        <tr class="table-head-tr">
+          <th v-for="header in columnDefs" :key="header.name">
+            {{ header.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.dataKey">
+          <td
+            class="table-body-tr"
+            align="center"
+            v-for="header in columnDefs"
+            :key="header.name"
+          >
+            {{ row[header.field] }}
+          </td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+    <div class="bottom-alarm-right">
+      <div class="right-text">
+        <q-img :src="icon" class="right-img" />玖链科技
+      </div>
+      <div class="right-icon">
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="volume_up" />
+        </q-btn>
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="warning_amber" />
+        </q-btn>
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="search" />
+        </q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import { PagingQueryParams, userPageQuery } from 'src/api/UserApi';
+import { ApiError } from 'src/boot/axios';
+import icon from '/icons/favicon-96x96.png';
+
+const $q = useQuasar();
+
+onMounted(() => {
+  //onRequest();
+});
+
+const columnDefs: QTableColumn[] = [
+  { name: 'id', label: '是否确认', field: 'id', align: 'center' },
+  {
+    name: 'name',
+    label: '产生时间',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'createdAt',
+    label: '车站名',
+    field: (row) => new Date(row.createdAt).toLocaleString(),
+    align: 'center',
+  },
+  {
+    name: 'mobile',
+    label: '子系统名',
+    field: 'mobile',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '优先级',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '描述',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '值',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '重复次数',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '当前状态',
+    field: 'email',
+    align: 'center',
+  },
+];
+
+const rows = reactive([]);
+
+const showData = reactive({
+  currentAlarmTotal: 2,
+  noConfirmNumber: 2,
+  currentUser: '赵',
+  currentUserGroup: '值班员',
+});
+
+// eslint-disable-next-line
+async function onRequest() {
+  const variables: PagingQueryParams = {
+    page: {
+      page: 1,
+      itemsPerPage: 10,
+    },
+    query: {},
+  };
+  try {
+    const response = await userPageQuery(variables);
+    rows.splice(0, rows.length, ...(response.items as []));
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-alarm {
+  display: flex;
+  width: 100%;
+  height: 140px;
+  background-color: #002060;
+  padding: 8px;
+  .bottom-alarm-left {
+    width: 160px;
+    background-image: linear-gradient(to bottom, #e1e5f1, #b5bede);
+    margin-right: 8px;
+    padding: 5px;
+    .left-up {
+      display: flex;
+      align-items: center;
+      height: 50%;
+      .left-up-icon {
+        margin-right: 5px;
+      }
+      .left-up-text {
+        margin-left: 10px;
+        color: black;
+        .left-up-text-up {
+          margin-bottom: 5px;
+        }
+      }
+    }
+    .left-down {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      height: 50%;
+      color: black;
+      .left-down-text {
+        font-weight: 800;
+      }
+    }
+  }
+  .bottom-alarm-middle {
+    flex-grow: 1;
+    .table-head {
+      background-color: #efebde;
+      .table-head-tr {
+        height: 33px !important;
+        padding: 0;
+      }
+    }
+    .table-body-tr {
+      height: 33px !important;
+      padding: 0;
+    }
+  }
+  .bottom-alarm-right {
+    width: 200px;
+    background-image: linear-gradient(to bottom, #e1e5f1, #b5bede);
+    margin-left: 8px;
+    .right-text {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50%;
+      color: #29519c;
+      font-size: 28px;
+      font-weight: 800;
+      .right-img {
+        width: 50px;
+        margin-right: 5px;
+      }
+    }
+    .right-icon {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 50%;
+      .icon-button {
+        background: none !important;
+        border: none !important;
+      }
+    }
+  }
+}
+</style>

src/components/Iscs/ModeControl.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="title">{{ props.stationName }}{{ currentModeSheet }}</div>
+    <q-markup-table
+      v-if="currentModeSheet == '模式总览图'"
+      class="table"
+      separator="cell"
+    >
+      <thead class="table-head">
+        <tr>
+          <th class="table-head-tr" style="width: 280px">系统</th>
+          <th class="table-head-tr" style="width: 500px">模式号说明</th>
+          <th class="table-head-tr">当前模式号</th>
+          <th class="table-head-tr">查看当前系统</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td align="center">大系统</td>
+          <td>{{ rows[0].modeNumberDec }}</td>
+          <td>{{ rows[0].currentModeNumber }}</td>
+          <td>
+            <q-btn
+              color="grey-9"
+              label="查看模式对照表"
+              @click="lookModeSheet('大系统操作控制表')"
+            />
+          </td>
+        </tr>
+
+        <tr>
+          <td class="tbody-td">
+            <div class="tbody-td-left">小系统</div>
+            <div class="tbody-td-up">A端</div>
+          </td>
+          <td>{{ rows[1].modeNumberDec }}</td>
+          <td>{{ rows[1].currentModeNumber }}</td>
+          <td><q-btn color="grey-9" label="查看模式对照表" /></td>
+        </tr>
+        <tr>
+          <td class="tbody-td">
+            <div class="tbody-td-up">B端</div>
+          </td>
+          <td>{{ rows[2].modeNumberDec }}</td>
+          <td>{{ rows[2].currentModeNumber }}</td>
+          <td><q-btn color="grey-9" label="查看模式对照表" /></td>
+        </tr>
+
+        <tr>
+          <td class="tbody-td">
+            <div class="tbody-td-left">隧道通风系统</div>
+            <div class="tbody-td-up">兴~科区间隧道模式</div>
+          </td>
+          <td>{{ rows[3].modeNumberDec }}</td>
+          <td>{{ rows[3].currentModeNumber }}</td>
+          <td><q-btn color="grey-9" label="查看模式对照表" /></td>
+        </tr>
+        <tr>
+          <td class="tbody-td">
+            <div class="tbody-td-up">科站后区间隧道模式</div>
+          </td>
+          <td>{{ rows[4].modeNumberDec }}</td>
+          <td>{{ rows[4].currentModeNumber }}</td>
+          <td><q-btn color="grey-9" label="查看模式对照表" /></td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+    <mode-control-OfBigSystem
+      v-else-if="currentModeSheet == '大系统操作控制表'"
+      :stationName="props.stationName"
+      @close="goBack"
+      @selectedSubMenu="selectedSubMenu"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import ModeControlOfBigSystem from 'src/components/Iscs/ModeControlOfBigSystem.vue';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+const emit = defineEmits(['selectedSubMenu']);
+
+const chooseStation = ref('');
+const currentModeSheet = ref('模式总览图');
+
+const rows = reactive([
+  { modeNumberDec: '无', currentModeNumber: '无' },
+  { modeNumberDec: '无', currentModeNumber: '无' },
+  { modeNumberDec: '无', currentModeNumber: '无' },
+  { modeNumberDec: '无', currentModeNumber: '无' },
+  { modeNumberDec: '无', currentModeNumber: '无' },
+]);
+
+function lookModeSheet(sheetName: string) {
+  currentModeSheet.value = sheetName;
+}
+
+function goBack() {
+  currentModeSheet.value = '模式总览图';
+}
+
+function selectedSubMenu() {
+  emit('selectedSubMenu', '大系统');
+}
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+.table {
+  margin-top: 100px;
+  border: 2px solid black;
+  .table-head {
+    height: 50px;
+    .table-head-tr {
+      font-size: 20px;
+    }
+  }
+  .tbody-td {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 51px;
+    position: relative;
+    border: 0;
+    padding: 0;
+    .tbody-td-left {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      width: 140px;
+      height: 100px;
+      border-right: 1px solid rgba(0, 0, 0, 0.12);
+      line-height: 100px;
+      padding-left: 10px;
+    }
+    .tbody-td-up {
+      width: 50%;
+      height: 51px;
+      padding-left: 10px;
+      line-height: 51px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+</style>

src/components/Iscs/ModeControlOfBigSystem.vue

@@ -0,0 +1,319 @@
+<template>
+  <q-btn
+    class="topButton"
+    color="grey-9"
+    label="大系统原理图"
+    @click="goToSubBigSystem"
+  />
+  <div class="top">
+    <div>
+      <span class="spanGutter"
+        >A端操作场所:<span class="spanGutterLeft">!!!</span></span
+      >
+      <span class="spanGutter"
+        >A端执行状态: <span class="spanGutterLeft">无</span></span
+      >
+      <span class="spanGutter"
+        >A端当前控制方式:<span class="spanGutterLeft">手动控制</span></span
+      >
+      <span>灾害提示:<span class="spanGutterLeft">正常</span></span>
+      <q-btn color="grey-9" label="退出灾害模式" style="margin-left: 30px" />
+    </div>
+    <div class="flex-row" style="margin-top: 15px">
+      <span class="spanGutter"
+        >B端操作场所:<span class="spanGutterLeft">!!!</span></span
+      >
+      <span class="spanGutter"
+        >B端执行状态:<span class="spanGutterLeft">无</span></span
+      >
+      <span class="spanGutter"
+        >B端当前控制方式:<span class="spanGutterLeft">手动控制</span></span
+      >
+      <q-select
+        dense
+        outlined
+        v-model="changeControlMode"
+        :options="controlModeOptions"
+        style="width: 190px; margin-right: 30px"
+      />
+      <q-btn color="grey-9" label="执行" style="margin-right: 30px" />
+      <q-btn color="grey-9" label="PID调节" style="margin-right: 30px" />
+      <q-btn color="grey-9" label="返回" @click="goBack" />
+    </div>
+    <div class="tableContainer flex-row">
+      <div class="table-left">
+        <div class="title">工况条件判断</div>
+        <div
+          class="flex-row boder-bottom"
+          style="height: 400px; border-right: 1px solid black"
+        >
+          <div style="width: 30px; padding: 5px">正常工况</div>
+          <div style="flex-grow: 1">
+            <div class="flex-row text-center boder-bottom">
+              <div class="middle" style="height: 100px; padding: 5px">
+                小新风空调<br />iw≥in
+              </div>
+              <div style="flex-grow: 1">
+                <div class="boder-bottom" style="height: 50px">
+                  Δin&lt;0<br />(负偏差)
+                </div>
+                <div style="height: 50px">Δin&gt;0<br />(正偏差)</div>
+              </div>
+            </div>
+            <div class="flex-row text-center boder-bottom">
+              <div class="middle" style="height: 150px; padding: 30px 0">
+                全新风空调<br />in><br />iw≥io
+              </div>
+              <div style="flex-grow: 1">
+                <div class="boder-bottom" style="height: 75px; padding: 12px">
+                  Δin&lt;0<br />(负偏差)
+                </div>
+                <div style="height: 75px; padding: 12px">
+                  Δin&gt;0<br />(正偏差)
+                </div>
+              </div>
+            </div>
+            <div class="flex-row text-center boder-bottom">
+              <div class="middle" style="height: 125px; padding: 40px 0">
+                通风iw&lt;io
+              </div>
+              <div>
+                <div class="boder-bottom height">tn≥25&deg;C</div>
+                <div class="boder-bottom height">25&deg;C≥tn≥20&deg;C</div>
+                <div class="flex-row">
+                  <div
+                    style="
+                      width: 68px;
+                      height: 75px;
+                      line-height: 76px;
+                      text-align: center;
+                      border-right: 1px solid black;
+                    "
+                  >
+                    tn&lt;20&deg;C
+                  </div>
+                  <div>
+                    <div class="boder-bottom height">C≥1000ppm</div>
+                    <div class="boder-bottom height">500ppm~1000ppm</div>
+                    <div class="height">C&le;500ppm</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="text-center height"
+              style="border-left: 1px solid black"
+            >
+              夜间
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex-row boder-bottom"
+          style="height: 100px; border-right: 1px solid black"
+        >
+          <div style="width: 26px; height: 100px; padding: 5px">工况火灾</div>
+          <div style="flex-grow: 1">
+            <div class="flex-row boder-bottom">
+              <div class="middle" style="height: 75px"></div>
+              <div style="flex-grow: 1; padding: 1px">
+                <div class="boder-bottom height">站厅火灾</div>
+                <div class="boder-bottom height">站台A端火灾 防烟分区三</div>
+                <div class="height">站台B端火灾 防烟分区四</div>
+              </div>
+            </div>
+            <div
+              class="text-center height"
+              style="border-left: 1px solid black"
+            >
+              站内任何其它区域火灾
+            </div>
+          </div>
+        </div>
+        <div
+          class="text-center boder-bottom height"
+          style="border-right: 1px solid black"
+        >
+          当前模式-状态
+        </div>
+        <div class="text-center height" style="border-right: 1px solid black">
+          模式对比
+        </div>
+      </div>
+      <div>
+        <div class="table-top">
+          <div
+            style="
+              width: 46px;
+              height: 125px;
+              padding: 28px 5px;
+              border-right: 1px solid black;
+              border-bottom: 1px solid black;
+            "
+            class="text-center"
+          >
+            模<br />式<br />号
+          </div>
+          <div>
+            <div
+              class="text-center"
+              style="
+                height: 25px;
+                border-bottom: 1px solid black;
+                border-right: 1px solid black;
+              "
+            >
+              A端设备
+            </div>
+            <modeControl-OfBigSystemTable />
+          </div>
+          <div>
+            <div
+              class="text-center"
+              style="height: 25px; border-bottom: 1px solid black"
+            >
+              B端设备
+            </div>
+            <modeControl-OfBigSystemTable isNoRightBorder />
+          </div>
+        </div>
+        <q-markup-table
+          separator="cell"
+          ref="tableRef"
+          class="table"
+          style="width: 1610px"
+        >
+          <tbody style="">
+            <tr
+              v-for="row in 22"
+              :key="row"
+              :class="{
+                changeBackground: row % 2 == 1,
+              }"
+            >
+              <td
+                class="table-body-tr"
+                :class="{
+                  noBottomBorder: row == 22,
+                  noRightBorder: col == 35,
+                }"
+                align="center"
+                v-for="col in 35"
+                :key="col"
+                style="width: 20px"
+              >
+                {{ rows[(row, col)] }}
+              </td>
+            </tr>
+          </tbody>
+        </q-markup-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import ModeControlOfBigSystemTable from './ModeControlOfBigSystemTable.vue';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+
+const emit = defineEmits(['close', 'selectedSubMenu']);
+function goBack() {
+  emit('close');
+}
+function goToSubBigSystem() {
+  emit('selectedSubMenu');
+}
+
+const chooseStation = ref('');
+const changeControlMode = ref('设备单控');
+const controlModeOptions = ['设备单控', '模式控制', '时间表控制', '焓值控制'];
+
+const rows = reactive([]);
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
+</script>
+
+<style lang="scss" scoped>
+.topButton {
+  position: absolute;
+  left: 80px;
+  top: 20px;
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 25px;
+  .spanGutter {
+    margin-right: 100px;
+  }
+  .spanGutterLeft {
+    margin-left: 30px;
+    color: green;
+  }
+}
+.flex-row {
+  display: flex;
+  align-items: center;
+}
+.tableContainer {
+  margin: 30px 0;
+  border: 1px solid black;
+  .table-left {
+    width: 260px;
+    background-color: #99a7b9;
+    .title {
+      height: 125px;
+      line-height: 125px;
+      text-align: center;
+      border-right: 1px solid black;
+      border-bottom: 1px solid black;
+    }
+    .middle {
+      width: 45px;
+      padding: 1px;
+      border-left: 1px solid black;
+      border-right: 1px solid black;
+    }
+
+    .boder-bottom {
+      border-bottom: 1px solid black;
+    }
+    .height {
+      height: 25px;
+    }
+  }
+  .table-top {
+    display: flex;
+    align-items: center;
+    background-color: #99a7b9;
+  }
+  .table {
+    .table-tr {
+      width: 10px !important;
+    }
+    .table-body-tr {
+      width: 46px !important;
+      height: 25px !important;
+      padding: 0;
+      border-right: 1px solid black;
+      border-bottom: 1px solid black;
+    }
+    .changeBackground {
+      background-color: #c8d0f1;
+    }
+    .noBottomBorder {
+      border-bottom: 0 solid black;
+    }
+    .noRightBorder {
+      border-right: 0 solid black;
+    }
+  }
+}
+</style>

src/components/Iscs/ModeControlOfBigSystemTable.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    class="style father"
+    style="width: 782px; border-right: 0px; border-bottom: 0px"
+  >
+    <div style="width: 92px">组合空调柜<br />及其二通阀</div>
+    <div style="width: 92px">回/排风机<br />及其连锁阀</div>
+    <div style="width: 92px">排烟风机<br />及其连锁阀</div>
+    <div>排风阀</div>
+    <div>回风阀</div>
+    <div>小新<br />风阀</div>
+    <div>空调柜</div>
+    <div></div>
+    <div>送风<br />站台</div>
+    <div class="otherStyle">
+      <div class="up">排风</div>
+      <div class="down">
+        <div class="down-left down-right">站厅</div>
+        <div class="down-right">站台</div>
+      </div>
+    </div>
+    <div>防烟<br />防火</div>
+    <div>空气幕</div>
+    <div
+      class="style"
+      :class="{
+        noRightBorder: props.isNoRightBorder,
+      }"
+    >
+      空气幕
+    </div>
+  </div>
+  <div
+    class="style"
+    style="width: 782px; border-right: 0px; border-bottom: 0px"
+  >
+    <div
+      class="style"
+      v-for="(title, index) in thirdTitle"
+      :key="title"
+      :class="{
+        noRightBorder: index == 16 && props.isNoRightBorder,
+      }"
+    >
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    isNoRightBorder?: boolean;
+  }>(),
+  {
+    isNoRightBorder: false,
+  }
+);
+
+const thirdTitle = [
+  'AHU-A01',
+  'MOV-A01',
+  'RAF-A01',
+  'MDD-A03',
+  'SEF-A01',
+  'MDD-A04',
+  'MDA-A02',
+  'MDA-A03',
+  'MDA-A01',
+  'MDD-A02',
+  'MDD-A01',
+  'MDD-A07',
+  'MDD-A05',
+  'MDD-A06',
+  'DFD-A01',
+  'KQM-A01',
+  'KQM-A02',
+];
+</script>
+
+<style lang="scss" scoped>
+.style,
+.father > div:not(:nth-child(10)):not(:nth-child(13)) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 46px;
+  height: 50px;
+  text-align: center;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+}
+.otherStyle {
+  width: 92px;
+  height: 50px;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  .up {
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+    border-bottom: 1px solid black;
+  }
+  .down {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .down-left {
+    border-right: 1px solid black;
+  }
+  .down-right {
+    width: 46px;
+    height: 25px;
+    line-height: 25px;
+    text-align: center;
+  }
+}
+.noRightBorder {
+  border-right: 0 solid black;
+}
+</style>

src/components/Iscs/PSD.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="psd-title">{{ props.stationName }}屏蔽门系统图</div>
+  <div class="up-train">
+    <q-img :src="train1" />
+  </div>
+  <div class="down-train">
+    <q-img :src="train2" />
+  </div>
+  <div class="duanmen up-first-duanmen">
+    <q-img :src="allDuanmenImg.upFirst" class="img" />
+    <div>上行首端门</div>
+  </div>
+  <div class="duanmen up-end-duanmen">
+    <q-img :src="allDuanmenImg.upEnd" class="img" />
+    <div>上行尾端门</div>
+  </div>
+  <div class="duanmen down-first-duanmen">
+    <q-img :src="allDuanmenImg.downFirst" class="img" />
+    <div>下行首端门</div>
+  </div>
+  <div class="duanmen down-end-duanmen">
+    <q-img :src="allDuanmenImg.downEnd" class="img" />
+    <div>下行尾端门</div>
+  </div>
+  <div
+    v-for="(tableData, index) in allTableDatas"
+    :key="index"
+    :class="`tableItem-${index}`"
+  >
+    <q-markup-table separator="cell" ref="tableRef" class="table">
+      <thead class="table-head">
+        <tr class="table-head-tr">
+          <th v-for="header in tableData.columnDefs" :key="header.name">
+            {{ header.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in tableData.rows" :key="row.name">
+          <td
+            class="table-body-tr"
+            align="center"
+            v-for="header in tableData.columnDefs"
+            :key="header.name"
+          >
+            {{ row[header.name] }}
+          </td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import train1 from 'src/assets/ISCS/PSD/train1.png';
+import train2 from 'src/assets/ISCS/PSD/train2.png';
+import duanmenClose from 'src/assets/ISCS/PSD/duanmenClose.png';
+import duanmenAlarm from 'src/assets/ISCS/PSD/duanmenAlarm.png';
+import duanmenConnectBreak from 'src/assets/ISCS/PSD/duanmenConnectBreak.png';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+const chooseStation = ref('');
+const allDuanmenImg = reactive({
+  upFirst: duanmenClose,
+  upEnd: duanmenClose,
+  downFirst: duanmenAlarm,
+  downEnd: duanmenConnectBreak,
+});
+const allTableDatas = reactive([
+  {
+    columnDefs: [
+      { name: 'name', label: '上行首PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '下行尾PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '驱动电源故障报警', state: '正常' },
+      { name: '控制电源故障报警', state: '正常' },
+      { name: '驱动电源输入故障报警', state: '正常' },
+      { name: '控制电源输入故障报警', state: '正常' },
+      { name: '驱动电源低电压故障报警', state: '正常' },
+      { name: '控制电源电压故障报警', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行控制系统故障报警', state: '正常' },
+      { name: '上行SIG使用', state: '正常' },
+      { name: '上行SIG开门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行控制系统故障报警', state: '正常' },
+      { name: '下行SIG使用', state: '正常' },
+      { name: '下行SIG开门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行所有门关闭且锁紧', state: '正常' },
+      { name: '上行滑动门和应急门开门故障', state: '正常' },
+      { name: '上行滑动门和应急门关门故障', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行所有门关闭且锁紧', state: '正常' },
+      { name: '下行滑动门和应急门开门故障', state: '正常' },
+      { name: '下行滑动门和应急门关门故障', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行IBP盘使能', state: '正常' },
+      { name: '上行IBP盘开门命令', state: '正常' },
+      { name: '上行IBP盘关门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行IBP盘使能', state: '正常' },
+      { name: '下行IBP盘开门命令', state: '正常' },
+      { name: '下行IBP盘关门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '上行尾PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '下行首PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+]);
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
+</script>
+
+<style lang="scss" scoped>
+$first-top: 20vh;
+$second-top: 37vh;
+.psd-title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+.up-train {
+  position: absolute;
+  top: 10vh;
+  width: 55vw;
+}
+.down-train {
+  position: absolute;
+  top: 55vh;
+  width: 55vw;
+}
+.img {
+  width: 15px;
+}
+.duanmen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100px;
+}
+.up-first-duanmen {
+  left: 22vw;
+  top: 8vh;
+  transform: translateX(-100%);
+}
+.up-end-duanmen {
+  right: 22vw;
+  top: 8vh;
+  transform: translateX(100%);
+}
+.down-first-duanmen {
+  left: 22vw;
+  top: 58vh;
+  transform: translateX(-100%);
+}
+.down-end-duanmen {
+  right: 22vw;
+  top: 58vh;
+  transform: translateX(100%);
+}
+
+.table {
+  .table-head {
+    background-image: linear-gradient(to bottom, #c1c9ea, #8e97ba);
+    .table-head-tr {
+      height: 33px !important;
+      padding: 0;
+    }
+  }
+  .table-body-tr {
+    height: 33px !important;
+    padding: 0 5px;
+  }
+}
+.tableItem-0 {
+  position: absolute;
+  top: 15vh;
+  right: calc(50vw + 380px);
+  transform: translateX(-100%);
+}
+.tableItem-1 {
+  position: absolute;
+  top: $second-top;
+  right: calc(50vw + 380px);
+  transform: translateX(-100%);
+}
+.tableItem-2 {
+  position: absolute;
+  top: $first-top;
+  right: calc(50vw + 50px);
+  transform: translateX(-100%);
+}
+.tableItem-3 {
+  position: absolute;
+  top: $first-top;
+  left: 49vw;
+  transform: translateX(-100%);
+}
+.tableItem-4 {
+  position: absolute;
+  top: $second-top;
+  left: 49vw;
+  transform: translateX(-100%);
+}
+.tableItem-5 {
+  position: absolute;
+  top: $first-top;
+  right: 49vw;
+  transform: translateX(100%);
+}
+.tableItem-6 {
+  position: absolute;
+  top: $second-top;
+  right: 49vw;
+  transform: translateX(100%);
+}
+.tableItem-7 {
+  position: absolute;
+  top: $first-top;
+  left: calc(50vw + 110px);
+  transform: translateX(100%);
+}
+.tableItem-8 {
+  position: absolute;
+  top: $second-top;
+  left: calc(50vw + 110px);
+  transform: translateX(100%);
+}
+.tableItem-9 {
+  position: absolute;
+  top: 15vh;
+  left: calc(50vw + 380px);
+  transform: translateX(100%);
+}
+.tableItem-10 {
+  position: absolute;
+  top: $second-top;
+  left: calc(50vw + 380px);
+  transform: translateX(100%);
+}
+</style>

src/components/common/DraggableDialog.vue

@@ -84,7 +84,7 @@
 
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
 import ResizableDivWidth from './ResizableDivWidth.vue';
 import ResizableDivHeight from './ResizableDivHeight.vue';
 
@@ -121,6 +121,14 @@ const props = withDefaults(
   }
 );
 
+watch(
+  () => props.height,
+  () => {
+    dialogHeight.value = props.height;
+    lastDialogHeight = props.height;
+  }
+);
+
 const { dialogRef, onDialogHide /* , onDialogCancel, onDialogOK */ } =
   useDialogPluginComponent();
 

src/components/draw-app/IscsDrawProperties.vue

@@ -6,7 +6,11 @@
         <div class="text-h6">{{ drawStore.drawGraphicName + ' 模板' }}</div>
       </q-card-section>
       <q-separator inset></q-separator>
-      <q-card-section> </q-card-section>
+      <q-card-section>
+        <template v-if="drawStore.drawGraphicType === Line.Type">
+          <line-template></line-template>
+        </template>
+      </q-card-section>
     </q-card>
   </div>
   <!-- 画布或图形对象属性 -->
@@ -29,8 +33,20 @@
           <rect-property
             v-else-if="drawStore.selectedGraphicType === Rect.Type"
           />
-          <cctv-button-property
-            v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
+          <line-property
+            v-else-if="drawStore.selectedGraphicType === Line.Type"
+          />
+          <circle-property
+            v-else-if="drawStore.selectedGraphicType === Circle.Type"
+          />
+          <button-property
+            v-else-if="drawStore.selectedGraphicType === Button.Type"
+          />
+          <escalator-property
+            v-else-if="drawStore.selectedGraphicType === Escalator.Type"
+          />
+          <vertical-elevator-property
+            v-else-if="drawStore.selectedGraphicType === VerticalElevator.Type"
           />
         </q-card-section>
       </template>
@@ -43,13 +59,28 @@
 
 <script setup lang="ts">
 import { useDrawStore } from 'src/stores/draw-store';
-import CanvasProperty from './properties/CCTV/CanvasCCTVProperty.vue';
+import CanvasProperty from './properties/CanvasIscsProperty.vue';
 import IscsTextProperty from './properties/IscsTextProperty.vue';
 import { TextContent } from 'src/graphics/textContent/TextContent';
-import cctvButtonProperty from './properties/CCTV/CCTVButtonProperty.vue';
-import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import RectProperty from './properties/RectProperty.vue';
 import { Rect } from 'src/graphics/rect/Rect';
+import LineTemplate from './templates/LineTemplate.vue';
+import LineProperty from './properties/LineProperty.vue';
+import { Line } from 'src/graphics/line/Line';
+import CircleProperty from './properties/CircleProperty.vue';
+import { Circle } from 'src/graphics/circle/Circle';
+import ButtonProperty from './properties/ButtonProperty.vue';
+import { Button } from 'src/graphics/button/Button';
+import EscalatorProperty from './properties/BAS/EscalatorProperty.vue';
+import { Escalator } from 'src/graphics/BAS/escalator/Escalator';
+import VerticalElevatorProperty from './properties/BAS/VerticalElevatorProperty.vue';
+import { VerticalElevator } from 'src/graphics/BAS/verticalElevator/VerticalElevator';
+
+import { watch } from 'vue';
 
 const drawStore = useDrawStore();
+watch(
+  () => drawStore.selectedGraphics,
+  () => {}
+);
 </script>

src/components/draw-app/electronicMapDrawProperties.vue

@@ -6,7 +6,6 @@
         <div class="text-h6">{{ drawStore.drawGraphicName + ' 模板' }}</div>
       </q-card-section>
       <q-separator inset></q-separator>
-      <q-card-section> </q-card-section>
     </q-card>
   </div>
   <!-- 画布或图形对象属性 -->
@@ -23,28 +22,28 @@
       </template>
       <template v-else-if="drawStore.selectedGraphics.length === 1">
         <q-card-section>
-          <iscs-text-property
-            v-if="drawStore.selectedGraphicType === TextContent.Type"
-          />
-          <rect-property
-            v-else-if="drawStore.selectedGraphicType === Rect.Type"
-          />
+          <platform-property
+            v-if="drawStore.selectedGraphicType === Platform.Type"
+          ></platform-property>
         </q-card-section>
       </template>
-      <template v-else-if="drawStore.selectedGraphics.length > 1">
+      <!-- <template v-else-if="drawStore.selectedGraphics.length > 1">
         <multiple-select-property></multiple-select-property>
-      </template>
+      </template> -->
     </q-card>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useDrawStore } from 'src/stores/draw-store';
-import CanvasProperty from './properties/FireAlarm/CanvasFireAlarmProperty.vue';
-import IscsTextProperty from './properties/IscsTextProperty.vue';
-import { TextContent } from 'src/graphics/textContent/TextContent';
-import RectProperty from './properties/RectProperty.vue';
-import { Rect } from 'src/graphics/rect/Rect';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import CanvasProperty from './properties/CanvasElectronicMapProperty.vue';
+import PlatformProperty from './properties/electronicMap/PlatformProperty.vue';
+import { Platform } from 'src/graphics/electronicMap/platform/Platform';
+import { watch } from 'vue';
 
 const drawStore = useDrawStore();
+watch(
+  () => drawStore.selectedGraphics,
+  () => {}
+);
 </script>

src/components/draw-app/properties/BAS/EscalatorProperty.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="escalatorModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="escalatorModel.code"
+      @blur="onUpdate"
+      label="code"
+      lazy-rules
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { useDrawStore } from 'src/stores/draw-store';
+import { EscalatorData } from 'src/drawApp/graphics/BAS/EscalatorInteraction';
+
+const { data: escalatorModel, onUpdate } = useFormData(
+  new EscalatorData(),
+  useDrawStore().getDrawApp()
+);
+</script>

src/components/draw-app/properties/BAS/VerticalElevatorProperty.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="verticalElevatorModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="verticalElevatorModel.code"
+      @blur="onUpdate"
+      label="code"
+      lazy-rules
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { VerticalElevatorData } from 'src/drawApp/graphics/BAS/VerticalElevatorInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
+
+const { data: verticalElevatorModel, onUpdate } = useFormData(
+  new VerticalElevatorData(),
+  useDrawStore().getDrawApp()
+);
+</script>

src/components/draw-app/properties/ButtonProperty.vue

@@ -0,0 +1,136 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="buttonModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="buttonModel.code"
+      @blur="onUpdate"
+      label="label"
+      lazy-rules
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.codeFontSize"
+      type="number"
+      @blur="onUpdate"
+      label="label字体大小"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '宽度必须大于等于0']"
+    />
+    <q-input
+      outlined
+      v-model="buttonModel.codeColor"
+      @change="onUpdate"
+      label="字体颜色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="buttonModel.codeColor"
+              @change="
+                (val) => {
+                  buttonModel.codeColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-select
+      outlined
+      class="q-mt-sm"
+      v-model="buttonModel.buttonType"
+      :options="optionsButtonType"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="按钮类型"
+    />
+    <q-input
+      outlined
+      v-model="buttonModel.fillColor"
+      @change="onUpdate"
+      label="button颜色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="buttonModel.fillColor"
+              @change="
+                (val) => {
+                  buttonModel.fillColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="buttonModel.alpha"
+      mask="#.###"
+      @blur="onUpdate"
+      label="透明度"
+      lazy-rules
+      :rules="[
+        (val) => (val && val > 0 && val <= 1) || '透明度必须大于0且小于等于1',
+      ]"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.width"
+      type="number"
+      @blur="onUpdate"
+      label="宽度"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '宽度必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.height"
+      type="number"
+      @blur="onUpdate"
+      label="高度"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '高度必须大于等于0']"
+    />
+    <q-input
+      outlined
+      v-model.number="buttonModel.radius"
+      type="number"
+      @blur="onUpdate"
+      label="圆角半径"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { useDrawStore } from 'src/stores/draw-store';
+import { ButtonData } from 'src/drawApp/graphics/ButtonInteraction';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+const { data: buttonModel, onUpdate } = useFormData(
+  new ButtonData(),
+  useDrawStore().getDrawApp()
+);
+
+const optionsButtonType = [
+  { label: '无Icon', value: iscsGraphicData.Button.ButtonType.noIcon },
+  { label: '方形', value: iscsGraphicData.Button.ButtonType.cctvRect },
+  { label: '枪机', value: iscsGraphicData.Button.ButtonType.cctvMonitor },
+  { label: '球机', value: iscsGraphicData.Button.ButtonType.cctvSemicircle },
+];
+</script>

src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue

@@ -1,40 +0,0 @@
-<template>
-  <q-form class="q-gutter-sm">
-    <q-input outlined readonly v-model="cctvButtonModel.id" label="id" />
-    <q-input
-      outlined
-      v-model="cctvButtonModel.code"
-      @blur="onUpdate"
-      label="CCTV按钮"
-      lazy-rules
-    />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="cctvButtonModel.buttonType"
-      :options="optionsButtonType"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="按钮类型"
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { useFormData } from 'src/components/DrawAppFormUtils';
-import { useDrawStore } from 'src/stores/draw-store';
-import { CCTVButtonData } from 'src/drawApp/graphics/CCTV/CCTVButtonInteraction';
-import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
-
-const { data: cctvButtonModel, onUpdate } = useFormData(
-  new CCTVButtonData(),
-  useDrawStore().getDrawApp()
-);
-
-const optionsButtonType = [
-  { label: '方形', value: iscsGraphicData.CCTVButton.ButtonType.rect },
-  { label: '监视器', value: iscsGraphicData.CCTVButton.ButtonType.monitor },
-  { label: '半圆', value: iscsGraphicData.CCTVButton.ButtonType.semicircle },
-];
-</script>

src/components/draw-app/properties/CanvasElectronicMapProperty.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      v-model.number="canvas.width"
+      @blur="onUpdate"
+      label="画布宽 *"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      type="number"
+      v-model.number="canvas.height"
+      @blur="onUpdate"
+      label="画布高 *"
+      lazy-rules
+      :rules="[(val) => val > 0 || '画布高必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="canvas.backgroundColor"
+      @blur="onUpdate"
+      label="画布背景色 *"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '画布背景色必须设置']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              :model-value="canvas.backgroundColor"
+              @change="
+                (val) => {
+                  canvas.backgroundColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { onMounted, onUnmounted, reactive } from 'vue';
+const drawStore = useDrawStore();
+
+const canvas = reactive({
+  width: 1920,
+  height: 1080,
+  backgroundColor: '#ffffff',
+});
+
+onMounted(() => {
+  // console.log('画布属性表单mounted');
+  const jc = drawStore.getJlCanvas();
+  canvas.width = jc.properties.width;
+  canvas.height = jc.properties.height;
+  canvas.backgroundColor = jc.properties.backgroundColor;
+});
+
+onUnmounted(() => {
+  // console.log('画布属性表单unmounted');
+});
+
+function onUpdate() {
+  // console.log('画布属性更新');
+  const app = drawStore.getDrawApp();
+  app.updateCanvasAndRecord({
+    ...canvas,
+    viewportTransform: app.canvas.properties.viewportTransform,
+  });
+}
+</script>

src/components/draw-app/properties/CircleProperty.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="circleModel.id" label="id" />
+    <q-input
+      outlined
+      v-model.number="circleModel.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '线宽必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model="circleModel.lineColor"
+      @blur="onUpdate"
+      label="线色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="circleModel.lineColor"
+              @change="
+                (val) => {
+                  circleModel.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="circleModel.fillColor"
+      @change="onUpdate"
+      label="填充色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="circleModel.fillColor"
+              @change="
+                (val) => {
+                  circleModel.fillColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="circleModel.alpha"
+      mask="#.###"
+      @blur="onUpdate"
+      label="透明度"
+      lazy-rules
+      :rules="[
+        (val) => (val && val > 0 && val <= 1) || '透明度必须大于0且小于等于1',
+      ]"
+    />
+    <q-input
+      outlined
+      v-model.number="circleModel.radius"
+      type="number"
+      @blur="onUpdate"
+      label="圆半径"
+      lazy-rules
+      :rules="[(val) => val >= 0 || '圆半径必须大于等于0']"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { CircleData } from 'src/drawApp/graphics/CircleInteraction';
+import { useDrawStore } from 'src/stores/draw-store';
+
+const drawStore = useDrawStore();
+const { data: circleModel, onUpdate } = useFormData(
+  new CircleData(),
+  drawStore.getDrawApp()
+);
+</script>

src/components/draw-app/properties/LineProperty.vue

@@ -0,0 +1,58 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="lineModel.id" label="id" />
+    <q-input
+      outlined
+      type="number"
+      v-model.number="lineModel.segmentsCount"
+      v-if="lineModel.isCurve"
+      @blur="onUpdate"
+      label="曲线分段数"
+    />
+    <q-input
+      outlined
+      v-model="lineModel.lineColor"
+      @blur="onUpdate"
+      label="线色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="lineModel.lineColor"
+              @change="
+                (val) => {
+                  lineModel.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model.number="lineModel.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="宽度"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '宽度必须大于0']"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useDrawStore } from 'src/stores/draw-store';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { LineData } from 'src/drawApp/graphics/LineInteraction';
+
+const drawStore = useDrawStore();
+const { data: lineModel, onUpdate } = useFormData(
+  new LineData(),
+  drawStore.getDrawApp()
+);
+</script>

src/components/draw-app/properties/RectProperty.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-form>
-    <q-input outlined readonly v-model="rectModel.id" label="id" hint="" />
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="rectModel.id" label="id" />
     <q-input
       outlined
       v-model.number="rectModel.lineWidth"
@@ -8,9 +8,8 @@
       @blur="onUpdate"
       label="线宽"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+      :rules="[(val) => (val && val > 0) || '线宽必须大于0']"
     />
-
     <q-input
       outlined
       v-model="rectModel.lineColor"
@@ -35,6 +34,41 @@
         </q-icon>
       </template>
     </q-input>
+    <q-input
+      outlined
+      v-model="rectModel.fillColor"
+      @change="onUpdate"
+      label="填充色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="rectModel.fillColor"
+              @change="
+                (val) => {
+                  rectModel.fillColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="rectModel.alpha"
+      mask="#.###"
+      @blur="onUpdate"
+      label="透明度"
+      lazy-rules
+      :rules="[
+        (val) => (val && val > 0 && val <= 1) || '透明度必须大于0且小于等于1',
+      ]"
+    />
     <q-input
       outlined
       v-model.number="rectModel.width"
@@ -51,7 +85,7 @@
       @blur="onUpdate"
       label="高度"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '宽度必须大于0']"
+      :rules="[(val) => (val && val > 0) || '高度必须大于0']"
     />
     <q-input
       outlined
@@ -60,7 +94,7 @@
       @blur="onUpdate"
       label="圆角半径"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
     />
   </q-form>
 </template>

src/components/draw-app/properties/electronicMap/AxleCountingConfig.vue

@@ -0,0 +1,188 @@
+<template>
+  <q-card class="q-gutter-sm q-pa-sm">
+    <q-card-section>
+      <div class="text-h6">一键生成计轴配置</div>
+    </q-card-section>
+    <q-form ref="myForm">
+      <selectConfig-utils ref="selectConfigUtils" :drawStore="drawStore" />
+      <div class="q-mt-md q-gutter-md">
+        <q-btn label="确认修改" color="primary" @click="onSubmit" />
+        <q-btn label="返回" color="red" @click="goBack" />
+        <q-btn label="生成计轴" color="primary" @click="generateAxleCounting" />
+      </div>
+      <div class="q-mt-md q-gutter-md">
+        <q-btn
+          label="检查计轴"
+          color="primary"
+          @click="showErrorAxleCounting"
+        />
+        <q-btn
+          v-if="showCheck"
+          label="上一个"
+          color="primary"
+          @click="clickSelectCenter(-1)"
+        />
+        <q-btn
+          v-if="showCheck"
+          label="下一个"
+          color="primary"
+          @click="clickSelectCenter(1)"
+        />
+      </div>
+    </q-form>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue';
+import { QForm, useQuasar } from 'quasar';
+import { JlGraphic } from 'jl-graphic';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
+import {
+  loadGenerateAxleCountingConfig,
+  setGenerateAxleCountingConfig,
+} from 'src/drawApp/electronicMapApp';
+import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
+import { OneClickGenerate } from 'src/graphics/electronicMap/trainWindow/oneClickDrawAssistant';
+import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
+
+//供公共选择组件使用
+const filterSelect = (g: JlGraphic) => g instanceof Turnout;
+const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(
+  null
+);
+provide('filter', filterSelect);
+
+const emit = defineEmits(['close']);
+
+const drawStore = useDrawStore();
+const $q = useQuasar();
+
+onMounted(() => {
+  selectConfigUtils.value.selectConfig = [
+    {
+      code: 'bb连接的道岔',
+      refDevices: [],
+      refDevicesCode: [],
+      expanded: false,
+    },
+    {
+      code: '不生成计轴的道岔组',
+      refDevices: [],
+      refDevicesCode: [],
+      expanded: false,
+    },
+  ];
+  const generateAxleCountingConfig = loadGenerateAxleCountingConfig();
+  if (generateAxleCountingConfig !== undefined) {
+    selectConfigUtils.value.selectConfig.forEach(
+      (generate: {
+        code: string;
+        refDevices: number[];
+        refDevicesCode: string[];
+      }) => {
+        if (generate.code == 'bb连接的道岔') {
+          generate.refDevices = generateAxleCountingConfig.bbConnect;
+          generateAxleCountingConfig.bbConnect.forEach((id) => {
+            const g = drawStore.getDrawApp().queryStore.queryById(id);
+            generate.refDevicesCode.push(g.code);
+          });
+        } else if (generate.code == '不生成计轴的道岔组') {
+          generate.refDevices = generateAxleCountingConfig.noGenerateGroup;
+          generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
+            const g = drawStore.getDrawApp().queryStore.queryById(id);
+            generate.refDevicesCode.push(g.code);
+          });
+        }
+      }
+    );
+  }
+});
+
+const myForm = ref<QForm | null>(null);
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const generateAxleCountingConfig =
+          new electronicMapGraphicData.GenerateAxleCountingConfig();
+        selectConfigUtils.value.selectConfig.forEach(
+          (generate: { code: string; refDevices: number[] }) => {
+            if (generate.code == 'bb连接的道岔') {
+              generateAxleCountingConfig.bbConnect = generate.refDevices;
+            } else if (generate.code == '不生成计轴的道岔组') {
+              generateAxleCountingConfig.noGenerateGroup = generate.refDevices;
+            }
+          }
+        );
+        setGenerateAxleCountingConfig(generateAxleCountingConfig);
+        $q.notify({
+          type: 'positive',
+          message: '更新成功',
+        });
+      } catch (err) {
+        $q.notify({
+          type: 'negative',
+          message: '更新失败',
+        });
+      }
+    }
+  });
+}
+
+function goBack() {
+  emit('close');
+}
+
+function generateAxleCounting() {
+  drawStore.oneClickType = 'AxleCounting';
+  drawStore.getDrawApp().interactionPlugin(OneClickGenerate.Type).resume();
+}
+
+const selectConfig = ref<
+  {
+    axleCountingId: number;
+    axleCountingCode: string;
+  }[]
+>([]);
+function showErrorAxleCounting() {
+  showCheck.value = true;
+  const axleCountings = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<AxleCounting>(AxleCounting.Type);
+  const erroeAxleCountings = axleCountings
+    .filter(
+      (g) =>
+        g.datas.type ==
+          electronicMapGraphicData.AxleCounting.TypeDetectionPoint.AxleCounting &&
+        g.datas.axleCountingRef.length < 2
+    )
+    .sort((a, b) => a.position.x - b.position.x);
+  erroeAxleCountings.forEach((axleCounting) => {
+    selectConfig.value.push({
+      axleCountingId: axleCounting.id,
+      axleCountingCode: axleCounting.datas.code,
+    });
+  });
+}
+
+const currentIndex = ref(-1);
+const showCheck = ref(false);
+function clickSelectCenter(add: number) {
+  if (
+    currentIndex.value + add < 0 ||
+    currentIndex.value + add >= selectConfig.value.length
+  )
+    return;
+  currentIndex.value = currentIndex.value + add;
+  const target = drawStore
+    .getDrawApp()
+    .queryStore.queryById(
+      selectConfig.value[currentIndex.value].axleCountingId
+    );
+  drawStore.getDrawApp().makeGraphicCenterShow(target);
+  drawStore.getDrawApp().updateSelected(target);
+}
+</script>

src/components/draw-app/properties/electronicMap/PlatformProperty.vue

@@ -0,0 +1,108 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="platformModel.id" label="id" />
+    <q-input
+      outlined
+      label="站台编号"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="platformModel.code"
+      lazy-rules
+      autogrow
+    />
+    <q-input
+      outlined
+      label="紧急停车继电器的编号"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="platformModel.refEsbRelayCode"
+      lazy-rules
+      autogrow
+    />
+    <q-select
+      outlined
+      v-model="platformModel.type"
+      :options="platformTypeOptions"
+      :map-options="true"
+      :emit-value="true"
+      label="站台类型"
+      @update:model-value="onUpdate"
+    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> 关联的车站 </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip square color="primary" text-color="white">
+              {{ stationRelation }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-y-sm column">
+          <q-item-label> 关联的物理区段 </q-item-label>
+          <div class="q-gutter-sm row">
+            <q-chip square color="primary" text-color="white">
+              {{ sectionRelation }}
+            </q-chip>
+          </div>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { PlatformData } from 'src/drawApp/graphics/electronicMap/PlatformInteraction';
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { computed } from 'vue';
+import { Platform } from 'src/graphics/electronicMap/platform/Platform';
+import { Station } from 'src/graphics/electronicMap/station/Station';
+import { Section } from 'src/graphics/electronicMap/section/Section';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+
+const drawStore = useDrawStore();
+const { data: platformModel, onUpdate } = useFormData(
+  new PlatformData(),
+  drawStore.getDrawApp()
+);
+const platformTypeOptions = [
+  {
+    label: '请选择',
+    value: electronicMapGraphicData.Platform.TypeOfPlatform.Unknown,
+  },
+  {
+    label: '上行站台',
+    value: electronicMapGraphicData.Platform.TypeOfPlatform.up,
+  },
+  {
+    label: '下行站台',
+    value: electronicMapGraphicData.Platform.TypeOfPlatform.down,
+  },
+];
+
+const stationRelation = computed(() => {
+  const platform = drawStore.selectedGraphic as Platform;
+  const refStations = platform?.relationManage
+    .getRelationsOfGraphicAndOtherType(platform, Station.Type)
+    .map((relation) => relation.getOtherGraphic<Station>(platform).datas.code);
+  let refStation;
+  if (refStations) {
+    refStation = refStations[0];
+  }
+  return refStation;
+});
+const sectionRelation = computed(() => {
+  const platform = drawStore.selectedGraphic as Platform;
+  const refSections = platform?.relationManage
+    .getRelationsOfGraphicAndOtherType(platform, Section.Type)
+    .map((relation) => relation.getOtherGraphic<Section>(platform).datas.code);
+  let refStation;
+  if (refSections) {
+    refStation = refSections[0];
+  }
+  return refStation;
+});
+</script>

src/components/draw-app/templates/LineTemplate.vue

@@ -0,0 +1,42 @@
+<template>
+  <q-form>
+    <q-btn-toggle
+      v-model="template.isCurve"
+      :options="[
+        { label: '曲线(Q)', value: true },
+        { label: '直线(Z)', value: false },
+      ]"
+      @update:model-value="onUpdate"
+      toggle-color="primary"
+    ></q-btn-toggle>
+    <q-input
+      v-model="template.segmentsCount"
+      v-if="template.isCurve"
+      label="曲线分段数"
+      @blur="onUpdate"
+    ></q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { LineTemplate, ILineTemplateProperty } from 'src/graphics/line/Line';
+import { useDrawStore } from 'src/stores/draw-store';
+import { reactive } from 'vue';
+
+const drawStore = useDrawStore();
+
+const template = reactive<ILineTemplateProperty>({
+  isCurve: false,
+  segmentsCount: 10,
+});
+
+function onUpdate() {
+  const gt = drawStore.drawGraphicTemplate as LineTemplate;
+  if (gt) {
+    gt.isCurve = template.isCurve;
+    gt.segmentsCount = template.segmentsCount;
+  }
+}
+</script>
+
+

src/configs/TokenManage.ts

@@ -1,7 +1,7 @@
 const JwtTokenKey = 'jwttoken';
 
 export function saveJwtToken(token: string) {
-  sessionStorage.setItem(JwtTokenKey, `Bearer ${token}`);
+  sessionStorage.setItem(JwtTokenKey, token);
 }
 
 export function getJwtToken(): string | null {

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/configs/iscsStyleConfig.ts

@@ -1,68 +1,184 @@
 import { IscsStyle } from 'src/api/DraftApi';
 
+export interface I_DA_SHI_ZHI_NENG {
+  menuName: string;
+  icon: string;
+  activeIcon: string;
+  sunMenu: {
+    sunMenuName: string;
+    displayForm: DisplayForm;
+    heightPercent?: number; //绘制占的百分比
+  }[];
+}
+
+export enum DisplayForm {
+  draw,
+  component,
+  drawAndComponent,
+}
+
 //达实智能（福州一号线）
-const DA_SHI_ZHI_NENG = [
+const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
   {
-    menuName: '火灾报警',
-    submenu: [
-      { sunMenuName: '站台报警' },
-      { sunMenuName: '站厅报警' },
-      { sunMenuName: '系统状态' },
+    menuName: 'Plan',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
+    sunMenu: [
+      { sunMenuName: '设备运行图', displayForm: DisplayForm.draw },
+      { sunMenuName: '站厅布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: '站台布局图', displayForm: DisplayForm.draw },
+      { sunMenuName: '出入口布局图', displayForm: DisplayForm.draw },
     ],
   },
   {
-    menuName: '机电',
-    submenu: [
-      { sunMenuName: '大系统' },
-      { sunMenuName: '小系统' },
-      { sunMenuName: '水系统' },
-      { sunMenuName: '照明' },
-      { sunMenuName: '电、扶梯' },
-      { sunMenuName: '给排水' },
-      { sunMenuName: '模式' },
-      { sunMenuName: '隧道通风' },
-      { sunMenuName: '时间表' },
-      { sunMenuName: '权限交接' },
-      { sunMenuName: '传感器' },
-      { sunMenuName: '车站网络' },
+    menuName: 'PSCADA',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
+    sunMenu: [
+      { sunMenuName: '一次图', displayForm: DisplayForm.draw },
+      { sunMenuName: '自动化系统图', displayForm: DisplayForm.draw },
+      { sunMenuName: '定值召唤', displayForm: DisplayForm.draw },
+      { sunMenuName: '实时SOE', displayForm: DisplayForm.draw },
+      { sunMenuName: '历史SOE', displayForm: DisplayForm.draw },
+      { sunMenuName: '光字幕', displayForm: DisplayForm.draw },
+      { sunMenuName: '交流直屏', displayForm: DisplayForm.draw },
     ],
   },
   {
-    menuName: '广播',
-    submenu: [{ sunMenuName: '子目录' }],
-  },
-  {
-    menuName: '乘客信息',
-    submenu: [{ sunMenuName: '子目录' }],
-  },
-  {
-    menuName: '闭路电视',
-    submenu: [
-      { sunMenuName: '车站控制' },
-      { sunMenuName: '车站时序' },
-      { sunMenuName: '车站时序编辑' },
-      { sunMenuName: '车站设备状态' },
+    menuName: 'BAS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-BAS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-BAS-active',
+    sunMenu: [
+      { sunMenuName: '大系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '小系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '隧道通风系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '水系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '给排水', displayForm: DisplayForm.draw },
+      { sunMenuName: '电扶梯', displayForm: DisplayForm.draw },
+      { sunMenuName: '照明系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '传感器', displayForm: DisplayForm.draw },
+      { sunMenuName: '导向标识/广告', displayForm: DisplayForm.draw },
+      { sunMenuName: '人防门', displayForm: DisplayForm.draw },
+      { sunMenuName: 'BAS系统', displayForm: DisplayForm.draw },
+      { sunMenuName: '模式控制', displayForm: DisplayForm.component },
+      { sunMenuName: '时间表', displayForm: DisplayForm.draw },
+      { sunMenuName: '操作场所切换', displayForm: DisplayForm.draw },
     ],
   },
   {
-    menuName: '屏蔽门',
-    submenu: [{ sunMenuName: '屏蔽门' }],
+    menuName: 'FAS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-FAS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FAS-active',
+    sunMenu: [
+      { sunMenuName: '设备分区图', displayForm: DisplayForm.draw },
+      { sunMenuName: '火灾报警平面图', displayForm: DisplayForm.draw },
+      { sunMenuName: 'FAS气灭系统图', displayForm: DisplayForm.draw },
+    ],
   },
   {
-    menuName: '售检票',
-    submenu: [{ sunMenuName: '子目录' }],
+    menuName: 'TFDS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-TFDS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-TFDS-active',
+    sunMenu: [
+      { sunMenuName: '感温光纤状态监视图', displayForm: DisplayForm.draw },
+    ],
   },
   {
-    menuName: '门禁',
-    submenu: [{ sunMenuName: '子目录' }],
+    menuName: 'AFC',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-AFC',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-AFC-active',
+    sunMenu: [
+      { sunMenuName: '自动售检票系统监视图', displayForm: DisplayForm.draw },
+    ],
   },
   {
-    menuName: '防淹门',
-    submenu: [{ sunMenuName: '子目录' }],
+    menuName: 'CCTV',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
+    sunMenu: [
+      { sunMenuName: '监控布局图', displayForm: DisplayForm.component },
+      { sunMenuName: 'CCTV设备布局图', displayForm: DisplayForm.draw },
+    ],
   },
   {
-    menuName: '网络状态',
-    submenu: [{ sunMenuName: '子目录' }],
+    menuName: 'PIS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-PIS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PIS-active',
+    sunMenu: [{ sunMenuName: 'PIS监控', displayForm: DisplayForm.draw }],
+  },
+  {
+    menuName: 'PA',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-PA',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PA-active',
+    sunMenu: [{ sunMenuName: 'PA监控', displayForm: DisplayForm.draw }],
+  },
+  {
+    menuName: 'SIG/RAD',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-SIG/RAD-active',
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
+  },
+  {
+    menuName: 'ACS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-ACS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ACS-active',
+    sunMenu: [
+      { sunMenuName: '门禁总览图', displayForm: DisplayForm.draw },
+      { sunMenuName: '门禁监视布局图-站厅', displayForm: DisplayForm.draw },
+      { sunMenuName: '门禁监视布局图-站台', displayForm: DisplayForm.draw },
+    ],
+  },
+  {
+    menuName: 'PSD',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-PSD',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSD-active',
+    sunMenu: [
+      { sunMenuName: '屏蔽门系统图', displayForm: DisplayForm.component },
+    ],
+  },
+  {
+    menuName: 'FG',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-FG',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-FG-active',
+    sunMenu: [
+      { sunMenuName: '防淹门状态监视图', displayForm: DisplayForm.draw },
+    ],
+  },
+  {
+    menuName: 'ALM',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-ALM',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-ALM-active',
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
+  },
+  {
+    menuName: 'NMS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-NMS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-NMS-active',
+    sunMenu: [{ sunMenuName: '网络状态监视图', displayForm: DisplayForm.draw }],
+  },
+  {
+    menuName: 'OPS',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-OPS',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-OPS-active',
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
+  },
+  {
+    menuName: '数据',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-Data',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Data-active',
+    sunMenu: [{ sunMenuName: '子目录', displayForm: DisplayForm.component }],
+  },
+  {
+    menuName: '联动',
+    icon: 'svguse:../iscsMenuIcon.svg#icon-Linkage',
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Linkage-active',
+    sunMenu: [
+      {
+        sunMenuName: '子目录',
+        displayForm: DisplayForm.drawAndComponent,
+        heightPercent: 50,
+      },
+    ],
   },
 ];
 

src/drawApp/commonApp.ts

@@ -22,6 +22,16 @@ import { RectData } from './graphics/RectInteraction';
 import { common } from 'src/protos/common';
 import { errorNotify, successNotify } from 'src/utils/CommonNotify';
 import { saveDraft } from 'src/api/DraftApi';
+import { sync_data_message } from 'src/protos/sync_data_message';
+import { LineDraw } from 'src/graphics/line/LineDrawAssistant';
+import { Line, LineTemplate } from 'src/graphics/line/Line';
+import { LineData } from './graphics/LineInteraction';
+import { CircleDraw } from 'src/graphics/circle/CircleDrawAssistant';
+import { Circle, CircleTemplate } from 'src/graphics/circle/Circle';
+import { CircleData } from './graphics/CircleInteraction';
+import { ButtonDraw } from 'src/graphics/button/ButtonDrawAssistant';
+import { Button, ButtonTemplate } from 'src/graphics/button/Button';
+import { ButtonData } from './graphics/ButtonInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -49,6 +59,9 @@ export function initCommonDrawApp(app: IDrawApp) {
   new ArrowDraw(app, new ArrowTemplate(new ArrowData()));
   new TextContentDraw(app, new TextContentTemplate(new IscsTextData()));
   new RectDraw(app, new RectTemplate(new RectData()));
+  new LineDraw(app, new LineTemplate(new LineData()));
+  new CircleDraw(app, new CircleTemplate(new CircleData()));
+  new ButtonDraw(app, new ButtonTemplate(new ButtonData()));
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);
 
@@ -73,22 +86,36 @@ export function initCommonDrawApp(app: IDrawApp) {
 
 interface ICommonStorage {
   canvas: common.Canvas;
-  arrows: iscsGraphicData.Arrow[];
-  iscsTexts: iscsGraphicData.IscsText[];
-  rects: iscsGraphicData.Rect[];
+  commonGraphicStorage: {
+    arrows: iscsGraphicData.Arrow[];
+    texts: iscsGraphicData.Text[];
+    rects: iscsGraphicData.Rect[];
+    lines: iscsGraphicData.Line[];
+    circles: iscsGraphicData.Circle[];
+    buttons: iscsGraphicData.Button[];
+  };
 }
 export function loadCommonDrawDatas(storage: ICommonStorage): GraphicData[] {
   const datas: GraphicData[] = [];
   console.log(storage, 'storage');
-  storage.arrows.forEach((arrow) => {
+  storage.commonGraphicStorage.arrows.forEach((arrow) => {
     datas.push(new ArrowData(arrow));
   });
-  storage.iscsTexts.forEach((iscsText) => {
+  storage.commonGraphicStorage.texts.forEach((iscsText) => {
     datas.push(new IscsTextData(iscsText));
   });
-  storage.rects.forEach((rect) => {
+  storage.commonGraphicStorage.rects.forEach((rect) => {
     datas.push(new RectData(rect));
   });
+  storage.commonGraphicStorage.lines.forEach((line) => {
+    datas.push(new LineData(line));
+  });
+  storage.commonGraphicStorage.circles.forEach((circle) => {
+    datas.push(new CircleData(circle));
+  });
+  storage.commonGraphicStorage.buttons.forEach((button) => {
+    datas.push(new ButtonData(button));
+  });
   return datas;
 }
 
@@ -104,13 +131,28 @@ export function saveCommonDrawDatas(app: IDrawApp, storage: ICommonStorage) {
   graphics.forEach((g) => {
     if (g instanceof Arrow) {
       const arrowData = g.saveData();
-      storage.arrows.push((arrowData as ArrowData).data);
+      storage.commonGraphicStorage.arrows.push((arrowData as ArrowData).data);
     } else if (g instanceof TextContent) {
       const textContentData = g.saveData();
-      storage.iscsTexts.push((textContentData as IscsTextData).data);
+      storage.commonGraphicStorage.texts.push(
+        (textContentData as IscsTextData).data
+      );
     } else if (g instanceof Rect) {
       const rectData = g.saveData();
-      storage.rects.push((rectData as RectData).data);
+      storage.commonGraphicStorage.rects.push((rectData as RectData).data);
+    } else if (g instanceof Line) {
+      const lineData = g.saveData();
+      storage.commonGraphicStorage.lines.push((lineData as LineData).data);
+    } else if (g instanceof Circle) {
+      const circleData = g.saveData();
+      storage.commonGraphicStorage.circles.push(
+        (circleData as CircleData).data
+      );
+    } else if (g instanceof Button) {
+      const buttonData = g.saveData();
+      storage.commonGraphicStorage.buttons.push(
+        (buttonData as ButtonData).data
+      );
     }
   });
 
@@ -142,3 +184,74 @@ export function setUniqueIdPrefix(
 ) {
   UniqueIdPrefix = newUniqueIdPrefix;
 }
+
+export function handlerCommonTypeData(data: sync_data_message.UpdataData) {
+  switch (data.type) {
+    case Rect.Type:
+      return new RectData(iscsGraphicData.Rect.deserialize(data.data));
+    case Arrow.Type:
+      return new ArrowData(iscsGraphicData.Arrow.deserialize(data.data));
+    case TextContent.Type:
+      return new IscsTextData(iscsGraphicData.Text.deserialize(data.data));
+  }
+}
+
+export function handlerNoEditCommonData(
+  data: sync_data_message.UpdataData,
+  storage: ICommonStorage,
+  operationType: string
+) {
+  switch (data.type) {
+    case Rect.Type:
+      const rectData = iscsGraphicData.Rect.deserialize(data.data);
+      // syncNoEditData(operationType, rectData, storage.rects);
+      if (operationType === 'graphic-create') {
+        storage.commonGraphicStorage.rects.push(rectData);
+      } else if (operationType === 'graphic-delete') {
+        const index = storage.commonGraphicStorage.rects.findIndex(
+          (ele) => ele.common.id === rectData.common.id
+        );
+        storage.commonGraphicStorage.rects.splice(index, 1);
+      } else if (operationType === 'graphic-drag') {
+        const index = storage.commonGraphicStorage.rects.findIndex(
+          (ele) => ele.common.id === rectData.common.id
+        );
+        storage.commonGraphicStorage.rects[index] = rectData;
+      }
+      console.log(rectData, storage);
+      break;
+    case Arrow.Type:
+      const arrowData = iscsGraphicData.Arrow.deserialize(data.data);
+      syncNoEditData(
+        operationType,
+        arrowData,
+        storage.commonGraphicStorage.arrows
+      );
+      break;
+    case TextContent.Type:
+      const iscsTextData = iscsGraphicData.Text.deserialize(data.data);
+      syncNoEditData(
+        operationType,
+        iscsTextData,
+        storage.commonGraphicStorage.texts
+      );
+      break;
+  }
+}
+
+export function syncNoEditData(
+  operationType: string,
+  data: any,
+  dataArray: any[]
+) {
+  console.log(data, dataArray, '====');
+  if (operationType === 'graphic-create') {
+    dataArray.push(data);
+  } else if (operationType === 'graphic-delete') {
+    const index = dataArray.findIndex((ele) => ele.id === data.id);
+    dataArray.splice(index, 1);
+  } else if (operationType === 'graphic-drag') {
+    const index = dataArray.findIndex((ele) => ele.id === data.id);
+    dataArray[index] = data;
+  }
+}

src/drawApp/electronicMapApp.ts

@@ -0,0 +1,279 @@
+import { fromUint8Array, toUint8Array } from 'js-base64';
+import {
+  calculateDistanceFromPointToLine,
+  CombinationKey,
+  ContextMenu,
+  distance2,
+  getRectangleCenter,
+  GraphicData,
+  IDrawApp,
+  IGraphicStorage,
+  KeyListener,
+  MenuItemOptions,
+  newDrawApp,
+} from 'jl-graphic';
+import { getDraft, saveDraft } from 'src/api/DraftApi';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { useDrawStore } from 'src/stores/electronicMap-draw-store';
+import { PlatformDraw } from 'src/graphics/electronicMap/platform/PlatformDrawAssistant';
+import {
+  Platform,
+  PlatformTemplate,
+} from 'src/graphics/electronicMap/platform/Platform';
+import { PlatformData } from './graphics/electronicMap/PlatformInteraction';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import { common } from 'src/protos/common';
+import { toStorageTransform } from './graphics/GraphicDataBase';
+import { Section } from 'src/graphics/electronicMap/section/Section';
+import { OneClickGenerateDraw, OneClickGenerateTemplate } from 'src/graphics/electronicMap/trainWindow/oneClickDrawAssistant';
+
+let electronicMapDrawApp: IDrawApp | null = null;
+
+export function getElectronicMapDrawApp(): IDrawApp | null {
+  return electronicMapDrawApp;
+}
+
+export function destroyElectronicMapDrawApp(): void {
+  if (electronicMapDrawApp) {
+    electronicMapDrawApp.destroy();
+    electronicMapDrawApp = null;
+  }
+}
+
+const UndoOptions: MenuItemOptions = {
+  name: '撤销',
+};
+const RedoOptions: MenuItemOptions = {
+  name: '重做',
+};
+const SelectAllOptions: MenuItemOptions = {
+  name: '全选',
+};
+
+export const DefaultEmCanvasMenu = new ContextMenu({
+  name: '绘制-画布菜单',
+  groups: [
+    {
+      items: [UndoOptions, RedoOptions],
+    },
+    {
+      items: [SelectAllOptions],
+    },
+  ],
+});
+
+export function initElectronicMapDrawApp(): IDrawApp {
+  electronicMapDrawApp = newDrawApp({
+    dataLoader: loadElectronicMapDrawDatas,
+  });
+  const app = electronicMapDrawApp;
+  new OneClickGenerateDraw(app, new OneClickGenerateTemplate()),
+  new PlatformDraw(app, new PlatformTemplate(new PlatformData()));
+
+  // 画布右键菜单
+  app.registerMenu(DefaultEmCanvasMenu);
+
+  app.canvas.on('_rightclick', (e) => {
+    if (app.drawing) return;
+    UndoOptions.disabled = !app.opRecord.hasUndo;
+    RedoOptions.disabled = !app.opRecord.hasRedo;
+
+    UndoOptions.handler = () => {
+      app.opRecord.undo();
+    };
+    RedoOptions.handler = () => {
+      app.opRecord.redo();
+    };
+    SelectAllOptions.handler = () => {
+      app.selectAllGraphics();
+    };
+    DefaultEmCanvasMenu.open(e.global);
+  });
+  app.on('destroy', () => {
+    generateAxleCountingConfig =
+      new electronicMapGraphicData.GenerateAxleCountingConfig();
+  });
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyS',
+      global: true,
+      combinations: [CombinationKey.Ctrl],
+      onPress: () => {
+        saveDrawToServer(saveDrawDatas(app));
+      },
+    })
+  );
+  // KeyA 用于区段复制--控制生成的区段位置
+  const graphicCopyPlugin = app.app.graphicCopyPlugin;
+  const copySectionListener = new KeyListener({
+    value: 'KeyA',
+    global: true,
+    onPress: () => {
+      graphicCopyPlugin.updateMoveLimit('sectionPointLimit');
+    },
+  });
+  graphicCopyPlugin.addGraphicControlers([
+    {
+      controlerList: [copySectionListener],
+      check: () => {
+        if (
+          graphicCopyPlugin.copys.length == 1 &&
+          graphicCopyPlugin.copys[0].type == Section.Type
+        )
+          return true;
+        return false;
+      },
+      moveLimitOption: {
+        moveLimitName: 'sectionPointLimit',
+        moveLimit: (e) => {
+          const mousePos = app.toCanvasCoordinates(e.global);
+          const selectSection = app.selectedGraphics[0] as Section;
+          let selectSectionLeft = selectSection.localToCanvasPoint(
+            selectSection.getStartPoint()
+          );
+          let selectSectionRight = selectSection.localToCanvasPoint(
+            selectSection.getEndPoint()
+          );
+          [selectSectionLeft, selectSectionRight] =
+            selectSectionLeft.x < selectSectionRight.x
+              ? [selectSectionLeft, selectSectionRight]
+              : [selectSectionRight, selectSectionLeft];
+          //要移动到目标位的区段
+          const sections = app.queryStore.queryByType<Section>(Section.Type);
+          const minDistanceSection = sections.reduce((prev, cur) => {
+            const prevDistance = calculateDistanceFromPointToLine(
+              prev.localToCanvasPoint(prev.getStartPoint()),
+              prev.localToCanvasPoint(prev.getEndPoint()),
+              mousePos
+            );
+            const curDistance = calculateDistanceFromPointToLine(
+              cur.localToCanvasPoint(cur.getStartPoint()),
+              cur.localToCanvasPoint(cur.getEndPoint()),
+              mousePos
+            );
+            return prevDistance > curDistance ||
+              (prevDistance == curDistance &&
+                distance2(
+                  prev.localToCanvasPoint(prev.getStartPoint()),
+                  mousePos
+                ) >
+                  distance2(
+                    cur.localToCanvasPoint(cur.getStartPoint()),
+                    mousePos
+                  ))
+              ? cur
+              : prev;
+          });
+          const minDistanceRefSectionsPos =
+            minDistanceSection.localToCanvasPoint(
+              getRectangleCenter(
+                minDistanceSection.lineGraphic.getLocalBounds()
+              )
+            );
+          let minDistanceSectionLeft = minDistanceSection.localToCanvasPoint(
+            minDistanceSection.getStartPoint()
+          );
+          let minDistanceSectionRight = minDistanceSection.localToCanvasPoint(
+            minDistanceSection.getEndPoint()
+          );
+          [minDistanceSectionLeft, minDistanceSectionRight] =
+            minDistanceSectionLeft.x < minDistanceSectionRight.x
+              ? [minDistanceSectionLeft, minDistanceSectionRight]
+              : [minDistanceSectionRight, minDistanceSectionLeft];
+
+          if (mousePos.x > minDistanceRefSectionsPos.x) {
+            graphicCopyPlugin.container.position.x =
+              minDistanceSectionRight.x - selectSectionLeft.x;
+            graphicCopyPlugin.container.position.y =
+              minDistanceSectionRight.y - selectSectionLeft.y;
+          } else {
+            graphicCopyPlugin.container.position.x =
+              minDistanceSectionLeft.x - selectSectionRight.x;
+            graphicCopyPlugin.container.position.y =
+              minDistanceSectionLeft.y - selectSectionRight.y;
+          }
+        },
+      },
+    },
+  ]);
+  return electronicMapDrawApp;
+}
+
+export async function loadElectronicMapDrawDatas(): Promise<IGraphicStorage> {
+  const drawStore = useDrawStore();
+  const id = drawStore.draftId;
+  if (!id) {
+    throw new Error('获取数据异常：为获取到草稿地图ID');
+  }
+  const base64 = (await getDraft(id)).data;
+  if (base64) {
+    const storage =
+      electronicMapGraphicData.ElectronicMapGraphicStorage.deserialize(
+        toUint8Array(base64)
+      );
+    const datas: GraphicData[] = [];
+    generateAxleCountingConfig = storage.generateAxleCountingConfig;
+    storage.Platforms.forEach((platform) => {
+      datas.push(new PlatformData(platform));
+    });
+    console.log(storage, 'storage');
+    return Promise.resolve({
+      canvasProperty: storage.canvas,
+      datas: datas,
+    });
+  } else {
+    return Promise.resolve({
+      datas: [],
+    });
+  }
+}
+
+export function saveDrawDatas(app: IDrawApp) {
+  const storage = new electronicMapGraphicData.ElectronicMapGraphicStorage();
+  const canvasData = app.canvas.saveData();
+  storage.canvas = new common.Canvas({
+    width: canvasData.width,
+    height: canvasData.height,
+    backgroundColor: canvasData.backgroundColor,
+    viewportTransform: toStorageTransform(canvasData.viewportTransform),
+  });
+  const graphics = app.queryStore.getAllGraphics();
+  graphics.forEach((g) => {
+    if (g instanceof Platform) {
+      const platformData = g.saveData();
+      storage.Platforms.push((platformData as PlatformData).data);
+    }
+  });
+  storage.generateAxleCountingConfig = generateAxleCountingConfig;
+  const base64 = fromUint8Array(storage.serialize());
+  console.log('保存数据', storage);
+  return base64;
+}
+
+export function saveDrawToServer(base64: string) {
+  const drawStore = useDrawStore();
+  const id = drawStore.draftId;
+  if (!id) {
+    return;
+  }
+  saveDraft({ id, data: base64 })
+    .then(() => {
+      successNotify('保存数据成功！');
+    })
+    .catch((err) => {
+      errorNotify(err.message, err);
+    });
+}
+
+//一键生成计轴配置
+let generateAxleCountingConfig =
+  new electronicMapGraphicData.GenerateAxleCountingConfig();
+export function loadGenerateAxleCountingConfig() {
+  return generateAxleCountingConfig;
+}
+
+export function setGenerateAxleCountingConfig(
+  newScreenDoorConfig: electronicMapGraphicData.GenerateAxleCountingConfig
+) {
+  generateAxleCountingConfig = newScreenDoorConfig;
+}

src/drawApp/fasApp.ts

@@ -1,89 +0,0 @@
-import {
-  CombinationKey,
-  IDrawApp,
-  IGraphicStorage,
-  JlGraphic,
-  KeyListener,
-  newDrawApp,
-} from 'jl-graphic';
-import { FASGraphicData } from 'src/protos/fas_graphic_data';
-import { fromUint8Array } from 'js-base64';
-import {
-  initCommonDrawApp,
-  saveCommonDrawDatas,
-  saveDrawToServer,
-} from './commonApp';
-import { useDrawStore } from 'src/stores/draw-store';
-
-let drawApp: IDrawApp | null = null;
-
-export function getFASDrawApp(): IDrawApp | null {
-  return drawApp;
-}
-
-export function destroyFASDrawApp(): void {
-  if (drawApp) {
-    drawApp.destroy();
-    drawApp = null;
-  }
-}
-
-export function initFASDrawApp(): IDrawApp {
-  const isSupportDeletion = (g: JlGraphic) => {
-    console.log(g);
-    return true;
-  };
-  drawApp = newDrawApp({
-    dataLoader: loadDrawDatas,
-    isSupportDeletion: isSupportDeletion,
-  });
-  const app = drawApp;
-  initCommonDrawApp(app);
-  // new CCTVButtonDraw(app, new CCTVButtonTemplate(new CCTVButtonData()));
-
-  app.addKeyboardListener(
-    new KeyListener({
-      value: 'KeyS',
-      global: true,
-      combinations: [CombinationKey.Ctrl],
-      onPress: () => {
-        saveDrawToServer(saveDrawDatas(app));
-      },
-    })
-  );
-  return drawApp;
-}
-
-export async function loadDrawDatas(): Promise<IGraphicStorage> {
-  const drawStore = useDrawStore();
-  const id = drawStore.draftId;
-  if (!id) {
-    throw new Error('获取数据异常：为获取到草稿地图ID');
-  }
-  /*   const { proto: base64 } = await getDraft(id);
-  if (base64) {
-    const storage = iscsGraphicData.IscsGraphicStorage.deserialize(
-      toUint8Array(base64)
-    );
-    const datas = loadCommonDrawDatas(storage);} */
-  return Promise.resolve({
-    datas: [],
-  });
-}
-
-export function saveDrawDatas(app: IDrawApp) {
-  let storage = new FASGraphicData.FASGraphicStorage();
-  storage = saveCommonDrawDatas(
-    app,
-    storage
-  ) as FASGraphicData.FASGraphicStorage;
-  const graphics = app.queryStore.getAllGraphics();
-  /*  graphics.forEach((g) => {
-    if (TrackSection.Type === g.type) {
-      const trackSectionData = (g as TrackSection).saveData();
-      storage.trackSections.push((trackSectionData as TrackSectionData).data);
-    } }) */
-  console.log(storage, '保存数据', graphics);
-  const base64 = fromUint8Array(storage.serialize());
-  return base64;
-}

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/graphics/BAS/VerticalElevatorInteraction.ts

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

src/drawApp/graphics/ButtonInteraction.ts

@@ -0,0 +1,92 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import { Button, IButtonData } from 'src/graphics/button/Button';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+
+export class ButtonData extends GraphicDataBase implements IButtonData {
+  constructor(data?: iscsGraphicData.Button) {
+    let button;
+    if (data) {
+      button = data;
+    } else {
+      button = new iscsGraphicData.Button({
+        common: GraphicDataBase.defaultCommonInfo(Button.Type),
+      });
+    }
+    super(button);
+  }
+
+  public get data(): iscsGraphicData.Button {
+    return this.getData<iscsGraphicData.Button>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get codeColor(): string {
+    return this.data.codeColor;
+  }
+  set codeColor(v: string) {
+    this.data.codeColor = v;
+  }
+  get codeFontSize(): number {
+    return this.data.codeFontSize;
+  }
+  set codeFontSize(v: number) {
+    this.data.codeFontSize = v;
+  }
+  get belongSubMenu(): string {
+    return this.data.codeColor;
+  }
+  set belongSubMenu(v: string) {
+    this.data.codeColor = v;
+  }
+  get buttonType(): iscsGraphicData.Button.ButtonType {
+    return this.data.buttonType;
+  }
+  set buttonType(v: iscsGraphicData.Button.ButtonType) {
+    this.data.buttonType = v;
+  }
+  get width(): number {
+    return this.data.width;
+  }
+  set width(v: number) {
+    this.data.width = v;
+  }
+  get height(): number {
+    return this.data.height;
+  }
+  set height(v: number) {
+    this.data.height = v;
+  }
+  get radius(): number {
+    return this.data.radius;
+  }
+  set radius(v: number) {
+    this.data.radius = v;
+  }
+  get fillColor(): string {
+    return this.data.fillColor;
+  }
+  set fillColor(v: string) {
+    this.data.fillColor = v;
+  }
+  get alpha(): number {
+    return this.data.alpha;
+  }
+  set alpha(v: number) {
+    this.data.alpha = v;
+  }
+  clone(): ButtonData {
+    return new ButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: ButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: ButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/CCTV/CCTVButtonInteraction.ts

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

src/drawApp/graphics/CircleInteraction.ts

@@ -0,0 +1,76 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { ICircleData, Circle } from 'src/graphics/circle/Circle';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { GraphicDataBase } from './GraphicDataBase';
+import { common } from 'src/protos/common';
+
+export class CircleData extends GraphicDataBase implements ICircleData {
+  constructor(data?: iscsGraphicData.Circle) {
+    let circle;
+    if (!data) {
+      circle = new iscsGraphicData.Circle({
+        common: GraphicDataBase.defaultCommonInfo(Circle.Type),
+      });
+    } else {
+      circle = data;
+    }
+    super(circle);
+  }
+
+  public get data(): iscsGraphicData.Circle {
+    return this.getData<iscsGraphicData.Circle>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get lineWidth(): number {
+    return this.data.lineWidth;
+  }
+  set lineWidth(v: number) {
+    this.data.lineWidth = v;
+  }
+  get lineColor(): string {
+    return this.data.lineColor;
+  }
+  set lineColor(v: string) {
+    this.data.lineColor = v;
+  }
+  get position(): IPointData {
+    return this.data.position;
+  }
+  set position(point: IPointData) {
+    this.data.position = new common.Point({ x: point.x, y: point.y });
+  }
+  get radius(): number {
+    return this.data.radius;
+  }
+  set radius(v: number) {
+    this.data.radius = v;
+  }
+  get fillColor(): string {
+    return this.data.fillColor;
+  }
+  set fillColor(v: string) {
+    this.data.fillColor = v;
+  }
+  get alpha(): number {
+    return this.data.alpha;
+  }
+  set alpha(v: number) {
+    this.data.alpha = v;
+  }
+  clone(): CircleData {
+    return new CircleData(this.data.cloneMessage());
+  }
+  copyFrom(data: CircleData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: CircleData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/FAS/AcsInteraction.ts

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

src/drawApp/graphics/FAS/AfcInteraction.ts

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

src/drawApp/graphics/FAS/ElectricButterflyValveInteraction.ts

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

src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts

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

src/drawApp/graphics/FAS/ElevatorLiftToTopInteraction.ts

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

src/drawApp/graphics/FAS/EmergencyLightingInteraction.ts

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

src/drawApp/graphics/FAS/FasAlarmInteraction.ts

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

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 fasFailureControlHost;
+    if (data) {
+      fasFailureControlHost = data;
+    } else {
+      fasFailureControlHost = new iscsGraphicData.FasFailureControlHost({
+        common: GraphicDataBase.defaultCommonInfo(FasFailureControlHost.Type),
+      });
+    }
+    super(fasFailureControlHost);
+  }
+
+  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/graphics/FAS/FaultValveInteraction.ts

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

src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts

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

src/drawApp/graphics/FAS/FirePumpInteraction.ts

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

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/FireValveInteraction.ts

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

src/drawApp/graphics/FAS/ManualAlarmButtonInteraction.ts

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

src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts

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

src/drawApp/graphics/FAS/PressureSwitchInteraction.ts

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

src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts

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

src/drawApp/graphics/FAS/SmokeDetectorInteraction.ts

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

src/drawApp/graphics/FAS/SprayPumpInteraction.ts

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

src/drawApp/graphics/FAS/StabilizedPressurePumpInteraction.ts

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

src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts

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

src/drawApp/graphics/FAS/TemperatureCableInteraction.ts

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

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/graphics/FAS/WaterFlowIndicatorInteraction.ts

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

src/drawApp/graphics/IscsTextContentInteraction.ts

@@ -7,20 +7,20 @@ import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { GraphicDataBase } from './GraphicDataBase';
 
 export class IscsTextData extends GraphicDataBase implements ITextContentData {
-  constructor(data?: iscsGraphicData.IscsText) {
+  constructor(data?: iscsGraphicData.Text) {
     let pslText;
     if (data) {
       pslText = data;
     } else {
-      pslText = new iscsGraphicData.IscsText({
+      pslText = new iscsGraphicData.Text({
         common: GraphicDataBase.defaultCommonInfo(TextContent.Type),
       });
     }
     super(pslText);
   }
 
-  public get data(): iscsGraphicData.IscsText {
-    return this.getData<iscsGraphicData.IscsText>();
+  public get data(): iscsGraphicData.Text {
+    return this.getData<iscsGraphicData.Text>();
   }
 
   get code(): string {

src/drawApp/graphics/LineInteraction.ts

@@ -0,0 +1,68 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase } from './GraphicDataBase';
+import { ILineData, Line } from 'src/graphics/line/Line';
+import { IPointData } from 'pixi.js';
+import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
+import { common } from 'src/protos/common';
+
+export class LineData extends GraphicDataBase implements ILineData {
+  constructor(data?: iscsGraphicData.Line) {
+    let line;
+    if (!data) {
+      line = new iscsGraphicData.Line({
+        common: GraphicDataBase.defaultCommonInfo(Line.Type),
+      });
+    } else {
+      line = data;
+    }
+    super(line);
+  }
+  public get data(): iscsGraphicData.Line {
+    return this.getData<iscsGraphicData.Line>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map((p) => new common.Point({ x: p.x, y: p.y }));
+  }
+  get isCurve(): boolean {
+    return this.data.isCurve;
+  }
+  set isCurve(v: boolean) {
+    this.data.isCurve = v;
+  }
+  get segmentsCount(): number {
+    return this.data.segmentsCount;
+  }
+  set segmentsCount(v: number) {
+    this.data.segmentsCount = v;
+  }
+  get lineWidth(): number {
+    return this.data.lineWidth;
+  }
+  set lineWidth(v: number) {
+    this.data.lineWidth = v;
+  }
+  get lineColor(): string {
+    return this.data.lineColor;
+  }
+  set lineColor(v: string) {
+    this.data.lineColor = v;
+  }
+  clone(): LineData {
+    return new LineData(this.data.cloneMessage());
+  }
+  copyFrom(data: LineData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: LineData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/RectInteraction.ts

@@ -64,6 +64,18 @@ export class RectData extends GraphicDataBase implements IRectData {
   set radius(v: number) {
     this.data.radius = v;
   }
+  get fillColor(): string {
+    return this.data.fillColor;
+  }
+  set fillColor(v: string) {
+    this.data.fillColor = v;
+  }
+  get alpha(): number {
+    return this.data.alpha;
+  }
+  set alpha(v: number) {
+    this.data.alpha = v;
+  }
   clone(): RectData {
     return new RectData(this.data.cloneMessage());
   }

src/drawApp/graphics/electronicMap/AxleCountingInteraction.ts

@@ -0,0 +1,71 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  AxleCounting,
+  IAxleCountingData,
+} from 'src/graphics/axleCounting/AxleCounting';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+
+export class AxleCountingData
+  extends GraphicDataBase
+  implements IAxleCountingData
+{
+  constructor(data?: graphicData.AxleCounting) {
+    let axleCounting;
+    if (!data) {
+      axleCounting = new graphicData.AxleCounting({
+        common: GraphicDataBase.defaultCommonInfo(AxleCounting.Type),
+      });
+    } else {
+      axleCounting = data;
+    }
+    super(axleCounting);
+  }
+
+  public get data(): graphicData.AxleCounting {
+    return this.getData<graphicData.AxleCounting>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
+    return this.data.kilometerSystem;
+  }
+  set kilometerSystem(v: KilometerSystem) {
+    this.data.kilometerSystem = new graphicData.KilometerSystem(v);
+  }
+  get axleCountingRef(): graphicData.RelatedRef[] {
+    return this.data.axleCountingRef;
+  }
+  set axleCountingRef(points: graphicData.RelatedRef[]) {
+    this.data.axleCountingRef = points;
+  }
+  get type(): graphicData.AxleCounting.TypeDetectionPoint {
+    return this.data.type;
+  }
+  set type(type: graphicData.AxleCounting.TypeDetectionPoint) {
+    this.data.type = type;
+  }
+  get centralizedStations(): number[] {
+    return this.data.centralizedStations;
+  }
+  set centralizedStations(v: number[]) {
+    this.data.centralizedStations = v;
+  }
+  clone(): AxleCountingData {
+    return new AxleCountingData(this.data.cloneMessage());
+  }
+  copyFrom(data: AxleCountingData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: AxleCountingData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/graphics/electronicMap/PlatformInteraction.ts

@@ -0,0 +1,148 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  IPlatformData,
+  Platform,
+} from 'src/graphics/electronicMap/platform/Platform';
+import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
+import { GraphicDataBase } from '../GraphicDataBase';
+
+import { IGraphicScene, GraphicInteractionPlugin, JlGraphic } from 'jl-graphic';
+
+export class PlatformData extends GraphicDataBase implements IPlatformData {
+  constructor(data?: electronicMapGraphicData.Platform) {
+    let platform;
+    if (!data) {
+      platform = new electronicMapGraphicData.Platform({
+        common: GraphicDataBase.defaultCommonInfo(Platform.Type),
+      });
+    } else {
+      platform = data;
+    }
+    super(platform);
+  }
+
+  public get data(): electronicMapGraphicData.Platform {
+    return this.getData<electronicMapGraphicData.Platform>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get refStation(): number {
+    return this.data.refStationId;
+  }
+  set refStation(v: number) {
+    this.data.refStationId = v;
+  }
+  get refSection(): number {
+    return this.data.refSectionId;
+  }
+  set refSection(v: number) {
+    this.data.refSectionId = v;
+  }
+  get refEsbRelayCode(): string {
+    return this.data.refEsbRelayCode;
+  }
+  set refEsbRelayCode(v: string) {
+    this.data.refEsbRelayCode = v;
+  }
+  get type(): electronicMapGraphicData.Platform.TypeOfPlatform {
+    return this.data.type;
+  }
+  set type(v: electronicMapGraphicData.Platform.TypeOfPlatform) {
+    this.data.type = v;
+  }
+  clone(): PlatformData {
+    return new PlatformData(this.data.cloneMessage());
+  }
+  copyFrom(data: PlatformData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: PlatformData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+/* export class PlatformState extends GraphicStateBase implements IPlatformState {
+  constructor(proto?: state.PlatformState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.PlatformState();
+    }
+    super(states, Platform.Type);
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get states(): state.PlatformState {
+    return this.getState<state.PlatformState>();
+  }
+  get empj(): boolean {
+    return this.states.empj;
+  }
+  get spksState(): state.ReplyState[] {
+    if (!this.states.spksState) {
+      this.states.spksState = [new state.ReplyState()];
+    }
+    return this.states.spksState;
+  }
+  set spksState(v: state.ReplyState[]) {
+    this.states.spksState = v;
+  }
+  get mkxJState(): state.MkxJState {
+    if (!this.states.mkxJState) {
+      this.states.mkxJState = new state.MkxJState();
+    }
+    return this.states.mkxJState;
+  }
+  set mkxJState(v: state.MkxJState) {
+    this.states.mkxJState = v;
+  }
+  clone(): PlatformState {
+    return new PlatformState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+} */
+
+export class PlatformOperateInteraction extends GraphicInteractionPlugin<Platform> {
+  static Name = 'platform_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(PlatformOperateInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new PlatformOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Platform[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Platform.Type)
+      .map((g) => g as Platform);
+  }
+  bind(g: Platform): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: Platform): void {
+    g.selectable = false;
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    //useLineStore().stateProCountIncrease();
+  }
+}

src/drawApp/graphics/electronicMap/ScreenDoorInteraction.ts

@@ -0,0 +1,192 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  IScreenDoorData,
+  IScreenDoorState,
+  ScreenDoor,
+} from 'src/graphics/screenDoor/ScreenDoor';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+import { useLineStore } from 'src/stores/line-store';
+import {
+  ContextMenu,
+  GraphicInteractionPlugin,
+  IGraphicScene,
+  JlGraphic,
+  MenuItemOptions,
+} from 'jl-graphic';
+import { loadScreenDoorConfig } from '../commonApp';
+import { Dialog } from 'quasar';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import ScreenDoorOperation from 'src/components/draw-app/dialogs/ScreenDoorOperation.vue';
+import { request } from 'src/protos/request';
+
+export class ScreenDoorData extends GraphicDataBase implements IScreenDoorData {
+  constructor(data?: graphicData.ScreenDoor) {
+    let screenDoor;
+    if (!data) {
+      screenDoor = new graphicData.ScreenDoor({
+        common: GraphicDataBase.defaultCommonInfo(ScreenDoor.Type),
+      });
+    } else {
+      screenDoor = data;
+    }
+    super(screenDoor);
+  }
+
+  public get data(): graphicData.ScreenDoor {
+    return this.getData<graphicData.ScreenDoor>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get refPlatform(): number {
+    return this.data.refPlatformId;
+  }
+  set refPlatform(v: number) {
+    this.data.refPlatformId = v;
+  }
+  get sonDoorAmount(): number {
+    return loadScreenDoorConfig()?.sonDoorAmount || 30;
+  }
+
+  clone(): ScreenDoorData {
+    return new ScreenDoorData(this.data.cloneMessage());
+  }
+  copyFrom(data: ScreenDoorData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: ScreenDoorData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class ScreenDoorState
+  extends GraphicStateBase
+  implements IScreenDoorState
+{
+  constructor(proto?: state.PsdState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.PsdState();
+    }
+    super(states, ScreenDoor.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get asdStates(): state.AsdState[] {
+    return this.states.asdStates;
+  }
+  set asdStates(v: state.AsdState[]) {
+    this.states.asdStates = v;
+  }
+  get mgj() {
+    return this.states.mgj;
+  }
+  set mgj(v: boolean) {
+    this.states.mgj = v;
+  }
+  get zaw() {
+    return this.states.zaw;
+  }
+  set zaw(v: boolean) {
+    this.states.zaw = v;
+  }
+  get param(): request.PsdParam {
+    return this.states.param;
+  }
+  set param(param: request.PsdParam) {
+    this.states.param = param;
+  }
+  get states(): state.PsdState {
+    return this.getState<state.PsdState>();
+  }
+  clone(): ScreenDoorState {
+    return new ScreenDoorState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const setSceenDoorParam: MenuItemOptions = { name: '设置参数' };
+const sceenDoorOperateMenu: ContextMenu = ContextMenu.init({
+  name: '屏蔽门操作菜单',
+  groups: [
+    {
+      items: [setSceenDoorParam],
+    },
+  ],
+});
+
+export class ScreenDoorOperateInteraction extends GraphicInteractionPlugin<ScreenDoor> {
+  static Name = 'screen_door_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(ScreenDoorOperateInteraction.Name, app);
+    app.registerMenu(sceenDoorOperateMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new ScreenDoorOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): ScreenDoor[] | undefined {
+    return grahpics
+      .filter((g) => g.type === ScreenDoor.Type)
+      .map((g) => g as ScreenDoor);
+  }
+  bind(g: ScreenDoor): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+    g.on('rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: ScreenDoor): void {
+    g.selectable = false;
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+    g.off('rightclick', this.onContextMenu, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const screenDoor = target.getGraphic<ScreenDoor>();
+    if (!screenDoor) return;
+    this.app.updateSelected(screenDoor);
+    const lineStore = useLineStore();
+    setSceenDoorParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        component: ScreenDoorOperation,
+        componentProps: {
+          id: screenDoor.id,
+          code: screenDoor.datas.code,
+          sonDoorAmount: screenDoor.datas.sonDoorAmount,
+          asdCodesProp: screenDoor.states.param.asdCodes,
+          screenDoorForceProp: screenDoor.states.param.force,
+          screenDoorFaultProp: screenDoor.states.param.fault,
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    sceenDoorOperateMenu.open(e.global);
+  }
+}

src/drawApp/graphics/electronicMap/SectionInteraction.ts

@@ -0,0 +1,317 @@
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import {
+  ISectionData,
+  ISectionState,
+  Section,
+  SectionType,
+} from 'src/graphics/section/Section';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
+import {
+  GraphicInteractionPlugin,
+  IGraphicScene,
+  JlGraphic,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
+import { useLineStore } from 'src/stores/line-store';
+import { SectionGraphicHitArea } from 'src/graphics/section/SectionDrawAssistant';
+import { Dialog } from 'quasar';
+import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
+import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import { state } from 'src/protos/device_state';
+import { getKmDistance } from '../lineScene';
+import SectionOperation from 'src/components/draw-app/dialogs/SectionOperation.vue';
+import { request } from 'src/protos/request';
+import { setAxleSectionState } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
+
+export class SectionData extends GraphicDataBase implements ISectionData {
+  constructor(data?: graphicData.Section) {
+    let section;
+    if (!data) {
+      section = new graphicData.Section({
+        common: GraphicDataBase.defaultCommonInfo(Section.Type),
+      });
+    } else {
+      section = data;
+    }
+    super(section);
+  }
+  public get data(): graphicData.Section {
+    return this.getData<graphicData.Section>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map(
+      (p) => new graphicData.Point({ x: p.x, y: p.y })
+    );
+  }
+  get paRef(): graphicData.RelatedRef {
+    return this.data.paRef;
+  }
+  set paRef(ref: graphicData.RelatedRef) {
+    this.data.paRef = ref;
+  }
+  get pbRef(): graphicData.RelatedRef {
+    return this.data.pbRef;
+  }
+  set pbRef(ref: graphicData.RelatedRef) {
+    this.data.pbRef = ref;
+  }
+  get sectionType(): graphicData.Section.SectionType {
+    return this.data.sectionType;
+  }
+  set sectionType(type: graphicData.Section.SectionType) {
+    this.data.sectionType = type;
+  }
+  get axleCountings(): number[] {
+    return this.data.axleCountings;
+  }
+  set axleCountings(axleCountings: number[]) {
+    this.data.axleCountings = axleCountings;
+  }
+  get trackSectionId(): number {
+    return this.data.trackSectionId;
+  }
+  set trackSectionId(v: number) {
+    this.data.trackSectionId = v;
+  }
+  get isCurve(): boolean {
+    return this.data.isCurve;
+  }
+  set isCurve(v: boolean) {
+    this.data.isCurve = v;
+  }
+  get segmentsCount(): number {
+    return this.data.segmentsCount;
+  }
+  set segmentsCount(v: number) {
+    this.data.segmentsCount = v;
+  }
+  get centralizedStations(): number[] {
+    return this.data.centralizedStations;
+  }
+  set centralizedStations(v: number[]) {
+    this.data.centralizedStations = v;
+  }
+  get normalRunningDirection(): graphicData.Section.RunningDirection {
+    return this.data.normalRunningDirection;
+  }
+  set normalRunningDirection(v: graphicData.Section.RunningDirection) {
+    this.data.normalRunningDirection = v;
+  }
+  get isTurnBackZone(): boolean {
+    return this.data.isTurnBackZone;
+  }
+  set isTurnBackZone(v: boolean) {
+    this.data.isTurnBackZone = v;
+  }
+  get direction(): graphicData.Direction {
+    return this.data.direction;
+  }
+  set direction(v: graphicData.Direction) {
+    this.data.direction = v;
+  }
+  clone(): SectionData {
+    return new SectionData(this.data.cloneMessage());
+  }
+  copyFrom(data: SectionData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SectionData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class SectionStates extends GraphicStateBase implements ISectionState {
+  constructor(proto?: state.SectionState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.SectionState();
+    }
+    super(states, Section.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get occupied(): boolean {
+    return this.states.occupied;
+  }
+  set occupied(occupied: boolean) {
+    this.states.occupied = occupied;
+  }
+  get axleFault(): boolean {
+    return this.states.axleFault;
+  }
+  set axleFault(axleFault: boolean) {
+    this.states.axleFault = axleFault;
+  }
+  get axleDrst(): boolean {
+    return this.states.axleDrst;
+  }
+  set axleDrst(axleDrst: boolean) {
+    this.states.axleDrst = axleDrst;
+  }
+  get axlePdrst(): boolean {
+    return this.states.axlePdrst;
+  }
+  set axlePdrst(axlePdrst: boolean) {
+    this.states.axlePdrst = axlePdrst;
+  }
+  get states(): state.SectionState {
+    return this.getState<state.SectionState>();
+  }
+  clone(): SectionStates {
+    return new SectionStates(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const addTrainConfig: MenuItemOptions = {
+  name: '添加列车',
+};
+const setSectionParam: MenuItemOptions = { name: '设置参数' };
+const setFaultOcc: MenuItemOptions = { name: '设置故障占用' };
+const SectionOperateMenu: ContextMenu = ContextMenu.init({
+  name: '区段操作菜单',
+  groups: [
+    {
+      items: [setSectionParam, setFaultOcc, addTrainConfig],
+    },
+  ],
+});
+
+export class SectionOperateInteraction extends GraphicInteractionPlugin<Section> {
+  static Name = 'section_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(SectionOperateInteraction.Name, app);
+    app.registerMenu(SectionOperateMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new SectionOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Section[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Section.Type)
+      .map((g) => g as Section);
+  }
+  bind(g: Section): void {
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new SectionGraphicHitArea(g);
+    g.lineGraphic.selectable = true;
+    g.selectable = true;
+    g.labelGraphic.eventMode = 'static';
+    g.labelGraphic.cursor = 'pointer';
+    g.labelGraphic.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+    g.on('rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: Section): void {
+    g.lineGraphic.eventMode = 'none';
+    g.lineGraphic.scalable = false;
+    g.lineGraphic.selectable = false;
+    g.selectable = false;
+    g.labelGraphic.eventMode = 'none';
+    g.labelGraphic.selectable = false;
+    g.off('_leftclick', this.onLeftClick, this);
+    g.off('rightclick', this.onContextMenu, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const section = target.getGraphic<Section>();
+    if (!section || section.datas.sectionType != SectionType.Physical) return;
+    this.app.updateSelected(section);
+    const lineStore = useLineStore();
+    setSectionParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        component: SectionOperation,
+        componentProps: {
+          id: section.id,
+          code: section.datas.code,
+          axleDrst: section.states.axleDrst,
+          axlePdrst: section.states.axlePdrst,
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    setFaultOcc.handler = async () => {
+      const obj = {
+        simulationId: lineStore?.simulationId || '',
+        mapId: lineStore.mapId as number,
+        deviceId: section.id,
+        operation: request.Section.Operation.SetFaultOcc,
+      };
+      setAxleSectionState(obj).catch((e) =>
+        errorNotify('区段操作失败：' + e.title, e)
+      );
+    };
+    addTrainConfig.disabled = !lineStore.trainConfigList;
+    addTrainConfig.handler = () => {
+      const relations =
+        section.relationManage.getRelationsOfGraphicAndOtherType(
+          section,
+          AxleCounting.Type
+        );
+      let AKm;
+      let BKm;
+      relations.forEach((item) => {
+        const rp = item.getRelationParam(section);
+        const other = item.getOtherGraphic(section) as AxleCounting;
+        if (
+          (other.datas.axleCountingRef.length > 1 &&
+            other.datas.type ==
+              graphicData.AxleCounting.TypeDetectionPoint.AxleCounting) ||
+          other.datas.axleCountingRef.length == 1
+        ) {
+          if (rp.getParam() == 'A') {
+            AKm = other.datas.kilometerSystem;
+          }
+          if (rp.getParam() == 'B') {
+            BKm = other.datas.kilometerSystem;
+          }
+        }
+      });
+      const d = getKmDistance(BKm, AKm);
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        title: '创建列车',
+        message: '',
+        component: AddTrainDialog,
+        componentProps: { dev: section, kmLength: d },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    SectionOperateMenu.open(e.global);
+  }
+}

src/drawApp/graphics/electronicMap/SignalInteraction.ts

@@ -0,0 +1,253 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  ISignalData,
+  Signal,
+  ISignalState,
+  KilometerSystem,
+} from 'src/graphics/signal/Signal';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import {
+  GraphicInteractionPlugin,
+  IGraphicScene,
+  JlGraphic,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
+import { FederatedMouseEvent, DisplayObject } from 'pixi.js';
+import { state } from 'src/protos/device_state';
+import { useLineStore } from 'src/stores/line-store';
+import { SignalGraphicHitArea } from 'src/graphics/signal/SignalDrawAssistant';
+import { request } from 'src/protos/request';
+import { Dialog } from 'quasar';
+import SignalOperation from 'src/components/draw-app/dialogs/SignalOperation.vue'
+
+export class SignalData extends GraphicDataBase implements ISignalData {
+  constructor(data?: graphicData.Signal) {
+    let signal;
+    if (!data) {
+      signal = new graphicData.Signal({
+        common: GraphicDataBase.defaultCommonInfo(Signal.Type),
+      });
+    } else {
+      signal = data;
+    }
+    super(signal);
+  }
+  public get data(): graphicData.Signal {
+    return this.getData<graphicData.Signal>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get mirror(): boolean {
+    return this.data.mirror;
+  }
+  set mirror(v: boolean) {
+    this.data.mirror = v;
+  }
+  get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
+    return this.data.kilometerSystem;
+  }
+  set kilometerSystem(v: KilometerSystem) {
+    this.data.kilometerSystem = new graphicData.KilometerSystem(v);
+  }
+  get refDev(): graphicData.RelatedRef {
+    return this.data.refDev ?? new graphicData.RelatedRef();
+  }
+  set refDev(v: graphicData.RelatedRef) {
+    this.data.refDev = v;
+  }
+  get centralizedStations(): number[] {
+    return this.data.centralizedStations;
+  }
+  set centralizedStations(v: number[]) {
+    this.data.centralizedStations = v;
+  }
+  get mt(): graphicData.Signal.Model {
+    return this.data.mt;
+  }
+  set mt(v: graphicData.Signal.Model) {
+    this.data.mt = v;
+  }
+  get direction(): graphicData.Direction {
+    return this.data.direction;
+  }
+  set direction(v: graphicData.Direction) {
+    this.data.direction = v;
+  }
+  clone(): SignalData {
+    return new SignalData(this.data.cloneMessage());
+  }
+  copyFrom(data: SignalData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SignalData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class SignalState extends GraphicStateBase implements ISignalState {
+  constructor(proto?: state.SignalState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.SignalState();
+    }
+    super(states, Signal.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get aspect(): number {
+    return this.states.aspect;
+  }
+  set aspect(v: number) {
+    this.states.aspect = v;
+  }
+  get param(): request.SignalParam {
+    return this.states.param;
+  }
+  set param(v: request.SignalParam) {
+    this.states.param = v;
+  }
+  get states(): state.SignalState {
+    return this.getState<state.SignalState>();
+  }
+  clone(): SignalState {
+    return new SignalState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const mirrorFlipConfig: MenuItemOptions = {
+  name: '镜像翻转',
+};
+const setSignalParam: MenuItemOptions = {
+  name: '设置参数'
+}
+const SignalEditMenu: ContextMenu = ContextMenu.init({
+  name: '信号机编辑菜单',
+  groups: [
+    {
+      items: [mirrorFlipConfig],
+    },
+  ],
+});
+const SignalOperateMenu: ContextMenu = ContextMenu.init({
+  name: '信号机操作菜单',
+  groups: [
+    {
+      items: [
+        setSignalParam
+        // signalRedConfig,
+        // signalGreenConfig,
+        // signalYellowConfig,
+        // signalGuideConfig,
+        // signalCloseConfig,
+      ],
+    },
+  ],
+});
+export class DrawSignalInteraction extends GraphicInteractionPlugin<Signal> {
+  static Name = 'signal_draw_right_menu';
+  constructor(app: IGraphicScene) {
+    super(DrawSignalInteraction.Name, app);
+    app.registerMenu(SignalEditMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new DrawSignalInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Signal[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Signal.Type)
+      .map((g) => g as Signal);
+  }
+  bind(g: Signal): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: Signal): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const signal = target.getGraphic() as Signal;
+    this.app.updateSelected(signal);
+    mirrorFlipConfig.handler = () => {
+      signal.mirror = !signal.mirror;
+    };
+    SignalEditMenu.open(e.global);
+  }
+}
+
+export class SignalOperateInteraction extends GraphicInteractionPlugin<Signal> {
+  static Name = 'signal_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(SignalOperateInteraction.Name, app);
+    app.registerMenu(SignalOperateMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new SignalOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Signal[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Signal.Type)
+      .map((g) => g as Signal);
+  }
+  bind(g: Signal): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.selectable = true;
+    g.lampMainBody.hitArea = new SignalGraphicHitArea(g);
+    g.on('_leftclick', this.onLeftClick, this);
+    g.on('rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: Signal): void {
+    g.selectable = false;
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+    g.off('rightclick', this.onContextMenu);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const signal = target.getGraphic() as Signal;
+    this.app.updateSelected(signal);
+    const lineStore = useLineStore();
+
+    setSignalParam.handler = () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        title: '信号机设置参数',
+        message: '',
+        component: SignalOperation,
+        componentProps: {
+          id: signal.datas.id,
+          code: signal.datas.code,
+          mt: signal.datas.mt,
+          param: signal.states.param,
+        },
+        cancel: true,
+        persistent: true,
+      });
+    }
+    SignalOperateMenu.open(e.global);
+  }
+}

src/drawApp/graphics/electronicMap/StationInteraction.ts

@@ -0,0 +1,168 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  IStationData,
+  IStationState,
+  Station,
+} from 'src/graphics/station/Station';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+import { IGraphicScene, GraphicInteractionPlugin, JlGraphic } from 'jl-graphic';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+import { useLineStore } from 'src/stores/line-store';
+
+export class StationData extends GraphicDataBase implements IStationData {
+  constructor(data?: graphicData.Station) {
+    let station;
+    if (!data) {
+      station = new graphicData.Station({
+        common: GraphicDataBase.defaultCommonInfo(Station.Type),
+      });
+    } else {
+      station = data;
+    }
+    super(station);
+  }
+
+  public get data(): graphicData.Station {
+    return this.getData<graphicData.Station>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get stationName(): string {
+    return this.data.stationName;
+  }
+  set stationName(v: string) {
+    this.data.stationName = v;
+  }
+  get stationNameAcronym(): string {
+    return this.data.stationNameAcronym;
+  }
+  set stationNameAcronym(v: string) {
+    this.data.stationNameAcronym = v;
+  }
+  get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem) {
+      this.data.kilometerSystem = new graphicData.KilometerSystem();
+    }
+    return this.data.kilometerSystem;
+  }
+  set kilometerSystem(v: KilometerSystem) {
+    this.data.kilometerSystem = new graphicData.KilometerSystem(v);
+  }
+  get concentrationStations(): boolean {
+    return this.data.concentrationStations;
+  }
+  set concentrationStations(v: boolean) {
+    this.data.concentrationStations = v;
+  }
+  get depots(): boolean {
+    return this.data.depots;
+  }
+  set depots(v: boolean) {
+    this.data.depots = v;
+  }
+  get manageStations(): number[] {
+    return this.data.manageStations;
+  }
+  set manageStations(v: number[]) {
+    this.data.manageStations = v;
+  }
+  clone(): StationData {
+    return new StationData(this.data.cloneMessage());
+  }
+  copyFrom(data: StationData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: StationData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class StationState extends GraphicStateBase implements IStationState {
+  constructor(proto?: state.StationState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.StationState();
+    }
+    super(states, Station.Type);
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  //   get ipRtuStusDown(): boolean {
+  //     return this.states.ipRtuStusDown;
+  //   }
+  //   set ipRtuStusDown(v: boolean) {
+  //     this.states.ipRtuStusDown = v;
+  //   }
+  //   get ipRtuStusInLocalCtrl(): boolean {
+  //     return this.states.ipRtuStusInLocalCtrl;
+  //   }
+  //   set ipRtuStusInLocalCtrl(v: boolean) {
+  //     this.states.ipRtuStusInLocalCtrl = v;
+  //   }
+  //   get ipRtuStusInCentralCtrl(): boolean {
+  //     return this.states.ipRtuStusInCentralCtrl;
+  //   }
+  //   set ipRtuStusInCentralCtrl(v: boolean) {
+  //     this.states.ipRtuStusInCentralCtrl = v;
+  //   }
+  //   get ipRtuStusInEmergencyCtrl(): boolean {
+  //     return this.states.ipRtuStusInEmergencyCtrl;
+  //   }
+  //   set ipRtuStusInEmergencyCtrl(v: boolean) {
+  //     this.states.ipRtuStusInEmergencyCtrl = v;
+  //   }
+  get states(): state.StationState {
+    return this.getState<state.StationState>();
+  }
+  clone(): StationState {
+    return new StationState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+export class StationOperateInteraction extends GraphicInteractionPlugin<Station> {
+  static Name = 'station_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(StationOperateInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new StationOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Station[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Station.Type)
+      .map((g) => g as Station);
+  }
+  bind(g: Station): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: Station): void {
+    g.selectable = false;
+    g.eventMode = 'none';
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+}

src/drawApp/graphics/electronicMap/TurnoutInteraction.ts

@@ -0,0 +1,378 @@
+import {
+  ITurnoutData,
+  ITurnoutState,
+  Turnout,
+  TurnoutSection,
+} from 'src/graphics/turnout/Turnout';
+import * as pb_1 from 'google-protobuf';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { DisplayObject, FederatedMouseEvent, IPointData } from 'pixi.js';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+import { state } from 'src/protos/device_state';
+import {
+  IGraphicScene,
+  GraphicInteractionPlugin,
+  JlGraphic,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
+import {
+  ForkHitArea,
+  TurnoutSectionHitArea,
+} from 'src/graphics/turnout/TurnoutDrawAssistant';
+import { useLineStore } from 'src/stores/line-store';
+import { Dialog } from 'quasar';
+// import AddTrainDialog from '../../components/draw-app/dialogs/AddTrainDialog.vue';
+// import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+import TurnoutOperation from 'src/components/draw-app/dialogs/TurnoutOperation.vue';
+// import { getKmDistance } from '../lineScene';
+import { request } from 'src/protos/request';
+
+function getDefaultEndPoint() {
+  return {
+    pointA: [new graphicData.Point([50, 0])],
+    pointB: [new graphicData.Point([-50, 0])],
+    pointC: [new graphicData.Point([-50, -50])],
+  };
+}
+
+const setTurnoutParam: MenuItemOptions = { name: '设置参数' };
+
+// const addTrainConfig: MenuItemOptions = {
+//   name: '添加列车',
+// };
+
+const TurnoutOperationMenu: ContextMenu = ContextMenu.init({
+  name: 'Turnout操作',
+  groups: [{ items: [setTurnoutParam] }],
+});
+
+export class TurnoutOperationPlugin extends GraphicInteractionPlugin<Turnout> {
+  static Name = 'turnout_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(TurnoutOperationPlugin.Name, app);
+    app.registerMenu(TurnoutOperationMenu);
+  }
+  static init(app: IGraphicScene) {
+    return new TurnoutOperationPlugin(app);
+  }
+  filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
+    return grahpics.filter<Turnout>((g): g is Turnout => g instanceof Turnout);
+  }
+  bind(g: Turnout): void {
+    g.graphics.fork.eventMode = 'static';
+    g.graphics.fork.cursor = 'pointer';
+    g.selectable = true;
+    g.graphics.fork.hitArea = new ForkHitArea(g);
+    g.graphics.sections.forEach((sectionGraphic) => {
+      sectionGraphic.eventMode = 'static';
+      sectionGraphic.cursor = 'pointer';
+      sectionGraphic.hitArea = new TurnoutSectionHitArea(sectionGraphic);
+    });
+    g.on('rightclick', this.onContextMenu, this);
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+  unbind(g: Turnout): void {
+    g.graphics.fork.eventMode = 'none';
+    g.selectable = false;
+    g.graphics.sections.forEach((sectionGraphic) => {
+      sectionGraphic.eventMode = 'none';
+    });
+    g.off('rightclick', this.onContextMenu);
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const turnout = target.getGraphic<Turnout>();
+    if (!turnout) return;
+    const lineStore = useLineStore();
+    this.app.updateSelected(turnout);
+    setTurnoutParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        title: '道岔设置参数',
+        message: '',
+        component: TurnoutOperation,
+        componentProps: {
+          id: turnout.id,
+          code: turnout.datas.code,
+          force: turnout.states.param.forcePosition,
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+
+    // const port = (target as TurnoutSection).port;
+    // addTrainConfig.disabled = !port || !lineStore.trainConfigList;
+    // addTrainConfig.handler = () => {
+    //   const relations =
+    //     turnout.relationManage.getRelationsOfGraphicAndOtherType(
+    //       turnout,
+    //       AxleCounting.Type
+    //     );
+    //   const findAc = relations.find((item) => {
+    //     const rp = item.getRelationParam(turnout);
+    //     const orp = item.getOtherRelationParam(turnout as Turnout);
+    //     const ac = orp.g as AxleCounting;
+    //     return (
+    //       rp.getParam() == port &&
+    //       ((ac.datas.axleCountingRef.length > 1 &&
+    //         ac.datas.type ==
+    //         graphicData.AxleCounting.TypeDetectionPoint.AxleCounting) ||
+    //         ac.datas.axleCountingRef.length == 1)
+    //     );
+    //   });
+    //   const oKm = turnout.datas.kilometerSystem;
+    //   let pKm;
+    //   if (findAc) {
+    //     const other = findAc.getOtherGraphic(turnout) as AxleCounting;
+    //     pKm = other.datas.kilometerSystem;
+    //   } else {
+    //     const relations =
+    //       turnout.relationManage.getRelationsOfGraphicAndOtherType(
+    //         turnout,
+    //         Turnout.Type
+    //       );
+    //     const findT = relations.find((item) => {
+    //       const rp = item.getRelationParam(turnout);
+    //       return rp.getParam() == port;
+    //     });
+    //     if (findT) {
+    //       const other = findT.getOtherGraphic(turnout) as Turnout;
+    //       pKm = other.datas.kilometerSystem;
+    //     }
+    //   }
+    //   const d = getKmDistance(pKm, oKm);
+    //   if (lineStore.deviceOpreratDialogInstance) return;
+    //   lineStore.deviceOpreratDialogInstance = Dialog.create({
+    //     title: '创建列车',
+    //     message: '',
+    //     component: AddTrainDialog,
+    //     componentProps: { dev: turnout, kmLength: d },
+    //     cancel: true,
+    //     persistent: true,
+    //   });
+    // };
+    TurnoutOperationMenu.open(e.global);
+  }
+}
+
+export class TurnoutData extends GraphicDataBase implements ITurnoutData {
+  constructor(data?: graphicData.Turnout) {
+    let turnout = new graphicData.Turnout();
+    if (!data) {
+      turnout.common = GraphicDataBase.defaultCommonInfo(Turnout.Type);
+      const p = getDefaultEndPoint();
+      turnout.pointA = p.pointA;
+      turnout.pointB = p.pointB;
+      turnout.pointC = p.pointC;
+    } else {
+      turnout = data;
+    }
+    super(turnout);
+  }
+  get data(): graphicData.Turnout {
+    return this.getData<graphicData.Turnout>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get pointA(): IPointData[] {
+    return this.data.pointA;
+  }
+  set pointA(v: IPointData[]) {
+    this.data.pointA = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
+  }
+  get pointB(): IPointData[] {
+    return this.data.pointB;
+  }
+  set pointB(v: IPointData[]) {
+    this.data.pointB = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
+  }
+  get pointC(): IPointData[] {
+    return this.data.pointC;
+  }
+  set pointC(v: IPointData[]) {
+    this.data.pointC = v.map((p) => new graphicData.Point({ x: p.x, y: p.y }));
+  }
+  get paRef(): graphicData.RelatedRef {
+    return this.data.paRef;
+  }
+  set paRef(ref: graphicData.RelatedRef) {
+    this.data.paRef = ref;
+  }
+  get pbRef(): graphicData.RelatedRef {
+    return this.data.pbRef;
+  }
+  set pbRef(ref: graphicData.RelatedRef) {
+    this.data.pbRef = ref;
+  }
+  get pcRef(): graphicData.RelatedRef {
+    return this.data.pcRef;
+  }
+  set pcRef(ref: graphicData.RelatedRef) {
+    this.data.pcRef = ref;
+  }
+  get kilometerSystem(): KilometerSystem {
+    if (!this.data.kilometerSystem[0]) {
+      this.data.kilometerSystem = [new graphicData.KilometerSystem()];
+    }
+    return this.data.kilometerSystem[0];
+  }
+  set kilometerSystem(v: KilometerSystem) {
+    this.data.kilometerSystem = [new graphicData.KilometerSystem(v)];
+  }
+  get paTrackSectionId(): number {
+    return this.data.paTrackSectionId;
+  }
+  set paTrackSectionId(v: number) {
+    this.data.paTrackSectionId = v;
+  }
+  get pbTrackSectionId(): number {
+    return this.data.pbTrackSectionId;
+  }
+  set pbTrackSectionId(v: number) {
+    this.data.pbTrackSectionId = v;
+  }
+  get pcTrackSectionId(): number {
+    return this.data.pcTrackSectionId;
+  }
+  set pcTrackSectionId(v: number) {
+    this.data.pcTrackSectionId = v;
+  }
+  get switchMachineType(): graphicData.Turnout.SwitchMachineType {
+    return this.data.switchMachineType;
+  }
+  set switchMachineType(v: graphicData.Turnout.SwitchMachineType) {
+    this.data.switchMachineType = v;
+  }
+  get centralizedStations(): number[] {
+    return this.data.centralizedStations;
+  }
+  set centralizedStations(v: number[]) {
+    this.data.centralizedStations = v;
+  }
+  clone(): TurnoutData {
+    return new TurnoutData(this.data.cloneMessage());
+  }
+  copyFrom(data: TurnoutData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TurnoutData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class TurnoutStates extends GraphicStateBase implements ITurnoutState {
+  constructor(proto?: state.SwitchState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.SwitchState();
+    }
+    super(states, Turnout.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get normal(): boolean {
+    return this.states.normal;
+  }
+  set normal(normal: boolean) {
+    this.states.normal = normal;
+  }
+  get reverse(): boolean {
+    return this.states.reverse;
+  }
+  set reverse(reverse: boolean) {
+    this.states.reverse = reverse;
+  }
+  get dw(): boolean {
+    return this.states.dw;
+  }
+  set dw(dw: boolean) {
+    this.states.dw = dw;
+  }
+  get fw(): boolean {
+    return this.states.fw;
+  }
+  set fw(v: boolean) {
+    this.states.fw = v;
+  }
+  get param(): request.PointsParam {
+    return this.states.param;
+  }
+  set param(param: request.PointsParam) {
+    this.states.param = param;
+  }
+  get qdc(): boolean {
+    return this.states.qdc;
+  }
+  set qdc(v: boolean) {
+    this.states.qdc = v;
+  }
+  get qfc(): boolean {
+    return this.states.qfc;
+  }
+  set qfc(v: boolean) {
+    this.states.qfc = v;
+  }
+  get qyc(): boolean {
+    return this.states.qyc;
+  }
+  set qyc(v: boolean) {
+    this.states.qyc = v;
+  }
+  get dc(): boolean {
+    return this.states.dc;
+  }
+  set dc(v: boolean) {
+    this.states.dc = v;
+  }
+  get fc(): boolean {
+    return this.states.fc;
+  }
+  set fc(v: boolean) {
+    this.states.fc = v;
+  }
+  get yc(): boolean {
+    return this.states.yc;
+  }
+  set yc(v: boolean) {
+    this.states.yc = v;
+  }
+  get occupied(): boolean {
+    return this.states.occupied;
+  }
+  set occupied(v: boolean) {
+    this.states.occupied = v;
+  }
+  get states(): state.SwitchState {
+    return this.getState<state.SwitchState>();
+  }
+  clone(): TurnoutStates {
+    return new TurnoutStates(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}

src/drawApp/iscsApp.ts

@@ -5,21 +5,172 @@ import {
   JlGraphic,
   KeyListener,
   newDrawApp,
+  ClientEngine,
+  GraphicIdGenerator,
 } from 'jl-graphic';
 
 import {
+  handlerCommonTypeData,
   initCommonDrawApp,
   loadCommonDrawDatas,
   saveCommonDrawDatas,
   saveDrawToServer,
+  handlerNoEditCommonData,
 } from './commonApp';
-import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
-import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
 import { fromUint8Array, toUint8Array } from 'js-base64';
+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 { FasAlarm, FasAlarmTemplate } from 'src/graphics/FAS/fasAlarm/FasAlarm';
+import { FasAlarmData } from './graphics/FAS/FasAlarmInteraction';
+import { FasAlarmDraw } from 'src/graphics/FAS/fasAlarm/FasAlarmAssistant';
+import {
+  ManualAlarmButton,
+  ManualAlarmButtonTemplate,
+} from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButton';
+import { ManualAlarmButtonData } from './graphics/FAS/ManualAlarmButtonInteraction';
+import { ManualAlarmButtonDraw } from 'src/graphics/FAS/manualAlarmButton/ManualAlarmButtonAssistant';
+import {
+  SmokeDetector,
+  SmokeDetectorTemplate,
+} 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 { EscalatorDraw } from 'src/graphics/BAS/escalator/EscalatorDrawAssistant';
+import {
+  Escalator,
+  EscalatorTemplate,
+} from 'src/graphics/BAS/escalator/Escalator';
+import { EscalatorData } from './graphics/BAS/EscalatorInteraction';
+import {
+  VerticalElevator,
+  VerticalElevatorTemplate,
+} from 'src/graphics/BAS/verticalElevator/VerticalElevator';
+import { VerticalElevatorData } from './graphics/BAS/VerticalElevatorInteraction';
+import { VerticalElevatorDraw } from 'src/graphics/BAS/verticalElevator/VerticalElevatorDrawAssistant';
+import { FirePump, FirePumpTemplate } from 'src/graphics/FAS/firePump/FirePump';
+import { FirePumpDraw } from 'src/graphics/FAS/firePump/FirePumpAssistant';
+import { FirePumpData } from './graphics/FAS/FirePumpInteraction';
+import { SprayPumpDraw } from 'src/graphics/FAS/sprayPump/SprayPumpAssistant';
+import {
+  SprayPump,
+  SprayPumpTemplate,
+} from 'src/graphics/FAS/sprayPump/SprayPump';
+import { SprayPumpData } from './graphics/FAS/SprayPumpInteraction';
+import { StabilizedPressurePumpData } from './graphics/FAS/StabilizedPressurePumpInteraction';
+import { StabilizedPressurePumpDraw } from 'src/graphics/FAS/stabilizedPressurePump/StabilizedPressurePumpAssistant';
+import {
+  StabilizedPressurePump,
+  StabilizedPressurePumpTemplate,
+} from 'src/graphics/FAS/stabilizedPressurePump/StabilizedPressurePump';
+import { AcsDraw } from 'src/graphics/FAS/acs/AcsAssistant';
+import { Acs, AcsTemplate } from 'src/graphics/FAS/acs/Acs';
+import { AcsData } from './graphics/FAS/AcsInteraction';
+import { AfcDraw } from 'src/graphics/FAS/afc/AfcAssistant';
+import { Afc, AfcTemplate } from 'src/graphics/FAS/afc/Afc';
+import { AfcData } from './graphics/FAS/AfcInteraction';
+import { NonFirePowerSupplyDraw } from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupplyAssistant';
+import {
+  NonFirePowerSupply,
+  NonFirePowerSupplyTemplate,
+} from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply';
+import { NonFirePowerSupplyData } from './graphics/FAS/NonFirePowerSupplyInteraction';
+import { WaterFlowIndicatorDraw } from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicatorAssistant';
+import {
+  WaterFlowIndicator,
+  WaterFlowIndicatorTemplate,
+} from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator';
+import { WaterFlowIndicatorData } from './graphics/FAS/WaterFlowIndicatorInteraction';
+import { SignalButterflyValveDraw } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValveAssistant';
+import {
+  SignalButterflyValve,
+  SignalButterflyValveTemplate,
+} from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve';
+import { SignalButterflyValveData } from './graphics/FAS/SignalButterflyValveInteraction';
+import { PressureSwitchDraw } from 'src/graphics/FAS/pressureSwitch/PressureSwitchAssistant';
+import {
+  PressureSwitch,
+  PressureSwitchTemplate,
+} from 'src/graphics/FAS/pressureSwitch/PressureSwitch';
+import { PressureSwitchData } from './graphics/FAS/PressureSwitchInteraction';
+import { FaultValveDraw } from 'src/graphics/FAS/faultValve/FaultValveAssistant';
+import {
+  FaultValve,
+  FaultValveTemplate,
+} from 'src/graphics/FAS/faultValve/FaultValve';
+import { FaultValveData } from './graphics/FAS/FaultValveInteraction';
+import { StartPumpButtonDraw } from 'src/graphics/FAS/startPumpButton/StartPumpButtonAssistant';
+import {
+  StartPumpButton,
+  StartPumpButtonTemplate,
+} from 'src/graphics/FAS/startPumpButton/StartPumpButton';
+import { StartPumpButtonData } from './graphics/FAS/StartPumpButtonInteraction';
+import { TemperatureCableDraw } from 'src/graphics/FAS/temperatureCable/TemperatureCableAssistant';
+import {
+  TemperatureCable,
+  TemperatureCableTemplate,
+} from 'src/graphics/FAS/temperatureCable/TemperatureCable';
+import { TemperatureCableData } from './graphics/FAS/TemperatureCableInteraction';
+import { EmergencyLightingDraw } from 'src/graphics/FAS/emergencyLighting/EmergencyLightingAssistant';
+import {
+  EmergencyLighting,
+  EmergencyLightingTemplate,
+} from 'src/graphics/FAS/emergencyLighting/EmergencyLighting';
+import { EmergencyLightingData } from './graphics/FAS/EmergencyLightingInteraction';
+import { ElevatorLiftToTopDraw } from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTopAssistant';
+import {
+  ElevatorLiftToTop,
+  ElevatorLiftToTopTemplate,
+} from 'src/graphics/FAS/elevatorLiftToTop/ElevatorLiftToTop';
+import { ElevatorLiftToTopData } from './graphics/FAS/ElevatorLiftToTopInteraction';
+import { ElectricButterflyValveDraw } from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValveAssistant';
+import {
+  ElectricButterflyValve,
+  ElectricButterflyValveTemplate,
+} from 'src/graphics/FAS/electricButterflyValve/ElectricButterflyValve';
+import { ElectricButterflyValveData } from './graphics/FAS/ElectricButterflyValveInteraction';
+import { FireValveDraw } from 'src/graphics/FAS/fireValve/FireValveAssistant';
+import {
+  FireValve,
+  FireValveTemplate,
+} from 'src/graphics/FAS/fireValve/FireValve';
+import { FireValveData } from './graphics/FAS/FireValveInteraction';
+import { ElectricFireExtinguishingValveData } from './graphics/FAS/ElectricFireExtinguishingValveInteraction';
+import { ElectricFireExtinguishingValveDraw } from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValveAssistant';
+import {
+  ElectricFireExtinguishingValve,
+  ElectricFireExtinguishingValveTemplate,
+} from 'src/graphics/FAS/electricFireExtinguishingValve/ElectricFireExtinguishingValve';
+import { FireIntercommunicationSignalData } from './graphics/FAS/FireIntercommunicationSignalInteraction';
+import { FireIntercommunicationSignalDraw } from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignalAssistant';
+import {
+  FireIntercommunicationSignal,
+  FireIntercommunicationSignalTemplate,
+} from 'src/graphics/FAS/fireIntercommunicationSignal/FireIntercommunicationSignal';
+// import { getOnlyToken } from 'src/configs/TokenManage';
+import { getJwtToken } from 'src/configs/TokenManage';
 
 let drawApp: IDrawApp | null = null;
 
@@ -43,9 +194,95 @@ export function initIscsDrawApp(): IDrawApp {
     dataLoader: loadDrawDatas,
     isSupportDeletion: isSupportDeletion,
   });
+  drawApp.enableWsMassaging({
+    engine: ClientEngine.MQTT,
+    wsUrl: `${getWebsocketUrl()}`,
+    token: getJwtToken() as string,
+  });
+
   const app = drawApp;
   initCommonDrawApp(app);
-  new CCTVButtonDraw(app, new CCTVButtonTemplate(new CCTVButtonData()));
+  new EscalatorDraw(app, new EscalatorTemplate(new EscalatorData()));
+  new VerticalElevatorDraw(
+    app,
+    new VerticalElevatorTemplate(new VerticalElevatorData())
+  );
+  new FasFailureControlHostDraw(
+    app,
+    new FasFailureControlHostTemplate(new FasFailureControlHostData())
+  );
+  new FasAlarmDraw(app, new FasAlarmTemplate(new FasAlarmData()));
+  new ManualAlarmButtonDraw(
+    app,
+    new ManualAlarmButtonTemplate(new ManualAlarmButtonData())
+  );
+  new SmokeDetectorDraw(
+    app,
+    new SmokeDetectorTemplate(new SmokeDetectorData())
+  );
+  new TemperatureDetectorDraw(
+    app,
+    new TemperatureDetectorTemplate(new TemperatureDetectorData())
+  );
+  new FireShutterDraw(app, new FireShutterTemplate(new FireShutterData()));
+  new FirePumpDraw(app, new FirePumpTemplate(new FirePumpData()));
+  new SprayPumpDraw(app, new SprayPumpTemplate(new SprayPumpData()));
+  new StabilizedPressurePumpDraw(
+    app,
+    new StabilizedPressurePumpTemplate(new StabilizedPressurePumpData())
+  );
+  new AcsDraw(app, new AcsTemplate(new AcsData()));
+  new AfcDraw(app, new AfcTemplate(new AfcData()));
+  new NonFirePowerSupplyDraw(
+    app,
+    new NonFirePowerSupplyTemplate(new NonFirePowerSupplyData())
+  );
+  new WaterFlowIndicatorDraw(
+    app,
+    new WaterFlowIndicatorTemplate(new WaterFlowIndicatorData())
+  );
+  new SignalButterflyValveDraw(
+    app,
+    new SignalButterflyValveTemplate(new SignalButterflyValveData())
+  );
+  new PressureSwitchDraw(
+    app,
+    new PressureSwitchTemplate(new PressureSwitchData())
+  );
+  new FaultValveDraw(app, new FaultValveTemplate(new FaultValveData()));
+  new StartPumpButtonDraw(
+    app,
+    new StartPumpButtonTemplate(new StartPumpButtonData())
+  );
+  new TemperatureCableDraw(
+    app,
+    new TemperatureCableTemplate(new TemperatureCableData())
+  );
+  new EmergencyLightingDraw(
+    app,
+    new EmergencyLightingTemplate(new EmergencyLightingData())
+  );
+  new ElevatorLiftToTopDraw(
+    app,
+    new ElevatorLiftToTopTemplate(new ElevatorLiftToTopData())
+  );
+  new ElectricButterflyValveDraw(
+    app,
+    new ElectricButterflyValveTemplate(new ElectricButterflyValveData())
+  );
+  new FireValveDraw(app, new FireValveTemplate(new FireValveData()));
+  new ElectricFireExtinguishingValveDraw(
+    app,
+    new ElectricFireExtinguishingValveTemplate(
+      new ElectricFireExtinguishingValveData()
+    )
+  );
+  new FireIntercommunicationSignalDraw(
+    app,
+    new FireIntercommunicationSignalTemplate(
+      new FireIntercommunicationSignalData()
+    )
+  );
 
   app.addKeyboardListener(
     new KeyListener({
@@ -57,26 +294,310 @@ export function initIscsDrawApp(): IDrawApp {
       },
     })
   );
+  app.on('loadfinish', () => {
+    handleSubscribe(app);
+  });
+  app.on('destroy', async () => {
+    resetData();
+  });
   return drawApp;
 }
 
+function handleSubscribe(app: IDrawApp) {
+  const drawStore = useDrawStore();
+
+  app.subscribe({
+    destination: `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    messageHandle: (message: Uint8Array) => {
+      const syncData = sync_data_message.SyncData.deserialize(message);
+      console.log(syncData.userId, useAuthStore().userId, 'userID', syncData);
+      if (syncData.userId === useAuthStore().userId) {
+        console.info('当前用户操作');
+        return;
+      }
+      if (
+        syncData.submenu === drawStore.selectSubmenuAndStation.submenu &&
+        syncData.station === drawStore.selectSubmenuAndStation.station
+      ) {
+        if (syncData.operationType === 'graphic-create') {
+          syncData.datas.forEach((data) => {
+            const proto = handlerTypeData(data);
+            const template = app.getGraphicTemplatesByType(proto.graphicType);
+            const g = template.new();
+            if (app.queryStore.checkIdExist(proto.id)) {
+              const newId = GraphicIdGenerator.next();
+              proto.id = newId;
+            }
+            g.loadData(proto);
+            app.addGraphics(g);
+          });
+        } else if (syncData.operationType === 'graphic-drag') {
+          syncData.datas.forEach((data) => {
+            const g = app.queryStore.queryById(data.id);
+            const proto = handlerTypeData(data);
+            g.updateData(proto);
+          });
+        } else if (syncData.operationType === 'graphic-delete') {
+          const graphics: JlGraphic[] = [];
+          syncData.datas.forEach((data) => {
+            const g = app.queryStore.queryById(data.id);
+            graphics.push(g);
+          });
+          app.deleteGraphics(...graphics);
+        } else if (syncData.operationType === 'update-canvas') {
+          // console.log(common.Canvas.deserialize(syncData.datas[0].data));
+          // common.Canvas.deserialize(syncData.datas[0].data);
+          // app.updateCanvasAndRecord()
+          app.canvas.update(common.Canvas.deserialize(syncData.datas[0].data));
+        }
+      } else {
+        if (syncData.submenu === '火灾报警平面图') {
+          for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
+            const fasPlatformAlarm = storage.fasOfPlatformAlarmStorages[i];
+            if (fasPlatformAlarm.stationName == syncData.station) {
+              syncData.datas.forEach((data) => {
+                handlerNoEditCommonData(
+                  data,
+                  fasPlatformAlarm,
+                  syncData.operationType
+                );
+              });
+              storage.fasOfPlatformAlarmStorages[i] = fasPlatformAlarm;
+              console.log(fasPlatformAlarm, 'fasPlatformAlarm');
+            }
+          }
+        } else if (syncData.submenu === 'CCTV设备布局图') {
+          for (
+            let i = 0;
+            i < storage.cctvOfEquipmentLayoutStorages.length;
+            i++
+          ) {
+            const cctvOfEquipmentLayout =
+              storage.cctvOfEquipmentLayoutStorages[i];
+            if (cctvOfEquipmentLayout.stationName == syncData.station) {
+              syncData.datas.forEach((data) => {
+                handlerNoEditCommonData(
+                  data,
+                  cctvOfEquipmentLayout,
+                  syncData.operationType
+                );
+              });
+            }
+          }
+        }
+      }
+    },
+    graphicQueryer: (state, store) => {
+      return store.queryById(+state.code);
+    },
+  });
+}
+
+function handlerTypeData(data: sync_data_message.UpdataData) {
+  const proto = handlerCommonTypeData(data);
+  if (proto) {
+    return proto;
+  } else {
+    throw new Error('获取数据异常：无法匹配到数据类型');
+  }
+  // switch (data.type) {
+  //   case Rect.Type:
+  //     return new RectData(iscsGraphicData.Rect.deserialize(data.data));
+  // }
+}
+
+export function handlerPublish(message: string) {
+  console.log(message);
+}
+
+let hasLoadData = false;
+let base64 = '';
 export async function loadDrawDatas(): Promise<IGraphicStorage> {
   const drawStore = useDrawStore();
   const id = drawStore.draftId;
   if (!id) {
     throw new Error('获取数据异常：为获取到草稿地图ID');
   }
-  const { data: base64 } = await getDraft(id);
-  if (base64) {
-    const storage = iscsGraphicData.IscsGraphicStorage.deserialize(
-      toUint8Array(base64)
-    );
-    const datas = loadCommonDrawDatas(storage);
-    storage.cctvButtons.forEach((cctvButton) => {
-      datas.push(new CCTVButtonData(cctvButton));
-    });
+
+  if (!hasLoadData) {
+    base64 = (await getDraft(id)).data;
+    if (base64) {
+      storage = iscsGraphicData.IscsGraphicStorage.deserialize(
+        toUint8Array(base64)
+      );
+    }
+    hasLoadData = true;
+  }
+  if (hasLoadData) {
+    let datas = [];
+    let canvasProperty;
+    console.log(storage);
+    switch (drawStore.selectSubmenuAndStation.submenu) {
+      case '火灾报警平面图':
+        for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
+          const fasOfPlatformAlarm = storage.fasOfPlatformAlarmStorages[i];
+          if (
+            fasOfPlatformAlarm.stationName ==
+            drawStore.selectSubmenuAndStation.station
+          ) {
+            canvasProperty = fasOfPlatformAlarm.canvas;
+            datas = loadCommonDrawDatas(fasOfPlatformAlarm);
+            fasOfPlatformAlarm.fasFailureControlHosts.forEach(
+              (fasFailureControlHost) => {
+                datas.push(
+                  new FasFailureControlHostData(fasFailureControlHost)
+                );
+              }
+            );
+            fasOfPlatformAlarm.fasAlarms.forEach((fasAlarm) => {
+              datas.push(new FasAlarmData(fasAlarm));
+            });
+            fasOfPlatformAlarm.manualAlarmButtons.forEach(
+              (manualAlarmButton) => {
+                datas.push(new ManualAlarmButtonData(manualAlarmButton));
+              }
+            );
+            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));
+            });
+            fasOfPlatformAlarm.firePumps.forEach((firePump) => {
+              datas.push(new FirePumpData(firePump));
+            });
+            fasOfPlatformAlarm.sprayPumps.forEach((sprayPump) => {
+              datas.push(new SprayPumpData(sprayPump));
+            });
+            fasOfPlatformAlarm.stabilizedPressurePumps.forEach(
+              (stabilizedPressurePump) => {
+                datas.push(
+                  new StabilizedPressurePumpData(stabilizedPressurePump)
+                );
+              }
+            );
+            fasOfPlatformAlarm.acs.forEach((acs) => {
+              datas.push(new AcsData(acs));
+            });
+            fasOfPlatformAlarm.afc.forEach((afc) => {
+              datas.push(new AfcData(afc));
+            });
+            fasOfPlatformAlarm.nonFirePowerSupplies.forEach(
+              (nonFirePowerSupply) => {
+                datas.push(new NonFirePowerSupplyData(nonFirePowerSupply));
+              }
+            );
+            fasOfPlatformAlarm.waterFlowIndicators.forEach(
+              (waterFlowIndicator) => {
+                datas.push(new WaterFlowIndicatorData(waterFlowIndicator));
+              }
+            );
+            fasOfPlatformAlarm.signalButterflyValves.forEach(
+              (signalButterflyValve) => {
+                datas.push(new SignalButterflyValveData(signalButterflyValve));
+              }
+            );
+            fasOfPlatformAlarm.pressureSwitches.forEach((pressureSwitch) => {
+              datas.push(new PressureSwitchData(pressureSwitch));
+            });
+            fasOfPlatformAlarm.faultValves.forEach((faultValve) => {
+              datas.push(new FaultValveData(faultValve));
+            });
+            fasOfPlatformAlarm.startPumpButtons.forEach((startPumpButton) => {
+              datas.push(new StartPumpButtonData(startPumpButton));
+            });
+            fasOfPlatformAlarm.temperatureCables.forEach((temperatureCable) => {
+              datas.push(new TemperatureCableData(temperatureCable));
+            });
+            fasOfPlatformAlarm.emergencyLightings.forEach(
+              (emergencyLighting) => {
+                datas.push(new EmergencyLightingData(emergencyLighting));
+              }
+            );
+            fasOfPlatformAlarm.elevatorLiftToTops.forEach(
+              (elevatorLiftToTop) => {
+                datas.push(new ElevatorLiftToTopData(elevatorLiftToTop));
+              }
+            );
+            fasOfPlatformAlarm.electricButterflyValves.forEach(
+              (electricButterflyValve) => {
+                datas.push(
+                  new ElectricButterflyValveData(electricButterflyValve)
+                );
+              }
+            );
+            fasOfPlatformAlarm.fireValves.forEach((fireValve) => {
+              datas.push(new FireValveData(fireValve));
+            });
+            fasOfPlatformAlarm.electricFireExtinguishingValves.forEach(
+              (electricFireExtinguishingValve) => {
+                datas.push(
+                  new ElectricFireExtinguishingValveData(
+                    electricFireExtinguishingValve
+                  )
+                );
+              }
+            );
+            fasOfPlatformAlarm.fireIntercommunicationSignals.forEach(
+              (fireIntercommunicationSignal) => {
+                datas.push(
+                  new FireIntercommunicationSignalData(
+                    fireIntercommunicationSignal
+                  )
+                );
+              }
+            );
+            break;
+          }
+        }
+        break;
+      case 'CCTV设备布局图':
+        for (let i = 0; i < storage.cctvOfEquipmentLayoutStorages.length; i++) {
+          const cctvOfEquipmentLayout =
+            storage.cctvOfEquipmentLayoutStorages[i];
+          if (
+            cctvOfEquipmentLayout.stationName ==
+            drawStore.selectSubmenuAndStation.station
+          ) {
+            canvasProperty = cctvOfEquipmentLayout.canvas;
+            datas = loadCommonDrawDatas(cctvOfEquipmentLayout);
+            /*  ctvOfStationControl.cctvButtons.forEach((cctvButton) => {
+              datas.push(new CCTVButtonData(cctvButton));
+            }); */
+            break;
+          }
+        }
+        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));
+            });
+            basOfEscalator.verticalElevators.forEach((verticalElevator) => {
+              datas.push(new VerticalElevatorData(verticalElevator));
+            });
+            break;
+          }
+        }
+        break;
+      default:
+        break;
+    }
+
     return {
-      canvasProperty: storage.canvas,
+      canvasProperty,
       datas: datas,
     };
   } else {
@@ -86,19 +607,261 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
   }
 }
 
+const stationOption = ['会展中心', '火车站', '丈八一路'];
+
+let storage: iscsGraphicData.IscsGraphicStorage;
 export function saveDrawDatas(app: IDrawApp) {
-  let storage = new iscsGraphicData.IscsGraphicStorage();
-  storage = saveCommonDrawDatas(
-    app,
-    storage
-  ) as iscsGraphicData.IscsGraphicStorage;
+  const drawStore = useDrawStore();
+  if (!storage) {
+    storage = new iscsGraphicData.IscsGraphicStorage();
+  }
+  if (!storage?.fasOfPlatformAlarmStorages.length) {
+    stationOption.forEach((station) =>
+      storage?.fasOfPlatformAlarmStorages.push(
+        new iscsGraphicData.FASOfPlatformAlarmStorage({
+          stationName: station,
+          commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+          partition: '设备分区一',
+        })
+      )
+    );
+  }
+  if (!storage?.cctvOfEquipmentLayoutStorages.length) {
+    stationOption.forEach((station) => {
+      for (let layer = 0; layer < 3; layer++) {
+        storage?.cctvOfEquipmentLayoutStorages.push(
+          new iscsGraphicData.CCTVOfEquipmentLayoutStorage({
+            stationName: station,
+            commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+            layer,
+          })
+        );
+      }
+    });
+  }
+  if (!storage?.basOfEscalatorStorages.length) {
+    stationOption.forEach((station) =>
+      storage?.basOfEscalatorStorages.push(
+        new iscsGraphicData.BASOfEscalatorStorage({
+          stationName: station,
+          commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+        })
+      )
+    );
+  }
   const graphics = app.queryStore.getAllGraphics();
-  /*  graphics.forEach((g) => {
-    if (TrackSection.Type === g.type) {
-      const trackSectionData = (g as TrackSection).saveData();
-      storage.trackSections.push((trackSectionData as TrackSectionData).data);
-    } }) */
+  switch (drawStore.selectSubmenuAndStation.submenu) {
+    case '火灾报警平面图':
+      for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
+        let fasOfPlatformAlarm = storage.fasOfPlatformAlarmStorages[i];
+        if (
+          fasOfPlatformAlarm.stationName ==
+          drawStore.selectSubmenuAndStation.station
+        ) {
+          fasOfPlatformAlarm = new iscsGraphicData.FASOfPlatformAlarmStorage({
+            stationName: drawStore.selectSubmenuAndStation.station,
+            commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+            partition: drawStore.selectSubmenuAndStation.partition,
+          });
+          const fasStorage = saveCommonDrawDatas(
+            app,
+            fasOfPlatformAlarm
+          ) as iscsGraphicData.FASOfPlatformAlarmStorage;
+          graphics.forEach((g) => {
+            if (g instanceof FasFailureControlHost) {
+              const fasFailureControlHostData = g.saveData();
+              fasStorage.fasFailureControlHosts.push(
+                (fasFailureControlHostData as FasFailureControlHostData).data
+              );
+            } else if (g instanceof FasAlarm) {
+              const fasAlarmData = g.saveData();
+              fasStorage.fasAlarms.push((fasAlarmData as FasAlarmData).data);
+            } else if (g instanceof ManualAlarmButton) {
+              const manualAlarmButtonData = g.saveData();
+              fasStorage.manualAlarmButtons.push(
+                (manualAlarmButtonData as ManualAlarmButtonData).data
+              );
+            } else if (g instanceof SmokeDetector) {
+              const smokeDetectorData = g.saveData();
+              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
+              );
+            } else if (g instanceof FirePump) {
+              const firePumpData = g.saveData();
+              fasStorage.firePumps.push((firePumpData as FirePumpData).data);
+            } else if (g instanceof SprayPump) {
+              const sprayPumpData = g.saveData();
+              fasStorage.sprayPumps.push((sprayPumpData as SprayPumpData).data);
+            } else if (g instanceof StabilizedPressurePump) {
+              const stabilizedPressurePumpData = g.saveData();
+              fasStorage.stabilizedPressurePumps.push(
+                (stabilizedPressurePumpData as StabilizedPressurePumpData).data
+              );
+            } else if (g instanceof Acs) {
+              const acsData = g.saveData();
+              fasStorage.acs.push((acsData as AcsData).data);
+            } else if (g instanceof Afc) {
+              const afcData = g.saveData();
+              fasStorage.afc.push((afcData as AfcData).data);
+            } else if (g instanceof NonFirePowerSupply) {
+              const nonFirePowerSupplyData = g.saveData();
+              fasStorage.nonFirePowerSupplies.push(
+                (nonFirePowerSupplyData as NonFirePowerSupplyData).data
+              );
+            } else if (g instanceof WaterFlowIndicator) {
+              const waterFlowIndicatorData = g.saveData();
+              fasStorage.waterFlowIndicators.push(
+                (waterFlowIndicatorData as WaterFlowIndicatorData).data
+              );
+            } else if (g instanceof SignalButterflyValve) {
+              const signalButterflyValveData = g.saveData();
+              fasStorage.signalButterflyValves.push(
+                (signalButterflyValveData as SignalButterflyValveData).data
+              );
+            } else if (g instanceof PressureSwitch) {
+              const pressureSwitchData = g.saveData();
+              fasStorage.pressureSwitches.push(
+                (pressureSwitchData as PressureSwitchData).data
+              );
+            } else if (g instanceof FaultValve) {
+              const faultValveData = g.saveData();
+              fasStorage.faultValves.push(
+                (faultValveData as FaultValveData).data
+              );
+            } else if (g instanceof StartPumpButton) {
+              const startPumpButtonData = g.saveData();
+              fasStorage.startPumpButtons.push(
+                (startPumpButtonData as StartPumpButtonData).data
+              );
+            } else if (g instanceof TemperatureCable) {
+              const temperatureCableData = g.saveData();
+              fasStorage.temperatureCables.push(
+                (temperatureCableData as TemperatureCableData).data
+              );
+            } else if (g instanceof EmergencyLighting) {
+              const emergencyLightingData = g.saveData();
+              fasStorage.emergencyLightings.push(
+                (emergencyLightingData as EmergencyLightingData).data
+              );
+            } else if (g instanceof ElevatorLiftToTop) {
+              const elevatorLiftToTopData = g.saveData();
+              fasStorage.elevatorLiftToTops.push(
+                (elevatorLiftToTopData as ElevatorLiftToTopData).data
+              );
+            } else if (g instanceof ElectricButterflyValve) {
+              const electricButterflyValveData = g.saveData();
+              fasStorage.electricButterflyValves.push(
+                (electricButterflyValveData as ElectricButterflyValveData).data
+              );
+            } else if (g instanceof FireValve) {
+              const fireValveData = g.saveData();
+              fasStorage.fireValves.push((fireValveData as FireValveData).data);
+            } else if (g instanceof ElectricFireExtinguishingValve) {
+              const electricFireExtinguishingValveData = g.saveData();
+              fasStorage.electricFireExtinguishingValves.push(
+                (
+                  electricFireExtinguishingValveData as ElectricFireExtinguishingValveData
+                ).data
+              );
+            } else if (g instanceof FireIntercommunicationSignal) {
+              const fireIntercommunicationSignalData = g.saveData();
+              fasStorage.fireIntercommunicationSignals.push(
+                (
+                  fireIntercommunicationSignalData as FireIntercommunicationSignalData
+                ).data
+              );
+            }
+          });
+          storage.fasOfPlatformAlarmStorages[i] = fasStorage;
+          break;
+        }
+      }
+      break;
+    case 'CCTV设备布局图':
+      for (let i = 0; i < storage.cctvOfEquipmentLayoutStorages.length; i++) {
+        let cctvOfEquipmentLayout = storage.cctvOfEquipmentLayoutStorages[i];
+        if (
+          cctvOfEquipmentLayout.stationName ==
+          drawStore.selectSubmenuAndStation.station
+        ) {
+          cctvOfEquipmentLayout =
+            new iscsGraphicData.CCTVOfEquipmentLayoutStorage({
+              stationName: drawStore.selectSubmenuAndStation.station,
+              commonGraphicStorage: new iscsGraphicData.CommonGraphicStorage(),
+            });
+          const cctvStorage = saveCommonDrawDatas(
+            app,
+            cctvOfEquipmentLayout
+          ) as iscsGraphicData.CCTVOfEquipmentLayoutStorage;
+
+          /* graphics.forEach((g) => {
+            if (g instanceof CCTVButton) {
+              const cctvButtonData = g.saveData();
+              cctvStorage.cctvButtons.push(
+                (cctvButtonData as CCTVButtonData).data
+              );
+            }
+          }); */
+          storage.cctvOfEquipmentLayoutStorages[i] = cctvStorage;
+          break;
+        }
+      }
+      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
+              );
+            } else if (g instanceof VerticalElevator) {
+              const verticalElevatorData = g.saveData();
+              basOfEscalatorStorage.verticalElevators.push(
+                (verticalElevatorData as VerticalElevatorData).data
+              );
+            }
+          });
+          storage.basOfEscalatorStorages[i] = basOfEscalatorStorage;
+          break;
+        }
+      }
+      break;
+
+    default:
+      break;
+  }
   console.log(storage, '保存数据', graphics);
   const base64 = fromUint8Array(storage.serialize());
   return base64;
 }
+
+function resetData() {
+  storage = new iscsGraphicData.IscsGraphicStorage();
+  hasLoadData = false;
+  base64 = '';
+}

src/graphics/BAS/escalator/Escalator.ts

@@ -0,0 +1,74 @@
+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.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, 'escalator', '自动扶梯');
+    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 = 'escalator_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": 45, "h": 46 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 46, "h": 46 },
+      "sourceSize": { "w": 46, "h": 46 },
+      "anchor": { "x": 0.5, "y": 0.5 }
+    },
+    "green-on.png": {
+      "frame": { "x": 45, "y": 0, "w": 45, "h": 46 },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 46, "h": 46 },
+      "sourceSize": { "w": 46, "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": 271, "h": 46 },
+    "scale": "0.5",
+    "smartupdate": "$TexturePacker:SmartUpdate:e7620bd2d73cc0b3e2deea9704e7eefc:f129a1d9e4b9ba57720b3861c22b155b:eb2d421f7759984b7713aa4aa5354134$"
+  }
+}