电子地图

电子地图管理
2024-11-21 16:52:44 +08:00 · 2024-11-19 16:39:41 +08:00 · 2024-11-18 17:07:07 +08:00 · 2024-11-14 14:23:30 +08:00 · 2024-11-13 17:59:00 +08:00 · 2024-11-12 13:41:21 +08:00
244 changed files with 38041 additions and 2292 deletions
--- a/.gitea/workflows/cicd_local_test.yml
+++ b/.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 }}."
--- a/.gitmodules
+++ b/.gitmodules
@ -1,3 +1,3 @@
-[submodule "rtss-proto-msg"]
+[submodule "rtsa-proto-msg"]
-	path = rtss-proto-msg
+	path = rtsa-proto-msg
-	url = https://gitea.joylink.club/joylink/rtss-proto-msg.git
+	url = https://gitea.joylink.club/joylink/rtsa-proto-msg.git
--- a/index.html
+++ b/index.html
@ -3,17 +3,40 @@
  <head>
    <title><%= productName %></title>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
-    <meta name="description" content="<%= productDescription %>">
+    <meta name="description" content="<%= productDescription %>" />
-    <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="telephone=no" />
-    <meta name="msapplication-tap-highlight" content="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
      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
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+      rel="icon"
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+      type="image/png"
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+      sizes="128x128"
-    <link rel="icon" type="image/ico" href="favicon.ico">
+      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 -->
--- a/package-lock.json
+++ b/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",
+      "version": "0.1.18",
-      "resolved": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#8b0ad14f7324a5eaba58239645a1fa0452e87ab4",
+      "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",
--- a/package.json
+++ b/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",
--- a/public/drawIcon.svg
+++ b/public/drawIcon.svg
--- a/public/icons/favicon-128x128.png
+++ b/public/icons/favicon-128x128.png
--- a/public/icons/favicon-16x16.png
+++ b/public/icons/favicon-16x16.png
--- a/public/icons/favicon-32x32.png
+++ b/public/icons/favicon-32x32.png
--- a/public/icons/favicon-96x96.png
+++ b/public/icons/favicon-96x96.png
--- a/public/iscsMenuIcon.svg
+++ b/public/iscsMenuIcon.svg
--- a/public/logo_changan.png
+++ b/public/logo_changan.png
--- a/quasar.config.js
+++ b/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: {},
--- a/1
+++ b/1
@ -0,0 +1 @@
 Subproject commit 8d2f5c7506e63202847cab4bd6a935a7310aa000
--- a/1
+++ b/1
@ -1 +0,0 @@
 Subproject commit 4029b6c96f132115bba08c87bfd3470f3e2d872b
--- a/scripts/proto.cjs
+++ b/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');
--- a/src/App.vue
+++ b/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>
--- a/src/api/DraftApi.ts
+++ b/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: {
+export async function saveAsDraft(variables: { id: number; name: string }) {
  id: number;
  name: string;
 }) {
  const mutation = `
  mutation saveAsNewDraftData($id: Int,$name: String) {
    saveAsNewDraftData(id: $id,name: $name){
--- a/src/api/ElectronicMapDraftApi.ts
+++ b/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,
  });
 }
--- a/src/api/ElectronicMapPublishApi.ts
+++ b/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;
 }
--- a/src/api/PublishApi.ts
+++ b/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
      }
    }
  }
--- a/src/api/UserApi.ts
+++ b/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;
 }
--- a/src/assets/ISCS/PSD/duanmenAlarm.png
+++ b/src/assets/ISCS/PSD/duanmenAlarm.png
--- a/src/assets/ISCS/PSD/duanmenClose.png
+++ b/src/assets/ISCS/PSD/duanmenClose.png
--- a/src/assets/ISCS/PSD/duanmenConnectBreak.png
+++ b/src/assets/ISCS/PSD/duanmenConnectBreak.png
--- a/src/assets/ISCS/PSD/train1.png
+++ b/src/assets/ISCS/PSD/train1.png
--- a/src/assets/ISCS/PSD/train2.png
+++ b/src/assets/ISCS/PSD/train2.png
--- a/src/boot/axios.ts
+++ b/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();
+      const token = getJwtToken();
-      config.headers.Authorization = 'Bearer 1e2d0d5d96034f4a0805af6512051ddc';
+      config.headers.Authorization = `Bearer ${token}`;
-      config.headers['Token'] = '1e2d0d5d96034f4a0805af6512051ddc';
+      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(() => {
--- a/src/components/Iscs/CCTVMonitoring.vue
+++ b/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>
--- a/src/components/Iscs/FASPlaneGraph.vue
+++ b/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>
--- a/src/components/Iscs/IscsBottomAlarm.vue
+++ b/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>
--- a/src/components/Iscs/ModeControl.vue
+++ b/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>
--- a/src/components/Iscs/ModeControlOfBigSystem.vue
+++ b/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>
--- a/src/components/Iscs/ModeControlOfBigSystemTable.vue
+++ b/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>
--- a/src/components/Iscs/PSD.vue
+++ b/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>
--- a/src/components/common/DraggableDialog.vue
+++ b/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();
--- a/src/components/draw-app/FireAlarmDrawProperties.vue
+++ b/src/components/draw-app/FireAlarmDrawProperties.vue
@ -1,50 +0,0 @@
 <template>
  <!-- 绘制图形模板属性 -->
  <div v-if="drawStore.drawMode">
    <q-card flat>
      <q-card-section>
        <div class="text-h6">{{ drawStore.drawGraphicName + ' 模板' }}</div>
      </q-card-section>
      <q-separator inset></q-separator>
      <q-card-section> </q-card-section>
    </q-card>
  </div>
  <!-- 画布或图形对象属性 -->
  <div v-else-if="drawStore.selectedGraphics !== null">
    <q-card flat>
      <q-card-section>
        <div class="text-h6">{{ drawStore.selectedObjName + ' 属性' }}</div>
      </q-card-section>
      <q-separator inset></q-separator>
      <template v-if="drawStore.selectedGraphics.length === 0">
        <q-card-section>
          <canvas-property></canvas-property>
        </q-card-section>
      </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"
          />
        </q-card-section>
      </template>
      <template v-else-if="drawStore.selectedGraphics.length > 1">
        <multiple-select-property></multiple-select-property>
      </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';
 const drawStore = useDrawStore();
 </script>
--- a/src/components/draw-app/IscsDrawProperties.vue
+++ b/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
+          <line-property
-            v-else-if="drawStore.selectedGraphicType === CCTVButton.Type"
+            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>
--- a/src/components/draw-app/dialogs/AddCentralizedStationDialog.vue
+++ b/src/components/draw-app/dialogs/AddCentralizedStationDialog.vue
@ -0,0 +1,67 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
  <q-dialog ref="dialogRef">
    <q-card style="width: 250px">
      <q-card-section>
        <q-form ref="myForm" @submit="onAdd" class="q-gutter-md">
          <div class="text-h6">添加设备的集中站</div>
          <q-select
            v-model="stationName"
            label="集中站"
            dense
            outlined
            :options="centralizedStations"
            emitValue
            mapOptions
          >
          </q-select>
          <q-card-actions align="right" class="text-primary">
            <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
            <q-btn flat label="确认" type="submit" />
          </q-card-actions>
        </q-form>
      </q-card-section>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 import { QForm, useDialogPluginComponent } from 'quasar';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, ref } from 'vue';
 const stationName = ref(0);
 const centralizedStations = ref<{ label: string; value: number }[]>([]);
 defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 const drawStore = useDrawStore();
 onMounted(() => {
  const stations = drawStore
    .getDrawApp()
    .queryStore.queryByType<Station>(Station.Type);
  centralizedStations.value = [];
  stations.forEach((station) => {
    if (station.datas.concentrationStations) {
      centralizedStations.value.push({
        label: station.datas.stationName,
        value: station.datas.id,
      });
    }
  });
 });
 const myForm = ref<QForm | null>(null);
 function onAdd() {
  myForm.value?.validate().then(async (res) => {
    if (res) {
      onDialogOK(stationName.value);
    }
  });
 }
 </script>
 <style scoped></style>
--- a/src/components/draw-app/dialogs/LayerControlDialog.vue
+++ b/src/components/draw-app/dialogs/LayerControlDialog.vue
@ -0,0 +1,208 @@
 <template>
  <draggable-dialog
    seamless
    :title="noSelect ? '显示控制' : '显示 / 选择'"
    :height="height"
  >
    <q-tabs
      v-if="!noSelect"
      v-model="tab"
      dense
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
    >
      <q-tab
        v-for="(item, index) in tabList"
        :key="index"
        :name="item.value"
        :label="item.label"
      />
    </q-tabs>
    <q-separator />
    <q-tab-panels v-model="tab" animated keep-alive>
      <q-tab-panel name="show">
        <q-card class="q-pa-sm">
          <q-card-section class="q-pa-sm">
            <q-checkbox
              style="width: 150px"
              v-model="allList"
              label="全部"
              @update:modelValue="allListFn"
            />
            <q-checkbox
              style="width: 150px"
              v-model="defaultCheck"
              label="默认显示"
              @update:modelValue="defaultListFn"
            />
          </q-card-section>
          <q-separator />
          <q-card-section class="row justify-center">
            <div class="row">
              <q-checkbox
                class="col-4"
                v-for="(item, index) in props.layerList"
                :key="index"
                v-model="list"
                :label="item.label"
                :val="item.value"
              />
            </div>
          </q-card-section>
          <q-card-actions align="right" class="text-primary">
            <q-btn flat label="取消" v-close-popup />
          </q-card-actions>
        </q-card>
      </q-tab-panel>
      <q-tab-panel name="select">
        <q-card class="q-pa-md">
          <q-card-section class="row justify-center">
            <div class="row">
              <q-checkbox
                class="col-4"
                v-for="(item, index) in props.layerList"
                :key="index"
                v-model="selectList"
                :label="item.label"
                :val="item.value"
              />
            </div>
          </q-card-section>
          <q-card-actions align="right" class="text-primary">
            <q-btn flat label="取消" v-close-popup />
          </q-card-actions>
        </q-card>
      </q-tab-panel>
    </q-tab-panels>
  </draggable-dialog>
 </template>
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { IDrawApp, IGraphicApp } from 'jl-graphic';
 interface ItemData {
  label: string;
  value: string;
  defaultShow?: boolean;
 }
 const drawStore = useDrawStore();
 const list = ref<string[]>([]);
 const allList = ref(false);
 const props = defineProps<{
  showDialog: boolean;
  layerList: ItemData[];
  showLayer: string[];
  app: IDrawApp | IGraphicApp;
  noSelect?: boolean; // 没有选择tab
 }>();
 function allListFn() {
  const arr: string[] = [];
  if (allList.value) {
    props.layerList.forEach((item) => {
      arr.push(item.value);
    });
    list.value = arr;
  } else {
    list.value = arr;
  }
 }
 onMounted(() => {
  if (props.showDialog) {
    list.value = props.showLayer;
    allList.value = props.layerList.length == props.showLayer.length;
    defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
  }
 });
 watch(
  () => list.value,
  (val) => {
    drawStore.setShowLayer(val);
    allList.value = props.layerList.length == val.length;
    defaultCheck.value = isEqualArr(defaultShowList.value, list.value);
    setShowLayer(val);
  }
 );
 function setShowLayer(val: string[]) {
  drawStore.setShowLayer(val);
  const alllGraphic = props.app.queryStore.getAllGraphics();
  alllGraphic.forEach((g) => {
    if (val.includes(g.type)) {
      g.visible = true;
    } else {
      g.visible = false;
    }
  });
 }
 const defaultCheck = ref(false);
 const defaultShowList = computed(() => {
  const arr: string[] = [];
  props.layerList.forEach((item) => {
    if (item.defaultShow) {
      arr.push(item.value);
    }
  });
  return arr;
 });
 function defaultListFn() {
  const arr: string[] = [];
  if (defaultCheck.value) {
    defaultShowList.value.forEach((item) => {
      arr.push(item);
    });
    list.value = arr;
  } else {
    list.value = arr;
  }
 }
 function isEqualArr(arr1: string[], arr2: string[]): boolean {
  let s = false;
  if (arr1.length === arr2.length && arr1.filter((t) => !arr2.includes(t))) {
    s = true;
  }
  return s;
 }
 const tabList = [
  {
    label: '显示',
    value: 'show',
  },
  {
    label: '选择',
    value: 'select',
  },
 ];
 const tab = ref('show');
 const selectList = ref<string[]>([]);
 watch(
  () => selectList.value,
  (val) => {
    props.app.selectAllGraphics((g) => val.includes(g.type));
  }
 );
 const height = computed(() => {
  let h = 189;
  const tH = props.noSelect ? 0 : 36;
  const l = props.layerList.length / 3;
  let t = h + tH + Math.ceil(l) * 40;
  t = t > 700 ? 700 : t;
  return t;
 });
 </script>
 <style scoped></style>
--- a/src/components/draw-app/dialogs/SectionSplitDialog.vue
+++ b/src/components/draw-app/dialogs/SectionSplitDialog.vue
@ -0,0 +1,54 @@
 <template>
  <q-dialog ref="dialogRef">
    <q-card>
      <q-card-section> <div class="text-h6">区段拆分</div> </q-card-section>
      <q-card-section> <div>请选择要拆分的数量和方向</div> </q-card-section>
      <q-card-section class="q-pt-none">
        <q-input
          type="number"
          autofocus
          dense
          outlined
          v-model="num"
          :min="1"
          :max="20"
        />
      </q-card-section>
      <q-card-section>
        <q-select
          v-model="dir"
          dense
          :options="dirOptions"
          emitValue
          mapOptions
        >
        </q-select>
      </q-card-section>
      <q-card-actions align="right" class="text-primary">
        <q-btn flat label="取消" @click="onDialogCancel" v-close-popup />
        <q-btn
          flat
          label="确认"
          @click="onDialogOK({ num: Number(num), dir })"
          v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
 </template>
 <script setup lang="ts">
 import { useDialogPluginComponent } from 'quasar';
 import { ref } from 'vue';
 const num = ref<number>();
 const dir = ref('ltr');
 const dirOptions = [
  { label: '从左至右', value: 'ltr' },
  { label: '从右至左', value: 'rtl' },
 ];
 defineEmits([...useDialogPluginComponent.emits]);
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 </script>
--- a/src/components/draw-app/electronicMapDrawProperties.vue
+++ b/src/components/draw-app/electronicMapDrawProperties.vue
@ -0,0 +1,83 @@
 <template>
  <!-- 绘制图形模板属性 -->
  <div v-if="drawStore.drawMode">
    <q-card flat>
      <q-card-section>
        <div class="text-h6">{{ drawStore.drawGraphicName + ' 模板' }}</div>
      </q-card-section>
      <q-separator inset></q-separator>
    </q-card>
  </div>
  <!-- 画布或图形对象属性 -->
  <div v-else-if="drawStore.selectedGraphics !== null">
    <q-card flat>
      <q-card-section>
        <div class="text-h6">{{ drawStore.selectedObjName + ' 属性' }}</div>
      </q-card-section>
      <q-separator inset></q-separator>
      <template v-if="drawStore.selectedGraphics.length === 0">
        <q-card-section>
          <canvas-property></canvas-property>
        </q-card-section>
      </template>
      <template v-else-if="drawStore.selectedGraphics.length === 1">
        <q-card-section>
          <platform-property
            v-if="drawStore.selectedGraphicType === Platform.Type"
          />
          <station-property
            v-else-if="drawStore.selectedGraphicType === Station.Type"
          />
          <screenDoor-property
            v-else-if="drawStore.selectedGraphicType === ScreenDoor.Type"
          />
          <section-property
            v-else-if="drawStore.selectedGraphicType === Section.Type"
          />
          <turnout-property
            v-else-if="drawStore.selectedGraphicType === Turnout.Type"
          />
          <axleCounting-property
            v-else-if="drawStore.selectedGraphicType === AxleCounting.Type"
          />
          <concentrationDividingLine-property
            v-else-if="
              drawStore.selectedGraphicType === ConcentrationDividingLine.Type
            "
          />
          <separator-property
            v-else-if="
              drawStore.selectedGraphicType === Separator.Type
            "
          />
        </q-card-section>
      </template>
      <!-- <template v-else-if="drawStore.selectedGraphics.length > 1">
        <multiple-select-property></multiple-select-property>
      </template> -->
    </q-card>
  </div>
 </template>
 <script setup lang="ts">
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import CanvasProperty from './properties/CanvasElectronicMapProperty.vue';
 import StationProperty from './properties/electronicMap/StationProperty.vue';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 import PlatformProperty from './properties/electronicMap/PlatformProperty.vue';
 import { Platform } from 'src/graphics/electronicMap/platform/Platform';
 import ScreenDoorProperty from './properties/electronicMap/ScreenDoorProperty.vue';
 import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 import SectionProperty from './properties/electronicMap/SectionProperty.vue';
 import { Section } from 'src/graphics/electronicMap/section/Section';
 import TurnoutProperty from './properties/electronicMap/TurnoutProperty.vue';
 import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
 import AxleCountingProperty from './properties/electronicMap/AxleCountingProperty.vue';
 import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
 import ConcentrationDividingLineProperty from './properties/electronicMap/ConcentrationDividingLineProperty.vue';
 import { ConcentrationDividingLine } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
 import SeparatorProperty from './properties/electronicMap/SeparatorProperty.vue';
 import { Separator } from 'src/graphics/electronicMap/separator/Separator';
 const drawStore = useDrawStore();
 </script>
--- a/src/components/draw-app/properties/BAS/EscalatorProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/BAS/VerticalElevatorProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/ButtonProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/CCTV/CCTVButtonProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/CanvasElectronicMapProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/CCTV/CanvasCCTVProperty.vue
+++ b/src/components/draw-app/properties/CCTV/CanvasCCTVProperty.vue
--- a/src/components/draw-app/properties/CircleProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/LineProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/RectProperty.vue
+++ b/src/components/draw-app/properties/RectProperty.vue
@ -1,6 +1,6 @@
 <template>
-  <q-form>
+  <q-form class="q-gutter-sm">
-    <q-input outlined readonly v-model="rectModel.id" label="id" hint="" />
+    <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>
--- a/src/components/draw-app/properties/electronicMap/AxleCountingConfig.vue
+++ b/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>
--- a/src/components/draw-app/properties/electronicMap/AxleCountingProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/AxleCountingProperty.vue
@ -0,0 +1,247 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input outlined readonly v-model="axleCountingModel.id" label="id" />
    <q-input
      outlined
      label="区段检测点名称"
      type="textarea"
      @blur="onUpdate"
      v-model="axleCountingModel.code"
      lazy-rules
      autogrow
    />
    <q-list bordered separator class="rounded-borders">
      <q-item no-wrap class="q-gutter-y-sm column">
        <div>公里标配置</div>
        <q-input
          outlined
          style="margin-top: 10px"
          v-model="axleCountingModel.kilometerSystem.coordinateSystem"
          @blur="onUpdate"
          label="坐标系"
        ></q-input>
        <q-input
          outlined
          style="margin-top: 10px"
          v-model.number="axleCountingModel.kilometerSystem.kilometer"
          type="number"
          @blur="onUpdate"
          label="公里标(mm):"
        />
        <q-select
          outlined
          v-model="axleCountingModel.kilometerSystem.direction"
          :options="directionOptions"
          :map-options="true"
          :emit-value="true"
          @update:model-value="onUpdate"
          label="方向"
        ></q-select>
      </q-item>
    </q-list>
    <q-select
      outlined
      v-model="axleCountingModel.type"
      :options="optionsDetectType"
      map-options
      emit-value
      @update:model-value="onUpdate"
      label="区段检测点的类型"
    ></q-select>
    <q-btn
      v-if="
        axleCountingModel.type == 1 &&
        axleCountingModel.axleCountingRef.length == 2
      "
      color="primary"
      label="生成区段检测点"
      @click="oneClickAxleCounting"
    />
    <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
              v-for="item in sectionRelations"
              :key="item"
              square
              color="primary"
              text-color="white"
            >
              {{ item }}
            </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
              v-for="item in turnoutRelations"
              :key="item"
              square
              color="primary"
              text-color="white"
            >
              {{ item }}
            </q-chip>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="(id, index) in axleCountingModel.centralizedStations"
          :key="index"
          removable
          @remove="removeStation(index)"
          square
          >{{ getName(id) }}</q-chip
        >
        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
      </template>
    </q-field>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { getRectangleCenter, GraphicIdGenerator } from 'jl-graphic';
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import { computed } from 'vue';
 import { useQuasar } from 'quasar';
 import AddCentralizedStationDialog from 'src/components/draw-app/dialogs/AddCentralizedStationDialog.vue';
 import { AxleCountingData } from 'src/drawApp/graphics/electronicMap/AxleCountingInteraction';
 import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
 import { Section } from 'src/graphics/electronicMap/section/Section';
 import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 const $q = useQuasar();
 const drawStore = useDrawStore();
 const { data: axleCountingModel, onUpdate } = useFormData(
  new AxleCountingData(),
  drawStore.getDrawApp()
 );
 const directionOptions = [
  { label: '左行', value: 0 },
  { label: '右行', value: 1 },
 ];
 const optionsDetectType = [
  { label: '计轴', value: 0 },
  { label: '区段边界', value: 1 },
 ];
 const sectionRelations = computed(() => {
  const axleCounting = drawStore.selectedGraphic as AxleCounting;
  const sectionRelations =
    axleCounting?.relationManage.getRelationsOfGraphicAndOtherType(
      axleCounting,
      Section.Type
    );
  const ref = sectionRelations.map(
    (relation) =>
      `${relation.getOtherGraphic<Section>(axleCounting).datas.code}(${
        relation.getOtherRelationParam(axleCounting).param
      })`
  );
  return Array.from(new Set(ref));
 });
 const turnoutRelations = computed(() => {
  const axleCounting = drawStore.selectedGraphic as AxleCounting;
  const turnoutRelations =
    axleCounting?.relationManage.getRelationsOfGraphicAndOtherType(
      axleCounting,
      Turnout.Type
    );
  const ref = turnoutRelations.map(
    (relation) =>
      `${relation.getOtherGraphic<Turnout>(axleCounting).datas.code}(${
        relation.getOtherRelationParam(axleCounting).param
      })`
  );
  return Array.from(new Set(ref));
 });
 function removeStation(index: number) {
  axleCountingModel.centralizedStations.splice(index, 1);
  onUpdate();
 }
 function addStation() {
  $q.dialog({
    title: '',
    message: '',
    component: AddCentralizedStationDialog,
    cancel: true,
    persistent: true,
  }).onOk((data: number) => {
    axleCountingModel.centralizedStations.push(data);
    onUpdate();
  });
 }
 function oneClickAxleCounting() {
  const select = drawStore.selectedGraphic as AxleCounting;
  const axleCountings = select.queryStore.queryByType<AxleCounting>(
    AxleCounting.Type
  );
  for (let i = 0; i < axleCountings.length; i++) {
    if (
      axleCountings[i].x == select.x - 40 &&
      axleCountings[i].y == select.y + 30
    ) {
      return;
    }
  }
  const ref = select.datas.axleCountingRef;
  const refDevice = select.queryStore.queryById<Section | Turnout>(ref[0].id);
  const refDeviceOther = select.queryStore.queryById<Section | Turnout>(
    ref[1].id
  );
  for (let i = 0; i < 2; i++) {
    const axleCounting = new AxleCounting(1);
    axleCounting.loadData(new AxleCountingData());
    axleCounting.id = GraphicIdGenerator.next();
    const offsetX = i == 0 ? -40 : 40;
    axleCounting.position.set(select.x + offsetX, select.y + 30);
    const [leftDevice, rightDevice] =
      refDevice.localToCanvasPoint(
        getRectangleCenter(refDevice.getLocalBounds())
      ).x <
      refDeviceOther.localToCanvasPoint(
        getRectangleCenter(refDeviceOther.getLocalBounds())
      ).x
        ? [
            { device: refDevice, ref: ref[0] },
            { device: refDeviceOther, ref: ref[1] },
          ]
        : [
            { device: refDeviceOther, ref: ref[1] },
            { device: refDevice, ref: ref[0] },
          ];
    const deviceUse = i == 0 ? rightDevice : leftDevice;
    axleCounting.datas.axleCountingRef = [deviceUse.ref];
    axleCounting.datas.code = `${deviceUse.device.datas.code}-${deviceUse.ref.devicePort}`;
    const app = drawStore.getDrawApp();
    app.addGraphicAndRecord(axleCounting);
    axleCounting.loadRelations();
  }
 }
 function getName(id: number) {
  try {
    const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
    return station.datas.code;
  } catch (error) {
    return id;
  }
 }
 </script>
--- a/src/components/draw-app/properties/electronicMap/ConcentrationDividingLineProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/ConcentrationDividingLineProperty.vue
@ -0,0 +1,118 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input
      outlined
      readonly
      v-model="concentrationDividingLineModel.id"
      label="id"
    />
    <q-select
      outlined
      style="margin-top: 10px"
      v-model="concentrationDividingLineModel.refLeftStationId"
      :options="centralizedStations"
      emitValue
      mapOptions
      @update:model-value="onUpdate"
      label="左边关联的集中站"
    />
    <q-select
      outlined
      style="margin-top: 10px"
      v-model="concentrationDividingLineModel.refRightStationId"
      :options="centralizedStations"
      emitValue
      mapOptions
      @update:model-value="onUpdate"
      label="右边关联的集中站"
    />
    <q-list bordered separator class="rounded-borders">
      <q-item
        v-for="sectionRelation in sectionRelations"
        :key="sectionRelation.label"
      >
        <q-item-section no-wrap class="q-gutter-y-sm column">
          <q-item-label> {{ sectionRelation.label }} </q-item-label>
          <div class="q-gutter-sm row">
            <q-chip
              v-for="(item, index) in sectionRelation.refSectionInfo"
              :key="index"
              square
              color="primary"
              text-color="white"
            >
              {{ item }}
            </q-chip>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { ConcentrationDividingLineData } from 'src/drawApp/graphics/electronicMap/ConcentrationDividingLineInteraction';
 import { ConcentrationDividingLine } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
 import { Section } from 'src/graphics/electronicMap/section/Section';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import { computed, onMounted, ref } from 'vue';
 const drawStore = useDrawStore();
 const { data: concentrationDividingLineModel, onUpdate } = useFormData(
  new ConcentrationDividingLineData(),
  drawStore.getDrawApp()
 );
 const centralizedStations = ref<{ label: string; value: number }[]>([]);
 const sectionRelations = computed(() => {
  const refSectionInfo: { label: string; refSectionInfo: string[] }[] = [
    { label: '左边关联的设备', refSectionInfo: [] },
    { label: '右边关联的设备', refSectionInfo: [] },
  ];
  enum devicePort {
    'A',
    'B',
    'C',
  }
  const concentrationDividingLine =
    drawStore.selectedGraphic as ConcentrationDividingLine;
  concentrationDividingLine.datas.nodeConWithSecs.forEach((nodeConWithSec) => {
    const refleftSection = nodeConWithSec.leftSection?.id
      ? `${
          drawStore
            .getDrawApp()
            .queryStore.queryById<Section>(nodeConWithSec.leftSection.id).datas
            .code
        }(${devicePort[nodeConWithSec.leftSection.devicePort]})`
      : '边界';
    refSectionInfo[0].refSectionInfo.push(refleftSection);
    const refRightSection = nodeConWithSec.rightSection?.id
      ? `${
          drawStore
            .getDrawApp()
            .queryStore.queryById<Section>(nodeConWithSec.rightSection.id).datas
            .code
        }(${devicePort[nodeConWithSec.rightSection.devicePort]})`
      : '边界';
    refSectionInfo[1].refSectionInfo.push(refRightSection);
  });
  return refSectionInfo;
 });
 onMounted(() => {
  const stations = drawStore
    .getDrawApp()
    .queryStore.queryByType<Station>(Station.Type);
  centralizedStations.value = [{ label: '', value: 0 }];
  stations.forEach((station) => {
    if (station.datas.concentrationStations || station.datas.depots) {
      centralizedStations.value.push({
        label: station.datas.stationName,
        value: station.datas.id,
      });
    }
  });
 });
 </script>
--- a/src/components/draw-app/properties/electronicMap/PlatformProperty.vue
+++ b/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>
--- a/src/components/draw-app/properties/electronicMap/ScreenDoorConfig.vue
+++ b/src/components/draw-app/properties/electronicMap/ScreenDoorConfig.vue
@ -0,0 +1,152 @@
 <template>
  <q-form class="q-gutter-sm q-pa-sm">
    <q-card-section>
      <div class="text-h6">屏蔽门相关配置</div>
    </q-card-section>
    <q-input
      outlined
      v-model.number="screenDoorConfig.sonDoorAmount"
      type="number"
      label="子屏蔽门的数量"
    />
    <q-list bordered separator class="rounded-borders">
      <q-expansion-item
        default-opened
        expand-separator
        v-for="screenDoorGroup in screenDoorConfig.screenDoorGroupList"
        :key="screenDoorGroup"
        :label="'列车编组数量为' + screenDoorGroup.trainGroupAmount"
      >
        <q-card>
          <q-item no-wrap class="q-gutter-y-sm column">
            <q-input
              outlined
              readonly
              v-model.number="screenDoorGroup.trainGroupAmount"
              type="number"
              label="列车编组数量"
            />
            <q-input
              outlined
              v-model.number="screenDoorGroup.startSmallDoor"
              type="number"
              label="起始的屏蔽门编号"
            />
            <q-input
              outlined
              v-model.number="screenDoorGroup.endSmallDoor"
              type="number"
              label="结束的屏蔽门编号"
            />
          </q-item>
        </q-card>
      </q-expansion-item>
    </q-list>
    <div>
      <q-btn
        label="确认修改"
        color="primary"
        @click="editScreenDoorConfig"
        class="q-mr-md"
      />
      <q-btn label="返回" color="primary" @click="goBack" />
    </div>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, ref } from 'vue';
 import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
 import { useQuasar } from 'quasar';
 import {
  loadScreenDoorConfig,
  setScreenDoorConfig,
 } from 'src/drawApp/electronicMapApp';
 import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 const emit = defineEmits(['close']);
 const $q = useQuasar();
 const drawStore = useDrawStore();
 const screenDoorConfig = ref<{
  sonDoorAmount: number;
  screenDoorGroupList: electronicMapGraphicData.ScreenDoorGroup[];
 }>({
  sonDoorAmount: 30,
  screenDoorGroupList: [],
 });
 onMounted(() => {
  if (
    loadScreenDoorConfig() == undefined ||
    loadScreenDoorConfig().screenDoorGroupList.length == 0
  ) {
    /* const stopPositions = drawStore
      .getDrawApp()
      .queryStore.queryByType<StopPosition>(StopPosition.Type);
    const coachNum: electronicMapGraphicData.StopPosition.CoachNum[] = [];
    stopPositions.forEach((stopPosition) => {
      if (!coachNum.includes(stopPosition.datas.coachNum)) {
        coachNum.push(stopPosition.datas.coachNum);
      }
    });
    coachNum.sort((a, b) => a - b);
    const showCoachNum = coachNum.map((item) => {
      let changeItem: number;
      switch (item) {
        case graphicData.StopPosition.CoachNum.Eight:
          changeItem = 8;
          break;
        case graphicData.StopPosition.CoachNum.Four:
          changeItem = 4;
          break;
        case graphicData.StopPosition.CoachNum.Six:
          changeItem = 6;
          break;
        default:
          changeItem = 0;
          break;
      }
      return changeItem;
    });  */
    const showCoachNum = [4, 8];
    showCoachNum.forEach((coachNum) => {
      screenDoorConfig.value.screenDoorGroupList.push(
        new electronicMapGraphicData.ScreenDoorGroup({
          trainGroupAmount: coachNum,
          startSmallDoor: 0,
          endSmallDoor: 30,
        })
      );
    });
  } else {
    screenDoorConfig.value = loadScreenDoorConfig();
  }
 });
 function editScreenDoorConfig() {
  const screenDoorGroupList: electronicMapGraphicData.ScreenDoorGroup[] = [];
  screenDoorConfig.value.screenDoorGroupList.forEach((screenDoorGroup) => {
    screenDoorGroupList.push(
      new electronicMapGraphicData.ScreenDoorGroup(screenDoorGroup)
    );
  });
  setScreenDoorConfig(
    new electronicMapGraphicData.ScreenDoorConfig({
      sonDoorAmount: screenDoorConfig.value.sonDoorAmount,
      screenDoorGroupList,
    })
  );
  $q.notify({ type: 'positive', message: '更新成功' });
  const screenDoors = drawStore
    .getDrawApp()
    .queryStore.queryByType(ScreenDoor.Type);
  screenDoors.forEach((screenDoor) => screenDoor.doRepaint());
 }
 function goBack() {
  emit('close');
 }
 </script>
--- a/src/components/draw-app/properties/electronicMap/ScreenDoorProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/ScreenDoorProperty.vue
@ -0,0 +1,55 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input outlined readonly v-model="screenDoorModel.id" label="id" />
    <q-input
      outlined
      label="屏蔽门编号"
      type="textarea"
      @blur="onUpdate"
      v-model="screenDoorModel.code"
      lazy-rules
      autogrow
    />
    <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">
              {{ platformRelation }}
            </q-chip>
          </div>
        </q-item-section>
      </q-item>
    </q-list>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { useDrawStore } from 'src/stores/draw-store';
 import { computed } from 'vue';
 import { ScreenDoor } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 import { ScreenDoorData } from 'src/drawApp/graphics/electronicMap/ScreenDoorInteraction';
 import { Platform } from 'src/graphics/electronicMap/platform/Platform';
 const drawStore = useDrawStore();
 const { data: screenDoorModel, onUpdate } = useFormData(
  new ScreenDoorData(),
  drawStore.getDrawApp()
 );
 const platformRelation = computed(() => {
  const screenDoor = drawStore.selectedGraphic as ScreenDoor;
  const refStations = screenDoor?.relationManage
    .getRelationsOfGraphicAndOtherType(screenDoor, Platform.Type)
    .map(
      (relation) => relation.getOtherGraphic<Platform>(screenDoor).datas.code
    );
  let refStation;
  if (refStations) {
    refStation = refStations[0];
  }
  return refStation;
 });
 </script>
--- a/src/components/draw-app/properties/electronicMap/SectionProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/SectionProperty.vue
@ -0,0 +1,262 @@
 <template>
  <q-form>
    <q-input outlined readonly v-model="sectionModel.id" label="id" hint="" />
    <q-input
      outlined
      readonly
      v-model="sectionTypeText"
      @blur="onUpdate"
      label="区段类型"
    />
    <q-input
      outlined
      class="q-mt-lg"
      v-model="sectionModel.code"
      @change="onUpdate"
      label="编号"
    />
    <q-input
      outlined
      type="number"
      class="q-mt-lg"
      v-model.number="sectionModel.segmentsCount"
      v-if="sectionModel.isCurve"
      @blur="onUpdate"
      label="曲线分段数"
    />
    <q-select
      outlined
      class="q-mt-lg"
      v-model="sectionModel.normalRunningDirection"
      :options="runningDirectionOptions"
      emit-value
      map-options
      @blur="onUpdate"
      label="常规运行方向"
    ></q-select>
    <q-select
      outlined
      class="q-mt-lg"
      v-model="sectionModel.direction"
      :options="directionOptions"
      emit-value
      map-options
      @blur="onUpdate"
      label="上下行方向"
    ></q-select>
    <q-checkbox
      v-if="
        sectionModel.sectionType ===
        electronicMapGraphicData.Section.SectionType.Physical
      "
      label="是否折返区域"
      class="q-mt-lg"
      v-model="sectionModel.isTurnBackZone"
      @update:model-value="onUpdate"
    ></q-checkbox>
    <q-field
      v-if="
        sectionModel.sectionType ===
        electronicMapGraphicData.Section.SectionType.Physical
      "
      class="q-mt-lg"
      outlined
      label="关联区段"
      readonly
      stack-label
    >
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="code in sectionRelations"
          :key="code"
          square
          >{{ code }}</q-chip
        >
      </template>
    </q-field>
    <q-field
      v-if="
        sectionModel.sectionType ===
        electronicMapGraphicData.Section.SectionType.Physical
      "
      class="q-mt-lg"
      outlined
      label="关联道岔"
      readonly
      stack-label
    >
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="code in turnoutRelations"
          :key="code"
          square
          >{{ code }}</q-chip
        >
      </template>
    </q-field>
    <q-field
      v-if="
        sectionModel.sectionType ===
        electronicMapGraphicData.Section.SectionType.TurnoutPhysical
      "
      class="q-mt-lg"
      outlined
      label="计轴"
      readonly
      stack-label
    >
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="code in axleCountingRelations"
          :key="code"
          square
          >{{ code }}</q-chip
        >
      </template>
    </q-field>
    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="(id, index) in sectionModel.centralizedStations"
          :key="index"
          removable
          @remove="removeStation(index)"
          square
          >{{ getName(id) }}</q-chip
        >
        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
      </template>
    </q-field>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import { useQuasar } from 'quasar';
 import { computed } from 'vue';
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import AddCentralizedStationDialog from 'src/components/draw-app/dialogs/AddCentralizedStationDialog.vue';
 import { SectionData } from 'src/drawApp/graphics/electronicMap/SectionInteraction';
 import { Section } from 'src/graphics/electronicMap/section/Section';
 import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
 import { AxleCounting } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
 import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 const drawStore = useDrawStore();
 const $q = useQuasar();
 const { data: sectionModel, onUpdate } = useFormData(
  new SectionData(),
  drawStore.getDrawApp()
 );
 const sectionTypeText = computed(() => {
  return ['物理区段', '道岔物理区段'][sectionModel.sectionType];
 });
 const runningDirectionOptions = [
  {
    label: 'A到B',
    value: electronicMapGraphicData.Section.RunningDirection.AtoB,
  },
  {
    label: 'B到A',
    value: electronicMapGraphicData.Section.RunningDirection.BtoA,
  },
  {
    label: '双向',
    value: electronicMapGraphicData.Section.RunningDirection.BOTH,
  },
 ];
 const directionOptions = [
  {
    label: '上行',
    value: electronicMapGraphicData.Direction.UP,
  },
  {
    label: '下行',
    value: electronicMapGraphicData.Direction.DOWN,
  },
 ];
 const sectionRelations = computed(() => {
  const section = drawStore.selectedGraphic as Section;
  const sectionRelations =
    section.relationManage.getRelationsOfGraphicAndOtherType(
      section,
      Section.Type
    );
  return sectionRelations.map(
    (relation) =>
      `${relation.getRelationParam(section).param}: ${
        relation.getOtherGraphic<Section>(section).datas.code
      }(${relation.getOtherRelationParam(section).param})`
  );
 });
 const turnoutRelations = computed(() => {
  const section = drawStore.selectedGraphic as Section;
  const turnoutRelations =
    section.relationManage.getRelationsOfGraphicAndOtherType(
      section,
      Turnout.Type
    );
  return turnoutRelations.map(
    (relation) =>
      `${relation.getRelationParam(section).param}: ${
        relation.getOtherGraphic<Turnout>(section).datas.code
      }(${relation.getOtherRelationParam(section).param})`
  );
 });
 const axleCountingRelations = computed(() => {
  const section = drawStore.selectedGraphic as Section;
  const axleCountingRelations =
    section.relationManage.getRelationsOfGraphicAndOtherType(
      section,
      AxleCounting.Type
    );
  return axleCountingRelations.map(
    (relation) => relation.getOtherGraphic<AxleCounting>(section).datas.code
  );
 });
 function removeStation(index: number) {
  sectionModel.centralizedStations.splice(index, 1);
  onUpdate();
 }
 function addStation() {
  $q.dialog({
    title: '',
    message: '',
    component: AddCentralizedStationDialog,
    cancel: true,
    persistent: true,
  }).onOk((data: number) => {
    sectionModel.centralizedStations.push(data);
    onUpdate();
  });
 }
 function getName(id: number) {
  try {
    const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
    return station.datas.code;
  } catch (error) {
    return id;
  }
 }
 </script>
--- a/src/components/draw-app/properties/electronicMap/SeparatorProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/SeparatorProperty.vue
@ -0,0 +1,34 @@
 <template>
  <q-form>
    <q-input outlined readonly v-model="separatorModel.id" label="id" hint="" />
    <q-select
      outlined
      class="q-mt-sm"
      v-model="separatorModel.separatorType"
      :options="typeOptions"
      :map-options="true"
      :emit-value="true"
      @update:model-value="onUpdate"
      label="分隔符类型"
    ></q-select>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { SeparatorData } from 'src/drawApp/graphics/electronicMap/SeparatorInteraction';
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 const { data: separatorModel, onUpdate } = useFormData(
  new SeparatorData(),
  useDrawStore().getDrawApp()
 );
 const typeOptions = [
  { label: '区段分隔符', value: 'section' },
  { label: '道岔分隔符', value: 'turnout' },
  { label: '左断路分隔符', value: 'endA' },
  { label: '右断路分隔符', value: 'endB' },
 ];
 </script>
--- a/src/components/draw-app/properties/electronicMap/SignalProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/SignalProperty.vue
@ -0,0 +1,211 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input outlined readonly v-model="signalModel.id" label="id" />
    <q-input
      outlined
      v-model="signalModel.code"
      @blur="onUpdate"
      label="编号"
    />
    <q-select
      outlined
      class="q-mt-sm"
      v-model="signalModel.mt"
      :options="SignalTypeOptions"
      :map-options="true"
      :emit-value="true"
      @update:model-value="onUpdate"
      label="信号机类型:"
    ></q-select>
    <q-select
      outlined
      class="q-mt-sm"
      v-model="signalModel.direction"
      :options="upDownOptions"
      :map-options="true"
      :emit-value="true"
      @update:model-value="onUpdate"
      label="上下行:"
    ></q-select>
    <q-list bordered separator class="rounded-borders">
      <q-item no-wrap class="q-gutter-y-sm column">
        <div>公里标配置</div>
        <q-input
          outlined
          class="q-mt-sm"
          v-model="signalModel.kilometerSystem.coordinateSystem"
          @blur="onUpdate"
          label="坐标系"
        ></q-input>
        <q-select
          outlined
          class="q-mt-sm"
          v-model="signalModel.kilometerSystem.direction"
          :options="directionOptions"
          :map-options="true"
          :emit-value="true"
          @update:model-value="onUpdate"
          label="方向"
        ></q-select>
        <q-input
          outlined
          class="q-mt-sm"
          v-model.number="signalModel.kilometerSystem.kilometer"
          type="number"
          @blur="onUpdate"
          label="公里标(mm):"
        />
      </q-item>
    </q-list>
    <q-select
      outlined
      class="q-mt-sm"
      v-model="refDevData.deviceType"
      :options="DeviceTypeOptions"
      readonly
      map-options
      emit-value
      label="关联设备类型:"
    ></q-select>
    <q-input
      outlined
      class="q-mt-sm"
      v-model="refDevData.code"
      :readonly="true"
      label="关联设备:"
    ></q-input>
    <q-select
      outlined
      v-if="refDevData.deviceType === graphicData.RelatedRef.DeviceType.Turnout"
      class="q-mt-sm"
      v-model="refDevData.devicePort"
      :options="DevicePortOptions"
      :readonly="true"
      :map-options="true"
      :emit-value="true"
      @update:model-value="onUpdate"
      label="关联设备端口:"
    ></q-select>
    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="(id, index) in signalModel.centralizedStations"
          :key="index"
          removable
          @remove="removeStation(index)"
          square
          >{{ getName(id) }}</q-chip
        >
        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
      </template>
    </q-field>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { SignalData } from 'src/drawApp/graphics/SignalInteraction';
 import { Section } from 'src/graphics/section/Section';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { useDrawStore } from 'src/stores/draw-store';
 import { useQuasar } from 'quasar';
 import { computed } from 'vue';
 import AddCentralizedStationDialog from '../dialogs/AddCentralizedStationDialog.vue';
 import { Station } from 'src/graphics/station/Station';
 const drawStore = useDrawStore();
 const $q = useQuasar();
 const { data: signalModel, onUpdate } = useFormData(
  new SignalData(),
  drawStore.getDrawApp()
 );
 const refDevData = computed(() => {
  return signalModel.refDev.id
    ? {
        ...signalModel.refDev.toObject(),
        code: drawStore
          .getDrawApp()
          .queryStore.queryById<Section | Turnout>(signalModel.refDev.id).datas
          .code,
      }
    : {
        id: '',
        deviceType: graphicData.RelatedRef.DeviceType.Section,
        devicePort: graphicData.RelatedRef.DevicePort.A,
        code: '',
      };
 });
 const DeviceTypeOptions = [
  { label: '区段', value: graphicData.RelatedRef.DeviceType.Section },
  { label: '道岔', value: graphicData.RelatedRef.DeviceType.Turnout },
 ];
 const upDownOptions = [
  { label: '上行', value: graphicData.Direction.UP },
  { label: '下行', value: graphicData.Direction.DOWN },
 ];
 const SignalTypeOptions = [
  { label: '红绿', value: graphicData.Signal.Model.HL },
  { label: '红绿黄，封黄灯，无引导', value: graphicData.Signal.Model.HLU_FU },
  {
    label: '红绿黄，不封灯，有单黄，带引导',
    value: graphicData.Signal.Model.HLU_DU_YY,
  },
  {
    label: '红绿黄，不封灯，无单黄，带引导',
    value: graphicData.Signal.Model.HLU_YY,
  },
  {
    label: '红绿黄，封绿灯，有单黄，带引导',
    value: graphicData.Signal.Model.HLU_FL_DU_YY,
  },
  {
    label: '红绿黄，不封灯，有单黄，无引导',
    value: graphicData.Signal.Model.HLU_DU,
  },
  { label: '蓝白', value: graphicData.Signal.Model.AB },
  {
    label: '红白黄，不封灯，有单黄，无引导',
    value: graphicData.Signal.Model.HBU_DU,
  },
 ];
 const DevicePortOptions = [
  { label: 'A端', value: graphicData.RelatedRef.DevicePort.A },
  { label: 'B端', value: graphicData.RelatedRef.DevicePort.B },
  { label: 'C端', value: graphicData.RelatedRef.DevicePort.C },
 ];
 const directionOptions = [
  { label: '左行', value: 0 },
  { label: '右行', value: 1 },
 ];
 function removeStation(index: number) {
  signalModel.centralizedStations.splice(index, 1);
  onUpdate();
 }
 function addStation() {
  $q.dialog({
    title: '',
    message: '',
    component: AddCentralizedStationDialog,
    cancel: true,
    persistent: true,
  }).onOk((data: number) => {
    signalModel.centralizedStations.push(data);
    onUpdate();
  });
 }
 function getName(id: number) {
  try {
    const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
    return station.datas.code;
  } catch (error) {
    return id;
  }
 }
 </script>
--- a/src/components/draw-app/properties/electronicMap/StationProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/StationProperty.vue
@ -0,0 +1,126 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input outlined readonly v-model="stationModel.id" label="id" />
    <q-input
      outlined
      label="车站站名"
      type="textarea"
      @blur="onUpdate"
      v-model="stationModel.code"
      lazy-rules
      autogrow
    />
    <q-input
      outlined
      label="车站名"
      type="textarea"
      @blur="onUpdate"
      v-model="stationModel.stationName"
      lazy-rules
      autogrow
    />
    <q-input
      outlined
      label="车站名拼音简写"
      type="textarea"
      @blur="onUpdate"
      v-model="stationModel.stationNameAcronym"
      lazy-rules
      autogrow
    />
    <q-list bordered separator class="rounded-borders">
      <q-item no-wrap class="q-gutter-y-sm column">
        <template v-if="stationModel.kilometerSystem">
          <div>公里标配置</div>
          <q-input
            outlined
            class="q-mt-md"
            v-model="stationModel.kilometerSystem.coordinateSystem"
            @blur="onUpdate"
            label="坐标系"
          ></q-input>
          <q-input
            outlined
            class="q-mt-md"
            v-model.number="stationModel.kilometerSystem.kilometer"
            type="number"
            @blur="onUpdate"
            label="公里标(mm):"
          />
          <q-select
            outlined
            class="q-mt-md"
            v-model="stationModel.kilometerSystem.direction"
            :options="directionOptions"
            map-options
            emit-value
            @update:model-value="onUpdate"
            label="方向"
          ></q-select>
        </template>
      </q-item>
    </q-list>
    <q-toggle
      v-model="stationModel.concentrationStations"
      label="是否集中站"
      emit-value
      @update:model-value="onUpdate"
    />
    <q-toggle
      v-model="stationModel.depots"
      label="是否车辆段"
      emit-value
      @update:model-value="onUpdate"
    />
    <q-select
      v-if="stationModel.concentrationStations"
      outlined
      v-model="stationModel.manageStations"
      label="集中站管理的车站"
      multiple
      :options="optionsStations"
      map-options
      emit-value
      @update:model-value="onUpdate"
    />
  </q-form>
 </template>
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { StationData } from 'src/drawApp/graphics/electronicMap/StationInteraction';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
 import { onMounted, watchEffect } from 'vue';
 const drawStore = useDrawStore();
 const { data: stationModel, onUpdate } = useFormData(
  new StationData(),
  drawStore.getDrawApp()
 );
 const directionOptions = [
  { label: '左行', value: 0 },
  { label: '右行', value: 1 },
 ];
 let optionsStations: { label: string; value: number }[] = [];
 watchEffect(() => {
  if (
    stationModel.concentrationStations &&
    !stationModel.manageStations.includes(stationModel.id)
  ) {
    stationModel.manageStations.push(stationModel.id);
    onUpdate();
  }
 });
 onMounted(() => {
  optionsStations = drawStore
    .getDrawApp()
    .queryStore.queryByType<Station>(Station.Type)
    .map((g) => {
      return { label: g.datas.code, value: g.datas.id };
    });
 });
 </script>
--- a/src/components/draw-app/properties/electronicMap/TurnoutProperty.vue
+++ b/src/components/draw-app/properties/electronicMap/TurnoutProperty.vue
@ -0,0 +1,191 @@
 <template>
  <q-form class="q-gutter-sm">
    <q-input outlined readonly v-model="turnoutModel.id" label="id" />
    <q-input
      outlined
      v-model="turnoutModel.code"
      @blur="onUpdate"
      label="编号"
    />
    <q-list bordered separator class="rounded-borders">
      <q-item no-wrap class="q-gutter-y-sm column">
        <div>公里标配置</div>
        <q-input
          outlined
          class="q-mt-sm"
          v-model="turnoutModel.kilometerSystem.coordinateSystem"
          @blur="onUpdate"
          label="坐标系"
        ></q-input>
        <q-input
          outlined
          class="q-mt-sm"
          v-model.number="turnoutModel.kilometerSystem.kilometer"
          type="number"
          @blur="onUpdate"
          label="公里标(mm):"
        />
        <q-select
          outlined
          class="q-mt-sm"
          v-model="turnoutModel.kilometerSystem.direction"
          :options="directionOptions"
          :map-options="true"
          :emit-value="true"
          @update:model-value="onUpdate"
          label="方向"
        ></q-select>
      </q-item>
    </q-list>
    <q-select
      outlined
      class="q-mt-sm"
      v-model="turnoutModel.switchMachineType"
      :options="switchMachineTypeOptions"
      :map-options="true"
      :emit-value="true"
      label="转辙机型号"
      @update:model-value="onUpdate"
    ></q-select>
    <q-field class="q-mt-sm" outlined label="关联区段" readonly stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="code in sectionRelations"
          :key="code"
          square
          >{{ code }}</q-chip
        >
      </template>
    </q-field>
    <q-field class="q-mt-sm" outlined label="关联道岔" readonly stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="code in turnoutRelations"
          :key="code"
          square
          >{{ code }}</q-chip
        >
      </template>
    </q-field>
    <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
      <template #control>
        <q-chip
          color="primary"
          text-color="white"
          v-for="(id, index) in turnoutModel.centralizedStations"
          :key="index"
          removable
          @remove="removeStation(index)"
          square
          >{{ getName(id) }}</q-chip
        >
        <q-btn round color="primary" size="xs" icon="add" @click="addStation" />
      </template>
    </q-field>
  </q-form>
 </template>
 <script setup lang="ts">
 import { useDrawStore } from 'src/stores/electronicMap-draw-store';
 import { useQuasar } from 'quasar';
 import { computed } from 'vue';
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import AddCentralizedStationDialog from 'src/components/draw-app/dialogs/AddCentralizedStationDialog.vue';
 import { TurnoutData } from 'src/drawApp/graphics/electronicMap/TurnoutInteraction';
 import { electronicMapGraphicData } from 'src/protos/electronicMap_graphic_data';
 import { Turnout } from 'src/graphics/electronicMap/turnout/Turnout';
 import { Section } from 'src/graphics/electronicMap/section/Section';
 import { Station } from 'src/graphics/electronicMap/station/Station';
 const drawStore = useDrawStore();
 const $q = useQuasar();
 const { data: turnoutModel, onUpdate } = useFormData(
  new TurnoutData(),
  drawStore.getDrawApp()
 );
 const directionOptions = [
  { label: '左行', value: 0 },
  { label: '右行', value: 1 },
 ];
 const switchMachineTypeOptions = [
  {
    label: '请选择',
    value: electronicMapGraphicData.Turnout.SwitchMachineType.Unknown,
  },
  {
    label: 'ZDJ9(单机牵引)',
    value: electronicMapGraphicData.Turnout.SwitchMachineType.ZDJ9_Single,
  },
  {
    label: 'ZDJ9(双机牵引)',
    value: electronicMapGraphicData.Turnout.SwitchMachineType.ZDJ9_Double,
  },
 ];
 function removeStation(index: number) {
  turnoutModel.centralizedStations.splice(index, 1);
  onUpdate();
 }
 function addStation() {
  $q.dialog({
    title: '',
    message: '',
    component: AddCentralizedStationDialog,
    cancel: true,
    persistent: true,
  }).onOk((data: number) => {
    turnoutModel.centralizedStations.push(data);
    onUpdate();
  });
 }
 const sectionRelations = computed(() => {
  const turnout = drawStore.selectedGraphic as Turnout;
  const sectionRelations =
    turnout.relationManage.getRelationsOfGraphicAndOtherType(
      turnout,
      Section.Type
    );
  return sectionRelations.map(
    (relation) =>
      `${relation.getRelationParam(turnout).param}: ${
        relation.getOtherGraphic<Section>(turnout).datas.code
      }(${relation.getOtherRelationParam(turnout).param})`
  );
 });
 const turnoutRelations = computed(() => {
  const turnout = drawStore.selectedGraphic as Turnout;
  const turnoutRelations =
    turnout?.relationManage.getRelationsOfGraphicAndOtherType(
      turnout,
      Turnout.Type
    );
  return turnoutRelations.map(
    (relation) =>
      `${relation.getRelationParam(turnout).param}: ${
        relation.getOtherGraphic<Turnout>(turnout).datas.code
      }(${relation.getOtherRelationParam(turnout).param})`
  );
 });
 function getName(id: number) {
  try {
    const station = drawStore.getDrawApp().queryStore.queryById<Station>(id);
    return station.datas.code;
  } catch (error) {
    return id;
  }
 }
 </script>
--- a/src/components/draw-app/templates/LineTemplate.vue
+++ b/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>
--- a/src/configs/TokenManage.ts
+++ b/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 {
--- a/src/configs/cctvCamera.ts
+++ b/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,//商铺
 }
--- a/src/configs/iscsStyleConfig.ts
+++ b/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: '火灾报警',
+    menuName: 'Plan',
-    submenu: [
+    icon: 'svguse:../iscsMenuIcon.svg#icon-Plan',
-      { sunMenuName: '站台报警' },
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-Plan-active',
-      { sunMenuName: '站厅报警' },
+    sunMenu: [
-      { sunMenuName: '系统状态' },
+      { sunMenuName: '设备运行图', displayForm: DisplayForm.draw },
      { sunMenuName: '站厅布局图', displayForm: DisplayForm.draw },
      { sunMenuName: '站台布局图', displayForm: DisplayForm.draw },
      { sunMenuName: '出入口布局图', displayForm: DisplayForm.draw },
    ],
  },
  {
-    menuName: '机电',
+    menuName: 'PSCADA',
-    submenu: [
+    icon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA',
-      { sunMenuName: '大系统' },
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSCADA-active',
-      { sunMenuName: '小系统' },
+    sunMenu: [
-      { sunMenuName: '水系统' },
+      { sunMenuName: '一次图', displayForm: DisplayForm.draw },
-      { sunMenuName: '照明' },
+      { sunMenuName: '自动化系统图', displayForm: DisplayForm.draw },
-      { sunMenuName: '电、扶梯' },
+      { sunMenuName: '定值召唤', displayForm: DisplayForm.draw },
-      { sunMenuName: '给排水' },
+      { sunMenuName: '实时SOE', displayForm: DisplayForm.draw },
-      { sunMenuName: '模式' },
+      { sunMenuName: '历史SOE', displayForm: DisplayForm.draw },
-      { sunMenuName: '隧道通风' },
+      { sunMenuName: '光字幕', displayForm: DisplayForm.draw },
-      { sunMenuName: '时间表' },
+      { sunMenuName: '交流直屏', displayForm: DisplayForm.draw },
      { sunMenuName: '权限交接' },
      { sunMenuName: '传感器' },
      { sunMenuName: '车站网络' },
    ],
  },
  {
-    menuName: '广播',
+    menuName: 'BAS',
-    submenu: [{ sunMenuName: '子目录' }],
+    icon: 'svguse:../iscsMenuIcon.svg#icon-BAS',
-  },
+    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-BAS-active',
-  {
+    sunMenu: [
-    menuName: '乘客信息',
+      { sunMenuName: '大系统', displayForm: DisplayForm.draw },
-    submenu: [{ sunMenuName: '子目录' }],
+      { sunMenuName: '小系统', displayForm: DisplayForm.draw },
-  },
+      { sunMenuName: '隧道通风系统', displayForm: DisplayForm.draw },
-  {
+      { sunMenuName: '水系统', displayForm: DisplayForm.draw },
-    menuName: '闭路电视',
+      { sunMenuName: '给排水', displayForm: DisplayForm.draw },
-    submenu: [
+      { sunMenuName: '电扶梯', displayForm: DisplayForm.draw },
-      { sunMenuName: '车站控制' },
+      { sunMenuName: '照明系统', displayForm: DisplayForm.draw },
-      { sunMenuName: '车站时序' },
+      { sunMenuName: '传感器', displayForm: DisplayForm.draw },
-      { sunMenuName: '车站时序编辑' },
+      { sunMenuName: '导向标识/广告', displayForm: DisplayForm.draw },
-      { sunMenuName: '车站设备状态' },
+      { sunMenuName: '人防门', displayForm: DisplayForm.draw },
      { sunMenuName: 'BAS系统', displayForm: DisplayForm.draw },
      { sunMenuName: '模式控制', displayForm: DisplayForm.component },
      { sunMenuName: '时间表', displayForm: DisplayForm.draw },
      { sunMenuName: '操作场所切换', displayForm: DisplayForm.draw },
    ],
  },
  {
-    menuName: '屏蔽门',
+    menuName: 'FAS',
-    submenu: [{ sunMenuName: '屏蔽门' }],
+    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: '售检票',
+    menuName: 'TFDS',
-    submenu: [{ sunMenuName: '子目录' }],
+    icon: 'svguse:../iscsMenuIcon.svg#icon-TFDS',
    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-TFDS-active',
    sunMenu: [
      { sunMenuName: '感温光纤状态监视图', displayForm: DisplayForm.draw },
    ],
  },
  {
-    menuName: '门禁',
+    menuName: 'AFC',
-    submenu: [{ sunMenuName: '子目录' }],
+    icon: 'svguse:../iscsMenuIcon.svg#icon-AFC',
    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-AFC-active',
    sunMenu: [
      { sunMenuName: '自动售检票系统监视图', displayForm: DisplayForm.draw },
    ],
  },
  {
-    menuName: '防淹门',
+    menuName: 'CCTV',
-    submenu: [{ sunMenuName: '子目录' }],
+    icon: 'svguse:../iscsMenuIcon.svg#icon-CCTV',
    activeIcon: 'svguse:../iscsMenuIcon.svg#icon-CCTV-active',
    sunMenu: [
      { sunMenuName: '监控布局图', displayForm: DisplayForm.component },
      { sunMenuName: 'CCTV设备布局图', displayForm: DisplayForm.draw },
    ],
  },
  {
-    menuName: '网络状态',
+    menuName: 'PIS',
-    submenu: [{ sunMenuName: '子目录' }],
+    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,
      },
    ],
  },
 ];
--- a/src/drawApp/commonApp.ts
+++ b/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[];
+  commonGraphicStorage: {
-  iscsTexts: iscsGraphicData.IscsText[];
+    arrows: iscsGraphicData.Arrow[];
-  rects: iscsGraphicData.Rect[];
+    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;
  }
 }
--- a/src/drawApp/electronicMapApp.ts
+++ b/src/drawApp/electronicMapApp.ts
@ -0,0 +1,440 @@
 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,
  SectionTemplate,
 } from 'src/graphics/electronicMap/section/Section';
 import {
  OneClickGenerateDraw,
  OneClickGenerateTemplate,
 } from 'src/graphics/electronicMap/trainWindow/oneClickDrawAssistant';
 import { StationDraw } from 'src/graphics/electronicMap/station/StationDrawAssistant';
 import {
  Station,
  StationTemplate,
 } from 'src/graphics/electronicMap/station/Station';
 import { StationData } from './graphics/electronicMap/StationInteraction';
 import { ScreenDoorDraw } from 'src/graphics/electronicMap/screenDoor/ScreenDoorDrawAssistant';
 import {
  ScreenDoor,
  ScreenDoorTemplate,
 } from 'src/graphics/electronicMap/screenDoor/ScreenDoor';
 import { ScreenDoorData } from './graphics/electronicMap/ScreenDoorInteraction';
 import { SectionDraw } from 'src/graphics/electronicMap/section/SectionDrawAssistant';
 import { SectionData } from './graphics/electronicMap/SectionInteraction';
 import { TurnoutDraw } from 'src/graphics/electronicMap/turnout/TurnoutDrawAssistant';
 import {
  Turnout,
  TurnoutTemplate,
 } from 'src/graphics/electronicMap/turnout/Turnout';
 import { TurnoutData } from './graphics/electronicMap/TurnoutInteraction';
 import { AxleCountingDraw } from 'src/graphics/electronicMap/axleCounting/AxleCountingDrawAssistant';
 import {
  AxleCounting,
  AxleCountingTemplate,
 } from 'src/graphics/electronicMap/axleCounting/AxleCounting';
 import { AxleCountingData } from './graphics/electronicMap/AxleCountingInteraction';
 import { ConcentrationDividingLineDraw } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLineDrawAssistant';
 import {
  ConcentrationDividingLine,
  ConcentrationDividingLineTemplate,
 } from 'src/graphics/electronicMap/concentrationDividingLine/ConcentrationDividingLine';
 import { ConcentrationDividingLineData } from './graphics/electronicMap/ConcentrationDividingLineInteraction';
 import { SeparatorDraw } from 'src/graphics/electronicMap/separator/SeparatorDrawAssistant';
 import {
  Separator,
  SeparatorTemplate,
 } from 'src/graphics/electronicMap/separator/Separator';
 import { SeparatorData } from './graphics/electronicMap/SeparatorInteraction';
 export const drawLayerList = [
  // 图层列表  默认显示的图层defaultShow: true
  { label: '车站', value: Station.Type, defaultShow: true },
  { label: '站台', value: Platform.Type, defaultShow: true },
  { label: '屏蔽门', value: ScreenDoor.Type, defaultShow: true },
  { label: '区段', value: Section.Type, defaultShow: true },
  { label: '道岔', value: Turnout.Type, defaultShow: true },
  { label: '区段检测点', value: AxleCounting.Type, defaultShow: true },
  {
    label: '集中区分割线',
    value: ConcentrationDividingLine.Type,
    defaultShow: true,
  },
  { label: '分隔符', value: Separator.Type, defaultShow: true },
 ];
 function initShowLayer(app: IDrawApp) {
  const showTypeList: string[] = [];
  drawLayerList.forEach((item) => {
    if (item.defaultShow) {
      showTypeList.push(item.value);
    }
  });
  const alllGraphic = app.queryStore.getAllGraphics();
  alllGraphic.forEach((g) => {
    if (showTypeList.includes(g.type)) {
      g.visible = true;
    } else {
      g.visible = false;
    }
  });
  const drawStore = useDrawStore();
  drawStore.setShowLayer(showTypeList);
 }
 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: '全选',
 };
 const layerOptions: MenuItemOptions = {
  name: '显示 / 选择',
 };
 export const DefaultEmCanvasMenu = new ContextMenu({
  name: '绘制-画布菜单',
  groups: [
    {
      items: [UndoOptions, RedoOptions],
    },
    {
      items: [SelectAllOptions],
    },
    {
      items: [layerOptions],
    },
  ],
 });
 export function initElectronicMapDrawApp(): IDrawApp {
  electronicMapDrawApp = newDrawApp({
    dataLoader: loadElectronicMapDrawDatas,
  });
  const app = electronicMapDrawApp;
  new OneClickGenerateDraw(app, new OneClickGenerateTemplate()),
    new StationDraw(app, new StationTemplate(new StationData()));
  new PlatformDraw(app, new PlatformTemplate(new PlatformData()));
  new ScreenDoorDraw(app, new ScreenDoorTemplate(new ScreenDoorData()));
  new SectionDraw(app, new SectionTemplate(new SectionData()));
  new TurnoutDraw(app, new TurnoutTemplate(new TurnoutData()));
  new AxleCountingDraw(app, new AxleCountingTemplate(new AxleCountingData()));
  new ConcentrationDividingLineDraw(
    app,
    new ConcentrationDividingLineTemplate(new ConcentrationDividingLineData())
  );
  new SeparatorDraw(app, new SeparatorTemplate(new SeparatorData()));
  // 画布右键菜单
  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();
    };
    const drawStore = useDrawStore();
    layerOptions.handler = () => {
      drawStore.setShowLayerDialog(true);
    };
    DefaultEmCanvasMenu.open(e.global);
  });
  app.on('postdataloaded', () => {
    initShowLayer(app);
  });
  app.on('destroy', () => {
    generateAxleCountingConfig =
      new electronicMapGraphicData.GenerateAxleCountingConfig();
  });
  screenDoorConfig = new electronicMapGraphicData.ScreenDoorConfig();
  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;
    screenDoorConfig = storage.screenDoorConfig;
    storage.stations.forEach((station) => {
      datas.push(new StationData(station));
    });
    storage.Platforms.forEach((platform) => {
      datas.push(new PlatformData(platform));
    });
    storage.screenDoors.forEach((screenDoor) => {
      datas.push(new ScreenDoorData(screenDoor));
    });
    storage.section.forEach((section) => {
      datas.push(new SectionData(section));
    });
    storage.turnouts.forEach((turnout) => {
      datas.push(new TurnoutData(turnout));
    });
    storage.axleCountings.forEach((axleCounting) => {
      datas.push(new AxleCountingData(axleCounting));
    });
    storage.concentrationDividingLines.forEach((concentrationDividingLine) => {
      datas.push(new ConcentrationDividingLineData(concentrationDividingLine));
    });
    storage.separators.forEach((separator) => {
      datas.push(new SeparatorData(separator));
    });
    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 Station) {
      const stationData = g.saveData();
      storage.stations.push((stationData as StationData).data);
    } else if (g instanceof Platform) {
      const platformData = g.saveData();
      storage.Platforms.push((platformData as PlatformData).data);
    } else if (g instanceof ScreenDoor) {
      const screenDoorData = g.saveData();
      storage.screenDoors.push((screenDoorData as ScreenDoorData).data);
    } else if (g instanceof Section) {
      const sectionData = g.saveData();
      storage.section.push((sectionData as SectionData).data);
    } else if (g instanceof Turnout) {
      const turnoutData = g.saveData();
      storage.turnouts.push((turnoutData as TurnoutData).data);
    } else if (g instanceof AxleCounting) {
      const axleCountingData = g.saveData();
      storage.axleCountings.push((axleCountingData as AxleCountingData).data);
    } else if (g instanceof ConcentrationDividingLine) {
      const concentrationDividingLineData = g.saveData();
      storage.concentrationDividingLines.push(
        (concentrationDividingLineData as ConcentrationDividingLineData).data
      );
    } else if (g instanceof Separator) {
      const separatorData = g.saveData();
      storage.separators.push((separatorData as SeparatorData).data);
    }
  });
  storage.generateAxleCountingConfig = generateAxleCountingConfig;
  storage.screenDoorConfig = screenDoorConfig;
  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;
 }
 //屏蔽门配置--子门数量和编组列表
 let screenDoorConfig = new electronicMapGraphicData.ScreenDoorConfig();
 export function loadScreenDoorConfig() {
  return screenDoorConfig;
 }
 export function setScreenDoorConfig(
  newScreenDoorConfig: electronicMapGraphicData.ScreenDoorConfig
 ) {
  screenDoorConfig = newScreenDoorConfig;
 }
--- a/src/drawApp/fasApp.ts
+++ b/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;
 }
--- a/src/drawApp/graphics/BAS/EscalatorInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/BAS/VerticalElevatorInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/ButtonInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/CCTV/CCTVButtonInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/CircleInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/AcsInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/AfcInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/ElectricButterflyValveInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/ElectricFireExtinguishingValveInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/ElevatorLiftToTopInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/EmergencyLightingInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FasAlarmInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FasFailureControlHostInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FaultValveInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FireIntercommunicationSignalInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FirePumpInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FireShutterInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/FireValveInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/ManualAlarmButtonInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts
+++ b/src/drawApp/graphics/FAS/NonFirePowerSupplyInteraction.ts
@ -0,0 +1,44 @@
 import * as pb_1 from 'google-protobuf';
 import { GraphicDataBase } from '../GraphicDataBase';
 import {
  NonFirePowerSupply,
  INonFirePowerSupplyData,
 } from 'src/graphics/FAS/nonFirePowerSupply/NonFirePowerSupply';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 export class NonFirePowerSupplyData
  extends GraphicDataBase
  implements INonFirePowerSupplyData
 {
  constructor(data?: iscsGraphicData.NonFirePowerSupply) {
    let nonFirePowerSupply;
    if (data) {
      nonFirePowerSupply = data;
    } else {
      nonFirePowerSupply = new iscsGraphicData.NonFirePowerSupply({
        common: GraphicDataBase.defaultCommonInfo(NonFirePowerSupply.Type),
      });
    }
    super(nonFirePowerSupply);
  }
  public get data(): iscsGraphicData.NonFirePowerSupply {
    return this.getData<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);
  }
 }
--- a/src/drawApp/graphics/FAS/PressureSwitchInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts
+++ b/src/drawApp/graphics/FAS/SignalButterflyValveInteraction.ts
@ -0,0 +1,44 @@
 import * as pb_1 from 'google-protobuf';
 import { GraphicDataBase } from '../GraphicDataBase';
 import {
  SignalButterflyValve,
  ISignalButterflyValveData,
 } from 'src/graphics/FAS/signalButterflyValve/SignalButterflyValve';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 export class SignalButterflyValveData
  extends GraphicDataBase
  implements ISignalButterflyValveData
 {
  constructor(data?: iscsGraphicData.SignalButterflyValve) {
    let signalButterflyValve;
    if (data) {
      signalButterflyValve = data;
    } else {
      signalButterflyValve = new iscsGraphicData.SignalButterflyValve({
        common: GraphicDataBase.defaultCommonInfo(SignalButterflyValve.Type),
      });
    }
    super(signalButterflyValve);
  }
  public get data(): iscsGraphicData.SignalButterflyValve {
    return this.getData<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);
  }
 }
--- a/src/drawApp/graphics/FAS/SmokeDetectorInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/SprayPumpInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/StabilizedPressurePumpInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/StartPumpButtonInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/TemperatureCableInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/TemperatureDetectorInteraction.ts
+++ b/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);
  }
 }
--- a/src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts
+++ b/src/drawApp/graphics/FAS/WaterFlowIndicatorInteraction.ts
@ -0,0 +1,44 @@
 import * as pb_1 from 'google-protobuf';
 import { GraphicDataBase } from '../GraphicDataBase';
 import {
  WaterFlowIndicator,
  IWaterFlowIndicatorData,
 } from 'src/graphics/FAS/waterFlowIndicator/WaterFlowIndicator';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 export class WaterFlowIndicatorData
  extends GraphicDataBase
  implements IWaterFlowIndicatorData
 {
  constructor(data?: iscsGraphicData.WaterFlowIndicator) {
    let waterFlowIndicator;
    if (data) {
      waterFlowIndicator = data;
    } else {
      waterFlowIndicator = new iscsGraphicData.WaterFlowIndicator({
        common: GraphicDataBase.defaultCommonInfo(WaterFlowIndicator.Type),
      });
    }
    super(waterFlowIndicator);
  }
  public get data(): iscsGraphicData.WaterFlowIndicator {
    return this.getData<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);
  }
 }
--- a/src/drawApp/graphics/IscsTextContentInteraction.ts
+++ b/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 {
+  public get data(): iscsGraphicData.Text {
-    return this.getData<iscsGraphicData.IscsText>();
+    return this.getData<iscsGraphicData.Text>();
  }
  get code(): string {
--- a/src/drawApp/graphics/LineInteraction.ts
+++ b/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);
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
joylink_zhaoerwei	11516b8544	电子地图	2024-11-21 16:52:44 +08:00
joylink_zhaoerwei	013b907d13	电子地图	2024-11-19 16:39:41 +08:00
joylink_zhaoerwei	a4e63a4ab6	电子地图管理	2024-11-18 17:07:07 +08:00
joylink_fanyuhong	2544f5e131	代码调整	2024-11-14 14:23:30 +08:00
joylink_zhaoerwei	5400acf7e3	电子地图绘制备用	2024-11-13 17:59:00 +08:00
joylink_fanyuhong	c06acfd0b8	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtsa-client into develop	2024-11-12 13:41:21 +08:00
joylink_fanyuhong	3c41293f0b	获取用户id调整	2024-11-12 13:41:17 +08:00
joylink_zhaoerwei	fdca6c490b	密码去掉加盐	2024-11-12 13:18:57 +08:00
joylink_zhaoerwei	b429bf5ce3	登录注册备用	2024-11-12 10:51:32 +08:00
joylink_fanyuhong	1d2c1c337e	代码调整	2024-11-11 17:56:21 +08:00
joylink_fanyuhong	dee2b5ca7f	烟感设备调整	2024-11-11 17:30:55 +08:00
joylink_fanyuhong	f4812c7187	代码提交	2024-11-08 09:52:43 +08:00
joylink_fanyuhong	23ed471da1	代码暂提	2024-11-07 17:30:32 +08:00
joylink_fanyuhong	429d6679f4	问题调整	2024-11-06 21:12:19 +08:00
joylink_fanyuhong	28859d0fc1	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtsa-client into develop	2024-11-06 20:59:49 +08:00
joylink_fanyuhong	cffefa06c6	代码暂提	2024-11-06 20:59:43 +08:00
joylink_zhaoerwei	f76ec13940	模式控制暂提	2024-11-06 16:54:44 +08:00
joylink_fanyuhong	d353afa5dd	代码暂提	2024-11-05 18:05:09 +08:00
joylink_zhaoerwei	9e5905cb55	更新子模块	2024-10-31 16:58:01 +08:00
joylink_zhaoerwei	cac4f38d64	删除旧的子模块	2024-10-31 16:53:45 +08:00
joylink_zhaoerwei	a36b425b12	调整	2024-10-30 10:15:47 +08:00
joylink_fanyuhong	8260753cf7	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-29 13:29:38 +08:00
joylink_fanyuhong	3f240a7b57	代码提交	2024-10-29 13:29:36 +08:00
joylink_zhaoerwei	9e0bc3ea0b	屏蔽门系统图	2024-10-28 16:53:12 +08:00
joylink_fanyuhong	3c67d4b5b7	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-24 09:30:11 +08:00
joylink_fanyuhong	f5d87acd4c	fas设备添加	2024-10-24 09:29:44 +08:00
joylink_zhaoerwei	eb9d0734ae	垂直电梯备用	2024-10-23 15:51:18 +08:00
joylink_fanyuhong	afd27d4b3e	消防泵代码提交	2024-10-22 17:52:37 +08:00
joylink_fanyuhong	61911d9ee5	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-22 17:20:47 +08:00
joylink_fanyuhong	98b1db6290	设备添加	2024-10-22 17:16:24 +08:00
joylink_zhaoerwei	a7968d11da	bas自动扶梯备用	2024-10-21 18:03:30 +08:00
joylink_zhaoerwei	d16bedfbf4	绘制组件调整	2024-10-18 16:21:27 +08:00
joylink_fanyuhong	124c9a2784	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-17 17:52:03 +08:00
joylink_fanyuhong	b451f4fa3e	FAS新增设备	2024-10-17 17:52:02 +08:00
joylink_zhaoerwei	07b35b5360	cctv加分层	2024-10-17 14:50:52 +08:00
joylink_zhaoerwei	d03f30d4cc	CCTV设备布局图	2024-10-17 13:50:52 +08:00
joylink_fanyuhong	31d09306b4	调整icon	2024-10-17 11:45:40 +08:00
joylink_fanyuhong	cfc5adb953	调整警铃icon	2024-10-17 11:45:18 +08:00
joylink_fanyuhong	083c17edd1	添加火灾警铃设备	2024-10-17 11:31:38 +08:00
joylink_fanyuhong	dbed83df26	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-17 09:34:31 +08:00
joylink_fanyuhong	5bddef10cd	添加火灾报警主机	2024-10-17 09:32:55 +08:00
joylink_zhaoerwei	259d3518bb	增加button label颜色	2024-10-16 17:25:10 +08:00
joylink_zhaoerwei	3c91608189	通用的button-类似组件button	2024-10-16 17:09:36 +08:00
fan	f5bc7c9aa9	protoc	2024-10-16 16:55:57 +08:00
fan	7ab75c722e	fas数据调整	2024-10-16 16:54:53 +08:00
joylink_fanyuhong	d8c55a011b	添加FAS平面图分区	2024-10-16 14:01:58 +08:00
fan	9948e87fa0	protoc	2024-10-16 09:39:34 +08:00
joylink_zhaoerwei	702cc229a3	加滚动条	2024-10-15 18:16:18 +08:00
joylink_zhaoerwei	ed3392d378	绘制加组件显示	2024-10-15 17:37:56 +08:00
joylink_fanyuhong	1891981a23	抽屉调整	2024-10-15 16:50:36 +08:00
joylink_fanyuhong	391863ee21	修改icon图标	2024-10-15 09:55:43 +08:00
joylink_zhaoerwei	16230d77e4	ISCS底部报警	2024-10-14 17:12:22 +08:00
joylink_fanyuhong	0787c7419e	代码调整	2024-10-14 15:36:57 +08:00
joylink_zhaoerwei	aacfdf8b2d	完善绘制风格配置	2024-10-12 17:02:24 +08:00
joylink_fanyuhong	975a8a89aa	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-11 17:14:10 +08:00
joylink_fanyuhong	37c56e2962	删除fas遗留文件	2024-10-11 17:14:08 +08:00
joylink_zhaoerwei	38bc44f2f9	绘制选择bug赞提（粗处理）	2024-10-11 17:07:53 +08:00
joylink_zhaoerwei	8dc7214ceb	公共的图形——圆	2024-10-11 15:16:31 +08:00
joylink_fanyuhong	c5beb9fbfd	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-11 09:57:41 +08:00
joylink_fanyuhong	fd0bfb0ab2	同步数据调整	2024-10-11 09:52:46 +08:00
joylink_zhaoerwei	63eff006b0	修改矩形碰撞检测+动态加载绘制工具	2024-10-10 17:19:36 +08:00
joylink_fanyuhong	f6e0785633	代码调整	2024-10-10 16:04:18 +08:00
joylink_zhaoerwei	c0cc5fac14	修改protoc结构	2024-10-10 15:11:28 +08:00
joylink_fanyuhong	382b462880	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-10 10:46:56 +08:00
joylink_fanyuhong	e8eb0f5ef7	非编辑数据调整	2024-10-10 10:46:54 +08:00
joylink_zhaoerwei	0d66c5c89f	绘制bug修复	2024-10-10 10:05:48 +08:00
joylink_zhaoerwei	662d7260ca	公共的线条备用	2024-10-09 18:52:48 +08:00
joylink_fanyuhong	04caf21f2f	相同用户操作判断调整	2024-10-08 18:04:32 +08:00
joylink_fanyuhong	53335d35ba	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-10-08 17:40:25 +08:00
joylink_fanyuhong	b22e2393d6	同步调整	2024-10-08 17:38:42 +08:00
fan	cbed606d65	同步数据	2024-10-08 17:36:48 +08:00
joylink_zhaoerwei	f64bea41e2	增加icon	2024-10-08 17:32:17 +08:00
joylink_zhaoerwei	8afe793ea5	绘制调整	2024-09-29 18:43:11 +08:00
fan	d0f4d09591	执行protoc	2024-09-29 14:30:26 +08:00
fan	e6e79b7004	同步数据	2024-09-29 14:21:16 +08:00
joylink_zhaoerwei	c81a7db6cd	校验name	2024-09-27 14:42:53 +08:00
joylink_zhaoerwei	5c2bca34ee	同步proto	2024-09-27 14:22:11 +08:00
joylink_zhaoerwei	f7840ff0f3	绘制备用	2024-09-26 18:20:59 +08:00
joylink_zhaoerwei	888bbc83d6	用户管理+绘制管理的userName	2024-09-26 13:08:07 +08:00
joylink_zhaoerwei	320c1e92cc	新的ISCS数据结构实现加载赞提	2024-09-25 14:54:46 +08:00
joylink_fanyuhong	dede7f400f	绘图工具调整	2024-09-25 10:37:26 +08:00
joylink_zhaoerwei	4adcfacc12	增加更多筛选项	2024-09-24 16:42:11 +08:00
joylink_zhaoerwei	5888422322	Squashed commit of the following: commit `27fb1ee4ea` Author: joylink_fanyuhong <18706759286@163.com> Date: Tue Sep 24 14:05:41 2024 +0800 报错调整 commit `069615d05d` Author: joylink_fanyuhong <18706759286@163.com> Date: Tue Sep 24 14:04:30 2024 +0800 代码调整 commit `66c4ac33b3` Merge: `107d8a5` `b267859` Author: shengxuqiang <shengxuqiang@joylink.club> Date: Tue Sep 24 12:09:11 2024 +0800 Merge pull request '修改打包目录配置' (#3) from develop into local-test Reviewed-on: joylink/rtss-simulation-app-client#3 commit `107d8a50f1` Merge: `75797eb` `b01ee7c` Author: shengxuqiang <shengxuqiang@joylink.club> Date: Tue Sep 24 11:59:24 2024 +0800 Merge pull request '添加local-test环境打包配置' (#2) from develop into local-test Reviewed-on: joylink/rtss-simulation-app-client#2 commit `75797ebc40` Merge: `ff65d38` `1a4ae38` Author: shengxuqiang <shengxuqiang@joylink.club> Date: Tue Sep 24 11:52:28 2024 +0800 Merge pull request '添加local-test分支CICD配置' (#1) from develop into local-test Reviewed-on: joylink/rtss-simulation-app-client#1	2024-09-24 14:22:31 +08:00
joylink_zhaoerwei	4f7ba40f3e	目录调整	2024-09-24 13:21:29 +08:00
soul-walker	b267859368	修改打包目录配置	2024-09-24 12:08:38 +08:00
soul-walker	b01ee7c0b6	添加local-test环境打包配置	2024-09-24 11:58:50 +08:00
soul-walker	1a4ae38e56	Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop	2024-09-24 11:50:30 +08:00
soul-walker	6b4607088c	修改打包路径配置修改graphic-pixi依赖url 添加local-test分支CICD配置	2024-09-24 11:50:24 +08:00
joylink_zhaoerwei	91ceaa2227	url加token	2024-09-24 11:12:32 +08:00
		`@ -0,0 +1 @@`
							`Subproject commit 8d2f5c7506e63202847cab4bd6a935a7310aa000`
		`@ -1 +0,0 @@`
			`Subproject commit 4029b6c96f132115bba08c87bfd3470f3e2d872b`