Merge remote-tracking branch 'origin/develop' into local-test

commit 78b7b6be9f
Author: joylink_zhaoerwei <Bob_Engineer@163.com>
Date:   Fri Aug 30 10:13:13 2024 +0800

    手柄操作请求频率+显示位置百分比

.gitea/workflows/CI_local_test.yaml

@@ -0,0 +1,54 @@
+name: CI
+run-name: ${{ gitea.actor }} is testing out Gitea Actions
+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/rts-sim-testing-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/rts-sim-testing-client
+            rm -rf /usr/local/joylink/client/bjrtss
+            mkdir -p /usr/local/joylink/client
+            tar xz --strip 2 -C /usr/local/joylink/client -f dist-test.tar.gz
+      - run: echo "This job's status is ${{ job.status }}."

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "rts-sim-testing-message"]
 	path = rts-sim-testing-message
-	url = http://120.46.212.6:3000/joylink/rts-sim-testing-message.git
+	url = https://gitea.joylink.club/joylink/rts-sim-testing-message.git

package.json

@@ -11,8 +11,10 @@
     "test": "echo \"No test specified\" && exit 0",
     "dev": "quasar dev",
     "build": "quasar build",
-    "build:test": "set NODE_ENV=test&&quasar build",
-    "build:publish": "set NODE_ENV=publish&&quasar build",
+    "build:local": "URL_ENV=local_test quasar build",
+    "build:pxf": "URL_ENV=local_pxf quasar build",
+    "build:test": "URL_ENV=test quasar build",
+    "build:publish": "URL_ENV=publish quasar build",
     "protoc": "node scripts/proto.cjs",
     "sync": "node scripts/sync.cjs"
   },
@@ -22,7 +24,7 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.4.3",
     "google-protobuf": "^3.21.2",
-    "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.11",
+    "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",
@@ -37,6 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
     "autoprefixer": "^10.4.2",
+    "dotenv": "^16.4.5",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",

public/drawIcon.svg

@@ -27,20 +27,30 @@
     <path d="M20.7727 14.2727C20.7045 13.697 20.428 13.25 19.9432 12.9318C19.4583 12.6136 18.8636 12.4545 18.1591 12.4545C17.6439 12.4545 17.1932 12.5379 16.8068 12.7045C16.4242 12.8712 16.125 13.1004 15.9091 13.392C15.697 13.6837 15.5909 14.0152 15.5909 14.3864C15.5909 14.697 15.6648 14.964 15.8125 15.1875C15.964 15.4072 16.1572 15.5909 16.392 15.7386C16.6269 15.8826 16.8731 16.0019 17.1307 16.0966C17.3883 16.1875 17.625 16.2614 17.8409 16.3182L19.0227 16.6364C19.3258 16.7159 19.6629 16.8258 20.0341 16.9659C20.4091 17.1061 20.767 17.2973 21.108 17.5398C21.4527 17.7784 21.7367 18.0852 21.9602 18.4602C22.1837 18.8352 22.2955 19.2955 22.2955 19.8409C22.2955 20.4697 22.1307 21.0379 21.8011 21.5455C21.4754 22.053 20.9981 22.4564 20.3693 22.7557C19.7443 23.0549 18.9848 23.2045 18.0909 23.2045C17.2576 23.2045 16.536 23.0701 15.9261 22.8011C15.3201 22.5322 14.8428 22.1572 14.4943 21.6761C14.1496 21.1951 13.9545 20.6364 13.9091 20H15.3636C15.4015 20.4394 15.5492 20.803 15.8068 21.0909C16.0682 21.375 16.3977 21.5871 16.7955 21.7273C17.197 21.8636 17.6288 21.9318 18.0909 21.9318C18.6288 21.9318 19.1117 21.8447 19.5398 21.6705C19.9678 21.4924 20.3068 21.2462 20.5568 20.9318C20.8068 20.6136 20.9318 20.2424 20.9318 19.8182C20.9318 19.4318 20.8239 19.1174 20.608 18.875C20.392 18.6326 20.108 18.4356 19.7557 18.2841C19.4034 18.1326 19.0227 18 18.6136 17.8864L17.1818 17.4773C16.2727 17.2159 15.553 16.8428 15.0227 16.358C14.4924 15.8731 14.2273 15.2386 14.2273 14.4545C14.2273 13.803 14.4034 13.2348 14.7557 12.75C15.1117 12.2614 15.589 11.8826 16.1875 11.6136C16.7898 11.3409 17.4621 11.2045 18.2045 11.2045C18.9545 11.2045 19.6212 11.339 20.2045 11.608C20.7879 11.8731 21.25 12.2367 21.5909 12.6989C21.9356 13.161 22.1174 13.6856 22.1364 14.2727H20.7727Z" fill="white"/>
     <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
   </symbol>
+  <symbol id="icon-ibp-box" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
+    <path d="M16.4659 9.81818V20H15.233V9.81818H16.4659Z" fill="white"/>
+    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
+  </symbol>
   <symbol id="icon-gated-box" viewBox="0 0 35 34" fill="none">
     <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
     <path d="M14.4091 23V11.3636H18.3409C19.2538 11.3636 20 11.5284 20.5795 11.858C21.1629 12.1837 21.5947 12.625 21.875 13.1818C22.1553 13.7386 22.2955 14.3598 22.2955 15.0455C22.2955 15.7311 22.1553 16.3542 21.875 16.9148C21.5985 17.4754 21.1705 17.9223 20.5909 18.2557C20.0114 18.5852 19.2689 18.75 18.3636 18.75H15.5455V17.5H18.3182C18.9432 17.5 19.4451 17.392 19.8239 17.1761C20.2027 16.9602 20.4773 16.6686 20.6477 16.3011C20.822 15.9299 20.9091 15.5114 20.9091 15.0455C20.9091 14.5795 20.822 14.1629 20.6477 13.7955C20.4773 13.428 20.2008 13.1402 19.8182 12.9318C19.4356 12.7197 18.928 12.6136 18.2955 12.6136H15.8182V23H14.4091Z" fill="white"/>
     <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
   </symbol>
-  <symbol id="icon-garage-door-box" viewBox="0 0 35 34" fill="none">
-    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
-<path d="M17.1932 14C17.0838 13.6652 16.9396 13.3653 16.7607 13.1001C16.585 12.8317 16.3745 12.603 16.1293 12.4141C15.8873 12.2251 15.6122 12.081 15.304 11.9815C14.9957 11.8821 14.6577 11.8324 14.2898 11.8324C13.6866 11.8324 13.138 11.9882 12.6442 12.2997C12.1503 12.6113 11.7576 13.0703 11.4659 13.6768C11.1742 14.2834 11.0284 15.0275 11.0284 15.9091C11.0284 16.7907 11.1759 17.5348 11.4709 18.1413C11.7659 18.7479 12.1652 19.2069 12.669 19.5185C13.1728 19.83 13.7396 19.9858 14.3693 19.9858C14.9527 19.9858 15.4664 19.8615 15.9105 19.6129C16.358 19.361 16.706 19.0064 16.9545 18.549C17.2064 18.0883 17.3324 17.5464 17.3324 16.9233L17.7102 17.0028H14.6477V15.9091H18.5256V17.0028C18.5256 17.8414 18.3466 18.5705 17.9886 19.1903C17.634 19.8101 17.1435 20.2907 16.517 20.6321C15.8939 20.9702 15.178 21.1392 14.3693 21.1392C13.4678 21.1392 12.6757 20.9271 11.9929 20.5028C11.3134 20.0786 10.7831 19.4754 10.402 18.6932C10.0241 17.911 9.83523 16.983 9.83523 15.9091C9.83523 15.1037 9.94295 14.3795 10.1584 13.7365C10.3771 13.0902 10.6854 12.54 11.0831 12.0859C11.4808 11.6319 11.9515 11.2839 12.495 11.0419C13.0386 10.8 13.6368 10.679 14.2898 10.679C14.8267 10.679 15.3272 10.7602 15.7912 10.9226C16.2585 11.0817 16.6745 11.3087 17.0391 11.6037C17.407 11.8954 17.7135 12.245 17.9588 12.6527C18.2041 13.0571 18.3731 13.5062 18.4659 14H17.1932Z" fill="white"/>
-    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
-  </symbol>
   <symbol id="icon-esb-button" viewBox="0 0 35 34" fill="none">
-    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
-    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
-    <circle cx="17.5" cy="16.5" r="7.5" fill="white"/>
+    <rect x="1" y="1" width="31" height="30" stroke="white" stroke-width="2"/>
+    <line x1="0.0576497" y1="28.5011" x2="33.0333" y2="29.7694" stroke="white" stroke-width="3"/>
+    <path d="M13.233 20V9.81818H19.3778V10.9119H14.4659V14.3523H19.0597V15.446H14.4659V18.9062H19.4574V20H13.233Z" fill="white"/>
+  </symbol>
+  <symbol id="icon-hold-button" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="31" height="30" stroke="white" stroke-width="2"/>
+    <line x1="0.0576497" y1="28.5011" x2="33.0333" y2="29.7694" stroke="white" stroke-width="3"/>
+    <path d="M12.233 19V8.81818H13.4659V13.3523H18.8949V8.81818H20.1278V19H18.8949V14.446H13.4659V19H12.233Z" fill="white"/>
+  </symbol>
+  <symbol id="icon-unattenged-button" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="31" height="30" stroke="white" stroke-width="2"/>
+    <line x1="0.0576497" y1="28.5011" x2="33.0333" y2="29.7694" stroke="white" stroke-width="3"/>
+    <path d="M12.0824 21L9.2983 10.8182H10.5511L12.679 19.1108H12.7784L14.946 10.8182H16.3381L18.5057 19.1108H18.6051L20.733 10.8182H21.9858L19.2017 21H17.929L15.6818 12.8864H15.6023L13.3551 21H12.0824Z" fill="white"/>
   </symbol>
   <symbol id="icon-psl-light" viewBox="0 0 30 30" fill="none">
     <circle cx="15" cy="15" r="14.5" stroke="white"/>

quasar.config.js

@@ -7,7 +7,7 @@
 
 // Configuration for your app
 // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
-
+require('dotenv').config();
 const { configure } = require('quasar/wrappers');
 
 const BasePath = 'bjrtss';
@@ -55,6 +55,7 @@ module.exports = configure(function (/* ctx */) {
       env: {
         // test:测试服务器；publish：正式服务器；其他本地
         ENV_MODE: process.env.NODE_ENV,
+        URL_ENV: process.env.URL_ENV
       },
       target: {
         browser: ['es2020'],

rts-sim-testing-message

@@ -1 +1 @@
-Subproject commit a1534096aa1ed2566b93ffe7bfde76750de10a60
+Subproject commit a6293366a132680309a62855d4c4e19546ba3aa8

src/api/Simulation.ts

@@ -57,6 +57,7 @@ export async function addTrain(data: {
   configTrain: TrainConfigData;
   trainEndsA: TrainEnd;
   trainEndsB: TrainEnd;
+  trainCoachNum: number;
 }) {
   const response = await api.post(`${UriBase}/train/add`, data);
   return response.data;
@@ -184,6 +185,20 @@ export async function ibpKeyOperation(params: IbpKeyOperationParams) {
   return await api.post(`${UriBase}/ibp/key/operation`, params);
 }
 
+export interface TccOperationParams {
+  simulationId: string;
+  trainId: string;
+  deviceId: number;
+  controlType: request.TrainControl.TrainControlType;
+  controlButton?: object;
+  driverKey?: object;
+  switchKey?: object;
+  handler?: object;
+}
+export async function tccOperation(params: TccOperationParams) {
+  return await api.post(`${UriBase}/train/control`, params);
+}
+
 export function checkMapData(data: { mapProto: string }) {
   return api.post(`${UriBase}/check/data`, data);
 }
@@ -427,6 +442,38 @@ export async function updateTrainConn(data: {
   id: string;
   simulationId: string;
   connType: number;
+  typeName: string;
 }) {
   return await api.post(`${UriBase}/train/conn`, data);
 }
+
+/** 车库门参数修改 */
+export async function ckmUpdateParams(data: {
+  simulationId: string;
+  mapId: number;
+  deviceId: number;
+  operation: request.Ckm.Operation;
+  param: {
+    force: request.Ckm.Force;
+    fault: request.Ckm.Fault;
+  };
+}) {
+  return await api.put(`${UriBase}/ckm/operation`, data);
+}
+
+export async function xcjUpdateParams(data: {
+  simulationId: string;
+  mapId: number;
+  deviceId: number;
+  operation: request.Xcj.Operation;
+  param: {
+    fault: request.Xcj.Fault;
+  };
+}) {
+  return await api.put(`${UriBase}/xcj/operation`, data);
+}
+
+/** 列车取消连接 */
+export async function cancelTrainConn(data: { trainId: string; id: string }) {
+  return await api.delete(`${UriBase}/train/unconn/${data.trainId}/${data.id}`);
+}

src/api/TrainModelApi.ts

@@ -56,6 +56,11 @@ export interface TrainCreateParams {
   total_length: number;
   train_model: number;
   train_sets: string;
+  train_load: number;
+  train_max_speed: number;
+  train_max_acc: number;
+  train_max_brake: number;
+  train_emergency_brake: number;
   trainConfigData?: TrainConfigData;
   trainControlMapId: number;
 }

src/boot/axios.ts

@@ -67,6 +67,7 @@ export class ApiError {
 // for each client)
 const api = axios.create({ baseURL: getHttpBase() });
 let isOpenDialog = false; // 认证弹窗是否打开
+const quanXianDialog = false; // 权限提示弹窗是否打开
 
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
@@ -107,6 +108,23 @@ export default boot(({ app, router }) => {
           .onCancel(() => {
             isOpenDialog = false;
           });
+        // } else if (
+        //   err.response &&
+        //   err.response.status === 403 &&
+        //   !quanXianDialog
+        // ) {
+        //   quanXianDialog = true;
+        //   Dialog.create({
+        //     title: '无权限',
+        //     message: '你没有该页面访问权限',
+        //     persistent: true,
+        //   })
+        //     .onOk(() => {
+        //       quanXianDialog = false;
+        //     })
+        //     .onCancel(() => {
+        //       quanXianDialog = false;
+        //     });
       }
       return Promise.reject(ApiError.from(err));
     }

src/components/common/DraggableDialog.vue

@@ -16,6 +16,13 @@
       }"
       style="max-width: 2000px"
     >
+      <!-- <q-scroll-area
+        v-if="props.height"
+        id="draggable-dialog-scroll"
+        :style="`width: ${props.width}px;height: ${props.height}px`"
+        style="max-height: 90vh"
+      > -->
+      <div style="position: sticky; top: 0px; z-index: 9">
         <q-bar
           ref="headerRef"
           class="non-selectable q-gutter-l"
@@ -32,17 +39,39 @@
             {{ props.title }}
           </div>
           <q-space />
-        <div style="margin-right: 10px"><slot name="titleButton"></slot></div>
+          <div style="margin-right: 10px">
+            <slot name="titleButton"></slot>
+          </div>
           <q-btn dense flat icon="sym_o_close" v-close-popup></q-btn>
         </q-bar>
+      </div>
       <q-scroll-area
-        :style="`width: ${props.width}px; height: ${props.height}px;`"
+        v-if="props.height"
+        id="draggable-dialog-scroll"
+        :style="`width: ${dialogWidth}px;height: ${dialogHeight}px`"
+        style="max-height: calc(90vh - 100px)"
       >
         <slot></slot>
       </q-scroll-area>
-      <div :style="`width: ${props.width}px`">
       <slot name="footer"></slot>
+      <div
+        :style="`width: ${dialogWidth}px`"
+        style="position: sticky; bottom: 0px"
+      >
+        <slot name="sticky-footer"></slot>
       </div>
+      <resizable-div-width
+        v-if="resizableWidth"
+        :height="dialogHeight - 10"
+        @drapWidth="drapWidth"
+        @drapMouseUp="drapMouseUp"
+      />
+      <resizable-div-height
+        v-if="resizableHeight"
+        :width="dialogWidth - 10"
+        @drapHeight="drapHeight"
+        @drapMouseUp="drapMouseUp"
+      />
     </q-card>
   </q-dialog>
 </template>
@@ -50,12 +79,14 @@
 <script setup lang="ts">
 import { QBar, useDialogPluginComponent } from 'quasar';
 import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import ResizableDivWidth from './ResizableDivWidth.vue';
+import ResizableDivHeight from './ResizableDivHeight.vue';
 
 const emit = defineEmits({
   ...useDialogPluginComponent.emitsObject,
   show: () => true,
 });
-
+const fixed = ref(false);
 const props = withDefaults(
   defineProps<{
     title?: string;
@@ -67,6 +98,8 @@ const props = withDefaults(
     height?: number;
     bgColor?: string;
     bgBorder?: string;
+    resizableWidth?: boolean;
+    resizableHeight?: boolean;
   }>(),
   {
     width: 500,
@@ -75,6 +108,8 @@ const props = withDefaults(
     titleHeight: 36,
     fontSize: 20,
     fontColor: 'white',
+    resizableWidth: false,
+    resizableHeight: false,
   }
 );
 
@@ -92,6 +127,10 @@ const start = { x: 0, y: 0 };
 const startOffset = { x: 0, y: 0 };
 
 onMounted(() => {
+  dialogWidth.value = props.width;
+  lastDialogWidth = props.width;
+  dialogHeight.value = props.height;
+  lastDialogHeight = props.height;
   window.addEventListener('mousedown', onMouseDown);
 });
 
@@ -125,4 +164,31 @@ function onHide() {
   emit('hide');
   onDialogHide();
 }
+
+let lastDialogWidth = 0;
+const dialogWidth = ref(0);
+function drapWidth(width: number) {
+  if (
+    (dialogWidth.value > 300 && width > 0) ||
+    (dialogWidth.value < 1800 && width < 0)
+  ) {
+    dialogWidth.value = lastDialogWidth - width * 2 + 15;
+  }
+}
+
+let lastDialogHeight = 0;
+const dialogHeight = ref(0);
+function drapHeight(height: number) {
+  if (
+    (dialogHeight.value > 150 && height > 0) ||
+    (dialogHeight.value < 750 && height < 0)
+  ) {
+    dialogHeight.value = lastDialogHeight - height * 2 + 15;
+  }
+}
+
+function drapMouseUp() {
+  lastDialogWidth = dialogWidth.value;
+  lastDialogHeight = dialogHeight.value;
+}
 </script>

src/components/common/ResizableDivHeight.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 300,
+    height: 15,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapHeight', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disY = e.clientY - drapBox.value.offsetTop;
+  document.onmousemove = (e) => {
+    let top = e.clientY - disY;
+    emit('drapHeight', top);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: n-resize;
+}
+</style>

src/components/common/ResizableDivWidth.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="drapBox"
+    class="drapWidth"
+    :style="{
+      width: props.width + 'px',
+      height: props.height + 'px',
+    }"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    width?: number;
+    height?: number;
+  }>(),
+  {
+    width: 15,
+    height: 500,
+  }
+);
+
+const drapBox = ref();
+onMounted(() => {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+});
+const emit = defineEmits(['drapWidth', 'drapMouseUp']);
+function onMouseDown(e: MouseEvent) {
+  drapBox.value.onmousedown = () => {
+    return false;
+  };
+  if (!e.target) return;
+  const disX = e.clientX - drapBox.value.offsetLeft;
+  document.onmousemove = (e) => {
+    let left = e.clientX - disX;
+    emit('drapWidth', left);
+  };
+  document.onmouseup = () => {
+    emit('drapMouseUp');
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+}
+</script>
+
+<style scoped>
+.drapWidth {
+  position: absolute;
+  top: 0;
+  z-index: 9999;
+  background: red;
+  opacity: 0;
+  cursor: e-resize;
+}
+</style>

src/components/draw-app/DrawProperties.vue

@@ -139,18 +139,21 @@
               drawStore.selectedGraphicType === ConcentrationDividingLine.Type
             "
           />
-          <flood-gate-property
-            v-else-if="drawStore.selectedGraphicType === FloodGate.Type"
-          />
           <car-washing-property
             v-else-if="drawStore.selectedGraphicType === CarWashing.Type"
           ></car-washing-property>
           <garage-door-property
             v-else-if="drawStore.selectedGraphicType === GarageDoor.Type"
           ></garage-door-property>
-          <garage-door-box-property
-            v-else-if="drawStore.selectedGraphicType === GarageDoorBox.Type"
-          ></garage-door-box-property>
+          <flood-gate-property
+            v-else-if="drawStore.selectedGraphicType === FloodGate.Type"
+          ></flood-gate-property>
+          <hold-button-property
+            v-else-if="drawStore.selectedGraphicType === HoldButton.Type"
+          ></hold-button-property>
+          <unattenged-button-property
+            v-else-if="drawStore.selectedGraphicType === UnattengedButton.Type"
+          ></unattenged-button-property>
         </q-card-section>
       </template>
       <template v-else-if="drawStore.selectedGraphics.length > 1">
@@ -229,14 +232,16 @@ import { TrackLogicSection } from 'src/graphics/trackLogicSection/TrackLogicSect
 import MultipleSelectProperty from './properties/multipleSelectProperty.vue';
 import { DepartureTimer } from 'src/graphics/departureTimer/DepartureTimer';
 import DepartureTimerProperty from './properties/DepartureTimerProperty.vue';
-import FloodGateProperty from './properties/FloodGateProperty.vue';
-import { FloodGate } from 'src/graphics/floodGate/FloodGate';
 import GarageDoorProperty from './properties/GarageDoorProperty.vue';
 import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
 import CarWashingProperty from './properties/CarWashingProperty.vue';
 import { CarWashing } from 'src/graphics/carWashing/CarWashing';
-import GarageDoorBoxProperty from './properties/GarageDoorBoxProperty.vue';
-import { GarageDoorBox } from 'src/graphics/garageDoorBox/GarageDoorBox';
+import { FloodGate } from 'src/graphics/floodGate/FloodGate';
+import FloodGateProperty from './properties/FloodGateProperty.vue';
+import { HoldButton } from 'src/graphics/holdButton/HoldButton';
+import HoldButtonProperty from './properties/HoldButtonProperty.vue';
+import { UnattengedButton } from 'src/graphics/unattengedButton/UnattengedButton';
+import UnattengedButtonProperty from './properties/UnattengedButtonProperty.vue';
 
 const drawStore = useDrawStore();
 </script>

src/components/draw-app/DrawRelayCabinetProperties.vue

@@ -34,6 +34,9 @@
           ></signalFaultAlarm-property>
         </q-card-section>
       </template>
+      <template v-else-if="relayCabinetStore.selectedGraphics.length > 1">
+        <relay-multiple-select-property />
+      </template>
     </q-card>
   </div>
 </template>
@@ -49,6 +52,7 @@ import { PhaseFailureProtector } from 'src/graphics/phaseFailureProtector/PhaseF
 import SignalFaultAlarmProperty from './properties/SignalFaultAlarmProperty.vue';
 import { SignalFaultAlarm } from 'src/graphics/signalFaultAlarm/SignalFaultAlarm';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
+import RelayMultipleSelectProperty from './properties/RelayMultipleSelectProperty.vue';
 
 const relayCabinetStore = useRelayCabinetStore();
 </script>

src/components/draw-app/TccDrawProperties.vue

@@ -27,6 +27,9 @@
           <tcc-handle-property
             v-else-if="tccDrawStore.selectedGraphicType === TccHandle.Type"
           />
+          <tcc-light-property
+            v-else-if="tccDrawStore.selectedGraphicType === TccLight.Type"
+          />
         </q-card-section>
       </template>
     </q-card>
@@ -44,6 +47,8 @@ import { TccKey } from 'src/graphics/tccKey/TccKey';
 import TccKeyProperty from './properties/TccKeyProperty.vue';
 import { TccHandle } from 'src/graphics/tccHandle/TccHandle';
 import TccHandleProperty from './properties/TccHandleProperty.vue';
+import { TccLight } from 'src/graphics/tccLight/TccLight';
+import TccLightProperty from './properties/TccLightProperty.vue';
 
 const tccDrawStore = useTccDrawStore();
 </script>

src/components/draw-app/dialogs/AddTrainDialog.vue

@@ -79,18 +79,27 @@
             lazy-rules
             :rules="wheelDiameterRules"
           />
-          <q-card-actions align="right" class="text-primary">
+        </q-form>
+      </q-card-section>
+    </q-card>
+    <template v-slot:sticky-footer>
+      <div
+        style="
+          height: 45px;
+          line-height: 45px;
+          text-align: right;
+          background: #fff;
+        "
+      >
         <q-btn
           flat
           label="取消"
           @click="showAddTrainOperation = false"
           v-close-popup
         />
-            <q-btn flat label="确认" type="submit" :disable="!trainConfig" />
-          </q-card-actions>
-        </q-form>
-      </q-card-section>
-    </q-card>
+        <q-btn flat label="确认" @click="onCreate" :disable="!trainConfig" />
+      </div>
+    </template>
   </draggable-dialog>
 </template>
 
@@ -162,8 +171,14 @@ function onCreate() {
         trainSpeed: trainSpeed.value,
         wheelDiameter: wheelDiameter.value,
         trainLength: trainConfig.value.total_length,
+        trainLoad: trainConfig.value.train_load,
+        trainMaxSpeed: trainConfig.value.train_max_speed,
+        trainMaxAcc: trainConfig.value.train_max_acc,
+        trainMaxBrake: trainConfig.value.train_max_brake,
+        trainEmergencyBrake: trainConfig.value.train_emergency_brake,
         configTrain: trainConfig.value.trainConfigData as TrainConfigData,
         trainControlMapId: trainConfig.value.trainControlMapId,
+        trainCoachNum: parseInt(trainConfig.value.train_sets),
         trainEndsA: {
           radarCheckSpeedDiff: 0,
           radarCheckTime: 0,
@@ -209,6 +224,11 @@ const trainConfig = ref<TrainConfigItem | null>({
   total_length: 0,
   train_model: 0,
   train_sets: '',
+  train_load: 0,
+  train_max_speed: 0,
+  train_max_acc: 0,
+  train_max_brake: 0,
+  train_emergency_brake: 0,
   trainControlMapId: 0,
 });
 function setConfigVal(val: TrainConfigItem | null) {

src/components/draw-app/dialogs/CiCjList.vue

@@ -1,6 +1,18 @@
 <template>
-  <draggable-dialog seamless title="采集列表" :width="865" :height="485">
-    <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
+  <draggable-dialog
+    seamless
+    title="采集列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
+    <div
+      class="row no-wrap"
+      v-for="row in showSetCellMessage.rows"
+      :key="row"
+      :class="{ stickyRow: row == 1 }"
+    >
       <div
         class="ceil"
         :class="{
@@ -10,6 +22,10 @@
             col > 1 &&
             ciCjList?.cjList[col - 2].bitList[row - 2].refRelays.length,
           changeCellSize: col == 1,
+          clickHeightLight:
+            relayCabinetStore.editCiCjConfigIndex &&
+            relayCabinetStore.editCiCjConfigIndex.row == row - 1 &&
+            relayCabinetStore.editCiCjConfigIndex.col == col - 1,
         }"
         v-for="col in showSetCellMessage.cols"
         :key="col"
@@ -32,6 +48,12 @@
       </div>
     </div>
     <template v-slot:titleButton>
+      <q-btn
+        color="primary"
+        label="清空"
+        style="margin-right: 10px"
+        @click="clearCiCjListData"
+      />
       <q-btn
         color="primary"
         label="设置"
@@ -85,6 +107,7 @@ import {
   loadCiCjList,
   creatCiCjList,
   refRelaysListMap,
+  clearCiCjList,
 } from 'src/drawApp/relayCabinetLayoutApp';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
 import { Relay } from 'src/graphics/relay/Relay';
@@ -175,6 +198,14 @@ function updateMap() {
   });
 }
 
+function clearCiCjListData() {
+  clearCiCjList(setCellMessage.value.rows, setCellMessage.value.cols);
+  ciCjList = loadCiCjList();
+  updateMap();
+  setCellDialog.value = true;
+  setCellDialog.value = false;
+}
+
 const showTooltip = ref(false);
 function onMouseOver(e: MouseEvent) {
   if ((e.target as HTMLElement).clientHeight > 30) {
@@ -195,10 +226,23 @@ function onMouseOver(e: MouseEvent) {
   word-break: break-all;
   overflow: hidden;
 }
+.stickyRow {
+  position: sticky;
+  top: 0;
+  z-index: 11;
+  background-color: #fff;
+}
 .changeCellSize {
   width: 40px;
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #fff;
 }
 .heightLight {
   background-color: orange;
 }
+.clickHeightLight {
+  background-color: red;
+}
 </style>

src/components/draw-app/dialogs/CiCjQdListStateDialog.vue

@@ -24,10 +24,12 @@
     <q-tab-panels v-model="tab" animated keep-alive>
       <template v-for="tabInfo in tabList" :key="tabInfo.label">
         <q-tab-panel :name="tabInfo.value">
+          <q-scroll-area :style="`width: ${dialogWidth - 32}px;height: 430px`">
             <div
               class="row no-wrap"
               v-for="row in showSetCellMessage.rows"
               :key="row"
+              :class="{ stickyRow: row == 1 }"
             >
               <div
                 class="ceil"
@@ -67,6 +69,7 @@
                 </div>
               </div>
             </div>
+          </q-scroll-area>
         </q-tab-panel>
       </template>
     </q-tab-panels>
@@ -117,9 +120,16 @@ let ciCjList = sceneCiCjQdListMap.get(
 let ciQdList = sceneCiCjQdListMap.get(
   `${lineStore.sceneName}+ciQdList`
 ) as relayCabinetGraphicData.CiQd;
-
+setCellMessage.value.rows = Math.max(ciCjList.dsCount, ciQdList.dsCount);
+setCellMessage.value.cols = Math.max(
+  ciCjList.cjList.length,
+  ciQdList.qdList.length
+);
 const dialogWidth = computed(() => {
+  if (setCellMessage.value.cols * 134 + 85 <= 1157) {
     return setCellMessage.value.cols * 134 + 85;
+  }
+  return 1157;
 });
 
 watch(
@@ -143,8 +153,6 @@ watch(
 );
 
 onMounted(() => {
-  setCellMessage.value.rows = ciCjList.dsCount;
-  setCellMessage.value.cols = ciCjList.cjList.length;
   tabList.value[0].ListMap = updateCiCjListMap();
   tabList.value[1].ListMap = updateCiQdListMap();
 });
@@ -227,7 +235,8 @@ function onMouseOver(e: MouseEvent) {
 
 <style scoped>
 .ceil {
-  width: 120px;
+  min-width: 120px;
+  max-width: 120px;
   height: 30px;
   border: solid 1px red;
   margin: 7px;
@@ -237,8 +246,18 @@ function onMouseOver(e: MouseEvent) {
   word-break: break-all;
   overflow: hidden;
 }
+.stickyRow {
+  position: sticky;
+  top: 0;
+  z-index: 11;
+  background-color: #fff;
+}
 .changeCellSize {
-  width: 40px;
+  min-width: 40px;
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #fff;
 }
 .CellGreen {
   border: solid 1px green;

src/components/draw-app/dialogs/CiQdList.vue

@@ -1,6 +1,18 @@
 <template>
-  <draggable-dialog seamless title="驱动列表" :width="865" :height="485">
-    <div class="row no-wrap" v-for="row in showSetCellMessage.rows" :key="row">
+  <draggable-dialog
+    seamless
+    title="驱动列表"
+    :width="865"
+    :height="485"
+    resizableWidth
+    resizableHeight
+  >
+    <div
+      class="row no-wrap"
+      v-for="row in showSetCellMessage.rows"
+      :key="row"
+      :class="{ stickyRow: row == 1 }"
+    >
       <div
         class="ceil"
         :class="{
@@ -32,6 +44,12 @@
       </div>
     </div>
     <template v-slot:titleButton>
+      <q-btn
+        color="primary"
+        label="清空"
+        style="margin-right: 10px"
+        @click="clearCiQdListData"
+      />
       <q-btn
         color="primary"
         label="设置"
@@ -85,6 +103,7 @@ import {
   loadCiQdList,
   creatCiQdList,
   refRelaysListMap,
+  clearCiQdList,
 } from 'src/drawApp/relayCabinetLayoutApp';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
 import { Relay } from 'src/graphics/relay/Relay';
@@ -171,6 +190,14 @@ function updateMap() {
   });
 }
 
+function clearCiQdListData() {
+  clearCiQdList(setCellMessage.value.rows, setCellMessage.value.cols);
+  ciQdList = loadCiQdList();
+  updateMap();
+  setCellDialog.value = true;
+  setCellDialog.value = false;
+}
+
 const showTooltip = ref(false);
 function onMouseOver(e: MouseEvent) {
   if ((e.target as HTMLElement).clientHeight > 30) {
@@ -191,10 +218,23 @@ function onMouseOver(e: MouseEvent) {
   word-break: break-all;
   overflow: hidden;
 }
+.stickyRow {
+  position: sticky;
+  top: 0;
+  z-index: 11;
+  background-color: #fff;
+}
 .changeCellSize {
   width: 40px;
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #fff;
 }
 .heightLight {
   background-color: orange;
 }
+.clickHeightLight {
+  background-color: red;
+}
 </style>

src/components/draw-app/dialogs/CkmOperation.vue

@@ -0,0 +1,153 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <draggable-dialog
+    v-model="showCkmOperation"
+    seamless
+    :title="props.title"
+    :width="380"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <q-card>
+        <q-card-section>
+          <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+            <q-input
+              dense
+              outlined
+              readonly
+              label="名称"
+              v-model="props.code"
+            />
+            <div
+              class="q-gutter-sm"
+              style="border: 1px solid #ccc; border-radius: 3px"
+            >
+              <div>强制：</div>
+              <q-radio
+                v-for="option in ckmForceOption"
+                :key="option.value"
+                v-model="ckmForce"
+                :val="option.value"
+                :label="option.label"
+              />
+            </div>
+            <div
+              class="q-gutter-sm"
+              style="border: 1px solid #ccc; border-radius: 3px"
+            >
+              <div>设置故障：</div>
+              <q-radio
+                v-for="option in ckmFaultOption"
+                :key="option.value"
+                v-model="ckmFault"
+                :val="option.value"
+                :label="option.label"
+              />
+            </div>
+            <q-card-actions align="right" class="text-primary">
+              <q-btn
+                flat
+                label="取消"
+                @click="showCkmOperation = false"
+                v-close-popup
+              />
+              <q-btn flat label="确认" type="submit" />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { QForm } from 'quasar';
+import { ckmUpdateParams } from 'src/api/Simulation';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { request } from 'src/protos/request';
+import { useLineStore } from 'src/stores/line-store';
+import { errorNotify } from 'src/utils/CommonNotify';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  code: {
+    type: String,
+    required: true,
+  },
+  ckmForceProp: {
+    type: Number,
+    required: true,
+  },
+  ckmFaultProp: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+});
+const lineStore = useLineStore();
+const showCkmOperation = ref(true);
+const ckmForce = ref<request.Ckm.Force>(0);
+const ckmForceOption = [
+  {
+    label: '无强制',
+    value: request.Ckm.Force.F_NONE,
+  },
+  {
+    label: '强制开门',
+    value: request.Ckm.Force.F_KM,
+  },
+  {
+    label: '强制关门',
+    value: request.Ckm.Force.F_GM,
+  },
+];
+const ckmFault = ref<request.Ckm.Fault>(0);
+const ckmFaultOption = [
+  {
+    label: '无故障',
+    value: request.Ckm.Fault.FA_NONE,
+  },
+  {
+    label: '状态丢失',
+    value: request.Ckm.Fault.FA_State_Loss,
+  },
+];
+
+onMounted(() => {
+  ckmForce.value = props.ckmForceProp;
+  ckmFault.value = props.ckmFaultProp;
+});
+
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      const obj = {
+        simulationId: lineStore?.simulationId || '',
+        mapId: lineStore.mapId as number,
+        deviceId: props.id,
+        operation: request.Ckm.Operation.SetParams,
+        param: {
+          force: ckmForce.value,
+          fault: ckmFault.value,
+        },
+      };
+      ckmUpdateParams(obj).catch((e) => errorNotify('操作失败：' + e.title, e));
+      showCkmOperation.value = false;
+    }
+  });
+}
+
+onUnmounted(() => {
+  lineStore.deviceOpreratDialogInstance = null;
+});
+</script>
+<style scoped></style>

src/components/draw-app/dialogs/DeviceRelateRelayList.vue

@@ -59,6 +59,7 @@ const relayCabinetStore = useRelayCabinetStore();
 const $q = useQuasar();
 const tableRef = ref<QTable>();
 const deviceTypeMap = {
+  0: '区段',
   1: '道岔',
   5: '信号机',
   6: '车站',
@@ -68,6 +69,9 @@ const deviceTypeMap = {
   10: '电源屏',
   11: '车库门',
   12: '洗车机',
+  13: '防淹门',
+  14: '站台',
+  15: '零散',
 };
 const columns: QTable['columns'] = [
   {

src/components/draw-app/dialogs/KmChainData.vue

@@ -0,0 +1,161 @@
+<template>
+  <draggable-dialog
+    seamless
+    title="公里标设计-实测数据"
+    :width="600"
+    :height="0"
+  >
+    <template v-slot:titleButton>
+      <q-btn
+        color="primary"
+        label="新建"
+        style="margin-right: 10px"
+        @click="createKilometerConvert"
+      />
+    </template>
+    <template v-slot:footer>
+      <q-table
+        ref="tableRef"
+        style="max-height: 600px"
+        v-model:pagination="pagination"
+        :loading="loading"
+        :rows="rows"
+        :columns="columns"
+        @request="onRequest"
+        :rows-per-page-options="[5, 10, 20, 50]"
+      >
+        <template v-slot:body-cell="props">
+          <q-td :props="props" class="custom-column">
+            {{ props.value }}
+          </q-td>
+        </template>
+        <template v-slot:body-cell-operations="props">
+          <q-td :props="props">
+            <div class="q-gutter-sm row justify-center">
+              <q-btn
+                color="primary"
+                label="编辑"
+                @click="editData(props.rowIndex)"
+              />
+              <q-btn
+                color="red"
+                label="删除"
+                @click="deleteData(props.rowIndex)"
+              />
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { QTable, useQuasar } from 'quasar';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
+import {
+  loadKmChainDataList,
+  editKmChainData,
+  deleteKmChainData,
+} from 'src/drawApp/commonApp';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { useDrawStore } from 'src/stores/draw-store';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+
+const drawStore = useDrawStore();
+
+const $q = useQuasar();
+const tableRef = ref<QTable>();
+const columns: QTable['columns'] = [
+  {
+    name: 'designKm',
+    label: '设计公里标',
+    field: (row) => getKMName(row.designKm),
+    align: 'center',
+  },
+  {
+    name: 'actualKm',
+    label: '实际公里标',
+    field: (row) => getKMName(row.actualKm),
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+const rows = ref<graphicData.KilometerMarkCalibration[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const onRequest: QTable['onRequest'] = () => {
+  getList();
+};
+function getList() {
+  loading.value = true;
+  const refDatas = loadKmChainDataList();
+  rows.value = refDatas;
+  pagination.value.rowsNumber = refDatas.length;
+  pagination.value.rowsPerPage = refDatas.length;
+  loading.value = false;
+}
+
+function deleteData(index: number) {
+  const row = rows.value[index];
+  const name = getKMName(row.designKm);
+  $q.dialog({
+    message: `确定删除 "${name}" 吗?`,
+    cancel: true,
+  }).onOk(async () => {
+    try {
+      if (drawStore.editKmChainDataIndex == index) {
+        drawStore.setEditKmChainDataIndex(-1);
+      }
+      deleteKmChainData(index);
+      successNotify('删除数据成功！');
+    } catch (err) {
+      errorNotify('删除失败:', err);
+    } finally {
+      tableRef.value?.requestServerInteraction();
+    }
+  });
+}
+
+onMounted(() => {
+  getList();
+});
+
+watch(
+  () => drawStore.showEditKmChainData,
+  (val) => {
+    if (!val) {
+      tableRef.value?.requestServerInteraction();
+    }
+  }
+);
+function createKilometerConvert() {
+  drawStore.setEditKmChainDataIndex(loadKmChainDataList().length);
+}
+
+function editData(index: number) {
+  drawStore.setEditKmChainDataIndex(index);
+}
+
+function getKMName(km: KilometerSystem) {
+  return km.coordinateSystem + '_' + km.kilometer;
+}
+</script>
+
+<style scoped>
+.custom-column {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/draw-app/dialogs/LianSuoBianHao.vue

@@ -0,0 +1,801 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <draggable-dialog
+    seamless
+    title="联锁编号映射数据"
+    v-model="showLianSuoBianHao"
+    @hide="updateData"
+    :width="600"
+    :height="500"
+  >
+    <q-splitter v-model="splitterModel" style="height: 480px">
+      <template v-slot:before>
+        <q-tabs
+          v-model="tab"
+          vertical
+          class="text-teal"
+          @update:model-value="tabUpdate"
+        >
+          <q-tab name="station" label="联锁站" />
+          <q-tab name="turnout" label="道岔" />
+          <q-tab name="screenDoor" label="屏蔽门" />
+          <q-tab name="signal" label="信号机" />
+          <!-- <q-tab name="section" label="区段" /> -->
+          <q-tab name="acSection" label="计轴区段" />
+          <q-tab name="floodGate" label="防淹门" />
+          <q-tab name="spksSwitch" label="SPKS" />
+          <q-tab name="garageDoor" label="车库门" />
+          <q-tab name="carWashing" label="洗车机" />
+          <q-tab name="esbButton" label="紧急停车按钮" />
+          <q-tab name="holdButton" label="扣车按钮"></q-tab>
+          <q-tab name="unattengedButton" label="无人折返按钮"></q-tab>
+        </q-tabs>
+      </template>
+
+      <template v-slot:after>
+        <q-tab-panels
+          v-model="tab"
+          animated
+          swipeable
+          vertical
+          transition-prev="jump-up"
+          transition-next="jump-up"
+        >
+          <q-tab-panel name="station">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in stationOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="turnout">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in turnoutOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="screenDoor">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in screenDoorOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+          <q-tab-panel name="signal">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in signalOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <!-- <q-tab-panel name="section">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in sectionOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel> -->
+
+          <q-tab-panel name="acSection">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in acSectionOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="floodGate">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in floodGateOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="spksSwitch">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in spksSwitchOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="garageDoor">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in garageDoorOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="carWashing">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in carWashingOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="esbButton">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in esbButtonOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="holdButton">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in holdButtonOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="unattengedButton">
+            <div class="row" style="justify-content: space-around">
+              <template :key="item.id" v-for="item in unattengedButtonOptions">
+                <q-input
+                  outlined
+                  class="q-mt-sm"
+                  v-model.number="item.index"
+                  @update:model-value="
+                    (value) => {
+                      updateIndex(value as number, item.id);
+                    }
+                  "
+                  type="number"
+                  :label="item.name + '联锁编号：'"
+                />
+              </template>
+            </div>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { Station } from 'src/graphics/station/Station';
+import { useDrawStore } from 'src/stores/draw-store';
+import { Turnout } from 'src/graphics/turnout/Turnout';
+import { ScreenDoor } from 'src/graphics/screenDoor/ScreenDoor';
+import { Platform } from 'src/graphics/platform/Platform';
+import { Signal } from 'src/graphics/signal/Signal';
+import { Section } from 'src/graphics/section/Section';
+import { FloodGate } from 'src/graphics/floodGate/FloodGate';
+import { SpksSwitch } from 'src/graphics/spksSwitch/SpksSwitch';
+import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
+import { CarWashing } from 'src/graphics/carWashing/CarWashing';
+import { loadLianSuoData, setLianSuoData } from 'src/drawApp/commonApp';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { EsbButton } from 'src/graphics/esbButton/EsbButton';
+import { HoldButton } from 'src/graphics/holdButton/HoldButton';
+import { UnattengedButton } from 'src/graphics/unattengedButton/UnattengedButton';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
+import { AxleCounting } from 'src/graphics/axleCounting/AxleCounting';
+const drawStore = useDrawStore();
+
+const stationOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const turnoutOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const screenDoorOptions = ref<{ id: number; name: string; index: number }[]>(
+  []
+);
+const signalOptions = ref<{ id: number; name: string; index: number }[]>([]);
+// const sectionOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const acSectionOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const floodGateOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const spksSwitchOptions = ref<{ id: number; name: string; index: number }[]>(
+  []
+);
+const garageDoorOptions = ref<{ id: number; name: string; index: number }[]>(
+  []
+);
+const carWashingOptions = ref<{ id: number; name: string; index: number }[]>(
+  []
+);
+const esbButtonOptions = ref<{ id: number; name: string; index: number }[]>([]);
+const holdButtonOptions = ref<{ id: number; name: string; index: number }[]>(
+  []
+);
+const unattengedButtonOptions = ref<
+  { id: number; name: string; index: number }[]
+>([]);
+const tab = ref<string>('');
+const splitterModel = ref<number>(20);
+
+const showLianSuoBianHao = ref(true);
+const drawApp = drawStore.getDrawApp();
+let lianSuoMapData = new Map();
+
+onMounted(() => {
+  lianSuoMapData = new Map();
+  const lianSuoData = loadLianSuoData();
+  lianSuoData.stations.forEach((s) => {
+    lianSuoMapData.set(s.id, s.index);
+  });
+  lianSuoData.switchs.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.screenDoors.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.signals.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.acSections.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.garageDoors.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.spksSwitchs.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.floodGates.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.carWashing.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.esbButtons.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.holdButtons.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  lianSuoData.unattengedButtons.forEach((t) => {
+    lianSuoMapData.set(t.id, t.index);
+  });
+  stationUpdateData();
+  stationUpdateData();
+  turnoutUpdateData();
+  screenDoorUpdateData();
+  signalUpdateData();
+  acSectionUpdateData();
+  floodGateUpdateData();
+  spksSwitchUpdateData();
+  garageDoorUpdateData();
+  carWashingUpdateData();
+  esbButtonUpdateData();
+  holdButtonUpdateData();
+  unattengedButtonUpdateData();
+  tab.value = 'station';
+});
+
+function stationUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const stations = drawApp.queryStore.queryByType<Station>(Station.Type);
+  stations.forEach((sta) => {
+    if (sta.datas.concentrationStations) {
+      const index = lianSuoMapData.get(sta.datas.id) || 0;
+      list.push({
+        id: sta.datas.id,
+        name: sta.datas.stationName,
+        index: index,
+      });
+      stationOptions.value = list;
+    }
+  });
+}
+
+function turnoutUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const turnouts = drawApp.queryStore.queryByType<Turnout>(Turnout.Type);
+  turnouts.forEach((turnout) => {
+    let name = turnout.datas.code;
+    if (turnout.datas.centralizedStations.length > 0) {
+      turnout.datas.centralizedStations.forEach((id) => {
+        const station = drawApp.queryStore.queryById<Station>(id);
+        name = name + '-' + station.datas.stationName;
+      });
+    }
+    const index = lianSuoMapData.get(turnout.datas.id) || 0;
+    list.push({ id: turnout.datas.id, name: name, index: index });
+    turnoutOptions.value = list;
+  });
+}
+
+function screenDoorUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const screenDoors = drawApp.queryStore.queryByType<ScreenDoor>(
+    ScreenDoor.Type
+  );
+  screenDoors.forEach((screenDoor) => {
+    let name = screenDoor.datas.code;
+    if (screenDoor.datas.refPlatform) {
+      const stand = drawApp.queryStore.queryById<Platform>(
+        screenDoor.datas.refPlatform
+      );
+      name = name + '-' + stand.datas.code;
+      if (stand.datas.refStation) {
+        const station = drawApp.queryStore.queryById<Station>(
+          stand.datas.refStation
+        );
+        name = name + '-' + station.datas.stationName;
+      }
+    }
+    const index = lianSuoMapData.get(screenDoor.datas.id) || 0;
+    list.push({
+      id: screenDoor.datas.id,
+      name: name,
+      index: index,
+    });
+    screenDoorOptions.value = list;
+  });
+}
+
+function signalUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const signals = drawApp.queryStore.queryByType<Signal>(Signal.Type);
+  signals.forEach((signal) => {
+    let name = signal.datas.code;
+    if (signal.datas.centralizedStations.length > 0) {
+      signal.datas.centralizedStations.forEach((id) => {
+        const station = drawApp.queryStore.queryById<Station>(id);
+        name = name + '-' + station.datas.stationName;
+      });
+    }
+    const index = lianSuoMapData.get(signal.datas.id) || 0;
+    list.push({
+      id: signal.datas.id,
+      name: name,
+      index: index,
+    });
+    signalOptions.value = list;
+  });
+}
+
+function acSectionUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const acSections = drawApp.queryStore.queryByType<AxleCountingSection>(
+    AxleCountingSection.Type
+  );
+  acSections.forEach((acSection) => {
+    let name = acSection.datas.code;
+    if (acSection.datas.paRef) {
+      const axleCounting = drawApp.queryStore.queryById<AxleCounting>(
+        acSection.datas.paRef.id
+      );
+      if (axleCounting.datas.centralizedStations.length > 0) {
+        axleCounting.datas.centralizedStations.forEach((id) => {
+          const station = drawApp.queryStore.queryById<Station>(id);
+          name = name + '-' + station.datas.stationName;
+        });
+      }
+    }
+    const index = lianSuoMapData.get(acSection.datas.id) || 0;
+    list.push({
+      id: acSection.datas.id,
+      name: name,
+      index: index,
+    });
+    acSectionOptions.value = list;
+  });
+}
+
+function floodGateUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const floodGates = drawApp.queryStore.queryByType<FloodGate>(FloodGate.Type);
+  floodGates.forEach((floodGate) => {
+    let name = floodGate.datas.code;
+    if (floodGate.datas.centralizedStations.length > 0) {
+      floodGate.datas.centralizedStations.forEach((id) => {
+        const station = drawApp.queryStore.queryById<Station>(id);
+        name = name + '-' + station.datas.stationName;
+      });
+    }
+    const index = lianSuoMapData.get(floodGate.datas.id) || 0;
+    list.push({
+      id: floodGate.datas.id,
+      name: name,
+      index: index,
+    });
+    floodGateOptions.value = list;
+  });
+}
+
+function spksSwitchUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const spksSwitches = drawApp.queryStore.queryByType<SpksSwitch>(
+    SpksSwitch.Type
+  );
+  spksSwitches.forEach((spksSwitch) => {
+    let name = spksSwitch.datas.code;
+    if (spksSwitch.datas.refStand) {
+      const stand = drawApp.queryStore.queryById<Platform>(
+        spksSwitch.datas.refStand
+      );
+      name = name + '-' + stand.datas.code;
+      if (stand.datas.refStation) {
+        const station = drawApp.queryStore.queryById<Station>(
+          stand.datas.refStation
+        );
+        name = name + '-' + station.datas.stationName;
+      }
+    }
+    const index = lianSuoMapData.get(spksSwitch.datas.id) || 0;
+    list.push({
+      id: spksSwitch.datas.id,
+      name: name,
+      index: index,
+    });
+    spksSwitchOptions.value = list;
+  });
+}
+
+function garageDoorUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const garageDoors = drawApp.queryStore.queryByType<GarageDoor>(
+    GarageDoor.Type
+  );
+  garageDoors.forEach((garageDoor) => {
+    let name = garageDoor.code;
+    if (garageDoor.datas.centralizedStations.length > 0) {
+      garageDoor.datas.centralizedStations.forEach((id) => {
+        const station = drawApp.queryStore.queryById<Station>(id);
+        name = name + '-' + station.datas.stationName;
+      });
+    }
+    const index = lianSuoMapData.get(garageDoor.datas.id) || 0;
+    list.push({
+      id: garageDoor.datas.id,
+      name: name,
+      index: index,
+    });
+    garageDoorOptions.value = list;
+  });
+}
+
+function carWashingUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const carWashings = drawApp.queryStore.queryByType<CarWashing>(
+    CarWashing.Type
+  );
+  carWashings.forEach((carWashing) => {
+    let name = carWashing.code;
+    if (carWashing.datas.centralizedStations.length > 0) {
+      carWashing.datas.centralizedStations.forEach((id) => {
+        const station = drawApp.queryStore.queryById<Station>(id);
+        name = name + '-' + station.datas.stationName;
+      });
+    }
+    const index = lianSuoMapData.get(carWashing.datas.id) || 0;
+    list.push({
+      id: carWashing.datas.id,
+      name: name,
+      index: index,
+    });
+    carWashingOptions.value = list;
+  });
+}
+function esbButtonUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const esbs = drawApp.queryStore.queryByType<EsbButton>(EsbButton.Type);
+  esbs.forEach((esb) => {
+    let name = esb.datas.code;
+    if (esb.datas.refStand) {
+      const stand = drawApp.queryStore.queryById<Platform>(esb.datas.refStand);
+      name = name + '-' + stand.datas.code;
+      if (stand.datas.refStation) {
+        const station = drawApp.queryStore.queryById<Station>(
+          stand.datas.refStation
+        );
+        name = name + '-' + station.datas.stationName;
+      }
+    }
+    const index = lianSuoMapData.get(esb.datas.id) || 0;
+    list.push({
+      id: esb.datas.id,
+      name: name,
+      index: index,
+    });
+    esbButtonOptions.value = list;
+  });
+}
+function holdButtonUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const holdButtons = drawApp.queryStore.queryByType<HoldButton>(
+    HoldButton.Type
+  );
+  holdButtons.forEach((holdButton) => {
+    let name = holdButton.datas.code;
+    if (holdButton.datas.refStand) {
+      const stand = drawApp.queryStore.queryById<Platform>(
+        holdButton.datas.refStand
+      );
+      name = name + '-' + stand.datas.code;
+      if (stand.datas.refStation) {
+        const station = drawApp.queryStore.queryById<Station>(
+          stand.datas.refStation
+        );
+        name = name + '-' + station.datas.stationName;
+      }
+    }
+    const index = lianSuoMapData.get(holdButton.datas.id) || 0;
+    list.push({
+      id: holdButton.datas.id,
+      name: name,
+      index: index,
+    });
+    holdButtonOptions.value = list;
+  });
+}
+
+function unattengedButtonUpdateData() {
+  const list: { id: number; name: string; index: number }[] = [];
+  const unattengedButtons = drawApp.queryStore.queryByType<UnattengedButton>(
+    UnattengedButton.Type
+  );
+  unattengedButtons.forEach((unattengedButton) => {
+    let name = unattengedButton.datas.code;
+    if (unattengedButton.datas.refStand) {
+      const stand = drawApp.queryStore.queryById<Platform>(
+        unattengedButton.datas.refStand
+      );
+      name = name + '-' + stand.datas.code;
+      if (stand.datas.refStation) {
+        const station = drawApp.queryStore.queryById<Station>(
+          stand.datas.refStation
+        );
+        name = name + '-' + station.datas.stationName;
+      }
+    }
+    const index = lianSuoMapData.get(unattengedButton.datas.id) || 0;
+    list.push({
+      id: unattengedButton.datas.id,
+      name: name,
+      index: index,
+    });
+    unattengedButtonOptions.value = list;
+  });
+}
+
+function tabUpdate() {
+  switch (tab.value) {
+    case 'station':
+      stationUpdateData();
+      break;
+    case 'turnout':
+      turnoutUpdateData();
+      break;
+    case 'screenDoor':
+      screenDoorUpdateData();
+      break;
+    case 'signal':
+      signalUpdateData();
+      break;
+    case 'acSection':
+      acSectionUpdateData();
+      break;
+    case 'floodGate':
+      floodGateUpdateData();
+      break;
+    case 'spksSwitch':
+      spksSwitchUpdateData();
+      break;
+    case 'garageDoor':
+      garageDoorUpdateData();
+      break;
+    case 'carWashing':
+      carWashingUpdateData();
+      break;
+    case 'esbButton':
+      esbButtonUpdateData();
+      break;
+    case 'holdButton':
+      holdButtonUpdateData();
+      break;
+    case 'unattengedButton':
+      unattengedButtonUpdateData();
+      break;
+  }
+}
+function updateData() {
+  const newLianSuoData = new graphicData.LianSuoData();
+  stationOptions.value.forEach((st) => {
+    newLianSuoData.stations.push(
+      new graphicData.LianSuoIndexData({ id: st.id, index: st.index })
+    );
+  });
+  turnoutOptions.value.forEach((tu) => {
+    newLianSuoData.switchs.push(
+      new graphicData.LianSuoIndexData({ id: tu.id, index: tu.index })
+    );
+  });
+  screenDoorOptions.value.forEach((sd) => {
+    newLianSuoData.screenDoors.push(
+      new graphicData.LianSuoIndexData({ id: sd.id, index: sd.index })
+    );
+  });
+  acSectionOptions.value.forEach((se) => {
+    newLianSuoData.acSections.push(
+      new graphicData.LianSuoIndexData({ id: se.id, index: se.index })
+    );
+  });
+  signalOptions.value.forEach((si) => {
+    newLianSuoData.signals.push(
+      new graphicData.LianSuoIndexData({ id: si.id, index: si.index })
+    );
+  });
+  spksSwitchOptions.value.forEach((ss) => {
+    newLianSuoData.spksSwitchs.push(
+      new graphicData.LianSuoIndexData({ id: ss.id, index: ss.index })
+    );
+  });
+  floodGateOptions.value.forEach((fg) => {
+    newLianSuoData.floodGates.push(
+      new graphicData.LianSuoIndexData({ id: fg.id, index: fg.index })
+    );
+  });
+  garageDoorOptions.value.forEach((gd) => {
+    newLianSuoData.garageDoors.push(
+      new graphicData.LianSuoIndexData({ id: gd.id, index: gd.index })
+    );
+  });
+  carWashingOptions.value.forEach((cw) => {
+    newLianSuoData.carWashing.push(
+      new graphicData.LianSuoIndexData({ id: cw.id, index: cw.index })
+    );
+  });
+  esbButtonOptions.value.forEach((eb) => {
+    newLianSuoData.esbButtons.push(
+      new graphicData.LianSuoIndexData({ id: eb.id, index: eb.index })
+    );
+  });
+  holdButtonOptions.value.forEach((hb) => {
+    newLianSuoData.holdButtons.push(
+      new graphicData.LianSuoIndexData({ id: hb.id, index: hb.index })
+    );
+  });
+  unattengedButtonOptions.value.forEach((ub) => {
+    newLianSuoData.unattengedButtons.push(
+      new graphicData.LianSuoIndexData({ id: ub.id, index: ub.index })
+    );
+  });
+  setLianSuoData(newLianSuoData);
+}
+function updateIndex(index: number, id: number) {
+  lianSuoMapData.set(id, index);
+}
+</script>
+<style scoped></style>

src/components/draw-app/dialogs/LoadTransponderData.vue

@@ -105,6 +105,9 @@ function onCreate() {
         const messageIndex = titleKeys.findIndex(
           (key) => title[key] === '报文（1023bits）'
         );
+        const originalCodeIndex = titleKeys.findIndex(
+          (key) => title[key] === '应答器编号'
+        );
         dataList.forEach((data, i) => {
           if (i > index) {
             const tranCode =
@@ -126,6 +129,9 @@ function onCreate() {
               datas.fixedUserTelegram = data[
                 titleKeys[userMessageIndex]
               ].replaceAll(' ', '');
+              datas.originalCode = data[
+                titleKeys[originalCodeIndex]
+              ].replaceAll(' ', '');
               transpnder.updateData(datas);
             }
           }

src/components/draw-app/dialogs/SetTrainLink.vue

@@ -38,10 +38,11 @@
 
 <script setup lang="ts">
 import { QForm } from 'quasar';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, onUnmounted } from 'vue';
 import DraggableDialog from 'src/components/common/DraggableDialog.vue';
 import { getCanLinkPlatForm, updateTrainConn } from 'src/api/Simulation';
 import { successNotify, errorNotify } from 'src/utils/CommonNotify';
+import { useLineStore } from 'src/stores/line-store';
 const props = defineProps({
   simulationId: {
     type: String,
@@ -52,22 +53,23 @@ const props = defineProps({
     required: true,
   },
 });
-const connType = ref<number>(0);
-const connectOptions = ref<{ label: string; value: number }[]>([]);
+const connType = ref<string | undefined>();
+const connectOptions = ref<{ label: string; value: string }[]>([]);
 
 const showLoadTransData = ref(true);
+const connectMap = new Map<string, number>();
 
 onMounted(() => {
   connectOptions.value = [];
   getCanLinkPlatForm(props.simulationId)
     .then((resp) => {
-      const list: { label: string; value: number }[] = [];
-      resp.data.forEach((element: { connType: number }) => {
-        if (element.connType === 1) {
-          list.push({ label: '半实物', value: 1 });
-        } else if (element.connType === 2) {
-          list.push({ label: 'PC仿真', value: 2 });
-        }
+      const list: { label: string; value: string }[] = [];
+      resp.data.forEach((element: { typeName: string; connType: number }) => {
+        list.push({
+          label: element.typeName,
+          value: element.typeName,
+        });
+        connectMap.set(element.typeName, element.connType);
       });
       connectOptions.value = list;
     })
@@ -82,7 +84,8 @@ function onCreate() {
     updateTrainConn({
       id: props.trainId + '',
       simulationId: props.simulationId,
-      connType: connType.value,
+      connType: connectMap.get(connType.value as string) || 0,
+      typeName: connType.value as string,
     })
       .then(() => {
         successNotify('列车连接成功！');
@@ -93,5 +96,8 @@ function onCreate() {
       });
   });
 }
+onUnmounted(() => {
+  useLineStore().deviceOpreratDialogInstance = null;
+});
 </script>
 <style scoped></style>

src/components/draw-app/dialogs/SetTrainParam.vue

@@ -8,7 +8,7 @@
     :height="722"
   >
     <q-card style="width: 1000px; height: auto">
-      <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+      <q-form ref="myForm" class="q-gutter-md">
         <div class="row">
           <div class="col-6">
             <div class="float-text">1端</div>
@@ -23,7 +23,7 @@
                       v-model.number="model.trainEndsA.radarCheckSpeedDiff"
                       clearable
                       @clear="() => (model.trainEndsA.radarCheckSpeedDiff = 0)"
-                      label="雷达测速差值(m/s)"
+                      label="雷达测速差值(km/h)"
                       hint=""
                     />
                   </div>
@@ -45,7 +45,7 @@
                       v-model.number="model.trainEndsA.radarOutSpeed"
                       clearable
                       @clear="() => (model.trainEndsA.radarOutSpeed = 0)"
-                      label="雷达速度输出(m/s)"
+                      label="雷达速度输出(km/h)"
                       hint=""
                     />
                   </div>
@@ -82,7 +82,7 @@
                       v-model.number="model.trainEndsA.accOutSpeed"
                       clearable
                       @clear="() => (model.trainEndsA.accOutSpeed = 0)"
-                      label="速传速度输出(m/s)"
+                      label="速传速度输出(km/h)"
                       hint=""
                     />
                   </div>
@@ -137,7 +137,7 @@
                       v-model.number="model.trainEndsB.radarCheckSpeedDiff"
                       clearable
                       @clear="() => (model.trainEndsB.radarCheckSpeedDiff = 0)"
-                      label="雷达测速差值(m/s)"
+                      label="雷达测速差值(km/h)"
                       hint=""
                     />
                   </div>
@@ -159,7 +159,7 @@
                       v-model.number="model.trainEndsB.radarOutSpeed"
                       clearable
                       @clear="() => (model.trainEndsB.radarOutSpeed = 0)"
-                      label="雷达速度输出(m/s)"
+                      label="雷达速度输出(km/h)"
                       hint=""
                     />
                   </div>
@@ -196,7 +196,7 @@
                       v-model.number="model.trainEndsB.accOutSpeed"
                       clearable
                       @clear="() => (model.trainEndsB.accOutSpeed = 0)"
-                      label="速传速度输出(m/s)"
+                      label="速传速度输出(km/h)"
                       hint=""
                     />
                   </div>
@@ -427,17 +427,29 @@
             </div>
           </div>
         </div>
-        <q-card-actions align="right" class="text-primary">
+        <!-- <q-card-actions align="right" class="text-primary">
+
+        </q-card-actions> -->
+      </q-form>
+    </q-card>
+    <template v-slot:sticky-footer>
+      <div
+        style="
+          height: 45px;
+          line-height: 45px;
+          text-align: right;
+          background: #fff;
+        "
+      >
         <q-btn
           flat
           label="取消"
           @click="showTrainParamOperation = false"
           v-close-popup
         />
-          <q-btn flat label="确认" type="submit" />
-        </q-card-actions>
-      </q-form>
-    </q-card>
+        <q-btn flat label="确认" @click="onCreate" />
+      </div>
+    </template>
   </draggable-dialog>
 </template>
 

src/components/draw-app/dialogs/XcjOperation.vue

@@ -0,0 +1,115 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<template>
+  <draggable-dialog
+    v-model="showXcjOperation"
+    seamless
+    title="洗车机设置参数"
+    :width="380"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <q-card>
+        <q-card-section>
+          <q-form ref="myForm" @submit="onCreate" class="q-gutter-md">
+            <q-input
+              dense
+              outlined
+              readonly
+              label="名称"
+              v-model="props.code"
+            />
+            <div
+              class="q-gutter-sm"
+              style="border: 1px solid #ccc; border-radius: 3px"
+            >
+              <div>设置故障：</div>
+              <q-radio
+                v-for="option in xcjFaultOption"
+                :key="option.value"
+                v-model="xcjFault"
+                :val="option.value"
+                :label="option.label"
+              />
+            </div>
+            <q-card-actions align="right" class="text-primary">
+              <q-btn
+                flat
+                label="取消"
+                @click="showXcjOperation = false"
+                v-close-popup
+              />
+              <q-btn flat label="确认" type="submit" />
+            </q-card-actions>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { QForm } from 'quasar';
+import { xcjUpdateParams } from 'src/api/Simulation';
+import DraggableDialog from 'src/components/common/DraggableDialog.vue';
+import { request } from 'src/protos/request';
+import { useLineStore } from 'src/stores/line-store';
+import { errorNotify } from 'src/utils/CommonNotify';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  code: {
+    type: String,
+    required: true,
+  },
+  xcjFaultProp: {
+    type: Number,
+    required: true,
+  },
+});
+const lineStore = useLineStore();
+const showXcjOperation = ref(true);
+const xcjFault = ref<request.Xcj.Fault>(0);
+const xcjFaultOption = [
+  {
+    label: '无故障',
+    value: request.Xcj.Fault.FA_NONE,
+  },
+  {
+    label: '故障',
+    value: request.Xcj.Fault.FA_Fault,
+  },
+];
+
+onMounted(() => {
+  xcjFault.value = props.xcjFaultProp;
+});
+
+const myForm = ref<QForm | null>(null);
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      const obj = {
+        simulationId: lineStore?.simulationId || '',
+        mapId: lineStore.mapId as number,
+        deviceId: props.id,
+        operation: request.Xcj.Operation.SetParams,
+        param: {
+          fault: xcjFault.value,
+        },
+      };
+      xcjUpdateParams(obj).catch((e) => errorNotify('操作失败：' + e.title, e));
+      showXcjOperation.value = false;
+    }
+  });
+}
+
+onUnmounted(() => {
+  lineStore.deviceOpreratDialogInstance = null;
+});
+</script>
+<style scoped></style>

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

@@ -14,6 +14,22 @@
       @blur="onUpdate"
       label="名称"
     />
+    <q-input
+      outlined
+      class="q-mt-sm"
+      mask="#"
+      v-model.number="carWashingModel.duanNum"
+      @blur="onUpdate"
+      label="段数"
+    />
+    <q-input
+      outlined
+      class="q-mt-sm"
+      :decimals="0"
+      v-model.number="carWashingModel.width"
+      @blur="onUpdate"
+      label="宽度"
+    />
     <q-select
       outlined
       style="margin-top: 10px"

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

@@ -60,6 +60,11 @@
           <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
           <q-btn label="返回" color="primary" @click="goBack" />
         </div>
+        <q-separator inset></q-separator>
+        <div class="q-gutter-sm q-pa-md row justify-center">
+          <q-btn label="添加位置" color="red" @click="addPosition" />
+          <q-btn label="删除位置" color="red" @click="deletePosition" />
+        </div>
       </q-form>
     </q-card>
   </div>
@@ -71,10 +76,15 @@ import { QForm, useQuasar } from 'quasar';
 import { JlGraphic } from 'jl-graphic';
 import {
   CiCjConfigCeil,
+  PressKeyForCiCjQd,
   useRelayCabinetStore,
 } from 'src/stores/relayCabinet-store';
 import { Relay } from 'src/graphics/relay/Relay';
-import { loadCiCjList } from 'src/drawApp/relayCabinetLayoutApp';
+import {
+  deleteCjDataPositionByIndex,
+  addCjDataPositionByIndex,
+  loadCiCjList,
+} from 'src/drawApp/relayCabinetLayoutApp';
 import { PhaseFailureProtector } from 'src/graphics/phaseFailureProtector/PhaseFailureProtector';
 import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
 
@@ -107,17 +117,28 @@ watch(
       selectGraphic.push(...selectFilter);
       selectGraphic = Array.from(new Set(selectGraphic));
       relayCabinetStore.getDrawApp().updateSelected(...selectGraphic);
-      collectionConfig.value.refRelaysCode = selectGraphic.map((g) => {
       const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+      collectionConfig.value.refRelaysCode = selectGraphic.map((g) => {
         const hasChoose = map
           .get(`${click.row}-${click.col}`)
           ?.find((cjDataItem) => cjDataItem.relayId == g.id);
-        const pos = hasChoose?.position || 0;
+        let isPressKeyPos = 0;
+        if (relayCabinetStore.currentPressKey == PressKeyForCiCjQd.alt) {
+          isPressKeyPos = 1;
+        }
+        const pos = hasChoose?.position || isPressKeyPos;
         return { code: (g as Relay).datas.code, pos };
       });
       collectionConfig.value.refRelays = selectGraphic.map(
         (g) => g.id
       ) as number[];
+      if (
+        relayCabinetStore.currentPressKey == PressKeyForCiCjQd.ctrl ||
+        relayCabinetStore.currentPressKey == PressKeyForCiCjQd.alt
+      ) {
+        onSubmit();
+        handleNextPosition();
+      }
     }
   }
 );
@@ -133,9 +154,24 @@ watch(
   }
 );
 
+//监听空格
+watch(
+  () => relayCabinetStore.currentPressKey,
+  (val) => {
+    if (val == PressKeyForCiCjQd.space1 || val == PressKeyForCiCjQd.space2) {
+      handleNextPosition();
+    }
+  }
+);
+
+let CiCjListRows = 0;
+let CiCjListCols = 0;
 onMounted(() => {
   onReset();
   getEditData();
+  const ciCjList = loadCiCjList();
+  CiCjListRows = ciCjList.dsCount;
+  CiCjListCols = ciCjList.cjList.length;
 });
 
 function getEditData() {
@@ -172,9 +208,7 @@ function updateMap(ciCjList: relayCabinetGraphicData.CiCj) {
 }
 
 const myForm = ref<QForm | null>(null);
-async function onSubmit() {
-  myForm.value?.validate().then(async (res) => {
-    if (res) {
+function onSubmit() {
   try {
     const ciCjList = loadCiCjList();
     const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
@@ -203,8 +237,6 @@ async function onSubmit() {
       showCollectionConfig.value = true;
     }, 0);
   }
-    }
-  });
 }
 
 function removeSelect(removeIndex: number) {
@@ -239,6 +271,36 @@ function goBack() {
   relayCabinetStore.showCiCjConfig = false;
 }
 
+function addPosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  addCjDataPositionByIndex(click.row - 1, click.col - 1);
+  relayCabinetStore.updateCiCjList = true;
+}
+
+function deletePosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  deleteCjDataPositionByIndex(click.row - 1, click.col - 1);
+  relayCabinetStore.updateCiCjList = true;
+}
+
+function handleNextPosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  let nestPos = {
+    row: click.row + 1,
+    col: click.col,
+  };
+  if (click.row + 1 <= CiCjListRows) {
+    relayCabinetStore.editCiCjConfigIndex = nestPos;
+  }
+  if (click.row + 1 > CiCjListRows && click.col < CiCjListCols) {
+    nestPos = {
+      row: 1,
+      col: click.col + 1,
+    };
+    relayCabinetStore.editCiCjConfigIndex = nestPos;
+  }
+}
+
 onUnmounted(() => {
   relayCabinetStore.showCiCjConfig = false;
 });

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

@@ -51,6 +51,11 @@
           <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
           <q-btn label="返回" color="primary" @click="goBack" />
         </div>
+        <q-separator inset></q-separator>
+        <div class="q-gutter-sm q-pa-md row justify-center">
+          <q-btn label="添加位置" color="red" @click="addPosition" />
+          <q-btn label="删除位置" color="red" @click="deletePosition" />
+        </div>
       </q-form>
     </q-card>
   </div>
@@ -62,10 +67,15 @@ import { QForm, useQuasar } from 'quasar';
 import { JlGraphic } from 'jl-graphic';
 import {
   CiCjConfigCeil,
+  PressKeyForCiCjQd,
   useRelayCabinetStore,
 } from 'src/stores/relayCabinet-store';
 import { Relay } from 'src/graphics/relay/Relay';
-import { loadCiQdList } from 'src/drawApp/relayCabinetLayoutApp';
+import {
+  addQdDataPositionByIndex,
+  deleteQdDataPositionByIndex,
+  loadCiQdList,
+} from 'src/drawApp/relayCabinetLayoutApp';
 import { PhaseFailureProtector } from 'src/graphics/phaseFailureProtector/PhaseFailureProtector';
 
 const relayCabinetStore = useRelayCabinetStore();
@@ -99,6 +109,13 @@ watch(
       collectionConfig.value.refRelays = selectGraphic.map(
         (g) => g.id
       ) as number[];
+      if (
+        relayCabinetStore.currentPressKey == PressKeyForCiCjQd.ctrl ||
+        relayCabinetStore.currentPressKey == PressKeyForCiCjQd.alt
+      ) {
+        onSubmit();
+        handleNextPosition();
+      }
     }
   }
 );
@@ -113,9 +130,24 @@ watch(
   }
 );
 
+//监听空格
+watch(
+  () => relayCabinetStore.currentPressKey,
+  (val) => {
+    if (val == PressKeyForCiCjQd.space1 || val == PressKeyForCiCjQd.space2) {
+      handleNextPosition();
+    }
+  }
+);
+
+let CiQdListRows = 0;
+let CiQdListCols = 0;
 onMounted(() => {
   onReset();
   getEditData();
+  const ciQdList = loadCiQdList();
+  CiQdListRows = ciQdList.dsCount;
+  CiQdListCols = ciQdList.qdList.length;
 });
 
 function getEditData() {
@@ -138,9 +170,7 @@ function getEditData() {
 }
 
 const myForm = ref<QForm | null>(null);
-async function onSubmit() {
-  myForm.value?.validate().then(async (res) => {
-    if (res) {
+function onSubmit() {
   try {
     const ciQdList = loadCiQdList();
     const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
@@ -162,8 +192,6 @@ async function onSubmit() {
       showCollectionConfig.value = true;
     }, 0);
   }
-    }
-  });
 }
 
 function removeSelect(removeIndex: number) {
@@ -198,6 +226,36 @@ function goBack() {
   relayCabinetStore.showCiCjConfig = false;
 }
 
+function addPosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  addQdDataPositionByIndex(click.row - 1, click.col - 1);
+  relayCabinetStore.updateCiCjList = true;
+}
+
+function deletePosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  deleteQdDataPositionByIndex(click.row - 1, click.col - 1);
+  relayCabinetStore.updateCiCjList = true;
+}
+
+function handleNextPosition() {
+  const click = relayCabinetStore.editCiCjConfigIndex as CiCjConfigCeil;
+  let nestPos = {
+    row: click.row + 1,
+    col: click.col,
+  };
+  if (click.row + 1 <= CiQdListRows) {
+    relayCabinetStore.editCiCjConfigIndex = nestPos;
+  }
+  if (click.row + 1 > CiQdListRows && click.col < CiQdListCols) {
+    nestPos = {
+      row: 1,
+      col: click.col + 1,
+    };
+    relayCabinetStore.editCiCjConfigIndex = nestPos;
+  }
+}
+
 onUnmounted(() => {
   relayCabinetStore.showCiCjConfig = false;
 });

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

@@ -26,14 +26,6 @@
       @update:model-value="onUpdate"
       label="右边关联的集中站"
     />
-    <q-toggle
-      v-model="
-        concentrationDividingLineModel.isOtherLineConcentrationDividingLine
-      "
-      label="是否与其它线的边界处"
-      emit-value
-      @update:model-value="onUpdate"
-    />
     <q-list bordered separator class="rounded-borders">
       <q-item
         v-for="sectionRelation in sectionRelations"

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

@@ -18,6 +18,14 @@
       @update:model-value="onUpdate"
       label="关联区段"
     ></q-select>
+    <q-select
+      outlined
+      class="q-mt-sm"
+      @blur="onUpdate"
+      v-model="floodGateModel.refPslMapCode"
+      :options="pslNameList"
+      label="关联PSL地图"
+    />
     <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
       <template #control>
         <q-chip
@@ -39,12 +47,14 @@
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive } from 'vue';
-import { Section } from 'src/graphics/section/Section';
+import { onMounted, reactive, ref } from 'vue';
 import { FloodGateData } from 'src/drawApp/graphics/FloodGateInteraction';
+import { Section } from 'src/graphics/section/Section';
 import AddCentralizedStationDialog from '../dialogs/AddCentralizedStationDialog.vue';
 import { useQuasar } from 'quasar';
 import { Station } from 'src/graphics/station/Station';
+import { getPublishList } from 'src/api/PublishApi';
+import { PictureType } from 'src/protos/picture';
 
 const drawStore = useDrawStore();
 const sectionList: { label: string; value: number }[] = reactive([]);
@@ -53,8 +63,20 @@ const { data: floodGateModel, onUpdate } = useFormData(
   new FloodGateData(),
   drawStore.getDrawApp()
 );
-
+const pslNameList = ref<string[]>([]);
 onMounted(() => {
+  const list2: string[] = [];
+  getPublishList({
+    type: PictureType.Psl,
+    category: useDrawStore().categoryType,
+  }).then((pslMapList) => {
+    if (pslMapList && pslMapList.length) {
+      pslMapList.forEach((item) => {
+        list2.push(item.name);
+      });
+    }
+    pslNameList.value = list2;
+  });
   const sections = drawStore
     .getDrawApp()
     .queryStore.queryByType<Section>(Section.Type);
@@ -65,12 +87,12 @@ onMounted(() => {
     });
   });
 });
-
+const $q = useQuasar();
 function removeStation(index: number) {
   floodGateModel.centralizedStations.splice(index, 1);
   onUpdate();
 }
-const $q = useQuasar();
+
 function addStation() {
   $q.dialog({
     title: '',

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

@@ -1,78 +0,0 @@
-<template>
-  <q-form>
-    <q-input
-      outlined
-      readonly
-      v-model="garageDoorBoxModel.id"
-      label="id"
-      hint=""
-    />
-    <q-input
-      outlined
-      class="q-mt-sm"
-      v-model="garageDoorBoxModel.code"
-      @blur="onUpdate"
-      label="编号"
-    />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      style="margin-top: 10px"
-      v-model="garageDoorBoxModel.refGarageDoorId"
-      :options="garageDoorList"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="关联屏蔽门"
-    ></q-select>
-    <q-select
-      outlined
-      class="q-mt-sm"
-      @blur="onUpdate"
-      v-model="garageDoorBoxModel.refPslMapCode"
-      :options="pslNameList"
-      label="关联PSL地图"
-    />
-  </q-form>
-</template>
-
-<script setup lang="ts">
-import { GarageDoorBoxData } from 'src/drawApp/graphics/GarageDoorBoxInteraction';
-import { useFormData } from 'src/components/DrawAppFormUtils';
-import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, ref } from 'vue';
-import { getPublishList } from 'src/api/PublishApi';
-import { PictureType } from 'src/protos/picture';
-import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
-
-const { data: garageDoorBoxModel, onUpdate } = useFormData(
-  new GarageDoorBoxData(),
-  useDrawStore().getDrawApp()
-);
-
-const garageDoorList: { label: string; value: number }[] = reactive([]);
-const pslNameList = ref<string[]>([]);
-onMounted(() => {
-  const list2: string[] = [];
-  getPublishList({
-    type: PictureType.Psl,
-    category: useDrawStore().categoryType,
-  }).then((pslMapList) => {
-    if (pslMapList && pslMapList.length) {
-      pslMapList.forEach((item) => {
-        list2.push(item.name);
-      });
-    }
-    pslNameList.value = list2;
-  });
-  const garageDoors = useDrawStore()
-    .getDrawApp()
-    .queryStore.queryByType<GarageDoor>(GarageDoor.Type);
-  garageDoors.forEach((p) => {
-    garageDoorList.push({
-      value: p.id,
-      label: `${p.datas.code}[${p.datas.id}]`,
-    });
-  });
-});
-</script>

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

@@ -24,6 +24,14 @@
       @update:model-value="onUpdate"
       label="关联区段"
     ></q-select>
+    <q-select
+      outlined
+      class="q-mt-sm"
+      @blur="onUpdate"
+      v-model="garageDoorModel.refPslMapCode"
+      :options="pslNameList"
+      label="关联PSL地图"
+    />
     <q-field class="q-mt-lg" outlined label="所属集中站" stack-label>
       <template #control>
         <q-chip
@@ -45,12 +53,14 @@
 <script setup lang="ts">
 import { useFormData } from 'src/components/DrawAppFormUtils';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { GarageDoorData } from 'src/drawApp/graphics/GarageDoorInteraction';
 import { Section } from 'src/graphics/section/Section';
 import AddCentralizedStationDialog from '../dialogs/AddCentralizedStationDialog.vue';
 import { useQuasar } from 'quasar';
 import { Station } from 'src/graphics/station/Station';
+import { getPublishList } from 'src/api/PublishApi';
+import { PictureType } from 'src/protos/picture';
 
 const drawStore = useDrawStore();
 const sectionList: { label: string; value: number }[] = reactive([]);
@@ -59,8 +69,20 @@ const { data: garageDoorModel, onUpdate } = useFormData(
   new GarageDoorData(),
   drawStore.getDrawApp()
 );
-
+const pslNameList = ref<string[]>([]);
 onMounted(() => {
+  const list2: string[] = [];
+  getPublishList({
+    type: PictureType.Psl,
+    category: useDrawStore().categoryType,
+  }).then((pslMapList) => {
+    if (pslMapList && pslMapList.length) {
+      pslMapList.forEach((item) => {
+        list2.push(item.name);
+      });
+    }
+    pslNameList.value = list2;
+  });
   const sections = drawStore
     .getDrawApp()
     .queryStore.queryByType<Section>(Section.Type);

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

@@ -0,0 +1,55 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      readonly
+      v-model="holdButtonModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      style="margin-top: 10px"
+      v-model="holdButtonModel.code"
+      @blur="onUpdate"
+      label="编号"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="holdButtonModel.refStand"
+      :options="platformList"
+      :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 { HoldButtonData } from 'src/drawApp/graphics/HoldButtonInteraction';
+import { Platform } from 'src/graphics/platform/Platform';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+const { data: holdButtonModel, onUpdate } = useFormData(
+  new HoldButtonData(),
+  drawStore.getDrawApp()
+);
+const platformList: { label: string; value: number }[] = reactive([]);
+
+onMounted(() => {
+  const platforms = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Platform>(Platform.Type);
+  platforms.forEach((p) => {
+    platformList.push({
+      value: p.id,
+      label: `${p.datas.code}`,
+    });
+  });
+});
+</script>

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

@@ -0,0 +1,194 @@
+<template>
+  <div v-if="showRangeConfig">
+    <q-card class="q-pa-sm" flat>
+      <q-card-section>
+        <div class="text-h6">{{ handleState }}公里标设计-实测数据</div>
+      </q-card-section>
+      <q-form
+        ref="myForm"
+        @submit="onSubmit"
+        @reset="onReset"
+        class="q-gutter-md"
+      >
+        <q-card class="q-pa-sm">
+          <q-card-section>
+            <div class="text-subtitle1">设计公里标</div>
+          </q-card-section>
+          <q-item-section no-wrap class="q-gutter-y-sm column">
+            <q-input
+              style="margin-top: 10px"
+              v-model="data.designKm.coordinateSystem"
+              label="坐标系"
+            ></q-input>
+            <q-select
+              outlined
+              v-model="data.designKm.direction"
+              :options="directionOptions"
+              :map-options="true"
+              :emit-value="true"
+              label="方向"
+            ></q-select>
+            <q-input
+              style="margin-top: 10px"
+              v-model.number="data.designKm.kilometer"
+              type="number"
+              label="公里标(mm):"
+            />
+          </q-item-section>
+        </q-card>
+        <q-card class="q-pa-sm">
+          <q-card-section>
+            <div class="text-subtitle1">实测公里标</div>
+          </q-card-section>
+          <q-item-section no-wrap class="q-gutter-y-sm column">
+            <q-input
+              style="margin-top: 10px"
+              v-model="data.actualKm.coordinateSystem"
+              label="坐标系"
+            ></q-input>
+            <q-select
+              outlined
+              v-model="data.actualKm.direction"
+              :options="directionOptions"
+              :map-options="true"
+              :emit-value="true"
+              label="方向"
+            ></q-select>
+            <q-input
+              style="margin-top: 10px"
+              v-model.number="data.actualKm.kilometer"
+              type="number"
+              label="公里标(mm):"
+            />
+          </q-item-section>
+        </q-card>
+
+        <div class="q-gutter-sm q-pa-md row justify-center">
+          <q-btn label="提交" type="submit" color="primary" class="q-mr-md" />
+          <q-btn label="重置" type="reset" color="primary" class="q-mr-md" />
+          <q-btn label="返回" color="primary" @click="goBack" />
+        </div>
+      </q-form>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from 'vue';
+import { QForm, useQuasar } from 'quasar';
+import { KilometerSystem } from 'src/graphics/signal/Signal';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import {
+  loadKmChainDataList,
+  createKmChainData,
+  editKmChainData,
+} from 'src/drawApp/commonApp';
+import { useDrawStore } from 'src/stores/draw-store';
+
+const $q = useQuasar();
+const showRangeConfig = ref(true);
+const handleState = ref('新建');
+const drawStore = useDrawStore();
+
+interface IKmChainData {
+  designKm: KilometerSystem;
+  actualKm: KilometerSystem;
+}
+
+const data = reactive<IKmChainData>({
+  designKm: {
+    coordinateSystem: 'MAIN_LINE',
+    kilometer: 0,
+    direction: 0,
+  },
+  actualKm: {
+    coordinateSystem: 'MAIN_LINE',
+    kilometer: 0,
+    direction: 0,
+  },
+});
+
+const directionOptions = [
+  { label: '左行', value: 0 },
+  { label: '右行', value: 1 },
+];
+
+onMounted(() => {
+  getData();
+});
+
+watch(
+  () => drawStore.editKmChainDataIndex,
+  (val) => {
+    if (val > -1) {
+      getData();
+    }
+  }
+);
+
+const myForm = ref<QForm | null>(null);
+async function onSubmit() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      try {
+        const designKm = new graphicData.KilometerSystem(data.designKm);
+        const actualKm = new graphicData.KilometerSystem(data.actualKm);
+        const obj = {
+          designKm,
+          actualKm,
+        };
+        const convert = new graphicData.KilometerMarkCalibration(
+          obj as graphicData.KilometerMarkCalibration
+        );
+        if (handleState.value == '新建') {
+          createKmChainData(convert);
+        } else {
+          editKmChainData(convert);
+        }
+        onReset();
+        showRangeConfig.value = false;
+        drawStore.setEditKmChainDataIndex(-1);
+      } catch (err) {
+        console.log(err);
+        $q.notify({
+          type: 'negative',
+          message: `${handleState.value}公里标设计-实测编辑失败！`,
+        });
+      }
+    }
+  });
+}
+
+function onReset() {
+  data.designKm.coordinateSystem = 'MAIN_LINE';
+  data.designKm.kilometer = 0;
+  data.designKm.direction = 0;
+  data.actualKm.coordinateSystem = 'MAIN_LINE';
+  data.actualKm.kilometer = 0;
+  data.actualKm.direction = 0;
+}
+
+function goBack() {
+  onReset();
+  drawStore.setEditKmChainDataIndex(-1);
+}
+
+function getData() {
+  const index = drawStore.editKmChainDataIndex;
+  const kmChainData = loadKmChainDataList()[index];
+  console.log(index, kmChainData, '=========');
+  if (kmChainData?.designKm || kmChainData?.actualKm) {
+    handleState.value = '编辑';
+  } else {
+    handleState.value = '新建';
+  }
+  data.designKm.coordinateSystem =
+    kmChainData?.designKm?.coordinateSystem || 'MAIN_LINE';
+  data.designKm.kilometer = kmChainData?.designKm?.kilometer || 0;
+  data.designKm.direction = kmChainData?.designKm?.direction || 0;
+  data.actualKm.coordinateSystem =
+    kmChainData?.actualKm?.coordinateSystem || 'MAIN_LINE';
+  data.actualKm.kilometer = kmChainData?.actualKm?.kilometer || 0;
+  data.actualKm.direction = kmChainData?.actualKm?.direction || 0;
+}
+</script>

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

@@ -88,12 +88,17 @@ const optionsType = [
   { label: '电源屏', value: graphicData.RelatedRef.DeviceType.PowerScreen },
   { label: '车库门', value: graphicData.RelatedRef.DeviceType.GarageDoor },
   { label: '洗车机', value: graphicData.RelatedRef.DeviceType.CarWashing },
+  { label: '防淹门', value: graphicData.RelatedRef.DeviceType.FloodGate },
+  { label: '区段', value: graphicData.RelatedRef.DeviceType.Section },
+  { label: '站台', value: graphicData.RelatedRef.DeviceType.Platform },
+  { label: '零散', value: graphicData.RelatedRef.DeviceType.LS },
 ];
 
 const noShowType = [
   graphicData.RelatedRef.DeviceType.SignalFaultAlarm,
   graphicData.RelatedRef.DeviceType.Breakers,
   graphicData.RelatedRef.DeviceType.PowerScreen,
+  graphicData.RelatedRef.DeviceType.LS,
 ];
 
 onMounted(() => {

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="q-gutter-sm" style="padding: 16px">
+    <q-select
+      outlined
+      v-model="defaultInitialPosition"
+      :options="defaultInitialPositionModel"
+      emitValue
+      mapOptions
+      label="继电器默认初始位置"
+    >
+      <template v-slot:after>
+        <q-btn label="设置" color="primary" @click="changeRelayPos" />
+      </template>
+    </q-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Relay } from 'src/graphics/relay/Relay';
+import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
+import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
+import { ref } from 'vue';
+
+const relayCabinetStore = useRelayCabinetStore();
+const defaultInitialPosition =
+  ref<relayCabinetGraphicData.CjDataItem.PostionType>(
+    relayCabinetGraphicData.CjDataItem.PostionType.NONE
+  );
+const defaultInitialPositionModel = [
+  {
+    label: 'Q',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.Q,
+  },
+  {
+    label: 'H',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.H,
+  },
+  {
+    label: 'NONE',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.NONE,
+  },
+];
+
+function changeRelayPos() {
+  const selectedRelays = relayCabinetStore.selectedGraphics?.filter(
+    (g) => g instanceof Relay
+  );
+  selectedRelays?.forEach(
+    (relay) =>
+      ((relay as Relay).datas.defaultInitialPosition =
+        defaultInitialPosition.value)
+  );
+}
+</script>

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

@@ -10,6 +10,15 @@
       label="编号"
       lazy-rules
     />
+    <q-input
+      outlined
+      v-model="relayModel.showCode"
+      @blur="onUpdate"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="展示的编号"
+      lazy-rules
+    />
     <q-select
       outlined
       v-model="relayModel.newModel"
@@ -19,6 +28,15 @@
       @update:model-value="onUpdate"
       label="型号"
     />
+    <q-select
+      outlined
+      v-model="relayModel.defaultInitialPosition"
+      :options="defaultInitialPositionModel"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="默认初始位置"
+    />
   </q-form>
 </template>
 
@@ -71,4 +89,19 @@ const newOptionsModel = [
     value: relayCabinetGraphicData.Relay.ModelType.JZXC_H18,
   },
 ];
+
+const defaultInitialPositionModel = [
+  {
+    label: 'Q',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.Q,
+  },
+  {
+    label: 'H',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.H,
+  },
+  {
+    label: 'NONE',
+    value: relayCabinetGraphicData.CjDataItem.PostionType.NONE,
+  },
+];
 </script>

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

@@ -24,17 +24,6 @@
       @update:model-value="onUpdate"
       label="关联站台"
     ></q-select>
-    <q-select
-      outlined
-      style="margin-top: 10px"
-      v-model="spksSwitchModel.refSections"
-      :options="sectionList"
-      :multiple="true"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="关联物理区段"
-    ></q-select>
   </q-form>
 </template>
 

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

@@ -5,7 +5,7 @@
       outlined
       v-model="tccButtonModel.code"
       @blur="onUpdate"
-      label="紧急制动按钮"
+      label="Tcc按钮"
       lazy-rules
     />
     <q-checkbox

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

@@ -40,5 +40,9 @@ const optionsKeyType = [
     label: '前后方向控制',
     value: tccGraphicData.TccKey.TccKeyType.frontAndRearDirectionalControl,
   },
+  {
+    label: '列车门模式',
+    value: tccGraphicData.TccKey.TccKeyType.trainDoorMode,
+  },
 ];
 </script>

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

@@ -0,0 +1,49 @@
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="tccLightModel.id" label="id" />
+    <q-input
+      outlined
+      v-model="tccLightModel.code"
+      @blur="onUpdate"
+      label="Tcc灯"
+      lazy-rules
+    />
+    <q-select
+      outlined
+      class="q-mt-sm"
+      v-model="tccLightModel.lightColor"
+      :options="optionsLightColor"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="灯颜色"
+    />
+    <q-checkbox
+      v-model="tccLightModel.activeLevel"
+      label="有效电平"
+      @update:model-value="onUpdate"
+    />
+    <q-checkbox
+      v-model="tccLightModel.initialState"
+      label="初始状态"
+      @update:model-value="onUpdate"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { useFormData } from 'src/components/DrawAppFormUtils';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+import { TccLightData } from 'src/drawApp/graphics/TccLightInteraction';
+import { useTccDrawStore } from 'src/stores/tcc-draw-store';
+
+const tccDrawStore = useTccDrawStore();
+const { data: tccLightModel, onUpdate } = useFormData(
+  new TccLightData(),
+  tccDrawStore.getDrawApp()
+);
+
+const optionsLightColor = [
+  { label: '绿色', value: tccGraphicData.TccElementColor.green },
+];
+</script>

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

@@ -40,6 +40,27 @@
         </template>
       </q-item>
     </q-list>
+    <q-input
+      outlined
+      class="q-mt-md"
+      v-model="transponderModel.originalCode"
+      @blur="onUpdate"
+      label="原编号"
+    />
+    <q-input
+      outlined
+      class="q-mt-md"
+      v-model="transponderModel.leuIndex"
+      @blur="onUpdate"
+      label="LEU索引"
+    />
+    <q-input
+      outlined
+      class="q-mt-md"
+      v-model="transponderModel.leuInsideIndex"
+      @blur="onUpdate"
+      label="LEU内部索引"
+    />
     <q-select
       outlined
       class="q-mt-md"
@@ -53,17 +74,17 @@
     <q-input
       outlined
       class="q-mt-md"
-      readonly
       autogrow
       v-model="transponderModel.fixedUserTelegram"
+      @blur="onUpdate"
       label="固定用户报文"
     />
     <q-input
       outlined
       class="q-mt-md"
-      readonly
       autogrow
       v-model="transponderModel.fixedTelegram"
+      @blur="onUpdate"
       label="固定报文"
     />
     <q-field class="q-mt-md" outlined label="关联区段" readonly stack-label>

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

@@ -0,0 +1,55 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      readonly
+      v-model="unattengedButtonModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      style="margin-top: 10px"
+      v-model="unattengedButtonModel.code"
+      @blur="onUpdate"
+      label="编号"
+    />
+    <q-select
+      outlined
+      style="margin-top: 10px"
+      v-model="unattengedButtonModel.refStand"
+      :options="platformList"
+      :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 { UnattengedButtonData } from 'src/drawApp/graphics/UnattengedButtonInteraction';
+import { Platform } from 'src/graphics/platform/Platform';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+const { data: unattengedButtonModel, onUpdate } = useFormData(
+  new UnattengedButtonData(),
+  drawStore.getDrawApp()
+);
+const platformList: { label: string; value: number }[] = reactive([]);
+
+onMounted(() => {
+  const platforms = drawStore
+    .getDrawApp()
+    .queryStore.queryByType<Platform>(Platform.Type);
+  platforms.forEach((p) => {
+    platformList.push({
+      value: p.id,
+      label: `${p.datas.code}`,
+    });
+  });
+});
+</script>

src/components/line-app/StateProperties.vue

@@ -28,6 +28,18 @@
       <transponder-state
         v-else-if="lineStore.selectedGraphicType === Transponder.Type"
       ></transponder-state>
+      <garage-door-state
+        v-else-if="lineStore.selectedGraphicType === GarageDoor.Type"
+      ></garage-door-state>
+      <flood-gate-state
+        v-else-if="lineStore.selectedGraphicType === FloodGate.Type"
+      ></flood-gate-state>
+      <car-washing-state
+        v-else-if="lineStore.selectedGraphicType === CarWashing.Type"
+      ></car-washing-state>
+      <axleCountingSection-state
+        v-else-if="lineStore.selectedGraphicType === AxleCountingSection.Type"
+      ></axleCountingSection-state>
     </div>
   </q-scroll-area>
 </template>
@@ -56,6 +68,14 @@ import SpksSwitchState from './states/SpksSwitchState.vue';
 import { SpksSwitch } from 'src/graphics/spksSwitch/SpksSwitch';
 import TransponderState from './states/TransponderState.vue';
 import { Transponder } from 'src/graphics/transponder/Transponder';
+import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
+import GarageDoorState from './states/GarageDoorState.vue';
+import { FloodGate } from 'src/graphics/floodGate/FloodGate';
+import FloodGateState from './states/FloodGateState.vue';
+import CarWashingState from './states/CarWashingState.vue';
+import { CarWashing } from 'src/graphics/carWashing/CarWashing';
+import AxleCountingSectionState from './states/AxleCountingSectionState.vue';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
 
 const lineStore = useLineStore();
 </script>

src/components/line-app/dialogs/ConnectInfoDialog.vue

@@ -42,6 +42,9 @@ enum Type {
   '未定义',
   '动力学',
   '半实物列车',
+  '列车PC仿真',
+  '联锁通信服务',
+  '计轴区段通信服务',
 }
 const columns: QTable['columns'] = [
   {
@@ -56,6 +59,12 @@ const columns: QTable['columns'] = [
     field: (row) => (row.state == 0 ? '正常' : '异常'),
     align: 'center',
   },
+  {
+    name: 'serviceName',
+    label: '服务描述',
+    field: 'serviceName',
+    align: 'center',
+  },
 ];
 const rows = ref<state.SimulationThirdPartyApiServiceState[]>([]);
 

src/components/line-app/infos/TrainInfo.vue

@@ -191,6 +191,8 @@ import { Dialog } from 'quasar';
 import { state } from 'src/protos/device_state';
 import SetTrainLink from 'src/components/draw-app/dialogs/SetTrainLink.vue';
 import { useTccStore } from 'src/stores/tcc-store';
+import { removeTrain, cancelTrainConn } from 'src/api/Simulation';
+import { errorNotify, successNotify } from 'src/utils/CommonNotify';
 
 interface KeyType {
   label: string;
@@ -203,7 +205,7 @@ const trainInfo = ref<ITrainState | null>();
 const list: KeyType[] = [
   { label: '列车索引', key: 'id' },
   { label: '连接状态', key: 'conn', formatFn: connStateFormat },
-  { label: '连接平台', key: 'connType', formatFn: connTypeFormat },
+  { label: '连接平台', key: 'typeName', formatFn: typeNameFormat },
   { label: '列车长度', key: 'trainLength', formatFn: trainLengthFormat },
   { label: '车头所在设备', key: 'headDeviceId', formatFn: getDeviveName },
   { label: '车头所在设备的偏移量', key: 'headOffset', formatFn: offsetFormat },
@@ -336,44 +338,52 @@ const list4: KeyType[] = [
   // { label: '尾车速传2速度值', key: 'tailSensorSpeed2', formatFn: speedFormat },
   { label: '1端速传1是否有效', key: 'aSpeedSensorEnableA', formatFn: upFormat },
   { label: '1端速传2是否有效', key: 'aSpeedSensorEnableB', formatFn: upFormat },
-  { label: '1端速度输出', key: 'aAccOutSpeed', formatFn: msFormat },
+  { label: '1端速度输出', key: 'aAccOutSpeed', formatFn: kmhFormat },
   { label: '2端速传1是否有效', key: 'bSpeedSensorEnableA', formatFn: upFormat },
   { label: '2端速传2是否有效', key: 'bSpeedSensorEnableB', formatFn: upFormat },
-  { label: '2端速度输出', key: 'bAccOutSpeed', formatFn: msFormat },
+  { label: '2端速度输出', key: 'bAccOutSpeed', formatFn: kmhFormat },
 ];
 const list5: KeyType[] = [
   // { label: '头车雷达速度值', key: 'headRadarSpeed', formatFn: speedFormat },
   // { label: '尾车雷达速度值', key: 'tailRadarSpeed', formatFn: speedFormat },
   { label: '1端雷达是否有效', key: 'aRadarEnable', formatFn: upFormat },
-  { label: '1端雷达测速差值', key: 'aRadarCheckSpeedDiff', formatFn: msFormat },
   {
-    label: '1端雷达检测时间(秒)',
+    label: '1端雷达测速差值',
+    key: 'aRadarCheckSpeedDiff',
+    formatFn: kmhFormat,
+  },
+  {
+    label: '1端雷达检测设置剩余时间(秒)',
     key: 'aRadarCheckTime',
     formatFn: timeFormat,
   },
-  { label: '1端雷达速度输出', key: 'aRadarOutSpeed', formatFn: msFormat },
+  { label: '1端雷达速度输出', key: 'aRadarOutSpeed', formatFn: kmhFormat },
   { label: '2端雷达是否有效', key: 'bRadarEnable', formatFn: upFormat },
-  { label: '2端雷达测速差值', key: 'bRadarCheckSpeedDiff', formatFn: msFormat },
   {
-    label: '2端雷达检测时间',
+    label: '2端雷达测速差值',
+    key: 'bRadarCheckSpeedDiff',
+    formatFn: kmhFormat,
+  },
+  {
+    label: '2端雷达检测设置剩余时间',
     key: 'bRadarCheckTime',
     formatFn: timeFormat,
   },
-  { label: '2端雷达速度输出', key: 'bRadarOutSpeed', formatFn: msFormat },
+  { label: '2端雷达速度输出', key: 'bRadarOutSpeed', formatFn: kmhFormat },
 ];
 const list6: KeyType[] = [
   { label: '加速度', key: 'acceleration', formatFn: accelerationFormat },
   { label: '1端加速度计是否有效', key: 'aAccEnable', formatFn: upFormat },
   { label: '1端加速度测速差值', key: 'aAccCheckSpeedDiff', formatFn: msFormat },
   {
-    label: '1端加速度持续时间',
+    label: '1端加速度持续设置剩余时间',
     key: 'aAccCheckTime',
     formatFn: timeFormat,
   },
   { label: '2端加速度计是否有效', key: 'bAccEnable', formatFn: upFormat },
   { label: '2端加速度测速差值', key: 'bAccCheckSpeedDiff', formatFn: msFormat },
   {
-    label: '2端加速度持续时间',
+    label: '2端加速度持续设置剩余时间',
     key: 'bAccCheckTime',
     formatFn: timeFormat,
   },
@@ -393,6 +403,9 @@ function percentFormat(v: number) {
 function msFormat(v: number) {
   return v + 'm/s';
 }
+function kmhFormat(v: number) {
+  return v + 'km/h';
+}
 function timeFormat(v: number) {
   return v + 's';
 }
@@ -442,16 +455,21 @@ function trainLengthFormat(v: number) {
 function connStateFormat(v: boolean) {
   return v ? '已连接' : '未连接';
 }
-function connTypeFormat(v: state.TrainConnState.TrainConnType) {
-  if (v === state.TrainConnState.TrainConnType.NONE) {
-    return '无';
-  } else if (v === state.TrainConnState.TrainConnType.PC_SIM) {
-    return 'PC仿真';
-  } else if (v === state.TrainConnState.TrainConnType.VOBC) {
-    return '半实物';
-  } else {
-    return '无';
-  }
+// PC_SIM_A = 3; //PC仿真
+//     PC_SIM_B = 4; //PC仿真
+function typeNameFormat(v: string) {
+  return v;
+  // if (v === state.TrainConnState.TrainConnType.NONE) {
+  //   return '无';
+  // } else if (v === state.TrainConnState.TrainConnType.PC_SIM_A) {
+  //   return 'PC仿真A';
+  // } else if (v === state.TrainConnState.TrainConnType.VOBC) {
+  //   return '半实物';
+  // } else if (v === state.TrainConnState.TrainConnType.PC_SIM_B) {
+  //   return 'PC仿真B';
+  // } else {
+  //   return '无';
+  // }
 }
 function floatDecimal(v: number, x = 2) {
   // 小数精确位数
@@ -609,9 +627,17 @@ const options = [
     value: 2,
   },
   {
-    label: '列车驾驶台',
+    label: '取消连接',
     value: 3,
   },
+  {
+    label: '列车驾驶台',
+    value: 4,
+  },
+  {
+    label: '清除列车',
+    value: 5,
+  },
 ];
 
 function doTrainOperation(option: { label: string; value: number }) {
@@ -619,11 +645,35 @@ function doTrainOperation(option: { label: string; value: number }) {
     setTrain();
   } else if (option.value == 2) {
     linkTrain();
-  } else if (option.value == 3) {
+  } else if (option.value == 4) {
     openTccDialog();
+  } else if (option.value == 3) {
+    cancelTrainLink();
+  } else if (option.value == 5) {
+    clearTrain();
   }
 }
 
+function cancelTrainLink() {
+  if (!lineStore.selectedGraphics) return;
+  const train = lineStore.selectedGraphics[0] as Train;
+  Dialog.create({
+    title: '确认',
+    message: `确认取消【${train.states.id}】列车的连接吗?`,
+    cancel: true,
+  }).onOk(async () => {
+    cancelTrainConn({
+      id: lineStore.simulationId || '',
+      trainId: train.code,
+    })
+      .then(() => {
+        successNotify('列车取消连接成功！');
+      })
+      .catch((err) => {
+        errorNotify('列车取消连接失败！', err);
+      });
+  });
+}
 function linkTrain() {
   if (!lineStore.selectedGraphics) return;
   if (lineStore.deviceOpreratDialogInstance) return;
@@ -664,6 +714,28 @@ function openTccDialog() {
     trainInfo.value?.trainControlMapId as number
   );
 }
+
+function clearTrain() {
+  if (!lineStore.selectedGraphics) return;
+  const train = lineStore.selectedGraphics[0] as Train;
+  Dialog.create({
+    title: '确认',
+    message: `确认清除【${trainInfo.value?.id}】列车吗?`,
+    cancel: true,
+  }).onOk(async () => {
+    removeTrain({
+      simulationId: lineStore.simulationId as string,
+      mapId: lineStore.mapId as number,
+      trainId: train.code,
+    })
+      .then(() => {
+        successNotify('移除列车成功！');
+      })
+      .catch((err) => {
+        errorNotify('移除列车失败！', err);
+      });
+  });
+}
 </script>
 <style lang="scss" scoped>
 .q-item {

src/components/line-app/states/AxleCountingSectionState.vue

@@ -0,0 +1,115 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section class="flex justify-between">
+      <div class="text-h6">计轴区段状态</div>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(sectionState[item.key])
+                : sectionState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { AxleCountingSectionStates } from 'src/drawApp/graphics/AxleCountingSectionInteraction';
+import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCountingSection';
+
+const lineStore = useLineStore();
+const sectionState = ref({
+  id: 0,
+  code: '',
+  occupied: false,
+});
+let copySelectGraphic: AxleCountingSection | null = null;
+
+interface KeyType {
+  label: string;
+  key: keyof AxleCountingSectionStates;
+  formatFn?(
+    v: AxleCountingSectionStates[keyof AxleCountingSectionStates]
+  ): string;
+}
+
+const list: KeyType[] = [
+  { label: '计轴区段索引', key: 'id' },
+  { label: '计轴区段名称', key: 'code' },
+  { label: '是否占用', key: 'occupied', formatFn: getName },
+];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof AxleCountingSection) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof AxleCountingSection) {
+      copySelectGraphic = toRaw(val[0]);
+      initSectionState(val[0] as AxleCountingSection);
+    } else {
+      copySelectGraphic = null;
+      sectionState.value = {
+        id: 0,
+        code: '',
+        occupied: false,
+      };
+    }
+  }
+);
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initSectionState(lineStore.selectedGraphics[0] as AxleCountingSection);
+  }
+});
+
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+
+function initSectionState(section: AxleCountingSection) {
+  copySelectGraphic = toRaw(section);
+  sectionState.value = {
+    id: section.datas.id,
+    code: section.datas.code,
+    occupied: section.states.occupied ?? false,
+  };
+  subscribeState(section);
+}
+
+function updateState(newVal: AxleCountingSection) {
+  sectionState.value = {
+    id: newVal.id,
+    code: sectionState.value.code,
+    occupied: newVal.states.occupied ?? false,
+  };
+}
+
+function subscribeState(g: AxleCountingSection) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: AxleCountingSection) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
+</script>

src/components/line-app/states/CarWashingState.vue

@@ -0,0 +1,332 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section class="flex justify-between">
+      <div class="text-h6">洗车机状态</div>
+      <q-btn-dropdown color="primary" label="操作">
+        <q-list>
+          <q-item
+            v-for="(item, index) in operationOptions"
+            :key="index"
+            clickable
+            v-close-popup
+            @click="doCarWashingOperation(item)"
+          >
+            <q-item-section>
+              <q-item-label>{{ item.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list1" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(carWashingState[item.key])
+                : carWashingState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list2" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(carWashingState[item.key])
+                : carWashingState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-for="(item, index) in list3" :key="index + list2.length">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption
+              ><span>[</span>
+              <span
+                v-if="carWashingState.twjList.length >= 1"
+                :style="{
+                  color: carWashingState.twjList[0] ? 'green' : 'red',
+                }"
+                >{{
+                  `1:${carWashingState.twjList[0] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span
+                v-if="carWashingState.twjList.length >= 2"
+                :style="{
+                  color: carWashingState.twjList[1] ? 'green' : 'red',
+                }"
+                >{{
+                  `2:${carWashingState.twjList[1] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span
+                v-if="carWashingState.twjList.length >= 3"
+                :style="{
+                  color: carWashingState.twjList[2] ? 'green' : 'red',
+                }"
+                >{{
+                  `3:${carWashingState.twjList[2] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span>]</span></q-item-label
+            >
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-for="(item, index) in list4"
+          :key="index + list2.length + list3.length"
+        >
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(carWashingState[item.key])
+                : carWashingState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list5" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(carWashingState[item.key])
+                : carWashingState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item v-for="(item, index) in list6" :key="index + list5.length">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>
+              <span>[</span>
+              <span
+                v-if="carWashingState.cfjList.length >= 1"
+                :style="{
+                  color: carWashingState.cfjList[0] ? 'green' : 'red',
+                }"
+                >{{
+                  `1:${carWashingState.cfjList[0] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span
+                v-if="carWashingState.cfjList.length >= 2"
+                :style="{
+                  color: carWashingState.cfjList[1] ? 'green' : 'red',
+                }"
+                >{{
+                  `2:${carWashingState.cfjList[1] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span
+                v-if="carWashingState.cfjList.length >= 3"
+                :style="{
+                  color: carWashingState.cfjList[2] ? 'green' : 'red',
+                }"
+                >{{
+                  `3:${carWashingState.cfjList[2] ? '结束' : '未结束'}`
+                }}</span
+              >
+              <span>]</span>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-for="(item, index) in list7"
+          :key="index + list5.length + list6.length"
+        >
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(carWashingState[item.key])
+                : carWashingState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { request } from 'src/protos/request';
+import { CarWashing } from 'src/graphics/carWashing/CarWashing';
+import XcjOperation from 'src/components/draw-app/dialogs/XcjOperation.vue';
+import { CarWashingState } from 'src/drawApp/graphics/CarWashingInteraction';
+import { Dialog } from 'quasar';
+
+const lineStore = useLineStore();
+const carWashingState = ref<CarWashingState>(new CarWashingState());
+const code = ref('');
+const operationOptions = [
+  {
+    label: '设置参数',
+    value: request.Xcj.Operation.SetParams,
+  },
+];
+const carWashingFault = ref<request.Xcj.Fault>(0);
+let copySelectGraphic: CarWashing | null = null;
+
+interface KeyType {
+  label: string;
+  key: keyof CarWashingState;
+  formatFn?(v: CarWashingState[keyof CarWashingState]): string;
+}
+
+const list1: KeyType[] = [
+  { label: '洗车机索引', key: 'id' },
+  { label: '洗车机名称', key: 'code', formatFn: getNameFormat },
+];
+const list2: KeyType[] = [
+  { label: '洗车请求', key: 'xqj', formatFn: getBoolFormat },
+];
+const list3: KeyType[] = [
+  { label: '端洗停稳 ', key: 'twjList', formatFn: getTwFormat },
+];
+const list4: KeyType[] = [
+  { label: '通过请求', key: 'tgqj', formatFn: getBoolFormat },
+];
+const list5: KeyType[] = [
+  { label: '洗车就绪', key: 'xcjxj', formatFn: getBoolFormat },
+  { label: '洗车允许', key: 'xcyxj', formatFn: getBoolFormat },
+];
+const list6: KeyType[] = [
+  { label: '端洗结束', key: 'cfjList', formatFn: getYXFormat },
+];
+const list7: KeyType[] = [
+  { label: '紧急停车', key: 'jtj', formatFn: getBoolFormat },
+  { label: '通过允许', key: 'tgyxj', formatFn: getBoolFormat },
+];
+watch(
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof CarWashing) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof CarWashing) {
+      copySelectGraphic = toRaw(val[0]);
+      initCarWashingState(val[0]);
+    } else {
+      copySelectGraphic = null;
+      carWashingState.value = new CarWashingState();
+    }
+  }
+);
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initCarWashingState(lineStore.selectedGraphics[0] as CarWashing);
+  }
+});
+
+function getNameFormat() {
+  return code.value;
+}
+
+function getBoolFormat(v: boolean) {
+  return v ? '是' : '否';
+}
+function getTwFormat(v: boolean[]) {
+  if (v.length === 2) {
+    return `[1:${v[0] ? '停稳' : '未停稳'};2:${v[1] ? '停稳' : '未停稳'};]`;
+  } else if (v.length === 3) {
+    return `[1:${v[0] ? '停稳' : '未停稳'};2:${v[1] ? '停稳' : '未停稳'};3:${
+      v[2] ? '停稳' : '未停稳'
+    };]`;
+  } else {
+    return '状态显示错误';
+  }
+}
+
+function getYXFormat(v: boolean[]) {
+  if (v.length === 2) {
+    return `头部${v[0] ? '允许' : '不允许'};尾部${v[1] ? '允许' : '不允许'};`;
+  } else if (v.length === 3) {
+    return `头部${v[0] ? '允许' : '不允许'};中部${
+      v[1] ? '允许' : '不允许'
+    };尾部${v[2] ? '允许' : '不允许'};`;
+  } else {
+    return '状态显示错误';
+  }
+}
+
+function initCarWashingState(carWashing: CarWashing) {
+  copySelectGraphic = toRaw(carWashing);
+  code.value = carWashing.datas.code;
+
+  updateState(carWashing);
+  subscribeState(carWashing);
+}
+
+function updateState(carWashing: CarWashing) {
+  carWashingState.value = carWashing.states.clone() as CarWashingState;
+  carWashingFault.value = carWashingState.value.param.fault;
+}
+
+function doCarWashingOperation(item: {
+  label: string;
+  value: request.Xcj.Operation;
+}) {
+  if (!lineStore.simulationId) return;
+  if (item.label == '设置参数') {
+    if (lineStore.deviceOpreratDialogInstance) return;
+    lineStore.deviceOpreratDialogInstance = Dialog.create({
+      component: XcjOperation,
+      componentProps: {
+        id: +carWashingState.value.id,
+        code: code.value,
+        xcjFaultProp: carWashingState.value.param.fault,
+      },
+      cancel: true,
+      persistent: true,
+    }).onCancel(() => {
+      lineStore.deviceOpreratDialogInstance = null;
+    });
+  }
+}
+
+function subscribeState(g: CarWashing) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: CarWashing) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
+</script>

src/components/line-app/states/FloodGateState.vue

@@ -0,0 +1,190 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section class="flex justify-between">
+      <div class="text-h6">防淹门状态</div>
+      <q-btn-dropdown color="primary" label="操作">
+        <q-list>
+          <q-item
+            v-for="(item, index) in operationOptions"
+            :key="index"
+            clickable
+            v-close-popup
+            @click="doFloodGateOperation(item)"
+          >
+            <q-item-section>
+              <q-item-label>{{ item.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(floodGateState[item.key])
+                : floodGateState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { request } from 'src/protos/request';
+import { FloodGate } from 'src/graphics/floodGate/FloodGate';
+import CkmOperation from 'src/components/draw-app/dialogs/CkmOperation.vue';
+import { FloodGateState } from 'src/drawApp/graphics/FloodGateInteraction';
+import { Dialog } from 'quasar';
+
+const lineStore = useLineStore();
+const floodGateState = ref<FloodGateState>(new FloodGateState());
+const code = ref('');
+const operationOptions = [
+  {
+    label: '设置参数',
+    value: request.Ckm.Operation.SetParams,
+  },
+];
+const floodGateForce = ref<request.Ckm.Force>(0);
+const floodGateForceOption = [
+  {
+    label: '无强制',
+    value: request.Ckm.Force.F_NONE,
+  },
+  {
+    label: '强制开门',
+    value: request.Ckm.Force.F_KM,
+  },
+  {
+    label: '强制关门',
+    value: request.Ckm.Force.F_GM,
+  },
+];
+const floodGateFault = ref<request.Ckm.Fault>(0);
+let copySelectGraphic: FloodGate | null = null;
+
+interface KeyType {
+  label: string;
+  key: keyof FloodGateState;
+  formatFn?(v: FloodGateState[keyof FloodGateState]): string;
+}
+
+const list: KeyType[] = [
+  { label: '防淹门索引', key: 'id' },
+  { label: '防淹门名称', key: 'code', formatFn: getNameFormat },
+  { label: '防淹门关闭', key: 'mgj', formatFn: getName },
+  { label: '控制端', key: 'local', formatFn: getLocal },
+  { label: '门旁路', key: 'mplj', formatFn: getName },
+  { label: '防淹门强制', key: 'param', formatFn: getForceName },
+  { label: '设置故障', key: 'param', formatFn: getFaultName },
+];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof FloodGate) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof FloodGate) {
+      copySelectGraphic = toRaw(val[0]);
+      initFloodGateState(val[0]);
+    } else {
+      copySelectGraphic = null;
+      floodGateState.value = new FloodGateState();
+    }
+  }
+);
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initFloodGateState(lineStore.selectedGraphics[0] as FloodGate);
+  }
+});
+
+function getNameFormat() {
+  return code.value;
+}
+
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+function getLocal(v: boolean) {
+  return v ? '本地' : '远程';
+}
+
+function getForceName() {
+  return (
+    floodGateForceOption.find((item) => item.value == floodGateForce.value)
+      ?.label || ''
+  );
+}
+
+function getFaultName() {
+  if (floodGateFault.value == request.Ckm.Fault.FA_State_Loss)
+    return '状态丢失';
+  return '无';
+}
+
+function initFloodGateState(floodGate: FloodGate) {
+  copySelectGraphic = toRaw(floodGate);
+  code.value = floodGate.datas.code;
+
+  updateState(floodGate);
+  subscribeState(floodGate);
+}
+
+function updateState(floodGate: FloodGate) {
+  floodGateState.value = floodGate.states.clone() as FloodGateState;
+  floodGateForce.value = floodGateState.value.param.force;
+  floodGateFault.value = floodGateState.value.param.fault;
+}
+
+function doFloodGateOperation(item: {
+  label: string;
+  value: request.Ckm.Operation;
+}) {
+  if (!lineStore.simulationId) return;
+  if (item.label == '设置参数') {
+    if (lineStore.deviceOpreratDialogInstance) return;
+    lineStore.deviceOpreratDialogInstance = Dialog.create({
+      component: CkmOperation,
+      componentProps: {
+        id: +floodGateState.value.id,
+        code: code.value,
+        ckmForceProp: floodGateState.value.param.force,
+        ckmFaultProp: floodGateState.value.param.fault,
+        title: '防淹门设置参数',
+      },
+      cancel: true,
+      persistent: true,
+    }).onCancel(() => {
+      lineStore.deviceOpreratDialogInstance = null;
+    });
+  }
+}
+
+function subscribeState(g: FloodGate) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: FloodGate) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
+</script>

src/components/line-app/states/GarageDoorState.vue

@@ -0,0 +1,191 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section class="flex justify-between">
+      <div class="text-h6">车库门状态</div>
+      <q-btn-dropdown color="primary" label="操作">
+        <q-list>
+          <q-item
+            v-for="(item, index) in operationOptions"
+            :key="index"
+            clickable
+            v-close-popup
+            @click="doGarageDoorOperation(item)"
+          >
+            <q-item-section>
+              <q-item-label>{{ item.label }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </q-card-section>
+    <q-separator inset />
+    <q-card-section>
+      <q-list dense>
+        <q-item v-for="(item, index) in list" :key="index">
+          <q-item-section>
+            <q-item-label>{{ item.label }}</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-item-label caption>{{
+              item.formatFn
+                ? item.formatFn(garageDoorState[item.key])
+                : garageDoorState[item.key]
+            }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-card-section>
+  </q-card>
+</template>
+<script setup lang="ts">
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { request } from 'src/protos/request';
+import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
+import CkmOperation from 'src/components/draw-app/dialogs/CkmOperation.vue';
+import { GarageDoorState } from 'src/drawApp/graphics/GarageDoorInteraction';
+import { Dialog } from 'quasar';
+
+const lineStore = useLineStore();
+const garageDoorState = ref<GarageDoorState>(new GarageDoorState());
+const code = ref('');
+const operationOptions = [
+  {
+    label: '设置参数',
+    value: request.Ckm.Operation.SetParams,
+  },
+];
+const garageDoorForce = ref<request.Ckm.Force>(0);
+const garageDoorForceOption = [
+  {
+    label: '无强制',
+    value: request.Ckm.Force.F_NONE,
+  },
+  {
+    label: '强制开门',
+    value: request.Ckm.Force.F_KM,
+  },
+  {
+    label: '强制关门',
+    value: request.Ckm.Force.F_GM,
+  },
+];
+const garageDoorFault = ref<request.Ckm.Fault>(0);
+let copySelectGraphic: GarageDoor | null = null;
+
+interface KeyType {
+  label: string;
+  key: keyof GarageDoorState;
+  formatFn?(v: GarageDoorState[keyof GarageDoorState]): string;
+}
+
+const list: KeyType[] = [
+  { label: '车库门索引', key: 'id' },
+  { label: '车库门名称', key: 'code', formatFn: getNameFormat },
+  { label: '车库门关闭', key: 'mgj', formatFn: getName },
+  { label: '控制端', key: 'local', formatFn: getLocal },
+  { label: '门旁路', key: 'mplj', formatFn: getName },
+  // { label: '状态丢失', key: 'stateLoss', formatFn: getName },
+  { label: '车库门强制', key: 'param', formatFn: getForceName },
+  { label: '设置故障', key: 'param', formatFn: getFaultName },
+];
+
+watch(
+  () => lineStore.selectedGraphics,
+  (val, oldVal) => {
+    if (oldVal?.length == 1 && oldVal[0] instanceof GarageDoor) {
+      unSubscribeState(oldVal[0]);
+    }
+    if (val?.length == 1 && val[0] instanceof GarageDoor) {
+      copySelectGraphic = toRaw(val[0]);
+      initGarageDoorState(val[0]);
+    } else {
+      copySelectGraphic = null;
+      garageDoorState.value = new GarageDoorState();
+    }
+  }
+);
+
+onMounted(() => {
+  if (lineStore.selectedGraphics) {
+    initGarageDoorState(lineStore.selectedGraphics[0] as GarageDoor);
+  }
+});
+
+function getNameFormat() {
+  return code.value;
+}
+
+function getName(v: boolean) {
+  if (v) return '是';
+  return '否';
+}
+function getLocal(v: boolean) {
+  return v ? '本地' : '远程';
+}
+
+function getForceName() {
+  return (
+    garageDoorForceOption.find((item) => item.value == garageDoorForce.value)
+      ?.label || ''
+  );
+}
+
+function getFaultName() {
+  if (garageDoorFault.value == request.Ckm.Fault.FA_State_Loss)
+    return '状态丢失';
+  return '无';
+}
+
+function initGarageDoorState(garageDoor: GarageDoor) {
+  copySelectGraphic = toRaw(garageDoor);
+  code.value = garageDoor.datas.code;
+
+  updateState(garageDoor);
+  subscribeState(garageDoor);
+}
+
+function updateState(garageDoor: GarageDoor) {
+  garageDoorState.value = garageDoor.states.clone() as GarageDoorState;
+  garageDoorForce.value = garageDoorState.value.param.force;
+  garageDoorFault.value = garageDoorState.value.param.fault;
+}
+
+function doGarageDoorOperation(item: {
+  label: string;
+  value: request.Ckm.Operation;
+}) {
+  if (!lineStore.simulationId) return;
+  if (item.label == '设置参数') {
+    if (lineStore.deviceOpreratDialogInstance) return;
+    lineStore.deviceOpreratDialogInstance = Dialog.create({
+      component: CkmOperation,
+      componentProps: {
+        id: +garageDoorState.value.id,
+        code: code.value,
+        ckmForceProp: garageDoorState.value.param.force,
+        ckmFaultProp: garageDoorState.value.param.fault,
+        title: '车库门设置参数',
+      },
+      cancel: true,
+      persistent: true,
+    }).onCancel(() => {
+      lineStore.deviceOpreratDialogInstance = null;
+    });
+  }
+}
+
+function subscribeState(g: GarageDoor) {
+  g.on('stateupdate', updateState);
+}
+
+function unSubscribeState(g: GarageDoor) {
+  g.off('stateupdate', updateState);
+}
+
+onUnmounted(() => {
+  if (copySelectGraphic) {
+    unSubscribeState(copySelectGraphic);
+  }
+});
+</script>

src/components/line-app/states/SectionState.vue

@@ -68,8 +68,8 @@ interface KeyType {
 const list: KeyType[] = [
   { label: '轨道索引', key: 'id' },
   { label: '轨道名称', key: 'code' },
-  { label: '是否占用', key: 'axleFault', formatFn: getName },
-  { label: '是否计轴故障', key: 'occupied', formatFn: getName },
+  { label: '是否占用', key: 'occupied', formatFn: getName },
+  { label: '是否计轴故障', key: 'axleFault', formatFn: getName },
   { label: '是否计轴复位', key: 'axleDrst', formatFn: getName },
   { label: '是否计轴预复位', key: 'axlePdrst', formatFn: getName },
 ];

src/components/line-app/states/TransponderState.vue

@@ -91,6 +91,7 @@ import { graphicData } from 'src/protos/stationLayoutGraphics';
 const lineStore = useLineStore();
 const transponderState = ref<TransponderState>(new TransponderState());
 const code = ref('');
+const originalCode = ref('');
 const type = ref(0);
 const kilometer = ref(0);
 enum TransponderOperation {
@@ -144,6 +145,7 @@ interface KeyType {
 const list: KeyType[] = [
   { label: '应答器索引', key: 'code' },
   { label: '应答器名称', key: 'code', formatFn: getNameFormat },
+  { label: '应答器原编号', key: 'code', formatFn: getOriginalCodeFormat },
   { label: '坐标系', key: 'km', formatFn: getCoordinateSystemFormat },
   { label: '公里标', key: 'km', formatFn: getKilometerFormat },
   { label: '方向', key: 'km', formatFn: getDirectionFormat },
@@ -162,6 +164,9 @@ const list1: KeyType[] = [
 function getNameFormat(v: string) {
   return code.value || v;
 }
+function getOriginalCodeFormat(v: string) {
+  return originalCode.value || v;
+}
 function getCoordinateSystemFormat(v: graphicData.KilometerSystem) {
   return v.coordinateSystem;
 }
@@ -198,6 +203,7 @@ function initTransponderState(transponder: Transponder) {
   copySelectGraphic = toRaw(transponder);
   code.value = transponder.datas.code;
   type.value = transponder.datas.type;
+  originalCode.value = transponder.datas.originalCode;
   kilometer.value = transponder.states.km?.kilometer || 0;
   transponderState.value = transponder.states.clone() as TransponderState;
   subscribeState(transponder);

src/configs/UrlManage.ts

@@ -1,22 +1,31 @@
 function getHost(): string {
-  if (process.env.ENV_MODE == 'test') {
+  if (process.env.URL_ENV == 'test') {
     return 'test.joylink.club/bjrtsts-server';
-  } else if (process.env.ENV_MODE == 'publish') {
+  } else if (process.env.URL_ENV == 'publish') {
     return 'joylink.club/bjrtsts-server';
+  } else if (process.env.URL_ENV == 'local_test') {
+    return '192.168.33.233:9091';
+  } else if (process.env.URL_ENV == 'local_pxf') {
+    //北京现场
+
+    return '172.29.5.168/bjrtss-server';
   }
+
   // return '192.168.3.7:9091';
   // return '192.168.3.47:9091';
   // return '192.168.3.37:9091';
-  // return '192.168.33.207:9091'; // 张骞
+  //return '192.168.33.207:9091'; // 张骞
   // return '192.168.33.93:9091';
   // return '192.168.3.37:9091'; //卫志宏
   // return 'test.joylink.club/bjrtsts-service'; // 测试
+  // return '172.29.5.168/bjrtss-server';
+
   return '192.168.33.233:9091';
 }
 
 export function getHttpBase() {
   let protocol = 'http';
-  if (['publish'].includes(process.env.ENV_MODE as string)) {
+  if (['publish'].includes(process.env.URL_ENV as string)) {
     protocol = 'https';
   }
   return `${protocol}://${getHost()}`;
@@ -25,19 +34,25 @@ export function getHttpBase() {
 export function getWebsocketUrl() {
   let protocol = 'ws';
   let host = '192.168.33.233';
+  // let host = '172.29.5.168';
   // let host = 'test.joylink.club';
   let port = '8083';
   let url = `${protocol}://${host}:${port}`;
-  if (process.env.ENV_MODE == 'test') {
+  if (process.env.URL_ENV == 'test') {
     // protocol = 'wss';
     host = 'test.joylink.club/bjrtsts-server';
     port = '';
     url = `${protocol}://${host}`;
-  } else if (process.env.ENV_MODE == 'publish') {
+  } else if (process.env.URL_ENV == 'publish') {
     protocol = 'wss';
     host = 'joylink.club/bjrtsts-server';
     port = '';
     url = `${protocol}://${host}`;
+  } else if (process.env.URL_ENV == 'local_test') {
+    host = '192.168.33.233';
+  } else if (process.env.URL_ENV == 'local_pxf') {
+    host = '172.29.5.168';
   }
+
   return `${url}/mqtt`;
 }

src/drawApp/common.ts

@@ -24,7 +24,8 @@ import { PslBox } from 'src/graphics/pslBox/PslBox';
 import { GarageDoor } from 'src/graphics/garageDoor/GarageDoor';
 import { CarWashing } from 'src/graphics/carWashing/CarWashing';
 import { FloodGate } from 'src/graphics/floodGate/FloodGate';
-import { GarageDoorBox } from 'src/graphics/garageDoorBox/GarageDoorBox';
+import { HoldButton } from 'src/graphics/holdButton/HoldButton';
+import { UnattengedButton } from 'src/graphics/unattengedButton/UnattengedButton';
 
 export const drawCommonLayerList = [
   // 图层列表  默认显示的图层defaultShow: true
@@ -60,7 +61,8 @@ export const drawCommonLayerList = [
     defaultShow: true,
   },
   { label: '车库门', value: GarageDoor.Type, defaultShow: true },
-  { label: '防淹门', value: FloodGate.Type, defaultShow: true },
   { label: '洗车机', value: CarWashing.Type, defaultShow: true },
-  { label: '车库门设置', value: GarageDoorBox.Type, defaultShow: true },
+  { label: '防淹门', value: FloodGate.Type, defaultShow: true },
+  { label: '扣车按钮', value: HoldButton.Type, defaultShow: true },
+  { label: '无人折返按钮', value: UnattengedButton.Type, defaultShow: true },
 ];

src/drawApp/commonApp.ts

@@ -91,20 +91,27 @@ import {
   SpksSwitchData,
   DrawSpksSwitchInteraction,
 } from './graphics/SpksSwitchInteraction';
+import {
+  HoldButton,
+  HoldButtonTemplate,
+} from 'src/graphics/holdButton/HoldButton';
+import {
+  DrawHoldButtonInteraction,
+  HoldButtonData,
+} from './graphics/HoldButtonInteraction';
+import {
+  UnattengedButton,
+  UnattengedButtonTemplate,
+} from 'src/graphics/unattengedButton/UnattengedButton';
+import {
+  UnattengedButtonData,
+  DrawUnattengedButtonInteraction,
+} from './graphics/UnattengedButtonInteraction';
 import { GatedBox, GatedBoxTemplate } from 'src/graphics/gatedBox/GatedBox';
 import {
   GatedBoxData,
   DrawGatedBoxInteraction,
 } from './graphics/GatedBoxInteraction';
-import {
-  GarageDoorBox,
-  GarageDoorBoxTemplate,
-} from 'src/graphics/garageDoorBox/GarageDoorBox';
-import {
-  GarageDoorBoxData,
-  DrawGarageDoorBoxInteraction,
-} from './graphics/GarageDoorBoxInteraction';
-import { GarageDoorBoxDraw } from 'src/graphics/garageDoorBox/GarageDoorBoxAssistant';
 // import { EsbButton, EsbButtonTemplate } from 'src/graphics/esbButton/EsbButton';
 // import {
 //   EsbButtonData,
@@ -112,6 +119,8 @@ import { GarageDoorBoxDraw } from 'src/graphics/garageDoorBox/GarageDoorBoxAssis
 //   EsbButtonState,
 // } from './graphics/EsbButtonInteraction';
 import { SpksSwitchDraw } from 'src/graphics/spksSwitch/SpksSwitchDrawAssistant';
+import { HoldButtonDraw } from 'src/graphics/holdButton/HoldButtonDrawAssistant';
+import { UnattengedButtonDraw } from 'src/graphics/unattengedButton/UnattengedButtonDrawAssistant';
 import { GatedBoxDraw } from 'src/graphics/gatedBox/GatedBoxDrawAssistant';
 // import { EsbButtonDraw } from 'src/graphics/esbButton/EsbButtonDrawAssistant';
 import { TransponderDraw } from 'src/graphics/transponder/TransponderDrawAssistant';
@@ -151,21 +160,27 @@ import { Dialog } from 'quasar';
 import { useDrawStore } from 'src/stores/draw-store';
 import { saveDraft } from 'src/api/DraftApi';
 import { SignalDraw } from 'src/graphics/signal/SignalDrawAssistant';
-import { CarWashingData } from './graphics/CarWashingInteraction';
+import {
+  CarWashingData,
+  CarWashingState,
+} from './graphics/CarWashingInteraction';
 import {
   CarWashing,
   CarWashingTemplate,
 } from 'src/graphics/carWashing/CarWashing';
 import { CarWashingDraw } from 'src/graphics/carWashing/CarWashingDrawAssistant';
-import { FloodGateData } from './graphics/FloodGateInteraction';
-import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
-import { FloodGateDraw } from 'src/graphics/floodGate/FloodGateDrawAssistant';
-import { GarageDoorData } from './graphics/GarageDoorInteraction';
+import {
+  GarageDoorData,
+  GarageDoorState,
+} from './graphics/GarageDoorInteraction';
 import {
   GarageDoor,
   GarageDoorTemplate,
 } from 'src/graphics/garageDoor/GarageDoor';
 import { GarageDoorDraw } from 'src/graphics/garageDoor/GarageDoorDrawAssistant';
+import { FloodGateDraw } from 'src/graphics/floodGate/FloodGateDrawAssistant';
+import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
+import { FloodGateData, FloodGateState } from './graphics/FloodGateInteraction';
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -231,11 +246,12 @@ export function initCommonDrawApp(app: IDrawApp) {
   );
   new StopPositionDraw(app, new StopPositionTemplate(new StopPositionData()));
   new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData()));
-  new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData()));
-  new GarageDoorBoxDraw(
+  new HoldButtonDraw(app, new HoldButtonTemplate(new HoldButtonData()));
+  new UnattengedButtonDraw(
     app,
-    new GarageDoorBoxTemplate(new GarageDoorBoxData())
+    new UnattengedButtonTemplate(new UnattengedButtonData())
   );
+  new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData()));
   // new EsbButtonDraw(
   //   app,
   //   new EsbButtonTemplate(new EsbButtonData(), new EsbButtonState())
@@ -256,14 +272,24 @@ export function initCommonDrawApp(app: IDrawApp) {
     app,
     new ConcentrationDividingLineTemplate(new ConcentrationDividingLineData())
   );
-  new CarWashingDraw(app, new CarWashingTemplate(new CarWashingData()));
-  new FloodGateDraw(app, new FloodGateTemplate(new FloodGateData()));
-  new GarageDoorDraw(app, new GarageDoorTemplate(new GarageDoorData()));
+  new CarWashingDraw(
+    app,
+    new CarWashingTemplate(new CarWashingData(), new CarWashingState())
+  );
+  new GarageDoorDraw(
+    app,
+    new GarageDoorTemplate(new GarageDoorData(), new GarageDoorState())
+  );
+  new FloodGateDraw(
+    app,
+    new FloodGateTemplate(new FloodGateData(), new FloodGateState())
+  );
   DrawSignalInteraction.init(app);
   DrawStopPositionInteraction.init(app);
   DrawSpksSwitchInteraction.init(app);
+  DrawHoldButtonInteraction.init(app);
+  DrawUnattengedButtonInteraction.init(app);
   DrawGatedBoxInteraction.init(app);
-  DrawGarageDoorBoxInteraction.init(app);
   // DrawEsbButtonInteraction.init(app);
 
   // 画布右键菜单
@@ -292,9 +318,11 @@ export function initCommonDrawApp(app: IDrawApp) {
     UniqueIdPrefix = new graphicData.UniqueIdOfStationLayout();
     screenDoorConfig = new graphicData.ScreenDoorConfig();
     generateAxleCountingConfig = new graphicData.GenerateAxleCountingConfig();
+    lianSuoData = new graphicData.LianSuoData();
     kilometerConvertList = [];
     sectionCodePointList = [];
     otherLineList = [];
+    kmChainDataList = [];
   });
   // KeyA 用于区段复制--控制生成的区段位置
   const graphicCopyPlugin = app.app.graphicCopyPlugin;
@@ -399,7 +427,11 @@ export function loadCommonDrawDatas(
   UniqueIdPrefix = storage.UniqueIdPrefix;
   screenDoorConfig = storage.screenDoorConfig;
   generateAxleCountingConfig = storage.generateAxleCountingConfig;
+  if (storage.lianSuoData) {
+    lianSuoData = storage.lianSuoData;
+  }
   kilometerConvertList = storage.kilometerConvertList;
+  kmChainDataList = storage.kilometerMarkCalibrations;
   sectionCodePointList = storage.sectionCodePointList;
   otherLineList = storage.otherLineList;
   refDevicesList = storage.stationRelateDeviceList;
@@ -442,12 +474,15 @@ export function loadCommonDrawDatas(
   storage.spksSwitchs.forEach((spksSwitch) => {
     datas.push(new SpksSwitchData(spksSwitch));
   });
+  storage.holdButtons.forEach((holdButton) => {
+    datas.push(new HoldButtonData(holdButton));
+  });
+  storage.unattengedButtons.forEach((unattengedButton) => {
+    datas.push(new UnattengedButtonData(unattengedButton));
+  });
   storage.gateBoxs.forEach((gatedBox) => {
     datas.push(new GatedBoxData(gatedBox));
   });
-  storage.garageDoorBoxes.forEach((garageDoorBox) => {
-    datas.push(new GarageDoorBoxData(garageDoorBox));
-  });
   // storage.esbButtons.forEach((esbButton) => {
   //   datas.push(new EsbButtonData(esbButton));
   // });
@@ -472,15 +507,15 @@ export function loadCommonDrawDatas(
   storage.concentrationDividingLines.forEach((concentrationDividingLine) => {
     datas.push(new ConcentrationDividingLineData(concentrationDividingLine));
   });
-  storage.floodGates.forEach((flood) => {
-    datas.push(new FloodGateData(flood));
-  });
   storage.carWashings.forEach((carWashing) => {
     datas.push(new CarWashingData(carWashing));
   });
   storage.garageDoors.forEach((garageDoor) => {
     datas.push(new GarageDoorData(garageDoor));
   });
+  storage.floodGates.forEach((floodGate) => {
+    datas.push(new FloodGateData(floodGate));
+  });
   return datas;
 }
 
@@ -534,17 +569,20 @@ export function saveCommonDrawDatas(app: IDrawApp) {
     } else if (SpksSwitch.Type === g.type) {
       const spksSwitchData = (g as SpksSwitch).saveData();
       storage.spksSwitchs.push((spksSwitchData as SpksSwitchData).data);
+    } else if (HoldButton.Type === g.type) {
+      const holdButtonData = (g as HoldButton).saveData();
+      storage.holdButtons.push((holdButtonData as HoldButtonData).data);
+    } else if (UnattengedButton.Type === g.type) {
+      const unattengedButtonData = (g as UnattengedButton).saveData();
+      storage.unattengedButtons.push(
+        (unattengedButtonData as UnattengedButtonData).data
+      );
     } else if (GatedBox.Type === g.type) {
       const gatedBoxData = (g as GatedBox).saveData();
       storage.gateBoxs.push((gatedBoxData as GatedBoxData).data);
       // } else if (EsbButton.Type === g.type) {
       //   const esbButtonData = (g as EsbButton).saveData();
       //   storage.esbButtons.push((esbButtonData as EsbButtonData).data);
-    } else if (GarageDoorBox.Type === g.type) {
-      const garageDoorBoxData = (g as GarageDoorBox).saveData();
-      storage.garageDoorBoxes.push(
-        (garageDoorBoxData as GarageDoorBoxData).data
-      );
     } else if (Transponder.Type === g.type) {
       const transponderData = (g as Transponder).saveData();
       storage.transponders.push((transponderData as TransponderData).data);
@@ -575,12 +613,12 @@ export function saveCommonDrawDatas(app: IDrawApp) {
     } else if (g instanceof CarWashing) {
       const carWashingData = g.saveData();
       storage.carWashings.push((carWashingData as CarWashingData).data);
-    } else if (g instanceof FloodGate) {
-      const floodGateData = g.saveData();
-      storage.floodGates.push((floodGateData as FloodGateData).data);
     } else if (g instanceof GarageDoor) {
       const garageDoorData = g.saveData();
       storage.garageDoors.push((garageDoorData as GarageDoorData).data);
+    } else if (g instanceof FloodGate) {
+      const floodGateData = g.saveData();
+      storage.floodGates.push((floodGateData as FloodGateData).data);
     }
   });
   // storage.Platforms.forEach((item) => {
@@ -699,6 +737,8 @@ export function saveCommonDrawDatas(app: IDrawApp) {
   storage.sectionCodePointList = sectionCodePointList;
   storage.otherLineList = otherLineList;
   storage.stationRelateDeviceList = refDevicesList;
+  storage.lianSuoData = lianSuoData;
+  storage.kilometerMarkCalibrations = kmChainDataList;
   // if (storage.generateAxleCountingConfig?.bbConnect) {
   //   storage.generateAxleCountingConfig.newbbConnect =
   //     storage.generateAxleCountingConfig.bbConnect.map((item) => +item);
@@ -793,6 +833,24 @@ export function editKilometerConvert(row: graphicData.KilometerConvert) {
 export function deleteKilometerConvert(index: number) {
   kilometerConvertList.splice(index, 1);
 }
+//公里标设计-实测数据增删改查
+let kmChainDataList: graphicData.KilometerMarkCalibration[] = [];
+export function loadKmChainDataList() {
+  return kmChainDataList;
+}
+export function createKmChainData(row: graphicData.KilometerMarkCalibration) {
+  kmChainDataList.push(row);
+}
+export function editKmChainData(row: graphicData.KilometerMarkCalibration) {
+  const drawStore = useDrawStore();
+  const findIndex = drawStore.editKmChainDataIndex;
+  if (findIndex >= 0) {
+    kmChainDataList.splice(findIndex, 1, row);
+  }
+}
+export function deleteKmChainData(index: number) {
+  kmChainDataList.splice(index, 1);
+}
 // 公里标转换趋势
 export const sameTrendOptions = [
   { label: '相反', value: false },
@@ -852,6 +910,15 @@ export function setGenerateAxleCountingConfig(
   generateAxleCountingConfig = newScreenDoorConfig;
 }
 
+let lianSuoData = new graphicData.LianSuoData();
+export function loadLianSuoData() {
+  return lianSuoData;
+}
+
+export function setLianSuoData(newLianSuoData: graphicData.LianSuoData) {
+  lianSuoData = newLianSuoData;
+}
+
 // 其他线路数据
 let otherLineList: graphicData.OtherLine[] = [];
 export function loadOtherLineList() {

src/drawApp/graphics/AxleCountingSectionInteraction.ts

@@ -1,12 +1,17 @@
 import * as pb_1 from 'google-protobuf';
-import { GraphicDataBase } from './GraphicDataBase';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import {
   IAxleCountingSectionData,
   AxleCountingSection,
   ITurnoutPosRefData,
+  IAxleCountingSectionState,
 } from 'src/graphics/axleCountingSection/AxleCountingSection';
 import { graphicData } from 'src/protos/stationLayoutGraphics';
 import { IPointData } from 'pixi.js';
+import { state } from 'src/protos/device_state';
+import { useLineStore } from 'src/stores/line-store';
+import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
+import { AxleCountingSectionGraphicHitArea } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant';
 
 export class AxleCountingSectionData
   extends GraphicDataBase
@@ -68,3 +73,84 @@ export class AxleCountingSectionData
     return pb_1.Message.equals(this.data, other.data);
   }
 }
+
+export class AxleCountingSectionStates
+  extends GraphicStateBase
+  implements IAxleCountingSectionState
+{
+  constructor(proto?: state.AxleCountingSectionState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.AxleCountingSectionState();
+    }
+    super(states, AxleCountingSection.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get occupied(): boolean {
+    return this.states.occupied;
+  }
+  set occupied(occupied: boolean) {
+    this.states.occupied = occupied;
+  }
+  get states(): state.AxleCountingSectionState {
+    return this.getState<state.AxleCountingSectionState>();
+  }
+  clone(): AxleCountingSectionStates {
+    return new AxleCountingSectionStates(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+export class AxleCountingSectionOperateInteraction extends GraphicInteractionPlugin<AxleCountingSection> {
+  static Name = 'AxleCountingSection_operate_menu';
+  constructor(app: IGraphicScene) {
+    super(AxleCountingSectionOperateInteraction.Name, app);
+  }
+  static init(app: IGraphicScene) {
+    return new AxleCountingSectionOperateInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): AxleCountingSection[] | undefined {
+    return grahpics
+      .filter((g) => g.type === AxleCountingSection.Type)
+      .map((g) => g as AxleCountingSection);
+  }
+  bind(g: AxleCountingSection): void {
+    g.lineGraphic.eventMode = 'static';
+    g.lineGraphic.cursor = 'pointer';
+    g.lineGraphic.hitArea = new AxleCountingSectionGraphicHitArea(g);
+    g.lineGraphic.selectable = true;
+    g.selectable = true;
+    g.labelGraphic.eventMode = 'static';
+    g.labelGraphic.cursor = 'pointer';
+    g.labelGraphic.selectable = true;
+    g.on('_leftclick', this.onLeftClick, this);
+  }
+
+  unbind(g: AxleCountingSection): void {
+    g.lineGraphic.eventMode = 'none';
+    g.lineGraphic.scalable = false;
+    g.lineGraphic.selectable = false;
+    g.selectable = false;
+    g.labelGraphic.eventMode = 'none';
+    g.labelGraphic.selectable = false;
+    g.off('_leftclick', this.onLeftClick, this);
+  }
+  onLeftClick() {
+    useLineStore().stateProCountIncrease();
+  }
+}

src/drawApp/graphics/CarWashingInteraction.ts

@@ -1,13 +1,26 @@
 import * as pb_1 from 'google-protobuf';
-import { FederatedMouseEvent } from 'pixi.js';
+import { FederatedMouseEvent, DisplayObject } from 'pixi.js';
 import {
   CarWashing,
   ICarWashingData,
+  ICarWashingState,
 } from 'src/graphics/carWashing/CarWashing';
-import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
+import {
+  GraphicInteractionPlugin,
+  JlGraphic,
+  IGraphicScene,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicDataBase } from './GraphicDataBase';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+import { request } from 'src/protos/request';
+import { useLineStore } from 'src/stores/line-store';
+import { Dialog } from 'quasar';
+import XcjOperation from 'src/components/draw-app/dialogs/XcjOperation.vue';
+import { CarWashingGraphicHitArea } from 'src/graphics/carWashing/CarWashingDrawAssistant';
 
 export class CarWashingData extends GraphicDataBase implements ICarWashingData {
   constructor(data?: graphicData.CarWashing) {
@@ -43,6 +56,18 @@ export class CarWashingData extends GraphicDataBase implements ICarWashingData {
   set centralizedStations(v: number[]) {
     this.data.centralizedStations = v;
   }
+  get duanNum(): number {
+    return this.data.duanNum;
+  }
+  set duanNum(v: number) {
+    this.data.duanNum = v;
+  }
+  get width(): number {
+    return this.data.width;
+  }
+  set width(v: number) {
+    this.data.width = v;
+  }
   clone(): CarWashingData {
     return new CarWashingData(this.data.cloneMessage());
   }
@@ -54,10 +79,110 @@ export class CarWashingData extends GraphicDataBase implements ICarWashingData {
   }
 }
 
+export class CarWashingState
+  extends GraphicStateBase
+  implements ICarWashingState
+{
+  constructor(proto?: state.XcjState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.XcjState();
+    }
+    super(states, CarWashing.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get param(): request.XcjParam {
+    return this.states.param;
+  }
+  set param(param: request.XcjParam) {
+    this.states.param = param;
+  }
+  get xqj(): boolean {
+    return this.states.xqj;
+  }
+  set xqj(v: boolean) {
+    this.states.xqj = v;
+  }
+  get twjList(): boolean[] {
+    return this.states.twjList;
+  }
+  set twjList(v: boolean[]) {
+    this.states.twjList = v;
+  }
+  get tgqj(): boolean {
+    return this.states.tgqj;
+  }
+  set tgqj(v: boolean) {
+    this.states.tgqj = v;
+  }
+  get xcjxj(): boolean {
+    return this.states.xcjxj;
+  }
+  set xcjxj(v: boolean) {
+    this.states.xcjxj = v;
+  }
+  get xcyxj(): boolean {
+    return this.states.xcyxj;
+  }
+  set xcyxj(v: boolean) {
+    this.states.xcyxj = v;
+  }
+  get cfjList(): boolean[] {
+    return this.states.cfjList;
+  }
+  set cfjList(v: boolean[]) {
+    this.states.cfjList = v;
+  }
+  get jtj(): boolean {
+    return this.states.jtj;
+  }
+  set jtj(v: boolean) {
+    this.states.jtj = v;
+  }
+  get tgyxj(): boolean {
+    return this.states.tgyxj;
+  }
+  set tgyxj(v: boolean) {
+    this.states.tgyxj = v;
+  }
+  get states(): state.XcjState {
+    return this.getState<state.XcjState>();
+  }
+  clone(): CarWashingState {
+    return new CarWashingState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const setXcjParam: MenuItemOptions = { name: '设置参数' };
+const xcjOperateMenu: ContextMenu = ContextMenu.init({
+  name: '洗车机操作菜单',
+  groups: [
+    {
+      items: [setXcjParam],
+    },
+  ],
+});
 export class CarWashingOperationInteraction extends GraphicInteractionPlugin<CarWashing> {
   static Name = 'car_washing_operation';
   constructor(scene: IGraphicScene) {
     super(CarWashingOperationInteraction.Name, scene);
+    scene.registerMenu(xcjOperateMenu);
   }
   static init(scene: IGraphicScene) {
     return new CarWashingOperationInteraction(scene);
@@ -68,12 +193,17 @@ export class CarWashingOperationInteraction extends GraphicInteractionPlugin<Car
   bind(g: CarWashing): void {
     g.eventMode = 'static';
     g.cursor = 'pointer';
+    g.rectBody.hitArea = new CarWashingGraphicHitArea(g);
+    g.selectable = true;
     g.on('mousedown', this.onPress, this);
+    g.on('_rightclick', this.onContextMenu);
   }
   unbind(g: CarWashing): void {
     g.eventMode = 'none';
     g.cursor = 'default';
+    g.selectable = false;
     g.off('mousedown', this.onPress, this);
+    g.off('_rightclick', this.onContextMenu);
   }
   onPress(e: FederatedMouseEvent) {
     const g = e.target as CarWashing;
@@ -85,4 +215,25 @@ export class CarWashingOperationInteraction extends GraphicInteractionPlugin<Car
     g.off('mouseleave', this.onRelease, this);
     g.off('mouseup', this.onRelease, this);
   }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const carWashing = target.getGraphic<CarWashing>();
+    if (!carWashing) return;
+    const lineStore = useLineStore();
+    setXcjParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        component: XcjOperation,
+        componentProps: {
+          id: carWashing.id,
+          code: carWashing.datas.code,
+          xcjFaultProp: carWashing.states.param.fault,
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    xcjOperateMenu.open(e.global);
+  }
 }

src/drawApp/graphics/FloodGateInteraction.ts

@@ -1,16 +1,33 @@
 import * as pb_1 from 'google-protobuf';
-import { FederatedMouseEvent } from 'pixi.js';
-import { FloodGate, IFloodGateData } from 'src/graphics/floodGate/FloodGate';
-import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import {
+  FloodGate,
+  IFloodGateData,
+  IFloodGateState,
+} from 'src/graphics/floodGate/FloodGate';
+import {
+  GraphicInteractionPlugin,
+  JlGraphic,
+  IGraphicScene,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicDataBase } from './GraphicDataBase';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { useLineStore } from 'src/stores/line-store';
+import { Dialog } from 'quasar';
+import CkmOperation from 'src/components/draw-app/dialogs/CkmOperation.vue';
+import { state } from 'src/protos/device_state';
+import { request } from 'src/protos/request';
+import { FloodGateGraphicHitArea } from 'src/graphics/floodGate/FloodGateDrawAssistant';
+import { usePslStore } from 'src/stores/psl-store';
 
 export class FloodGateData extends GraphicDataBase implements IFloodGateData {
-  constructor(data?: graphicData.FloodGate) {
+  constructor(data?: graphicData.GarageDoor) {
     let floodGate;
     if (!data) {
-      floodGate = new graphicData.FloodGate({
+      floodGate = new graphicData.GarageDoor({
         common: GraphicDataBase.defaultCommonInfo(FloodGate.Type),
       });
     } else {
@@ -19,8 +36,8 @@ export class FloodGateData extends GraphicDataBase implements IFloodGateData {
     super(floodGate);
   }
 
-  public get data(): graphicData.FloodGate {
-    return this.getData<graphicData.FloodGate>();
+  public get data(): graphicData.GarageDoor {
+    return this.getData<graphicData.GarageDoor>();
   }
   get code(): string {
     return this.data.code;
@@ -40,6 +57,12 @@ export class FloodGateData extends GraphicDataBase implements IFloodGateData {
   set centralizedStations(v: number[]) {
     this.data.centralizedStations = v;
   }
+  get refPslMapCode(): string {
+    return this.data.refPslMapCode;
+  }
+  set refPslMapCode(v: string) {
+    this.data.refPslMapCode = v;
+  }
   clone(): FloodGateData {
     return new FloodGateData(this.data.cloneMessage());
   }
@@ -51,35 +74,138 @@ export class FloodGateData extends GraphicDataBase implements IFloodGateData {
   }
 }
 
+export class FloodGateState
+  extends GraphicStateBase
+  implements IFloodGateState
+{
+  constructor(proto?: state.CkmState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.CkmState();
+    }
+    super(states, FloodGate.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get mgj() {
+    return this.states.mgj;
+  }
+  set mgj(v: boolean) {
+    this.states.mgj = v;
+  }
+  get param(): request.CkmParam {
+    return this.states.param;
+  }
+  set param(param: request.CkmParam) {
+    this.states.param = param;
+  }
+  get local(): boolean {
+    return this.states.local;
+  }
+  set local(v: boolean) {
+    this.states.local = v;
+  }
+  get mplj() {
+    return this.states.mplj;
+  }
+  set mplj(v: boolean) {
+    this.states.mplj = v;
+  }
+  get states(): state.CkmState {
+    return this.getState<state.CkmState>();
+  }
+  clone(): FloodGateState {
+    return new FloodGateState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const setCkmrParam: MenuItemOptions = { name: '设置参数' };
+const ckmOperateMenu: ContextMenu = ContextMenu.init({
+  name: '防淹门操作菜单',
+  groups: [
+    {
+      items: [setCkmrParam],
+    },
+  ],
+});
+
 export class FloodGateOperationInteraction extends GraphicInteractionPlugin<FloodGate> {
   static Name = 'flood_gate_operation';
-  constructor(scene: IGraphicScene) {
-    super(FloodGateOperationInteraction.Name, scene);
+  constructor(app: IGraphicScene) {
+    super(FloodGateOperationInteraction.Name, app);
+    app.registerMenu(ckmOperateMenu);
   }
-  static init(scene: IGraphicScene) {
-    return new FloodGateOperationInteraction(scene);
+  static init(app: IGraphicScene) {
+    return new FloodGateOperationInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): FloodGate[] | undefined {
     return grahpics.filter((g): g is FloodGate => g.type === FloodGate.Type);
   }
   bind(g: FloodGate): void {
     g.eventMode = 'static';
+    g.hitArea = new FloodGateGraphicHitArea(g);
     g.cursor = 'pointer';
-    g.on('mousedown', this.onPress, this);
+    g.selectable = true;
+    g.rectBody.eventMode = 'static';
+    g.rectBody.cursor = 'pointer';
+    g.rectBody.selectable = true;
+    g.on('_rightclick', this.onContextMenu);
+    g.rectBody.on('_leftclick', this.onLeftClick, this);
   }
   unbind(g: FloodGate): void {
     g.eventMode = 'none';
     g.cursor = 'default';
-    g.off('mousedown', this.onPress, this);
+    g.selectable = false;
+    g.rectBody.eventMode = 'none';
+    g.rectBody.cursor = 'default';
+    g.rectBody.selectable = false;
+    g.off('_rightclick', this.onContextMenu);
+    g.rectBody.off('_leftclick', this.onLeftClick, this);
   }
-  onPress(e: FederatedMouseEvent) {
-    const g = e.target as FloodGate;
-    g.on('mouseleave', this.onRelease, this);
-    g.on('mouseup', this.onRelease, this);
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const floodGate = target.getGraphic<FloodGate>();
+    if (!floodGate) return;
+    const lineStore = useLineStore();
+    setCkmrParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        component: CkmOperation,
+        componentProps: {
+          id: floodGate.id,
+          code: floodGate.datas.code,
+          ckmForceProp: floodGate.states.param.force,
+          ckmFaultProp: floodGate.states.param.fault,
+          title: '防淹门设置参数',
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    ckmOperateMenu.open(e.global);
   }
-  onRelease(e: FederatedMouseEvent) {
-    const g = e.target as FloodGate;
-    g.off('mouseleave', this.onRelease, this);
-    g.off('mouseup', this.onRelease, this);
+  onLeftClick(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const floodGate = target.getGraphic() as FloodGate;
+    usePslStore().setPslParam(
+      floodGate.datas.id,
+      floodGate.datas.refPslMapCode
+    );
   }
 }

src/drawApp/graphics/GarageDoorBoxInteraction.ts

@@ -1,150 +0,0 @@
-import * as pb_1 from 'google-protobuf';
-import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
-import {
-  GarageDoorBox,
-  IGarageDoorBox,
-} from 'src/graphics/garageDoorBox/GarageDoorBox';
-import {
-  IGraphicApp,
-  GraphicInteractionPlugin,
-  JlGraphic,
-  IGraphicScene,
-  MenuItemOptions,
-  ContextMenu,
-} from 'jl-graphic';
-
-import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicDataBase } from './GraphicDataBase';
-import { usePslStore } from 'src/stores/psl-store';
-
-export class GarageDoorBoxData
-  extends GraphicDataBase
-  implements IGarageDoorBox
-{
-  constructor(data?: graphicData.GarageDoorBox) {
-    let garageDoorBox;
-    if (!data) {
-      garageDoorBox = new graphicData.GarageDoorBox({
-        common: GraphicDataBase.defaultCommonInfo(GarageDoorBox.Type),
-      });
-    } else {
-      garageDoorBox = data;
-    }
-    super(garageDoorBox);
-  }
-
-  public get data(): graphicData.GarageDoorBox {
-    return this.getData<graphicData.GarageDoorBox>();
-  }
-  get code(): string {
-    return this.data.code;
-  }
-  set code(v: string) {
-    this.data.code = v;
-  }
-  get flip(): boolean {
-    return this.data.flip;
-  }
-  set flip(v: boolean) {
-    this.data.flip = v;
-  }
-  get refGarageDoorId(): number {
-    return this.data.refGarageDoorId;
-  }
-  set refGarageDoorId(v: number) {
-    this.data.refGarageDoorId = v;
-  }
-  get refPslMapCode(): string {
-    return this.data.refPslMapCode;
-  }
-  set refPslMapCode(v: string) {
-    this.data.refPslMapCode = v;
-  }
-  clone(): GarageDoorBoxData {
-    return new GarageDoorBoxData(this.data.cloneMessage());
-  }
-  copyFrom(data: GarageDoorBoxData): void {
-    pb_1.Message.copyInto(data.data, this.data);
-  }
-  eq(other: GarageDoorBoxData): boolean {
-    return pb_1.Message.equals(this.data, other.data);
-  }
-}
-
-const flipConfig: MenuItemOptions = {
-  name: '上下翻转',
-};
-const GarageDoorBoxEditMenu: ContextMenu = ContextMenu.init({
-  name: '设置车库门编辑菜单',
-  groups: [
-    {
-      items: [flipConfig],
-    },
-  ],
-});
-export class DrawGarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
-  static Name = 'garage_door_box_draw_right_menu';
-  constructor(app: IGraphicApp) {
-    super(DrawGarageDoorBoxInteraction.Name, app);
-    app.registerMenu(GarageDoorBoxEditMenu);
-  }
-  static init(app: IGraphicApp) {
-    return new DrawGarageDoorBoxInteraction(app);
-  }
-  filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
-    return grahpics
-      .filter((g) => g.type === GarageDoorBox.Type)
-      .map((g) => g as GarageDoorBox);
-  }
-  bind(g: GarageDoorBox): void {
-    g.on('_rightclick', this.onContextMenu, this);
-  }
-
-  unbind(g: GarageDoorBox): void {
-    g.off('_rightclick', this.onContextMenu, this);
-  }
-
-  onContextMenu(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const garageDoorBox = target.getGraphic() as GarageDoorBox;
-    this.app.updateSelected(garageDoorBox);
-    flipConfig.handler = () => {
-      garageDoorBox.datas.flip = !garageDoorBox.datas.flip;
-      garageDoorBox.repaint();
-    };
-    GarageDoorBoxEditMenu.open(e.global);
-  }
-}
-
-export class GarageDoorBoxOperateInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
-  static Name = 'garage_door_box_operate_menu';
-  constructor(app: IGraphicScene) {
-    super(GarageDoorBoxOperateInteraction.Name, app);
-  }
-  static init(app: IGraphicScene) {
-    return new GarageDoorBoxOperateInteraction(app);
-  }
-  filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
-    return grahpics
-      .filter((g) => g.type === GarageDoorBox.Type)
-      .map((g) => g as GarageDoorBox);
-  }
-  bind(g: GarageDoorBox): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.on('_leftclick', this.onLeftClick, this);
-  }
-
-  unbind(g: GarageDoorBox): void {
-    g.eventMode = 'none';
-    g.off('_leftclick', this.onLeftClick, this);
-  }
-  onLeftClick(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const garageDoorBox = target.getGraphic() as GarageDoorBox;
-    usePslStore().setPslParam(
-      garageDoorBox.datas.id,
-      garageDoorBox.datas.refPslMapCode
-    );
-  }
-}

src/drawApp/graphics/GarageDoorInteraction.ts

@@ -1,13 +1,27 @@
 import * as pb_1 from 'google-protobuf';
-import { FederatedMouseEvent } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
 import {
   GarageDoor,
   IGarageDoorData,
+  IGarageDoorState,
 } from 'src/graphics/garageDoor/GarageDoor';
-import { GraphicInteractionPlugin, JlGraphic, IGraphicScene } from 'jl-graphic';
+import {
+  GraphicInteractionPlugin,
+  JlGraphic,
+  IGraphicScene,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
 
 import { graphicData } from 'src/protos/stationLayoutGraphics';
-import { GraphicDataBase } from './GraphicDataBase';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { useLineStore } from 'src/stores/line-store';
+import { Dialog } from 'quasar';
+import CkmOperation from 'src/components/draw-app/dialogs/CkmOperation.vue';
+import { state } from 'src/protos/device_state';
+import { request } from 'src/protos/request';
+import { GarageDoorGraphicHitArea } from 'src/graphics/garageDoor/GarageDoorDrawAssistant';
+import { usePslStore } from 'src/stores/psl-store';
 
 export class GarageDoorData extends GraphicDataBase implements IGarageDoorData {
   constructor(data?: graphicData.GarageDoor) {
@@ -43,6 +57,12 @@ export class GarageDoorData extends GraphicDataBase implements IGarageDoorData {
   set centralizedStations(v: number[]) {
     this.data.centralizedStations = v;
   }
+  get refPslMapCode(): string {
+    return this.data.refPslMapCode;
+  }
+  set refPslMapCode(v: string) {
+    this.data.refPslMapCode = v;
+  }
   clone(): GarageDoorData {
     return new GarageDoorData(this.data.cloneMessage());
   }
@@ -54,35 +74,138 @@ export class GarageDoorData extends GraphicDataBase implements IGarageDoorData {
   }
 }
 
+export class GarageDoorState
+  extends GraphicStateBase
+  implements IGarageDoorState
+{
+  constructor(proto?: state.CkmState) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.CkmState();
+    }
+    super(states, GarageDoor.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get id(): number {
+    return this.states.id;
+  }
+  set id(id: number) {
+    this.states.id = id;
+  }
+  get mgj() {
+    return this.states.mgj;
+  }
+  set mgj(v: boolean) {
+    this.states.mgj = v;
+  }
+  get param(): request.CkmParam {
+    return this.states.param;
+  }
+  set param(param: request.CkmParam) {
+    this.states.param = param;
+  }
+  get local(): boolean {
+    return this.states.local;
+  }
+  set local(v: boolean) {
+    this.states.local = v;
+  }
+  get mplj() {
+    return this.states.mplj;
+  }
+  set mplj(v: boolean) {
+    this.states.mplj = v;
+  }
+  get states(): state.CkmState {
+    return this.getState<state.CkmState>();
+  }
+  clone(): GarageDoorState {
+    return new GarageDoorState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}
+
+const setCkmrParam: MenuItemOptions = { name: '设置参数' };
+const ckmOperateMenu: ContextMenu = ContextMenu.init({
+  name: '车库门操作菜单',
+  groups: [
+    {
+      items: [setCkmrParam],
+    },
+  ],
+});
+
 export class GarageDoorOperationInteraction extends GraphicInteractionPlugin<GarageDoor> {
   static Name = 'garage_door_operation';
-  constructor(scene: IGraphicScene) {
-    super(GarageDoorOperationInteraction.Name, scene);
+  constructor(app: IGraphicScene) {
+    super(GarageDoorOperationInteraction.Name, app);
+    app.registerMenu(ckmOperateMenu);
   }
-  static init(scene: IGraphicScene) {
-    return new GarageDoorOperationInteraction(scene);
+  static init(app: IGraphicScene) {
+    return new GarageDoorOperationInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): GarageDoor[] | undefined {
     return grahpics.filter((g): g is GarageDoor => g.type === GarageDoor.Type);
   }
   bind(g: GarageDoor): void {
     g.eventMode = 'static';
+    g.hitArea = new GarageDoorGraphicHitArea(g);
     g.cursor = 'pointer';
-    g.on('mousedown', this.onPress, this);
+    g.selectable = true;
+    g.rectBody.eventMode = 'static';
+    g.rectBody.cursor = 'pointer';
+    g.rectBody.selectable = true;
+    g.on('_rightclick', this.onContextMenu);
+    g.rectBody.on('_leftclick', this.onLeftClick, this);
   }
   unbind(g: GarageDoor): void {
     g.eventMode = 'none';
     g.cursor = 'default';
-    g.off('mousedown', this.onPress, this);
+    g.selectable = false;
+    g.rectBody.eventMode = 'none';
+    g.rectBody.cursor = 'default';
+    g.rectBody.selectable = false;
+    g.off('_rightclick', this.onContextMenu);
+    g.rectBody.off('_leftclick', this.onLeftClick, this);
   }
-  onPress(e: FederatedMouseEvent) {
-    const g = e.target as GarageDoor;
-    g.on('mouseleave', this.onRelease, this);
-    g.on('mouseup', this.onRelease, this);
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const garageDoor = target.getGraphic<GarageDoor>();
+    if (!garageDoor) return;
+    const lineStore = useLineStore();
+    setCkmrParam.handler = async () => {
+      if (lineStore.deviceOpreratDialogInstance) return;
+      lineStore.deviceOpreratDialogInstance = Dialog.create({
+        component: CkmOperation,
+        componentProps: {
+          id: garageDoor.id,
+          code: garageDoor.datas.code,
+          ckmForceProp: garageDoor.states.param.force,
+          ckmFaultProp: garageDoor.states.param.fault,
+          title: '车库门设置参数',
+        },
+        cancel: true,
+        persistent: true,
+      });
+    };
+    ckmOperateMenu.open(e.global);
   }
-  onRelease(e: FederatedMouseEvent) {
-    const g = e.target as GarageDoor;
-    g.off('mouseleave', this.onRelease, this);
-    g.off('mouseup', this.onRelease, this);
+  onLeftClick(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const garageDoor = target.getGraphic() as GarageDoor;
+    usePslStore().setPslParam(
+      garageDoor.datas.id,
+      garageDoor.datas.refPslMapCode
+    );
   }
 }

src/drawApp/graphics/HoldButtonInteraction.ts

@@ -0,0 +1,107 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { IHoldButtonData, HoldButton } from 'src/graphics/holdButton/HoldButton';
+import {
+  IGraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+  IGraphicScene,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { useIbpStore } from 'src/stores/ibp-store';
+import { Station } from 'src/graphics/station/Station';
+import { Platform } from 'src/graphics/platform/Platform';
+
+export class HoldButtonData extends GraphicDataBase implements IHoldButtonData {
+  constructor(data?: graphicData.HoldButton) {
+    let holdButton;
+    if (!data) {
+      holdButton = new graphicData.HoldButton({
+        common: GraphicDataBase.defaultCommonInfo(HoldButton.Type),
+      });
+    } else {
+      holdButton = data;
+    }
+    super(holdButton);
+  }
+
+  public get data(): graphicData.HoldButton {
+    return this.getData<graphicData.HoldButton>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get flip(): boolean {
+    return this.data.flip;
+  }
+  set flip(v: boolean) {
+    this.data.flip = v;
+  }
+  get refStand(): number {
+    return this.data.refStand;
+  }
+  set refStand(v: number) {
+    this.data.refStand = v;
+  }
+  clone(): HoldButtonData {
+    return new HoldButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: HoldButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: HoldButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+const flipConfig: MenuItemOptions = {
+  name: '上下翻转',
+};
+const HoldButtonEditMenu: ContextMenu = ContextMenu.init({
+  name: '扣车按钮编辑菜单',
+  groups: [
+    {
+      items: [flipConfig],
+    },
+  ],
+});
+export class DrawHoldButtonInteraction extends GraphicInteractionPlugin<HoldButton> {
+  static Name = 'hold_button_draw_right_menu';
+  constructor(app: IGraphicApp) {
+    super(DrawHoldButtonInteraction.Name, app);
+    app.registerMenu(HoldButtonEditMenu);
+  }
+  static init(app: IGraphicApp) {
+    return new DrawHoldButtonInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): HoldButton[] | undefined {
+    return grahpics
+      .filter((g) => g.type === HoldButton.Type)
+      .map((g) => g as HoldButton);
+  }
+  bind(g: HoldButton): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: HoldButton): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const holdButton = target.getGraphic() as HoldButton;
+    this.app.updateSelected(holdButton);
+    flipConfig.handler = () => {
+      holdButton.datas.flip = !holdButton.datas.flip;
+      holdButton.repaint();
+    };
+    HoldButtonEditMenu.open(e.global);
+  }
+}

src/drawApp/graphics/PslButtonInteraction.ts

@@ -81,6 +81,12 @@ export class PslButtonState
   set down(v: boolean) {
     this.states.down = v;
   }
+  get active(): boolean {
+    return this.states.active;
+  }
+  set active(v: boolean) {
+    this.states.active = v;
+  }
   get states(): state.ButtonState {
     return this.getState<state.ButtonState>();
   }

src/drawApp/graphics/SpksSwitchInteraction.ts

@@ -53,12 +53,12 @@ export class SpksSwitchData extends GraphicDataBase implements ISpksSwitchData {
   set refStand(v: number) {
     this.data.refStand = v;
   }
-  get refSections(): number[] {
-    return this.data.refSections;
-  }
-  set refSections(v: number[]) {
-    this.data.refSections = v;
-  }
+  // get refSections(): number[] {
+  //   return this.data.refSections;
+  // }
+  // set refSections(v: number[]) {
+  //   this.data.refSections = v;
+  // }
   clone(): SpksSwitchData {
     return new SpksSwitchData(this.data.cloneMessage());
   }
@@ -114,36 +114,3 @@ export class DrawSpksSwitchInteraction extends GraphicInteractionPlugin<SpksSwit
     SpksSwitchEditMenu.open(e.global);
   }
 }
-
-export class SpksSwitchOperationInteraction extends GraphicInteractionPlugin<SpksSwitch> {
-  static Name = 'spks_switch_operation';
-  constructor(app: IGraphicScene) {
-    super(SpksSwitchOperationInteraction.Name, app);
-  }
-  static init(app: IGraphicScene) {
-    return new SpksSwitchOperationInteraction(app);
-  }
-  filter(...grahpics: JlGraphic[]): SpksSwitch[] | undefined {
-    return grahpics.filter((g): g is SpksSwitch => g instanceof SpksSwitch);
-  }
-  bind(g: SpksSwitch): void {
-    g.eventMode = 'static';
-    g.cursor = 'pointer';
-    g.on('_leftclick', this.onLeftClick, this);
-  }
-  unbind(g: SpksSwitch): void {
-    g.off('_leftclick', this.onLeftClick, this);
-  }
-  onLeftClick(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const spksSwitch = target.getGraphic() as SpksSwitch;
-    const stand = this.app.queryStore.queryById<Platform>(
-      spksSwitch.datas.refStand
-    );
-    const station = this.app.queryStore.queryById<Station>(
-      stand.datas.refStation
-    );
-
-    useIbpStore().openIbpScene(station);
-  }
-}

src/drawApp/graphics/TccButtonInteraction.ts

@@ -11,6 +11,9 @@ import {
   ITccButtonState,
   TccButton,
 } from 'src/graphics/tccButton/TccButton';
+import { tccOperation } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
+import { request } from 'src/protos/request';
 
 export class TccButtonData extends GraphicDataBase implements ITccButtonData {
   constructor(data?: tccGraphicData.TccButton) {
@@ -55,12 +58,12 @@ export class TccButtonState
   extends GraphicStateBase
   implements ITccButtonState
 {
-  constructor(proto?: state.TrainControlState.EmergentButton) {
+  constructor(proto?: state.TrainControlState.ControlButton) {
     let states;
     if (proto) {
       states = proto;
     } else {
-      states = new state.TrainControlState.EmergentButton();
+      states = new state.TrainControlState.ControlButton();
     }
     super(states, TccButton.Type);
   }
@@ -73,8 +76,8 @@ export class TccButtonState
   set down(v: boolean) {
     this.states.passed = v;
   }
-  get states(): state.TrainControlState.EmergentButton {
-    return this.getState<state.TrainControlState.EmergentButton>();
+  get states(): state.TrainControlState.ControlButton {
+    return this.getState<state.TrainControlState.ControlButton>();
   }
   clone(): TccButtonState {
     return new TccButtonState(this.states.cloneMessage());
@@ -112,11 +115,21 @@ export class TccButtonOperateInteraction extends GraphicInteractionPlugin<TccBut
   }
 
   onClick(e: FederatedMouseEvent): void {
+    const simulationId = useLineStore().simulationId;
+    const tccId = useTccStore().tccId;
     const target = e.target as DisplayObject;
     const tccButton = target.getGraphic<TccButton>();
-    if (!tccButton) return;
-    tccButton.states.down = !tccButton.states.down;
-    tccButton.doRepaint();
-    console.log(tccButton.states.down);
+    if (!tccButton || !simulationId) return;
+    tccOperation({
+      simulationId,
+      trainId: tccId + '',
+      deviceId: tccButton.id,
+      controlType: request.TrainControl.TrainControlType.EMERGENT_BUTTON,
+      controlButton: {
+        active: !tccButton.states.down,
+      },
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    });
   }
 }

src/drawApp/graphics/TccHandleInteraction.ts

@@ -3,6 +3,8 @@ import {
   ITccHandleData,
   ITccHandleState,
   TccHandle,
+  tccHandleHeight,
+  zeroOffset,
 } from 'src/graphics/tccHandle/TccHandle';
 import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
@@ -86,6 +88,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
   isMouseDown = false;
   mouseDownBeginPos = 0;
   mouseDownTccHandleBeginPos = 0;
+  timeout: string | number | NodeJS.Timeout | undefined;
   constructor(app: IGraphicScene) {
     super(TccHandleInteraction.Name, app);
   }
@@ -99,29 +102,32 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     g._tccHandle.eventMode = 'static';
     g._tccHandle.cursor = 'Move';
     g._tccHandle.onmousedown = (e) => {
+      e.stopPropagation();
       this.onMouseDown(e);
     };
-    g._tccHandle.onmouseup = () => {
-      this.isMouseDown = false;
+    g._tccHandle.onmouseup = (e) => {
+      e.stopPropagation();
+      this.onMouseUp(e);
     };
     g.onmousemove = (e) => {
+      e.stopPropagation();
       this.onMouseMove(e);
     };
-    g.onmouseleave = () => {
-      this.isMouseDown = false;
-    };
   }
   unbind(g: TccHandle): void {
     g._tccHandle.eventMode = 'none';
     g._tccHandle.onmousedown = null;
     g._tccHandle.onmouseup = null;
     g.onmousemove = null;
-    g.onmouseleave = null;
+    clearTimeout(this.timeout);
   }
   onMouseDown(e: FederatedMouseEvent) {
     const target = e.target as DisplayObject;
     const tccHandle = target.getGraphic<TccHandle>();
     if (!tccHandle) return;
+    tccHandle.canDoRepaint = false;
+    useTccStore().tccHandleId = tccHandle.id;
+    useTccStore().mouseDownOnTccHandle = true;
     this.isMouseDown = true;
     this.mouseDownBeginPos = e.clientY;
     this.mouseDownTccHandleBeginPos = tccHandle._tccHandle.y;
@@ -132,16 +138,47 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
     if (!tccHandle) return;
     if (
       this.isMouseDown &&
-      tccHandle._tccHandle.y > -145 &&
-      tccHandle._tccHandle.y < 145
+      useTccStore().canvasMouseDown &&
+      tccHandle._tccHandle.y > -tccHandleHeight - 1 &&
+      tccHandle._tccHandle.y < tccHandleHeight + 1
     ) {
       tccHandle._tccHandle.y =
         this.mouseDownTccHandleBeginPos + e.clientY - this.mouseDownBeginPos;
-      if (tccHandle._tccHandle.y >= 145) {
-        tccHandle._tccHandle.y = 144;
-      } else if (tccHandle._tccHandle.y <= -145) {
-        tccHandle._tccHandle.y = -144;
+      if (tccHandle._tccHandle.y >= tccHandleHeight + 1) {
+        tccHandle._tccHandle.y = tccHandleHeight;
+      } else if (tccHandle._tccHandle.y <= -tccHandleHeight - 1) {
+        tccHandle._tccHandle.y = -tccHandleHeight;
+      }
+      let transFormHandleVal = 0;
+      if (
+        tccHandle._tccHandle.y >= -zeroOffset &&
+        tccHandle._tccHandle.y <= zeroOffset
+      ) {
+        tccHandle._tccHandle.y = 0;
+      } else if (tccHandle._tccHandle.y < -zeroOffset) {
+        transFormHandleVal = tccHandle._tccHandle.y + zeroOffset;
+      } else {
+        transFormHandleVal = tccHandle._tccHandle.y - zeroOffset;
+      }
+      tccHandle._stateVal = Number(
+        (-(transFormHandleVal / (tccHandleHeight - zeroOffset)) * 100).toFixed()
+      );
+      tccHandle.labelGraphic.text = Math.abs(tccHandle._stateVal) + '%';
+      tccHandle.labelGraphic.y = tccHandle._tccHandle.y;
+      if (this.timeout == undefined) {
+        this.timeout = setTimeout(() => {
+          useTccStore().onMouseUpFromTccHandle();
+          this.timeout = undefined;
+        }, 100);
       }
     }
   }
+  onMouseUp(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const tccHandle = target.getGraphic<TccHandle>();
+    if (!tccHandle) return;
+    tccHandle.canDoRepaint = true;
+    this.isMouseDown = false;
+    useTccStore().mouseDownOnTccHandle = false;
+  }
 }

src/drawApp/graphics/TccKeyInteraction.ts

@@ -4,8 +4,17 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
 import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
 import { state } from 'src/protos/device_state';
 import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
-import { type FederatedMouseEvent, DisplayObject, Point } from 'pixi.js';
+import {
+  type FederatedMouseEvent,
+  DisplayObject,
+  Point,
+  Sprite,
+} from 'pixi.js';
 import { useTccStore } from 'src/stores/tcc-store';
+import { useLineStore } from 'src/stores/line-store';
+import { tccOperation } from 'src/api/Simulation';
+import { errorNotify } from 'src/utils/CommonNotify';
+import { request } from 'src/protos/request';
 
 export class TccKeyData extends GraphicDataBase implements ITccKeyData {
   constructor(data?: tccGraphicData.TccKey) {
@@ -48,20 +57,20 @@ export class TccKeyData extends GraphicDataBase implements ITccKeyData {
 }
 
 export class TccKeyState extends GraphicStateBase implements ITccKeyState {
-  constructor(data?: state.TrainControlState.DirectionKeySwitch) {
+  constructor(data?: state.TrainControlState.SwitchKeyChange) {
     let tccKeyState;
     if (data) {
       tccKeyState = data;
     } else {
-      tccKeyState = new state.TrainControlState.DirectionKeySwitch();
+      tccKeyState = new state.TrainControlState.SwitchKeyChange();
     }
     super(tccKeyState, TccKey.Type);
   }
   get code(): string {
     return this.states.id + '';
   }
-  get states(): state.TrainControlState.DirectionKeySwitch {
-    return this.getState<state.TrainControlState.DirectionKeySwitch>();
+  get states(): state.TrainControlState.SwitchKeyChange {
+    return this.getState<state.TrainControlState.SwitchKeyChange>();
   }
   get position(): number {
     return this.states.val;
@@ -80,13 +89,148 @@ export class TccKeyState extends GraphicStateBase implements ITccKeyState {
   }
 }
 
-export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
-  static Name = 'TccKeyInteraction';
+export enum KeyRotationMethod {
+  jumpChange,
+  gradientChange,
+}
+export interface IKeyInteractionConfig {
+  gearPositionAmount?: number;
+  keyRotationMethod: KeyRotationMethod;
+  doAfterChangeRotation: () => void;
+}
+export abstract class KeyInteraction<
+  G extends JlGraphic
+> extends GraphicInteractionPlugin<G> {
   isMouseDown = false;
-  changeOnce = false;
+  ratatingSprite: Sprite = new Sprite();
   mouseDownBeginPos = new Point();
+  mouseDownBeginRotation = 0;
+  changeRotation = 0;
+  keyInteractionConfig: IKeyInteractionConfig;
+  constructor(
+    name: string,
+    app: IGraphicScene,
+    keyInteractionConfig: IKeyInteractionConfig
+  ) {
+    super(name, app);
+    this.keyInteractionConfig = keyInteractionConfig;
+  }
+  totalBind(g: G): void {
+    g.onmousemove = (e) => {
+      this.onMousemove(e);
+    };
+    g.onmouseup = (e) => {
+      e.stopPropagation();
+      this.isMouseDown = false;
+      this.keyInteractionConfig.doAfterChangeRotation();
+    };
+    g.onmousedown = () => {
+      useTccStore().tccKeyDirId = g.id;
+      useTccStore().mouseDownOnTccKeyDir = true;
+    };
+  }
+  totalUnbind(g: G): void {
+    g.onmousemove = null;
+    g.onmouseup = null;
+    g.onmousedown = null;
+  }
+  keyBind(g: Sprite): void {
+    this.ratatingSprite = g;
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.onmousedown = (e) => {
+      this.onMouseDown(e);
+    };
+  }
+  keyUnbind(g: Sprite): void {
+    g.eventMode = 'none';
+    g.onmousedown = null;
+  }
+  onMouseDown(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const g = target.getGraphic<TccKey>();
+    if (!g) return;
+    this.isMouseDown = true;
+    this.ratatingSprite = g._tccKey;
+    this.mouseDownBeginPos = this.app.toCanvasCoordinates(e.global);
+    this.mouseDownBeginRotation = this.ratatingSprite.rotation;
+    this.changeRotation = this.mouseDownBeginRotation;
+    useTccStore().tccKeyLastRotation = this.ratatingSprite.rotation;
+  }
+  onMousemove(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const g = target.getGraphic<G>();
+    if (!g) return;
+    if (this.isMouseDown && useTccStore().canvasMouseDown) {
+      const mouseEndPos = this.app.toCanvasCoordinates(e.global);
+      const { angle, direction } = calculateAngleAndDirection(
+        this.mouseDownBeginPos,
+        g.position,
+        mouseEndPos
+      );
+      if (
+        this.keyInteractionConfig.keyRotationMethod ==
+        KeyRotationMethod.jumpChange
+      ) {
+        if (direction == 'ssz') {
+          if (angle < 45) {
+            this.changeRotation = this.mouseDownBeginRotation;
+          } else if (
+            angle >= 45 &&
+            angle < 90 &&
+            this.mouseDownBeginRotation !== Math.PI / 4
+          ) {
+            this.changeRotation = this.mouseDownBeginRotation + Math.PI / 4;
+          } else if (
+            angle >= 90 &&
+            this.mouseDownBeginRotation == -Math.PI / 4
+          ) {
+            this.changeRotation = this.mouseDownBeginRotation + Math.PI / 2;
+          }
+        }
+        if (direction == 'nsz') {
+          if (angle < 45) {
+            this.changeRotation = this.mouseDownBeginRotation;
+          } else if (
+            angle >= 45 &&
+            angle < 90 &&
+            this.mouseDownBeginRotation !== -Math.PI / 4
+          ) {
+            this.changeRotation = this.mouseDownBeginRotation - Math.PI / 4;
+          } else if (
+            angle >= 90 &&
+            this.mouseDownBeginRotation == Math.PI / 4
+          ) {
+            this.changeRotation = this.mouseDownBeginRotation - Math.PI / 2;
+          }
+        }
+        if (this.ratatingSprite.rotation !== this.changeRotation) {
+          this.ratatingSprite.rotation = this.changeRotation;
+          useTccStore().onMouseUpFromTccKeyDir();
+        }
+      } else {
+        if (direction == 'ssz') {
+          this.ratatingSprite.rotation =
+            this.mouseDownBeginRotation + (angle / 180) * Math.PI;
+        } else {
+          this.ratatingSprite.rotation =
+            this.mouseDownBeginRotation - (angle / 180) * Math.PI;
+        }
+      }
+    }
+  }
+}
+
+export class TccKeyInteraction extends KeyInteraction<TccKey> {
+  static Name = 'TccKeyInteraction';
   constructor(app: IGraphicScene) {
-    super(TccKeyInteraction.Name, app);
+    super(TccKeyInteraction.Name, app, {
+      gearPositionAmount: 3,
+      keyRotationMethod: KeyRotationMethod.jumpChange,
+      doAfterChangeRotation: () => {
+        this.changeState();
+      },
+    });
   }
   static init(app: IGraphicScene) {
     return new TccKeyInteraction(app);
@@ -103,20 +247,8 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
     ) {
       g._tccKey.on('_leftclick', this.onClick);
     } else {
-      g._tccKey.onmousedown = (e) => {
-        this.onMouseDown(e);
-      };
-      g._tccKey.onmouseup = () => {
-        this.isMouseDown = false;
-        this.changeOnce = false;
-      };
-      g.onmousemove = (e) => {
-        this.onMousemove(e);
-      };
-      g.onmouseleave = () => {
-        this.isMouseDown = false;
-        this.changeOnce = false;
-      };
+      super.totalBind(g);
+      super.keyBind(g._tccKey);
     }
   }
   unbind(g: TccKey): void {
@@ -127,61 +259,32 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
     ) {
       g._tccKey.off('_leftclick', this.onClick);
     } else {
-      g._tccKey.onmousedown = null;
-      g._tccKey.onmouseup = null;
-      g.onmousemove = null;
-      g.onmouseleave = null;
+      super.totalUnbind(g);
+      super.keyUnbind(g._tccKey);
     }
   }
   onClick(e: FederatedMouseEvent): void {
+    const simulationId = useLineStore().simulationId;
+    const mapId = useLineStore().mapId;
+    const tccId = useTccStore().tccId;
     const target = e.target as DisplayObject;
     const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
-    tccKey.state.position = tccKey?.state.position == 0 ? 1 : 0;
-    tccKey.doRepaint();
-  }
-  onMouseDown(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
-    this.isMouseDown = true;
-    this.mouseDownBeginPos = tccKey
-      .getGraphicApp()
-      .getScene('tcc')
-      .toCanvasCoordinates(e.global);
-  }
-  onMousemove(e: FederatedMouseEvent) {
-    const target = e.target as DisplayObject;
-    const tccKey = target.getGraphic<TccKey>();
-    if (!tccKey) return;
-    if (this.isMouseDown) {
-      const mouseEndPos = tccKey
-        .getGraphicApp()
-        .getScene('tcc')
-        .toCanvasCoordinates(e.global);
-      const { angle, direction } = calculateAngleAndDirection(
-        this.mouseDownBeginPos,
-        tccKey.position,
-        mouseEndPos
-      );
-      if (
-        direction == 'ssz' &&
-        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
-        (tccKey._tccKey.rotation == -Math.PI / 4 ||
-          tccKey._tccKey.rotation == 0)
-      ) {
-        this.changeOnce = true;
-        tccKey._tccKey.rotation += Math.PI / 4;
-      }
-      if (
-        direction == 'nsz' &&
-        ((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
-        (tccKey._tccKey.rotation == Math.PI / 4 || tccKey._tccKey.rotation == 0)
-      ) {
-        this.changeOnce = true;
-        tccKey._tccKey.rotation -= Math.PI / 4;
-      }
+    if (!tccKey || !simulationId || !mapId) return;
+    const state = tccKey?.state.position == 0 ? true : false;
+    tccOperation({
+      simulationId,
+      trainId: tccId + '',
+      deviceId: tccKey.id,
+      controlType: request.TrainControl.TrainControlType.DRIVER_KEY_SWITCH,
+      driverKey: {
+        val: state,
+      },
+    }).catch((err) => {
+      errorNotify('操作失败', { message: err.origin.response.data.title });
+    });
   }
+  changeState() {
+    useTccStore().mouseDownOnTccKeyDir = false;
   }
 }
 

src/drawApp/graphics/TccLightInteraction.ts

@@ -0,0 +1,94 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  ItccLightData,
+  ItccLightState,
+  TccLight,
+} from 'src/graphics/tccLight/TccLight';
+import { tccGraphicData } from 'src/protos/tccGraphics';
+import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
+import { state } from 'src/protos/device_state';
+
+export class TccLightData extends GraphicDataBase implements ItccLightData {
+  constructor(data?: tccGraphicData.TccLight) {
+    let tccLight;
+    if (data) {
+      tccLight = data;
+    } else {
+      tccLight = new tccGraphicData.TccLight({
+        common: GraphicDataBase.defaultCommonInfo(TccLight.Type),
+      });
+    }
+    super(tccLight);
+  }
+
+  public get data(): tccGraphicData.TccLight {
+    return this.getData<tccGraphicData.TccLight>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get lightColor(): tccGraphicData.TccElementColor {
+    return this.data.lightColor;
+  }
+  set lightColor(v: tccGraphicData.TccElementColor) {
+    this.data.lightColor = v;
+  }
+  get activeLevel(): boolean {
+    return this.data.activeLevel;
+  }
+  set activeLevel(v: boolean) {
+    this.data.activeLevel = v;
+  }
+  get initialState(): boolean {
+    return this.data.initialState;
+  }
+  set initialState(v: boolean) {
+    this.data.initialState = v;
+  }
+  clone(): TccLightData {
+    return new TccLightData(this.data.cloneMessage());
+  }
+  copyFrom(data: TccLightData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TccLightData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+export class TccLightState extends GraphicStateBase implements ItccLightState {
+  constructor(proto?: state.TrainControlState.ControlLight) {
+    let states;
+    if (proto) {
+      states = proto;
+    } else {
+      states = new state.TrainControlState.ControlLight();
+    }
+    super(states, TccLight.Type);
+  }
+  get code(): string {
+    return this.states.id + '';
+  }
+  get active(): boolean {
+    return this.states.val;
+  }
+  set active(v: boolean) {
+    this.states.val = v;
+  }
+  get states(): state.TrainControlState.ControlLight {
+    return this.getState<state.TrainControlState.ControlLight>();
+  }
+  clone(): TccLightState {
+    return new TccLightState(this.states.cloneMessage());
+  }
+  copyFrom(data: GraphicStateBase): void {
+    pb_1.Message.copyInto(data._state, this._state);
+  }
+  eq(data: GraphicStateBase): boolean {
+    return pb_1.Message.equals(this._state, data._state);
+  }
+}

src/drawApp/graphics/TrainInteraction.ts

@@ -10,12 +10,13 @@ import {
   ContextMenu,
 } from 'jl-graphic';
 import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
-import { removeTrain } from 'src/api/Simulation';
+import { removeTrain, cancelTrainConn } from 'src/api/Simulation';
 import { useLineStore } from 'src/stores/line-store';
 import { successNotify, errorNotify } from '../../utils/CommonNotify';
 import { Dialog } from 'quasar';
 import SetTrainParam from 'src/components/draw-app/dialogs/SetTrainParam.vue';
 import SetTrainLink from 'src/components/draw-app/dialogs/SetTrainLink.vue';
+import { useTccStore } from 'src/stores/tcc-store';
 export class TrainState extends GraphicStateBase implements ITrainState {
   constructor(proto?: state.TrainMapState) {
     let states;
@@ -77,23 +78,23 @@ export class TrainState extends GraphicStateBase implements ITrainState {
   set devicePort(v: string) {
     this.states.devicePort = v;
   }
-  get pointTo(): boolean {
-    return this.states.pointTo;
+  get driftTo(): boolean {
+    return this.states.driftTo;
   }
-  set pointTo(v: boolean) {
-    this.states.pointTo = v;
+  set driftTo(v: boolean) {
+    this.states.driftTo = v;
   }
-  get runDirection(): boolean {
-    return this.states.runDirection;
+  get trainRunUp(): boolean {
+    return this.states.trainRunUp;
   }
-  set runDirection(v: boolean) {
-    this.states.runDirection = v;
+  set trainRunUp(v: boolean) {
+    this.states.trainRunUp = v;
   }
-  get headDirection(): boolean {
-    return this.states.headDirection;
+  get trainActiveDirection(): number {
+    return this.states.trainActiveDirection;
   }
-  set headDirection(v: boolean) {
-    this.states.headDirection = v;
+  set trainActiveDirection(v: number) {
+    this.states.trainActiveDirection = v;
   }
   get trainKilometer(): number {
     return this.states.trainKilometer;
@@ -673,6 +674,12 @@ export class TrainState extends GraphicStateBase implements ITrainState {
   set connType(v: state.TrainConnState.TrainConnType) {
     this.states.connState.connType = v;
   }
+  get typeName(): string {
+    return this.states.connState.typeName;
+  }
+  set typeName(v: string) {
+    this.states.connState.typeName = v;
+  }
   get trainControlMapId(): number {
     return this.states.connState.TrainControlMapId;
   }
@@ -696,14 +703,26 @@ const TrainParam: MenuItemOptions = {
 const TrainLink: MenuItemOptions = {
   name: '列车连接',
 };
+const CancelLink: MenuItemOptions = {
+  name: '取消连接',
+};
 const removeTrainConfig: MenuItemOptions = {
   name: '清除列车',
 };
+const DrivingCabConfig: MenuItemOptions = {
+  name: '列车驾驶台',
+};
 const TrainOperateMenu: ContextMenu = ContextMenu.init({
   name: '列车操作菜单',
   groups: [
     {
-      items: [TrainParam, TrainLink, removeTrainConfig],
+      items: [
+        TrainParam,
+        TrainLink,
+        CancelLink,
+        DrivingCabConfig,
+        removeTrainConfig,
+      ],
     },
   ],
 });
@@ -771,6 +790,24 @@ export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
         persistent: true,
       });
     };
+    CancelLink.handler = () => {
+      Dialog.create({
+        title: '确认',
+        message: `确认取消【${train.states.id}】列车的连接吗?`,
+        cancel: true,
+      }).onOk(async () => {
+        cancelTrainConn({
+          id: simulationId,
+          trainId: train.code,
+        })
+          .then(() => {
+            successNotify('列车取消连接成功！');
+          })
+          .catch((err) => {
+            errorNotify('列车取消连接失败！', err);
+          });
+      });
+    };
     removeTrainConfig.handler = () => {
       Dialog.create({
         title: '确认',
@@ -790,6 +827,12 @@ export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
           });
       });
     };
+    DrivingCabConfig.handler = () => {
+      useTccStore().setTccParam(
+        parseInt(train.states.id),
+        train.states.trainControlMapId
+      );
+    };
 
     TrainOperateMenu.open(e.global);
   }

src/drawApp/graphics/TransponderInteraction.ts

@@ -24,14 +24,15 @@ import {
   resetMessageTransponder,
   resetPositionTransponder,
   stopTransponderTelegram,
-  sendTransponderTelegram
+  sendTransponderTelegram,
 } from 'src/api/Simulation';
 import { errorNotify } from 'src/utils/CommonNotify';
 import { state } from 'src/protos/device_state';
 
 export class TransponderData
   extends GraphicDataBase
-  implements ITransponderData {
+  implements ITransponderData
+{
   constructor(data?: graphicData.Transponder) {
     let transponder;
     if (!data) {
@@ -92,6 +93,24 @@ export class TransponderData
   set type(v: TransponderTypeEnum) {
     this.data.type = v;
   }
+  get originalCode(): string {
+    return this.data.originalCode;
+  }
+  set originalCode(v: string) {
+    this.data.originalCode = v;
+  }
+  get leuIndex(): number {
+    return this.data.leuIndex;
+  }
+  set leuIndex(v: number) {
+    this.data.leuIndex = v;
+  }
+  get leuInsideIndex(): number {
+    return this.data.leuInsideIndex;
+  }
+  set leuInsideIndex(v: number) {
+    this.data.leuInsideIndex = v;
+  }
   clone(): TransponderData {
     return new TransponderData(this.data.cloneMessage());
   }
@@ -127,7 +146,8 @@ const TransponderOperationMenu: ContextMenu = ContextMenu.init({
 
 export class TransponderState
   extends GraphicStateBase
-  implements ITransponderState {
+  implements ITransponderState
+{
   constructor(proto?: state.BaliseState) {
     let states;
     if (proto) {

src/drawApp/graphics/UnattengedButtonInteraction.ts

@@ -0,0 +1,107 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { IUnattengedButtonData, UnattengedButton } from 'src/graphics/unattengedButton/UnattengedButton';
+import {
+  IGraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+  IGraphicScene,
+  MenuItemOptions,
+  ContextMenu,
+} from 'jl-graphic';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+import { useIbpStore } from 'src/stores/ibp-store';
+import { Station } from 'src/graphics/station/Station';
+import { Platform } from 'src/graphics/platform/Platform';
+
+export class UnattengedButtonData extends GraphicDataBase implements IUnattengedButtonData {
+  constructor(data?: graphicData.UnattengedButton) {
+    let unattengedButton;
+    if (!data) {
+      unattengedButton = new graphicData.UnattengedButton({
+        common: GraphicDataBase.defaultCommonInfo(UnattengedButton.Type),
+      });
+    } else {
+      unattengedButton = data;
+    }
+    super(unattengedButton);
+  }
+
+  public get data(): graphicData.UnattengedButton {
+    return this.getData<graphicData.UnattengedButton>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get flip(): boolean {
+    return this.data.flip;
+  }
+  set flip(v: boolean) {
+    this.data.flip = v;
+  }
+  get refStand(): number {
+    return this.data.refStand;
+  }
+  set refStand(v: number) {
+    this.data.refStand = v;
+  }
+  clone(): UnattengedButtonData {
+    return new UnattengedButtonData(this.data.cloneMessage());
+  }
+  copyFrom(data: UnattengedButtonData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: UnattengedButtonData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+const flipConfig: MenuItemOptions = {
+  name: '上下翻转',
+};
+const UnattengedButtonEditMenu: ContextMenu = ContextMenu.init({
+  name: '无人折返按钮编辑菜单',
+  groups: [
+    {
+      items: [flipConfig],
+    },
+  ],
+});
+export class DrawUnattengedButtonInteraction extends GraphicInteractionPlugin<UnattengedButton> {
+  static Name = 'unattenged_button_draw_right_menu';
+  constructor(app: IGraphicApp) {
+    super(DrawUnattengedButtonInteraction.Name, app);
+    app.registerMenu(UnattengedButtonEditMenu);
+  }
+  static init(app: IGraphicApp) {
+    return new DrawUnattengedButtonInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): UnattengedButton[] | undefined {
+    return grahpics
+      .filter((g) => g.type === UnattengedButton.Type)
+      .map((g) => g as UnattengedButton);
+  }
+  bind(g: UnattengedButton): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: UnattengedButton): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const unattengedButton = target.getGraphic() as UnattengedButton;
+    this.app.updateSelected(unattengedButton);
+    flipConfig.handler = () => {
+      unattengedButton.datas.flip = !unattengedButton.datas.flip;
+      unattengedButton.repaint();
+    };
+    UnattengedButtonEditMenu.open(e.global);
+  }
+}

src/drawApp/jkApp.ts

@@ -16,7 +16,7 @@ import {
   AxleCountingSectionTemplate,
 } from 'src/graphics/axleCountingSection/AxleCountingSection';
 import { AxleCountingSectionDraw } from 'src/graphics/axleCountingSection/AxleCountingSectionAssistant';
-import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction';
+import { AxleCountingSectionData, AxleCountingSectionStates } from './graphics/AxleCountingSectionInteraction';
 import {
   SectionLink,
   SectionLinkTemplate,
@@ -104,7 +104,7 @@ export function initJkDrawApp(): IDrawApp {
   new SectionLinkDraw(app, new SectionLinkTemplate(new SectionLinkData()));
   new AxleCountingSectionDraw(
     app,
-    new AxleCountingSectionTemplate(new AxleCountingSectionData())
+    new AxleCountingSectionTemplate(new AxleCountingSectionData(), new AxleCountingSectionStates())
   );
   new EsbButtonDraw(
     app,

src/drawApp/lineScene.ts

@@ -21,13 +21,9 @@ import {
   Signal,
   KilometerSystem,
 } from 'src/graphics/signal/Signal';
-import {
-  FloodGateData,
-  FloodGateOperationInteraction,
-} from './graphics/FloodGateInteraction';
-import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
 import {
   CarWashingData,
+  CarWashingState,
   CarWashingOperationInteraction,
 } from './graphics/CarWashingInteraction';
 import {
@@ -37,6 +33,7 @@ import {
 import {
   GarageDoorData,
   GarageDoorOperationInteraction,
+  GarageDoorState,
 } from './graphics/GarageDoorInteraction';
 import {
   GarageDoor,
@@ -109,7 +106,11 @@ import {
   SectionLinkData,
   SectionLinkOperateInteraction,
 } from './graphics/SectionLinkInteraction';
-import { AxleCountingSectionData } from './graphics/AxleCountingSectionInteraction';
+import {
+  AxleCountingSectionData,
+  AxleCountingSectionOperateInteraction,
+  AxleCountingSectionStates,
+} from './graphics/AxleCountingSectionInteraction';
 import { LogicSectionData } from './graphics/LogicSectionInteraction';
 import { Notify, QNotifyUpdateOptions, Dialog } from 'quasar';
 import {
@@ -123,16 +124,8 @@ import {
 import { GatedBox, GatedBoxTemplate } from 'src/graphics/gatedBox/GatedBox';
 import { EsbButton, EsbButtonTemplate } from 'src/graphics/esbButton/EsbButton';
 import { StopPositionData } from './graphics/StopPositionInteraction';
-import {
-  SpksSwitchData,
-  SpksSwitchOperationInteraction,
-} from './graphics/SpksSwitchInteraction';
+import { SpksSwitchData } from './graphics/SpksSwitchInteraction';
 import { GatedBoxData } from './graphics/GatedBoxInteraction';
-import { GarageDoorBoxData } from './graphics/GarageDoorBoxInteraction';
-import {
-  GarageDoorBox,
-  GarageDoorBoxTemplate,
-} from 'src/graphics/garageDoorBox/GarageDoorBox';
 import {
   EsbButtonData,
   EsbButtonOperationInteraction,
@@ -174,7 +167,6 @@ import {
 } from 'src/graphics/trackLogicSection/TrackLogicSection';
 import { TrackLogicSectionData } from './graphics/TrackLogicSectionInteraction';
 import { GatedBoxOperateInteraction } from './graphics/GatedBoxInteraction';
-import { GarageDoorBoxOperateInteraction } from './graphics/GarageDoorBoxInteraction';
 import { CategoryType } from 'src/components/CategoryType';
 import {
   AutoReturnBox,
@@ -198,6 +190,14 @@ import {
   IbpBoxData,
   IbpBoxOperateInteraction,
 } from './graphics/IbpBoxInteraction';
+import { FloodGate, FloodGateTemplate } from 'src/graphics/floodGate/FloodGate';
+import {
+  FloodGateData,
+  FloodGateOperationInteraction,
+  FloodGateState,
+} from './graphics/FloodGateInteraction';
+import { HoldButton } from 'src/graphics/holdButton/HoldButton';
+import { UnattengedButton } from 'src/graphics/unattengedButton/UnattengedButton';
 
 const showOptions: MenuItemOptions = {
   name: '显示控制',
@@ -261,9 +261,10 @@ export const layerList = [
   { label: '轨道逻辑区段', value: TrackLogicSection.Type, defaultShow: false },
   { label: '自动折返按钮箱', value: AutoReturnBox.Type, defaultShow: true },
   { label: '车库门', value: GarageDoor.Type, defaultShow: true },
-  { label: '防淹门', value: FloodGate.Type, defaultShow: true },
   { label: '洗车机', value: CarWashing.Type, defaultShow: true },
-  { label: '车库门设置', value: GarageDoorBox.Type, defaultShow: true },
+  { label: '防淹门', value: FloodGate.Type, defaultShow: true },
+  { label: '扣车按钮', value: HoldButton.Type, defaultShow: true },
+  { label: '无人折返按钮', value: UnattengedButton.Type, defaultShow: true },
 ];
 
 let lineScene: IGraphicScene;
@@ -311,7 +312,10 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
     new TrainWindowTemplate(new TrainWindowData()),
     new SeparatorTemplate(new SeparatorData()),
     new SectionLinkTemplate(new SectionLinkData()),
-    new AxleCountingSectionTemplate(new AxleCountingSectionData()),
+    new AxleCountingSectionTemplate(
+      new AxleCountingSectionData(),
+      new AxleCountingSectionStates()
+    ),
     new LogicSectionTemplate(new LogicSectionData()),
     new StopPositionTemplate(new StopPositionData()),
     new SpksSwitchTemplate(new SpksSwitchData()),
@@ -332,10 +336,9 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
       new AutoReturnBoxData(),
       new AutoReturnBoxState()
     ),
-    new CarWashingTemplate(new CarWashingData()),
-    new GarageDoorTemplate(new GarageDoorData()),
-    new FloodGateTemplate(new FloodGateData()),
-    new GarageDoorBoxTemplate(new GarageDoorBoxData()),
+    new CarWashingTemplate(new CarWashingData(), new CarWashingState()),
+    new GarageDoorTemplate(new GarageDoorData(), new GarageDoorState()),
+    new FloodGateTemplate(new FloodGateData(), new FloodGateState()),
   ];
   lineScene.registerGraphicTemplates(...graphicTemplate);
   SignalOperateInteraction.init(lineScene);
@@ -348,17 +351,18 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) {
   TurnoutOperationPlugin.init(lineScene);
   TransponderOperationPlugin.init(lineScene);
   EsbButtonOperationInteraction.init(lineScene);
-  SpksSwitchOperationInteraction.init(lineScene);
   AutoReturnBoxOperationInteraction.init(lineScene);
   PslBoxOperateInteraction.init(lineScene);
   IbpBoxOperateInteraction.init(lineScene);
   CarWashingOperationInteraction.init(lineScene);
   GarageDoorOperationInteraction.init(lineScene);
   FloodGateOperationInteraction.init(lineScene);
-  GarageDoorBoxOperateInteraction.init(lineScene);
   if (categoryType === CategoryType.TH) {
     GatedBoxOperateInteraction.init(lineScene);
   }
+  if (categoryType === CategoryType.JK) {
+    AxleCountingSectionOperateInteraction.init(lineScene);
+  }
   // 画布右键菜单
   lineScene.registerMenu(DefaultCanvasMenu);
   lineScene.canvas.on('_rightclick', (e) => {
@@ -430,6 +434,11 @@ function handleSubscribe(lineScene: IGraphicScene) {
             states.push(new SectionStates(item));
           }
         });
+        storage.allStatus.axleCountingSection.forEach((item) => {
+          if (item.id) {
+            states.push(new AxleCountingSectionStates(item));
+          }
+        });
         storage.allStatus.psdState.forEach((item) => {
           if (item.id) {
             states.push(new ScreenDoorState(item));
@@ -461,6 +470,21 @@ function handleSubscribe(lineScene: IGraphicScene) {
             states.push(new TransponderState(item));
           }
         });
+        storage.allStatus.ckmStates.forEach((item) => {
+          if (item.id) {
+            states.push(new GarageDoorState(item));
+          }
+        });
+        storage.allStatus.fymStates.forEach((item) => {
+          if (item.id) {
+            states.push(new FloodGateState(item));
+          }
+        });
+        storage.allStatus.xcjStates.forEach((item) => {
+          if (item.id) {
+            states.push(new CarWashingState(item));
+          }
+        });
         storage.allStatus.trainState.forEach((item) => {
           // 列车
           if (!item.show) {
@@ -519,7 +543,7 @@ function handleSubscribe(lineScene: IGraphicScene) {
       msgNotify = Notify.create({
         type: 'negative',
         timeout: 0,
-        position: 'top-right',
+        position: 'top',
         message: '通信链接已断开！',
       });
     } else if (msgNotify && connected) {
@@ -660,9 +684,6 @@ export async function loadLineDatas(): Promise<IGraphicStorage> {
     storage.floodGates.forEach((floodGate) => {
       datas.push(new FloodGateData(floodGate));
     });
-    storage.garageDoorBoxes.forEach((garageDoorBox) => {
-      datas.push(new GarageDoorBoxData(garageDoorBox));
-    });
     // const linkIdGenerator = new IdGenerator(Link.Type);
     // storage.CalculateLink.forEach((link) => {
     //   const g = new LinkData(link);

src/drawApp/pslApp.ts

@@ -260,7 +260,6 @@ export function loadGatedRelateDeviceList() {
 
 export function creatGatedRelateDevice(row: graphicData.DeviceCombinationtype) {
   refDevicesList.push(row);
-  console.log(refDevicesList, '====');
   drawApp?.emit('postdataloaded');
 }
 

src/drawApp/pslScene.ts

@@ -69,15 +69,17 @@ function handleSubscribe(pslScene: IGraphicScene) {
       const states: GraphicState[] = [];
       const storage = state.PushedDevicesStatus.deserialize(message);
       if (storage.all) {
-        //   storage.allStatus.buttonState.forEach((item) => {
-        //     if (item.id) {
-        //       states.push(new PslButtonState(item));
-        //     }
-        //   });
+        storage.allStatus.buttonState.forEach((item) => {
+          if (item.id) {
+            states.push(new PslButtonState(item));
+          }
+        });
       }
-      // console.log(states, 'states');
       return states;
     },
+    graphicQueryer: (state, store) => {
+      return store.queryById(+state.code);
+    },
   });
 }
 

src/drawApp/relayCabinetGraphics/RelayInteraction.ts

@@ -46,6 +46,18 @@ export class RelayData extends GraphicDataBase implements IRelayData {
   set newModel(v: relayCabinetGraphicData.Relay.ModelType) {
     this.data.newModel = v;
   }
+  get showCode(): string {
+    return this.data.showCode;
+  }
+  set showCode(v: string) {
+    this.data.showCode = v;
+  }
+  get defaultInitialPosition(): relayCabinetGraphicData.CjDataItem.PostionType {
+    return this.data.defaultInitialPosition;
+  }
+  set defaultInitialPosition(v: relayCabinetGraphicData.CjDataItem.PostionType) {
+    this.data.defaultInitialPosition = v;
+  }
   clone(): RelayData {
     return new RelayData(this.data.cloneMessage());
   }

src/drawApp/relayCabinetLayoutApp.ts

@@ -125,6 +125,7 @@ export function initDrawApp(): IDrawApp {
     })
   );
   app.on('postdataloaded', () => {
+    refRelaysListMap.clear();
     refRelaysList.forEach((device) => {
       device.combinationtypes.forEach((combinationtype) => {
         combinationtype.refRelays.forEach((relayId) => {
@@ -230,39 +231,10 @@ export function saveDrawDatas(app: IDrawApp) {
       );
     }
   });
-  // storage.relayCabinets.forEach((item) => {
-  //   item.common.newId = +item.common.id;
-  // });
-  // storage.relays.forEach((item) => {
-  //   item.common.newId = +item.common.id;
-  // });
-  // storage.phaseFailureProtectors.forEach((item) => {
-  //   item.common.newId = +item.common.id;
-  // });
-  // storage.signalFaultAlarms.forEach((item) => {
-  //   item.common.newId = +item.common.id;
-  // });
   storage.deviceRelateRelayList = refRelaysList;
   storage.UniqueIdPrefix = UniqueIdPrefix;
   storage.ciCjList = ciCjList;
   storage.ciQdList = ciQdList;
-  // storage.deviceRelateRelayList.forEach((item) => {
-  //   item.combinationtypes.forEach((itemB) => {
-  //     itemB.newrefRelays = itemB.refRelays.map((item) => +item);
-  //   });
-  // });
-  // storage.ciCjList?.cjList.forEach((item) => {
-  //   item.bitList.forEach((item) => {
-  //     item.refRelays.forEach((itemB) => {
-  //       itemB.newrelayId = +itemB.relayId;
-  //     });
-  //   });
-  // });
-  // storage.ciQdList?.qdList.forEach((item) => {
-  //   item.bitList.forEach((itemB) => {
-  //     itemB.newrefRelays = itemB.refRelays.map((item) => +item);
-  //   });
-  // });
   const base64 = fromUint8Array(storage.serialize());
   console.log('保存数据', storage);
   return base64;
@@ -384,15 +356,7 @@ export function loadCiCjList() {
 
 export function creatCiCjList(rows: number, cols: number) {
   if (ciCjList == undefined) {
-    ciCjList = new relayCabinetGraphicData.CiCj();
-    ciCjList.dsCount = rows;
-    for (let i = 0; i < cols; i++) {
-      ciCjList.cjList[i] = new relayCabinetGraphicData.CjDataSet();
-      ciCjList.cjList[i].name = 'D' + (i + 1);
-      for (let j = 0; j < rows; j++) {
-        ciCjList.cjList[i].bitList[j] = new relayCabinetGraphicData.CjData();
-      }
-    }
+    clearCiCjList(rows, cols);
   } else {
     const oldRows = ciCjList.dsCount;
     ciCjList.dsCount = rows;
@@ -435,7 +399,11 @@ export function creatCiCjListByCombinationtype(
     ciCjList.cjList[i] = new relayCabinetGraphicData.CjDataSet();
     ciCjList.cjList[i].name = 'D' + (i + 1);
     for (let j = 0; j < rows; j++) {
-      if (i < cols - 1 || (i == cols - 1 && j < allCjData.length % rows)) {
+      if (
+        i < cols - 1 ||
+        (i == cols - 1 && j < allCjData.length % rows) ||
+        (i == cols - 1 && allCjData.length % rows == 0)
+      ) {
         ciCjList.cjList[i].bitList[j] = allCjData[i * rows + j];
       } else {
         ciCjList.cjList[i].bitList[j] = new relayCabinetGraphicData.CjData();
@@ -444,6 +412,101 @@ export function creatCiCjListByCombinationtype(
   }
 }
 
+export function checkCiCjListByCombinationtype(
+  needChangeCjDataMap: Map<
+    string,
+    {
+      posInCiCjListindex: number;
+      relayId: number;
+    }[]
+  >,
+  needDeleteCjDataMap: Map<string, number[]>
+) {
+  ciCjList.cjList.forEach((CjDataSet, i) => {
+    CjDataSet.bitList.forEach((CjData, j) => {
+      const newIdInfo = needChangeCjDataMap.get(`${j}-${i}`);
+      if (newIdInfo) {
+        newIdInfo.forEach((info) => {
+          ciCjList.cjList[i].bitList[j].refRelays[
+            info.posInCiCjListindex
+          ].relayId = info.relayId;
+        });
+      }
+      const deleteIdInfo = needDeleteCjDataMap.get(`${j}-${i}`);
+      if (deleteIdInfo) {
+        deleteIdInfo.forEach((index) => {
+          ciCjList.cjList[i].bitList[j].refRelays[index].relayId = 999999;
+        });
+      }
+    });
+  });
+  ciCjList.cjList.forEach((CjDataSet, i) => {
+    CjDataSet.bitList.forEach((CjData, j) => {
+      const newRefRelays = CjData.refRelays.filter(
+        (refRelay) => refRelay.relayId !== 999999
+      );
+      ciCjList.cjList[i].bitList[j].refRelays = newRefRelays;
+    });
+  });
+}
+
+export function clearCiCjList(rows: number, cols: number) {
+  ciCjList = new relayCabinetGraphicData.CiCj();
+  ciCjList.dsCount = rows;
+  for (let i = 0; i < cols; i++) {
+    ciCjList.cjList[i] = new relayCabinetGraphicData.CjDataSet();
+    ciCjList.cjList[i].name = 'D' + (i + 1);
+    for (let j = 0; j < rows; j++) {
+      ciCjList.cjList[i].bitList[j] = new relayCabinetGraphicData.CjData();
+    }
+  }
+}
+
+export function deleteCjDataPositionByIndex(row: number, col: number) {
+  const allCjData: relayCabinetGraphicData.CjData[] = [];
+  ciCjList.cjList.forEach((cj, i) => {
+    cj.bitList.forEach((bit, j) => {
+      if (i !== col || j !== row) {
+        allCjData.push(bit);
+      }
+    });
+  });
+  allCjData.push(new relayCabinetGraphicData.CjData());
+  const allCjData2D = convertTo2DArray(
+    allCjData,
+    ciCjList.cjList.length,
+    ciCjList.dsCount
+  ) as relayCabinetGraphicData.CjData[][];
+  ciCjList.cjList.forEach((cj, i) => {
+    cj.bitList.forEach((bit, j) => {
+      cj.bitList[j] = allCjData2D[i][j];
+    });
+  });
+}
+
+export function addCjDataPositionByIndex(row: number, col: number) {
+  const allCjData: relayCabinetGraphicData.CjData[] = [];
+  ciCjList.cjList.forEach((cj, i) => {
+    cj.bitList.forEach((bit, j) => {
+      allCjData.push(bit);
+      if (i == col && j == row) {
+        allCjData.push(new relayCabinetGraphicData.CjData());
+      }
+    });
+  });
+  allCjData.pop();
+  const allCjData2D = convertTo2DArray(
+    allCjData,
+    ciCjList.cjList.length,
+    ciCjList.dsCount
+  ) as relayCabinetGraphicData.CjData[][];
+  ciCjList.cjList.forEach((cj, i) => {
+    cj.bitList.forEach((bit, j) => {
+      cj.bitList[j] = allCjData2D[i][j];
+    });
+  });
+}
+
 //驱动列表的增删改查
 let ciQdList: relayCabinetGraphicData.CiQd;
 export function loadCiQdList() {
@@ -452,15 +515,7 @@ export function loadCiQdList() {
 
 export function creatCiQdList(rows: number, cols: number) {
   if (ciQdList == undefined) {
-    ciQdList = new relayCabinetGraphicData.CiQd();
-    ciQdList.dsCount = rows;
-    for (let i = 0; i < cols; i++) {
-      ciQdList.qdList[i] = new relayCabinetGraphicData.QdDataSet();
-      ciQdList.qdList[i].name = 'D' + (i + 1);
-      for (let j = 0; j < rows; j++) {
-        ciQdList.qdList[i].bitList[j] = new relayCabinetGraphicData.QdData();
-      }
-    }
+    clearCiQdList(rows, cols);
   } else {
     const oldRows = ciQdList.dsCount;
     ciQdList.dsCount = rows;
@@ -511,3 +566,115 @@ export function creatCiQdListByCombinationtype(
     }
   }
 }
+
+export function checkCiQdListByCombinationtype(
+  needChangeCjDataMap: Map<
+    string,
+    {
+      posInCiQdListindex: number;
+      relayId: number;
+    }[]
+  >,
+  needDeleteCjDataMap: Map<string, number[]>
+) {
+  ciQdList.qdList.forEach((qdDataSet, i) => {
+    qdDataSet.bitList.forEach((qdData, j) => {
+      const newIdInfo = needChangeCjDataMap.get(`${j}-${i}`);
+      if (newIdInfo) {
+        newIdInfo.forEach((info) => {
+          ciQdList.qdList[i].bitList[j].refRelays[info.posInCiQdListindex] =
+            info.relayId;
+        });
+      }
+      const deleteIdInfo = needDeleteCjDataMap.get(`${j}-${i}`);
+      if (deleteIdInfo) {
+        deleteIdInfo.forEach((index) => {
+          ciQdList.qdList[i].bitList[j].refRelays[index] = 999999;
+        });
+      }
+    });
+  });
+  ciQdList.qdList.forEach((qdDataSet, i) => {
+    qdDataSet.bitList.forEach((qdData, j) => {
+      const newRefRelays = qdData.refRelays.filter(
+        (refRelayId) => refRelayId !== 999999
+      );
+      ciQdList.qdList[i].bitList[j].refRelays = newRefRelays;
+    });
+  });
+}
+
+export function clearCiQdList(rows: number, cols: number) {
+  ciQdList = new relayCabinetGraphicData.CiQd();
+  ciQdList.dsCount = rows;
+  for (let i = 0; i < cols; i++) {
+    ciQdList.qdList[i] = new relayCabinetGraphicData.QdDataSet();
+    ciQdList.qdList[i].name = 'D' + (i + 1);
+    for (let j = 0; j < rows; j++) {
+      ciQdList.qdList[i].bitList[j] = new relayCabinetGraphicData.QdData();
+    }
+  }
+}
+
+export function deleteQdDataPositionByIndex(row: number, col: number) {
+  const allQdData: relayCabinetGraphicData.QdData[] = [];
+  ciQdList.qdList.forEach((qd, i) => {
+    qd.bitList.forEach((bit, j) => {
+      if (i !== col || j !== row) {
+        allQdData.push(bit);
+      }
+    });
+  });
+  allQdData.push(new relayCabinetGraphicData.QdData());
+  const allQdData2D = convertTo2DArray(
+    allQdData,
+    ciQdList.qdList.length,
+    ciQdList.dsCount
+  ) as relayCabinetGraphicData.QdData[][];
+  ciQdList.qdList.forEach((qd, i) => {
+    qd.bitList.forEach((bit, j) => {
+      qd.bitList[j] = allQdData2D[i][j];
+    });
+  });
+}
+
+export function addQdDataPositionByIndex(row: number, col: number) {
+  const allQdData: relayCabinetGraphicData.QdData[] = [];
+  ciQdList.qdList.forEach((qd, i) => {
+    qd.bitList.forEach((bit, j) => {
+      allQdData.push(bit);
+      if (i == col && j == row) {
+        allQdData.push(new relayCabinetGraphicData.QdData());
+      }
+    });
+  });
+  allQdData.pop();
+  const allQdData2D = convertTo2DArray(
+    allQdData,
+    ciQdList.qdList.length,
+    ciQdList.dsCount
+  ) as relayCabinetGraphicData.QdData[][];
+  ciQdList.qdList.forEach((qd, i) => {
+    qd.bitList.forEach((bit, j) => {
+      qd.bitList[j] = allQdData2D[i][j];
+    });
+  });
+}
+
+//一维数组变二维数组
+export function convertTo2DArray<T>(
+  sourceArray: T[],
+  rowCount: number,
+  colCount: number
+): T[][] {
+  const result: T[][] = [];
+  for (let i = 0; i < rowCount; i++) {
+    const row: T[] = [];
+    for (let j = 0; j < colCount; j++) {
+      const index = i * colCount + j;
+      row.push(sourceArray[index]);
+    }
+    result.push(row);
+  }
+  return result;
+}

src/drawApp/relayScene.ts

@@ -159,7 +159,7 @@ function handleSubscribe(relayScene: IGraphicScene) {
       msgNotify = Notify.create({
         type: 'negative',
         timeout: 0,
-        position: 'top-right',
+        position: 'top',
         message: '通信链接已断开！',
       });
     } else if (msgNotify && connected) {

src/drawApp/tccApp.ts

@@ -32,6 +32,10 @@ import { TccKeyData, TccKeyState } from './graphics/TccKeyInteraction';
 import { TccHandleDraw } from 'src/graphics/tccHandle/TccHandleDrawAssistant';
 import { TccHandle, TccHandleTemplate } from 'src/graphics/tccHandle/TccHandle';
 import { TccHandleData, TccHandleState } from './graphics/TccHandleInteraction';
+import { TccLightDraw } from 'src/graphics/tccLight/TccLightDrawAssistant';
+import { TccLightData, TccLightState } from './graphics/TccLightInteraction';
+import { TccLight, TccLightTemplate } from 'src/graphics/tccLight/TccLight';
+
 
 const UndoOptions: MenuItemOptions = {
   name: '撤销',
@@ -87,6 +91,10 @@ export function initTccDrawApp(): IDrawApp {
     drawApp,
     new TccHandleTemplate(new TccHandleData(), new TccHandleState())
   );
+  new TccLightDraw(
+    app,
+    new TccLightTemplate(new TccLightData(), new TccLightState())
+  );
 
   // 画布右键菜单
   app.registerMenu(DefaultCanvasMenu);
@@ -181,6 +189,8 @@ export function saveTccDrawDatas(app: IDrawApp) {
       storage.tccKeys.push(g.saveData<TccKeyData>().data);
     } else if (g instanceof TccHandle) {
       storage.tccHandles.push(g.saveData<TccHandleData>().data);
+    } else if (g instanceof TccLight) {
+      storage.tccLights.push(g.saveData<TccLightData>().data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -214,6 +224,9 @@ export async function loadTccDrawDatas(): Promise<IGraphicStorage> {
     storage.tccTexts.forEach((tccText) => {
       datas.push(new TccTextData(tccText));
     });
+    storage.tccLights.forEach((tccLight) => {
+      datas.push(new TccLightData(tccLight));
+    });
     return {
       canvasProperty: storage.canvas,
       datas: datas,

src/drawApp/tccScene.ts

@@ -31,6 +31,8 @@ import {
   TccHandleInteraction,
   TccHandleState,
 } from './graphics/TccHandleInteraction';
+import { TccLightTemplate } from 'src/graphics/tccLight/TccLight';
+import { TccLightData, TccLightState } from './graphics/TccLightInteraction';
 
 export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   const tccScene = lineApp.initScene(sceneName, {
@@ -45,6 +47,7 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
     new TextContentTemplate(new TccTextData()),
     new TccKeyTemplate(new TccKeyData(), new TccKeyState()),
     new TccHandleTemplate(new TccHandleData(), new TccHandleState()),
+    new TccLightTemplate(new TccLightData(), new TccLightState()),
   ];
   TccButtonOperateInteraction.init(tccScene);
   TccKeyInteraction.init(tccScene);
@@ -53,6 +56,23 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
   tccScene.on('postdataloaded', () => {
     handleSubscribe(tccScene);
   });
+  const tccStore = useTccStore();
+  tccScene.canvas.onmousedown = () => {
+    tccStore.canvasMouseDown = true;
+  };
+  tccScene.canvas.onmouseup = () => {
+    tccStore.canvasMouseDown = false;
+    if (tccStore.mouseDownOnTccHandle) {
+      tccStore.mouseDownOnTccHandle = false;
+    }
+    if (tccStore.mouseDownOnTccKeyDir) {
+      tccStore.mouseDownOnTccKeyDir = false;
+    }
+  };
+  lineApp.on('destroy', () => {
+    tccScene.canvas.onmousedown = null;
+    tccScene.canvas.onmouseup = null;
+  });
   return tccScene;
 }
 
@@ -66,15 +86,15 @@ function handleSubscribe(tccScene: IGraphicScene) {
     destination: `/rtsts/simulation/${simulationId}/train/control/${tccId}`,
     messageConverter: (message: Uint8Array) => {
       const states: GraphicState[] = [];
-      const storage = state.TrainControlState.deserialize(message);
-      if (storage.ebutton) {
-        states.push(new TccButtonState(storage.ebutton));
-      }
-      if (storage.dirKey) {
-        states.push(new TccKeyState(storage.dirKey));
-      }
+      const storage = state.TrainControlStateMsg.deserialize(message);
+      storage?.buttons.forEach((button) => {
+        states.push(new TccButtonState(button));
+      });
+      storage?.switchKeys.forEach((switchKey) => {
+        states.push(new TccKeyState(switchKey));
+      });
       storage?.driverKey.forEach((driverKey) => {
-        const data = new state.TrainControlState.DirectionKeySwitch({
+        const data = new state.TrainControlState.SwitchKeyChange({
           id: driverKey.id,
           val: driverKey.val ? 1 : 0,
         });
@@ -83,6 +103,9 @@ function handleSubscribe(tccScene: IGraphicScene) {
       if (storage.pushHandler) {
         states.push(new TccHandleState(storage.pushHandler));
       }
+      storage?.lights.forEach((light) => {
+        states.push(new TccLightState(light));
+      });
       return states;
     },
     graphicQueryer: (state, store) => {
@@ -113,6 +136,9 @@ async function loadTccDatas(): Promise<IGraphicStorage> {
     storage.tccTexts.forEach((tccText) => {
       datas.push(new TccTextData(tccText));
     });
+    storage.tccLights.forEach((tccLight) => {
+      datas.push(new TccLightData(tccLight));
+    });
     return Promise.resolve({
       canvasProperty: storage.canvas,
       datas: datas,

src/env.d.ts

@@ -5,5 +5,6 @@ declare namespace NodeJS {
     NODE_ENV: string;
     VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
     VUE_ROUTER_BASE: string | undefined;
+    URL_ENV: string;
   }
 }

src/graphics/axleCounting/AxleCountingDrawAssistant.ts

@@ -166,16 +166,36 @@ export class AxleCountingDraw extends GraphicDrawAssistant<
   }
   oneGenerates(height: Point) {
     const map = new Map();
-    const axleCountings = this.app.queryStore.queryByType<AxleCounting>(
-      AxleCounting.Type
+    const needDelete: AxleCounting[] = [];
+    const axleCountings = this.app.queryStore
+      .queryByType<AxleCounting>(AxleCounting.Type)
+      .filter((axleCounting) => {
+        if (axleCounting.datas.axleCountingRef.length == 1) {
+          const refInfo = axleCounting.datas.axleCountingRef[0];
+          if (refInfo.deviceType == graphicData.RelatedRef.DeviceType.Section) {
+            const refSection = this.app.queryStore.queryById<Section>(
+              refInfo.id
             );
+            if (
+              refSection.datas.paRef != undefined &&
+              refSection.datas.pbRef != undefined
+            ) {
+              needDelete.push(axleCounting);
+              return false;
+            }
+          }
+        }
+        return true;
+      });
+    this.app.deleteGraphics(...needDelete);
     const axleCountingRefs: IRelatedRefData[] = [];
     axleCountings.forEach((axleCounting) => {
       axleCountingRefs.push(...axleCounting.datas.axleCountingRef);
     });
     axleCountingRefs.forEach((axleCountingRef) => {
       map.set(
-        `${axleCountingRef.id}-${graphicData.RelatedRef.DevicePort[axleCountingRef.devicePort]
+        `${axleCountingRef.id}-${
+          graphicData.RelatedRef.DevicePort[axleCountingRef.devicePort]
         }`,
         1
       );

src/graphics/axleCountingSection/AxleCountingSection.ts

@@ -2,6 +2,7 @@ import { Graphics, IPointData } from 'pixi.js';
 import {
   GraphicData,
   GraphicRelationParam,
+  GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
@@ -9,6 +10,7 @@ import {
 } from 'jl-graphic';
 import { IRelatedRefData, protoPort2Data } from '../CommonGraphics';
 import { DevicePort } from '../section/Section';
+import { state } from 'src/protos/device_state';
 
 export interface ITurnoutPosRefData {
   get id(): number; //道岔的ID
@@ -34,10 +36,17 @@ export interface IAxleCountingSectionData extends GraphicData {
 }
 
 export const AxleCountingSectionConsts = {
-  lineColor: '0xff0000',
-  lineWidth: 2,
+  lineColor: '#5578b6',
+  occupiedColor: '#f00',
+  lineWidth: 5,
 };
 
+export interface IAxleCountingSectionState extends GraphicState {
+  id: number;
+  type?: state.SectionType;
+  occupied?: boolean; //计轴区段占用
+}
+
 export class AxleCountingSection extends JlGraphic {
   static Type = 'AxleCountingSection';
   lineGraphic: Graphics;
@@ -48,7 +57,7 @@ export class AxleCountingSection extends JlGraphic {
     this.labelGraphic = new VectorText();
     this.labelGraphic.setVectorFontSize(14);
     this.labelGraphic.anchor.set(0.5);
-    this.labelGraphic.style.fill = '0xff0000';
+    this.labelGraphic.style.fill = '0xffffff';
     this.labelGraphic.transformSave = true;
     this.labelGraphic.name = 'label';
     this.transformSave = true;
@@ -61,6 +70,9 @@ export class AxleCountingSection extends JlGraphic {
   get datas(): IAxleCountingSectionData {
     return this.getDatas<IAxleCountingSectionData>();
   }
+  get states(): IAxleCountingSectionState {
+    return this.getStates<IAxleCountingSectionState>();
+  }
   doRepaint(): void {
     if (this.datas.points.length < 2) {
       throw new Error('AxleCountingSection坐标数据异常');
@@ -68,7 +80,9 @@ export class AxleCountingSection extends JlGraphic {
     this.lineGraphic.clear();
     this.lineGraphic.lineStyle(
       AxleCountingSectionConsts.lineWidth,
-      AxleCountingSectionConsts.lineColor
+      this.states.occupied
+        ? AxleCountingSectionConsts.occupiedColor
+        : AxleCountingSectionConsts.lineColor
     );
     this.datas.points.forEach((p, i) => {
       if (i !== 0) {
@@ -77,7 +91,7 @@ export class AxleCountingSection extends JlGraphic {
         this.lineGraphic.moveTo(p.x, p.y);
       }
     });
-    this.labelGraphic.text = this.datas.code;
+    this.labelGraphic.text = this.datas.code + '（计）';
     const labelPosition = this.datas.childTransforms?.find(
       (t) => t.name === this.labelGraphic.name
     )?.transform.position;
@@ -133,14 +147,19 @@ export class AxleCountingSection extends JlGraphic {
 }
 
 export class AxleCountingSectionTemplate extends JlGraphicTemplate<AxleCountingSection> {
-  constructor(dataTemplate: IAxleCountingSectionData) {
+  constructor(
+    dataTemplate: IAxleCountingSectionData,
+    stateTemplate?: IAxleCountingSectionState
+  ) {
     super(AxleCountingSection.Type, {
       dataTemplate,
+      stateTemplate,
     });
   }
   new(): AxleCountingSection {
     const axleCountingSection = new AxleCountingSection();
     axleCountingSection.loadData(this.datas);
+    axleCountingSection.loadState(this.states);
     return axleCountingSection;
   }
 }

src/graphics/axleCountingSection/AxleCountingSectionAssistant.ts

@@ -246,7 +246,7 @@ export class AxleCountingSectionDraw extends GraphicDrawAssistant<
     });
   }
 }
-class AxleCountingSectionGraphicHitArea implements IHitArea {
+export class AxleCountingSectionGraphicHitArea implements IHitArea {
   axleCountingSection: AxleCountingSection;
   constructor(axleCountingSection: AxleCountingSection) {
     this.axleCountingSection = axleCountingSection;

src/graphics/carWashing/CarWashing.ts

@@ -1,10 +1,14 @@
 import { Graphics } from 'pixi.js';
 import {
   GraphicData,
+  GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
+  linePoint,
 } from 'jl-graphic';
+import { Section, SectionType } from '../section/Section';
+import { request } from 'src/protos/request';
 
 export interface ICarWashingData extends GraphicData {
   get code(): string;
@@ -13,29 +17,59 @@ export interface ICarWashingData extends GraphicData {
   set linkSection(v: number);
   get centralizedStations(): number[];
   set centralizedStations(v: number[]);
+  get duanNum(): number;
+  set duanNum(v: number);
+  get width(): number;
+  set width(v: number);
   clone(): ICarWashingData;
   copyFrom(data: ICarWashingData): void;
   eq(other: ICarWashingData): boolean;
 }
+export interface ICarWashingState extends GraphicState {
+  get id(): number;
+  set id(v: number);
+  get param(): request.XcjParam;
+  set param(v: request.XcjParam);
+  get xqj(): boolean; //洗车请求
+  set xqj(v: boolean);
+  get twjList(): boolean[]; //停稳
+  set twjList(v: boolean[]);
+  get tgqj(): boolean; //通过请求
+  set tgqj(v: boolean);
+  get xcjxj(): boolean; //洗车就绪
+  set xcjxj(v: boolean);
+  get xcyxj(): boolean; //洗车允许
+  set xcyxj(v: boolean);
+  get cfjList(): boolean[]; //移动允许
+  set cfjList(v: boolean[]);
+  get jtj(): boolean; //紧急停车
+  set jtj(v: boolean);
+  get tgyxj(): boolean; //通过允许
+  set tgyxj(v: boolean);
+}
 
-const carWashingConsts = {
+export const carWashingConsts = {
   codeFontSize: 12,
   codeColor: 0xffffff,
   bodyRectLineColor: 0xffffff,
-  bodyRectLineWidth: 2,
-  bodyRectWidth: 10,
-  bodyRectHeight: 20,
-  bodyColor: 0x000000,
+  bodyRectLineWidth: 6,
+  bodyRectWidth: 60,
+  bodyRectHeight: 40,
+  bodyColor: 0xffffff,
 };
 export class CarWashing extends JlGraphic {
   static Type = 'carWashing';
   codeGraph: VectorText = new VectorText('');
   rectBody: Graphics = new Graphics();
+  stopText: VectorText = new VectorText('');
+  stateText: VectorText = new VectorText('');
 
   constructor() {
     super(CarWashing.Type);
     this.addChild(this.codeGraph);
     this.addChild(this.rectBody);
+    this.addChild(this.stopText);
+    this.addChild(this.stateText);
     this.codeGraph.name = 'carw_code';
   }
   get code(): string {
@@ -44,6 +78,9 @@ export class CarWashing extends JlGraphic {
   get datas(): ICarWashingData {
     return this.getDatas<ICarWashingData>();
   }
+  get states(): ICarWashingState {
+    return this.getStates<ICarWashingState>();
+  }
   doRepaint(): void {
     const codeGraph = this.codeGraph;
     codeGraph.text = this.datas.code;
@@ -62,28 +99,89 @@ export class CarWashing extends JlGraphic {
       codeGraph.position.set(0, -30);
     }
     this.rectBody.clear();
-    this.rectBody.beginFill(carWashingConsts.bodyColor, 0);
     this.rectBody.lineStyle(
       carWashingConsts.bodyRectLineWidth,
       carWashingConsts.bodyRectLineColor
     );
+    this.rectBody.beginFill(carWashingConsts.bodyColor, 0);
+    const width = this.datas.width || carWashingConsts.bodyRectWidth;
     this.rectBody.drawRect(
-      -carWashingConsts.bodyRectWidth / 2,
+      -width / 2,
       -carWashingConsts.bodyRectHeight / 2,
-      carWashingConsts.bodyRectWidth,
+      width,
       carWashingConsts.bodyRectHeight
     );
     this.rectBody.endFill();
+    this.stopText.text = '';
+    if (this.states.jtj) {
+      this.stopText.text = '紧';
+      this.stopText.style.fill = carWashingConsts.codeColor;
+      this.stopText.setVectorFontSize(carWashingConsts.codeFontSize);
+      this.stopText.anchor.set(0.5);
+      this.stopText.position.set(width / 2 + 20, -15);
+    }
+    let stateText = '';
+    if (this.states.xcjxj) {
+      stateText = '就绪';
+    } else if (this.states.xcyxj) {
+      stateText = '洗车';
+    } else if (this.states.tgyxj) {
+      stateText = '通过';
+    } else if (this.states.cfjList.length === 2) {
+      if (this.states.cfjList[1]) {
+        stateText = '尾部';
+      } else if (this.states.cfjList[0]) {
+        stateText = '头部';
+      }
+    } else if (this.states.cfjList.length === 3) {
+      if (this.states.cfjList[1]) {
+        stateText = '尾部';
+      } else if (this.states.cfjList[2]) {
+        stateText = '中部';
+      } else if (this.states.cfjList[0]) {
+        stateText = '头部';
+      }
+    }
+    this.stateText.text = stateText;
+    this.stateText.style.fill = carWashingConsts.codeColor;
+    this.stateText.setVectorFontSize(carWashingConsts.codeFontSize);
+    this.stateText.anchor.set(0.5);
+    this.stateText.position.set(width / 2 + 15, 15);
+  }
+  buildRelation() {
+    const sections = this.queryStore
+      .queryByType<Section>(Section.Type)
+      .filter((s) => s.datas.sectionType === SectionType.Physical);
+    let xj = false;
+    const se = sections.find((section) => {
+      const points = section.linePoints;
+      points.forEach((point, index) => {
+        if (index !== 0) {
+          xj =
+            linePoint(
+              section.localToCanvasPoint(points[index - 1]),
+              section.localToCanvasPoint(point),
+              this.localToCanvasPoint({ x: 0, y: 0 }),
+              8
+            ) || xj;
+        }
+      });
+      return xj;
+    });
+    if (se) {
+      this.datas.linkSection = se.datas.id;
+    }
   }
 }
 
 export class CarWashingTemplate extends JlGraphicTemplate<CarWashing> {
-  constructor(dataTemplate: ICarWashingData) {
-    super(CarWashing.Type, { dataTemplate });
+  constructor(dataTemplate: ICarWashingData, stateTemplate?: ICarWashingState) {
+    super(CarWashing.Type, { dataTemplate, stateTemplate });
   }
   new(): CarWashing {
     const carWashing = new CarWashing();
     carWashing.loadData(this.datas);
+    carWashing.loadState(this.states);
     return carWashing;
   }
 }

src/graphics/carWashing/CarWashingDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, Point, IHitArea } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -8,7 +8,13 @@ import {
   IDrawApp,
   JlGraphic,
 } from 'jl-graphic';
-import { CarWashing, CarWashingTemplate, ICarWashingData } from './CarWashing';
+import {
+  CarWashing,
+  CarWashingTemplate,
+  ICarWashingData,
+  carWashingConsts,
+} from './CarWashing';
+import { Section } from '../section/Section';
 
 export interface ICarWashingDataDrawOptions {
   newData: () => ICarWashingData;
@@ -49,6 +55,7 @@ export class CarWashingDraw extends GraphicDrawAssistant<
   prepareData(data: ICarWashingData): boolean {
     data.transform = this.container.saveTransform();
     data.code = 'CarWash';
+    data.duanNum = 3;
     return true;
   }
 }
@@ -60,28 +67,46 @@ function buildAbsorbablePositions(
   carWashing: CarWashing
 ): AbsorbablePosition[] {
   const aps: AbsorbablePosition[] = [];
-  const carWashings = carWashing.queryStore.queryByType<CarWashing>(
-    CarWashing.Type
-  );
-  const canvas = carWashing.getCanvas();
-  carWashings.forEach((item) => {
-    if (item.id === carWashing.id) {
-      return;
-    }
+  const sections = carWashing.queryStore.queryByType<Section>(Section.Type);
+  sections.forEach((item) => {
+    const p1 = item.localToCanvasPoint(item.getStartPoint());
+    const p2 = item.localToCanvasPoint(item.getEndPoint());
     const ala = new AbsorbableLine(
-      new Point(item.x, 0),
-      new Point(item.x, canvas.height)
-    );
-    const alb = new AbsorbableLine(
-      new Point(0, item.y),
-      new Point(canvas.width, item.y)
+      new Point(p1.x, p1.y),
+      new Point(p2.x, p2.y)
     );
     aps.push(ala);
-    aps.push(alb);
   });
   return aps;
 }
 
+export class CarWashingGraphicHitArea implements IHitArea {
+  carWashing: CarWashing;
+  constructor(carWashing: CarWashing) {
+    this.carWashing = carWashing;
+  }
+  contains(x: number, y: number): boolean {
+    const bound = this.carWashing.rectBody.getLocalBounds();
+    const maxX = bound.x + bound.width;
+    const minX = bound.x;
+    const maxY = bound.y + bound.height;
+    const minY = bound.y;
+    const flag1 = maxX >= x && x >= minX && maxY >= y && y >= minY;
+    const maxX1 = bound.x + bound.width - carWashingConsts.bodyRectLineWidth;
+    const minX1 = bound.x + carWashingConsts.bodyRectLineWidth;
+    const maxY1 = bound.y + bound.height - carWashingConsts.bodyRectLineWidth;
+    const minY1 = bound.y + carWashingConsts.bodyRectLineWidth;
+    const flag2 = maxX1 >= x && x >= minX1 && maxY1 >= y && y >= minY1;
+    const bound1 = this.carWashing.codeGraph.getLocalBounds();
+    const maxX2 = bound1.x + bound1.width;
+    const minX2 = bound1.x;
+    const maxY2 = bound1.y + bound1.height;
+    const minY2 = bound1.y;
+    const flag3 = maxX2 >= x && x >= minX2 && maxY2 >= y && y >= minY2;
+    return (flag1 && !flag2) || flag3;
+  }
+}
+
 export class CarWashingInteraction extends GraphicInteractionPlugin<CarWashing> {
   static Name = 'car_washing_transform';
   constructor(app: IDrawApp) {
@@ -100,6 +125,8 @@ export class CarWashingInteraction extends GraphicInteractionPlugin<CarWashing>
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.rectBody.hitArea = new CarWashingGraphicHitArea(g);
+    g.codeGraph.cursor = 'pointer';
     g.codeGraph.draggable = true;
     g.codeGraph.selectable = true;
     g.codeGraph.rotatable = true;

src/graphics/esbButton/EsbButton.ts

@@ -42,7 +42,7 @@ const esbButtonConsts = {
 export class EsbButton extends JlGraphic {
   static Type = 'esbButton';
   codeGraph: VectorText = new VectorText('');
-  circleBody: Graphics = new Graphics();
+  textGraph: VectorText = new VectorText('E');
   rectBody: Graphics = new Graphics();
   lineBody: Graphics = new Graphics();
 
@@ -51,7 +51,7 @@ export class EsbButton extends JlGraphic {
     this.addChild(this.codeGraph);
     this.addChild(this.rectBody);
     this.addChild(this.lineBody);
-    this.addChild(this.circleBody);
+    this.addChild(this.textGraph);
     this.codeGraph.name = 'esb_code';
   }
   get code(): string {
@@ -80,15 +80,9 @@ export class EsbButton extends JlGraphic {
     } else {
       codeGraph.position.set(-30, 0);
     }
-    this.circleBody.clear();
-    this.circleBody.beginFill(
-      this.state.down
-        ? esbButtonConsts.pressedColor
-        : esbButtonConsts.bodyCircleColor,
-      1
-    );
-    this.circleBody.drawCircle(0, 0, esbButtonConsts.bodyCircleRadius);
-    this.circleBody.endFill();
+    this.textGraph.style.fill = esbButtonConsts.codeColor;
+    this.textGraph.setVectorFontSize(esbButtonConsts.codeFontSize);
+    this.textGraph.anchor.set(0.5);
     this.rectBody.clear();
     this.rectBody.beginFill(esbButtonConsts.bodyColor, 0);
     this.rectBody.lineStyle(

src/graphics/floodGate/FloodGate.ts

@@ -1,10 +1,14 @@
 import { Graphics } from 'pixi.js';
 import {
   GraphicData,
+  GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
+  linePoint,
 } from 'jl-graphic';
+import { request } from 'src/protos/request';
+import { Section, SectionType } from '../section/Section';
 
 export interface IFloodGateData extends GraphicData {
   get code(): string;
@@ -13,30 +17,52 @@ export interface IFloodGateData extends GraphicData {
   set linkSection(v: number);
   get centralizedStations(): number[];
   set centralizedStations(v: number[]);
+  get refPslMapCode(): string;
+  set refPslMapCode(v: string);
   clone(): IFloodGateData;
   copyFrom(data: IFloodGateData): void;
   eq(other: IFloodGateData): boolean;
 }
 
-const floodGateConsts = {
+export interface IFloodGateState extends GraphicState {
+  get id(): number;
+  set id(v: number);
+  get mgj(): boolean; //防淹门关闭继电器
+  set mgj(v: boolean);
+  get param(): request.CkmParam;
+  set param(v: request.CkmParam);
+  get local(): boolean;
+  set local(v: boolean);
+  get mplj(): boolean;
+  set mplj(v: boolean);
+}
+
+const garageConsts = {
   codeFontSize: 12,
   codeColor: 0xffffff,
   bodyLineColor: 0xffffff,
+  lossStateColor: 0x0000ff,
+  localStateColor: 0x00ff00,
   bodyLineWidth: 2,
   bodyColor: 0x000000,
   bodyRectWidth: 10,
   bodyRectHeight: 20,
+  rectButtonWidth: 10,
+  rectColor: 0xffffff,
 };
 export class FloodGate extends JlGraphic {
   static Type = 'floodGate';
   codeGraph: VectorText = new VectorText('');
   lineBody: Graphics = new Graphics();
+  rectBody: Graphics = new Graphics();
 
   constructor() {
     super(FloodGate.Type);
     this.addChild(this.codeGraph);
     this.addChild(this.lineBody);
+    this.addChild(this.rectBody);
     this.codeGraph.name = 'flood_code';
+    this.rectBody.name = 'flood_rect_body';
   }
   get code(): string {
     return this.datas.code;
@@ -44,11 +70,15 @@ export class FloodGate extends JlGraphic {
   get datas(): IFloodGateData {
     return this.getDatas<IFloodGateData>();
   }
+
+  get states(): IFloodGateState {
+    return this.getStates<IFloodGateState>();
+  }
   doRepaint(): void {
     const codeGraph = this.codeGraph;
     codeGraph.text = this.datas.code;
-    codeGraph.style.fill = floodGateConsts.codeColor;
-    codeGraph.setVectorFontSize(floodGateConsts.codeFontSize);
+    codeGraph.style.fill = garageConsts.codeColor;
+    codeGraph.setVectorFontSize(garageConsts.codeFontSize);
     codeGraph.anchor.set(0.5);
     const codeTransform = this.datas?.childTransforms?.find(
       (item) => item.name === 'flood_code'
@@ -62,38 +92,94 @@ export class FloodGate extends JlGraphic {
       codeGraph.position.set(0, -30);
     }
     this.lineBody.clear();
-    this.lineBody.lineStyle(
-      floodGateConsts.bodyLineWidth,
-      floodGateConsts.bodyLineColor
-    );
+    let color = garageConsts.bodyLineColor;
+    if (this.states.local) {
+      color = garageConsts.localStateColor;
+    }
+    if (this.states.param?.fault === request.Ckm.Fault.FA_State_Loss) {
+      color = garageConsts.lossStateColor;
+    }
+    this.lineBody.lineStyle(garageConsts.bodyLineWidth, color);
     this.lineBody.moveTo(
-      -floodGateConsts.bodyRectWidth / 2,
-      -floodGateConsts.bodyRectHeight / 2
+      -garageConsts.bodyRectWidth / 2,
+      -garageConsts.bodyRectHeight / 2
     );
     this.lineBody.lineTo(
-      floodGateConsts.bodyRectWidth / 2,
-      -floodGateConsts.bodyRectHeight / 2
+      garageConsts.bodyRectWidth / 2,
+      -garageConsts.bodyRectHeight / 2
     );
     this.lineBody.moveTo(
-      -floodGateConsts.bodyRectWidth / 2,
-      floodGateConsts.bodyRectHeight / 2
+      -garageConsts.bodyRectWidth / 2,
+      garageConsts.bodyRectHeight / 2
     );
     this.lineBody.lineTo(
-      floodGateConsts.bodyRectWidth / 2,
-      floodGateConsts.bodyRectHeight / 2
+      garageConsts.bodyRectWidth / 2,
+      garageConsts.bodyRectHeight / 2
     );
-    this.lineBody.moveTo(0, -floodGateConsts.bodyRectHeight / 2);
-    this.lineBody.lineTo(0, floodGateConsts.bodyRectHeight / 2);
+    if (this.states.mgj) {
+      this.lineBody.moveTo(0, -garageConsts.bodyRectHeight / 2);
+      this.lineBody.lineTo(0, garageConsts.bodyRectHeight / 2);
+    } else {
+      this.lineBody.moveTo(0, -garageConsts.bodyRectHeight / 2);
+      this.lineBody.lineTo(0, -garageConsts.bodyRectHeight / 4);
+      this.lineBody.moveTo(0, garageConsts.bodyRectHeight / 4);
+      this.lineBody.lineTo(0, garageConsts.bodyRectHeight / 2);
+    }
+    this.rectBody.clear();
+    this.rectBody.beginFill(garageConsts.rectColor, 1);
+    // this.rectBody.lineStyle(1, garageConsts.rectColor);
+    this.rectBody.drawRect(
+      -garageConsts.bodyRectWidth / 2,
+      garageConsts.bodyRectHeight / 2 + 3,
+      garageConsts.rectButtonWidth,
+      garageConsts.rectButtonWidth
+    );
+    this.rectBody.endFill();
+    const rectTransform = this.datas?.childTransforms?.find(
+      (item) => item.name === 'flood_rect_body'
+    );
+    if (rectTransform) {
+      const position = rectTransform?.transform.position;
+      const rotation = rectTransform?.transform?.rotation;
+      this.rectBody.position.set(position?.x, position?.y);
+      this.rectBody.rotation = rotation || 0;
+    }
+  }
+
+  buildRelation() {
+    const sections = this.queryStore
+      .queryByType<Section>(Section.Type)
+      .filter((s) => s.datas.sectionType === SectionType.Physical);
+    let xj = false;
+    const se = sections.find((section) => {
+      const points = section.linePoints;
+      points.forEach((point, index) => {
+        if (index !== 0) {
+          xj =
+            linePoint(
+              section.localToCanvasPoint(points[index - 1]),
+              section.localToCanvasPoint(point),
+              this.localToCanvasPoint({ x: 0, y: 0 }),
+              8
+            ) || xj;
+        }
+      });
+      return xj;
+    });
+    if (se) {
+      this.datas.linkSection = se.datas.id;
+    }
   }
 }
 
 export class FloodGateTemplate extends JlGraphicTemplate<FloodGate> {
-  constructor(dataTemplate: IFloodGateData) {
-    super(FloodGate.Type, { dataTemplate });
+  constructor(dataTemplate: IFloodGateData, stateTemplate?: IFloodGateState) {
+    super(FloodGate.Type, { dataTemplate, stateTemplate });
   }
   new(): FloodGate {
     const floodGate = new FloodGate();
     floodGate.loadData(this.datas);
+    floodGate.loadState(this.states);
     return floodGate;
   }
 }

src/graphics/floodGate/FloodGateDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, Point, IHitArea } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -80,6 +80,21 @@ function buildAbsorbablePositions(floodGate: FloodGate): AbsorbablePosition[] {
   return aps;
 }
 
+export class FloodGateGraphicHitArea implements IHitArea {
+  floodGate: FloodGate;
+  constructor(floodGate: FloodGate) {
+    this.floodGate = floodGate;
+  }
+  contains(x: number, y: number): boolean {
+    const bound = this.floodGate.getLocalBounds();
+    const maxX = bound.x + bound.width;
+    const minX = bound.x;
+    const maxY = bound.y + bound.height;
+    const minY = bound.y;
+    return maxX >= x && x >= minX && maxY >= y && y >= minY;
+  }
+}
+
 export class FloodGateInteraction extends GraphicInteractionPlugin<FloodGate> {
   static Name = 'flood_gate_transform';
   constructor(app: IDrawApp) {
@@ -98,11 +113,17 @@ export class FloodGateInteraction extends GraphicInteractionPlugin<FloodGate> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.hitArea = new FloodGateGraphicHitArea(g);
     g.codeGraph.draggable = true;
     g.codeGraph.selectable = true;
     g.codeGraph.rotatable = true;
     g.codeGraph.transformSave = true;
     g.codeGraph.eventMode = 'static';
+    g.rectBody.draggable = true;
+    g.rectBody.selectable = true;
+    g.rectBody.rotatable = true;
+    g.rectBody.transformSave = true;
+    g.rectBody.eventMode = 'static';
     g.on('transformstart', this.transformstart, this);
   }
   unbind(g: FloodGate): void {
@@ -114,6 +135,11 @@ export class FloodGateInteraction extends GraphicInteractionPlugin<FloodGate> {
     g.codeGraph.rotatable = false;
     g.codeGraph.transformSave = false;
     g.codeGraph.eventMode = 'none';
+    g.rectBody.draggable = false;
+    g.rectBody.selectable = false;
+    g.rectBody.rotatable = false;
+    g.rectBody.transformSave = false;
+    g.rectBody.eventMode = 'none';
     g.off('transformstart', this.transformstart, this);
   }
   transformstart(e: GraphicTransformEvent) {

src/graphics/garageDoor/GarageDoor.ts

@@ -1,10 +1,14 @@
 import { Graphics } from 'pixi.js';
 import {
   GraphicData,
+  GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
+  linePoint,
 } from 'jl-graphic';
+import { request } from 'src/protos/request';
+import { Section, SectionType } from '../section/Section';
 
 export interface IGarageDoorData extends GraphicData {
   get code(): string;
@@ -13,30 +17,52 @@ export interface IGarageDoorData extends GraphicData {
   set linkSection(v: number);
   get centralizedStations(): number[];
   set centralizedStations(v: number[]);
+  get refPslMapCode(): string;
+  set refPslMapCode(v: string);
   clone(): IGarageDoorData;
   copyFrom(data: IGarageDoorData): void;
   eq(other: IGarageDoorData): boolean;
 }
 
+export interface IGarageDoorState extends GraphicState {
+  get id(): number;
+  set id(v: number);
+  get mgj(): boolean; //车库门关闭继电器
+  set mgj(v: boolean);
+  get param(): request.CkmParam;
+  set param(v: request.CkmParam);
+  get local(): boolean;
+  set local(v: boolean);
+  get mplj(): boolean;
+  set mplj(v: boolean);
+}
+
 const garageConsts = {
   codeFontSize: 12,
   codeColor: 0xffffff,
-  bodyLineColor: 0x0000ff,
+  bodyLineColor: 0xffffff,
+  lossStateColor: 0x0000ff,
+  localStateColor: 0x00ff00,
   bodyLineWidth: 2,
   bodyColor: 0x000000,
   bodyRectWidth: 10,
   bodyRectHeight: 20,
+  rectButtonWidth: 10,
+  rectColor: 0xffffff,
 };
 export class GarageDoor extends JlGraphic {
   static Type = 'garageDoor';
   codeGraph: VectorText = new VectorText('');
   lineBody: Graphics = new Graphics();
+  rectBody: Graphics = new Graphics();
 
   constructor() {
     super(GarageDoor.Type);
     this.addChild(this.codeGraph);
     this.addChild(this.lineBody);
+    this.addChild(this.rectBody);
     this.codeGraph.name = 'garage_code';
+    this.rectBody.name = 'garage_rect_body';
   }
   get code(): string {
     return this.datas.code;
@@ -44,6 +70,10 @@ export class GarageDoor extends JlGraphic {
   get datas(): IGarageDoorData {
     return this.getDatas<IGarageDoorData>();
   }
+
+  get states(): IGarageDoorState {
+    return this.getStates<IGarageDoorState>();
+  }
   doRepaint(): void {
     const codeGraph = this.codeGraph;
     codeGraph.text = this.datas.code;
@@ -62,10 +92,14 @@ export class GarageDoor extends JlGraphic {
       codeGraph.position.set(0, -30);
     }
     this.lineBody.clear();
-    this.lineBody.lineStyle(
-      garageConsts.bodyLineWidth,
-      garageConsts.bodyLineColor
-    );
+    let color = garageConsts.bodyLineColor;
+    if (this.states.local) {
+      color = garageConsts.localStateColor;
+    }
+    if (this.states.param?.fault === request.Ckm.Fault.FA_State_Loss) {
+      color = garageConsts.lossStateColor;
+    }
+    this.lineBody.lineStyle(garageConsts.bodyLineWidth, color);
     this.lineBody.moveTo(
       -garageConsts.bodyRectWidth / 2,
       -garageConsts.bodyRectHeight / 2
@@ -82,18 +116,70 @@ export class GarageDoor extends JlGraphic {
       garageConsts.bodyRectWidth / 2,
       garageConsts.bodyRectHeight / 2
     );
+    if (this.states.mgj) {
       this.lineBody.moveTo(0, -garageConsts.bodyRectHeight / 2);
       this.lineBody.lineTo(0, garageConsts.bodyRectHeight / 2);
+    } else {
+      this.lineBody.moveTo(0, -garageConsts.bodyRectHeight / 2);
+      this.lineBody.lineTo(0, -garageConsts.bodyRectHeight / 4);
+      this.lineBody.moveTo(0, garageConsts.bodyRectHeight / 4);
+      this.lineBody.lineTo(0, garageConsts.bodyRectHeight / 2);
+    }
+    this.rectBody.clear();
+    this.rectBody.beginFill(garageConsts.rectColor, 1);
+    // this.rectBody.lineStyle(1, garageConsts.rectColor);
+    this.rectBody.drawRect(
+      -garageConsts.bodyRectWidth / 2,
+      garageConsts.bodyRectHeight / 2 + 3,
+      garageConsts.rectButtonWidth,
+      garageConsts.rectButtonWidth
+    );
+    this.rectBody.endFill();
+    const rectTransform = this.datas?.childTransforms?.find(
+      (item) => item.name === 'garage_rect_body'
+    );
+    if (rectTransform) {
+      const position = rectTransform?.transform.position;
+      const rotation = rectTransform?.transform?.rotation;
+      this.rectBody.position.set(position?.x, position?.y);
+      this.rectBody.rotation = rotation || 0;
+    }
+  }
+
+  buildRelation() {
+    const sections = this.queryStore
+      .queryByType<Section>(Section.Type)
+      .filter((s) => s.datas.sectionType === SectionType.Physical);
+    let xj = false;
+    const se = sections.find((section) => {
+      const points = section.linePoints;
+      points.forEach((point, index) => {
+        if (index !== 0) {
+          xj =
+            linePoint(
+              section.localToCanvasPoint(points[index - 1]),
+              section.localToCanvasPoint(point),
+              this.localToCanvasPoint({ x: 0, y: 0 }),
+              8
+            ) || xj;
+        }
+      });
+      return xj;
+    });
+    if (se) {
+      this.datas.linkSection = se.datas.id;
+    }
   }
 }
 
 export class GarageDoorTemplate extends JlGraphicTemplate<GarageDoor> {
-  constructor(dataTemplate: IGarageDoorData) {
-    super(GarageDoor.Type, { dataTemplate });
+  constructor(dataTemplate: IGarageDoorData, stateTemplate?: IGarageDoorState) {
+    super(GarageDoor.Type, { dataTemplate, stateTemplate });
   }
   new(): GarageDoor {
     const garageDoor = new GarageDoor();
     garageDoor.loadData(this.datas);
+    garageDoor.loadState(this.states);
     return garageDoor;
   }
 }

src/graphics/garageDoor/GarageDoorDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, Point, IHitArea } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -82,6 +82,21 @@ function buildAbsorbablePositions(
   return aps;
 }
 
+export class GarageDoorGraphicHitArea implements IHitArea {
+  garageDoor: GarageDoor;
+  constructor(garageDoor: GarageDoor) {
+    this.garageDoor = garageDoor;
+  }
+  contains(x: number, y: number): boolean {
+    const bound = this.garageDoor.getLocalBounds();
+    const maxX = bound.x + bound.width;
+    const minX = bound.x;
+    const maxY = bound.y + bound.height;
+    const minY = bound.y;
+    return maxX >= x && x >= minX && maxY >= y && y >= minY;
+  }
+}
+
 export class GarageDoorInteraction extends GraphicInteractionPlugin<GarageDoor> {
   static Name = 'garage_door_transform';
   constructor(app: IDrawApp) {
@@ -100,11 +115,17 @@ export class GarageDoorInteraction extends GraphicInteractionPlugin<GarageDoor>
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.hitArea = new GarageDoorGraphicHitArea(g);
     g.codeGraph.draggable = true;
     g.codeGraph.selectable = true;
     g.codeGraph.rotatable = true;
     g.codeGraph.transformSave = true;
     g.codeGraph.eventMode = 'static';
+    g.rectBody.draggable = true;
+    g.rectBody.selectable = true;
+    g.rectBody.rotatable = true;
+    g.rectBody.transformSave = true;
+    g.rectBody.eventMode = 'static';
     g.on('transformstart', this.transformstart, this);
   }
   unbind(g: GarageDoor): void {
@@ -116,6 +137,11 @@ export class GarageDoorInteraction extends GraphicInteractionPlugin<GarageDoor>
     g.codeGraph.rotatable = false;
     g.codeGraph.transformSave = false;
     g.codeGraph.eventMode = 'none';
+    g.rectBody.draggable = false;
+    g.rectBody.selectable = false;
+    g.rectBody.rotatable = false;
+    g.rectBody.transformSave = false;
+    g.rectBody.eventMode = 'none';
     g.off('transformstart', this.transformstart, this);
   }
   transformstart(e: GraphicTransformEvent) {

src/graphics/garageDoorBox/GarageDoorBox.ts

@@ -1,110 +0,0 @@
-import { Graphics } from 'pixi.js';
-import {
-  GraphicData,
-  JlGraphic,
-  JlGraphicTemplate,
-  VectorText,
-} from 'jl-graphic';
-
-export interface IGarageDoorBox extends GraphicData {
-  get code(): string;
-  set code(v: string);
-  get flip(): boolean;
-  set flip(v: boolean);
-  get refGarageDoorId(): number;
-  set refGarageDoorId(v: number);
-  get refPslMapCode(): string;
-  set refPslMapCode(v: string);
-  clone(): IGarageDoorBox;
-  copyFrom(data: IGarageDoorBox): void;
-  eq(other: IGarageDoorBox): boolean;
-}
-
-const garageDoorBoxConsts = {
-  codeFontSize: 12,
-  codeColor: 0xffffff,
-  bodyLineColor: 0xffffff,
-  bodyLineWidth: 4,
-  bodyRectLineColor: 0xffffff,
-  bodyRectLineWidth: 2,
-  bodyRectWidth: 20,
-  bodyRectHeight: 20,
-  bodyColor: 0x000000,
-};
-export class GarageDoorBox extends JlGraphic {
-  static Type = 'garageDoorBox';
-  codeGraph: VectorText = new VectorText('');
-  rectBody: Graphics = new Graphics();
-  lineBody: Graphics = new Graphics();
-  textGraph: VectorText = new VectorText('G');
-
-  constructor() {
-    super(GarageDoorBox.Type);
-    this.addChild(this.codeGraph);
-    this.addChild(this.rectBody);
-    this.addChild(this.lineBody);
-    this.addChild(this.textGraph);
-    this.codeGraph.name = 'g_d_b_code';
-  }
-  get code(): string {
-    return this.datas.code;
-  }
-  get datas(): IGarageDoorBox {
-    return this.getDatas<IGarageDoorBox>();
-  }
-  doRepaint(): void {
-    const codeGraph = this.codeGraph;
-    codeGraph.text = this.datas.code;
-    codeGraph.style.fill = garageDoorBoxConsts.codeColor;
-    codeGraph.setVectorFontSize(garageDoorBoxConsts.codeFontSize);
-    const codeTransform = this.datas?.childTransforms?.find(
-      (item) => item.name === 'g_d_b_code'
-    );
-    if (codeTransform) {
-      const position = codeTransform?.transform.position;
-      const rotation = codeTransform?.transform?.rotation;
-      codeGraph.position.set(position?.x, position?.y);
-      codeGraph.rotation = rotation || 0;
-    } else {
-      codeGraph.position.set(20, 0);
-    }
-    codeGraph.anchor.set(0.5);
-    this.textGraph.style.fill = garageDoorBoxConsts.codeColor;
-    this.textGraph.setVectorFontSize(garageDoorBoxConsts.codeFontSize);
-    this.textGraph.anchor.set(0.5);
-    this.rectBody.clear();
-    this.rectBody.beginFill(garageDoorBoxConsts.bodyColor, 0);
-    this.rectBody.lineStyle(
-      garageDoorBoxConsts.bodyRectLineWidth,
-      garageDoorBoxConsts.bodyRectLineColor
-    );
-    this.rectBody.drawRect(
-      -garageDoorBoxConsts.bodyRectWidth / 2,
-      -garageDoorBoxConsts.bodyRectHeight / 2,
-      garageDoorBoxConsts.bodyRectWidth,
-      garageDoorBoxConsts.bodyRectHeight
-    );
-    this.rectBody.endFill();
-    this.lineBody.clear();
-    const lineY = this.datas.flip
-      ? garageDoorBoxConsts.bodyRectHeight / 2
-      : -garageDoorBoxConsts.bodyRectHeight / 2;
-    this.lineBody.lineStyle(
-      garageDoorBoxConsts.bodyLineWidth,
-      garageDoorBoxConsts.bodyLineColor
-    );
-    this.lineBody.moveTo(-garageDoorBoxConsts.bodyRectWidth / 2, lineY);
-    this.lineBody.lineTo(garageDoorBoxConsts.bodyRectWidth / 2, lineY);
-  }
-}
-
-export class GarageDoorBoxTemplate extends JlGraphicTemplate<GarageDoorBox> {
-  constructor(dataTemplate: IGarageDoorBox) {
-    super(GarageDoorBox.Type, { dataTemplate });
-  }
-  new(): GarageDoorBox {
-    const garageDoorBox = new GarageDoorBox();
-    garageDoorBox.loadData(this.datas);
-    return garageDoorBox;
-  }
-}

src/graphics/holdButton/HoldButton.ts

@@ -0,0 +1,102 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'jl-graphic';
+
+export interface IHoldButtonData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get flip(): boolean;
+  set flip(v: boolean);
+  get refStand(): number;
+  set refStand(v: number);
+}
+
+const holdButtonConsts = {
+  codeFontSize: 12,
+  codeColor: 0xffffff,
+  bodyLineColor: 0xffffff,
+  bodyLineWidth: 4,
+  bodyRectLineColor: 0xffffff,
+  bodyRectLineWidth: 2,
+  bodyRectWidth: 20,
+  bodyRectHeight: 20,
+  bodyColor: 0x000000,
+};
+export class HoldButton extends JlGraphic {
+  static Type = 'holdButton';
+  codeGraph: VectorText = new VectorText('');
+  rectBody: Graphics = new Graphics();
+  lineBody: Graphics = new Graphics();
+  textGraph: VectorText = new VectorText('H');
+
+  constructor() {
+    super(HoldButton.Type);
+    this.addChild(this.codeGraph);
+    this.addChild(this.rectBody);
+    this.addChild(this.lineBody);
+    this.addChild(this.textGraph);
+    this.codeGraph.name = 'hold_button_code';
+  }
+  get datas(): IHoldButtonData {
+    return this.getDatas<IHoldButtonData>();
+  }
+  doRepaint(): void {
+    const codeGraph = this.codeGraph;
+    codeGraph.text = this.datas.code;
+    codeGraph.style.fill = holdButtonConsts.codeColor;
+    codeGraph.setVectorFontSize(holdButtonConsts.codeFontSize);
+    const codeTransform = this.datas?.childTransforms?.find(
+      (item) => item.name === 'hold_button_code'
+    );
+    if (codeTransform) {
+      const position = codeTransform?.transform.position;
+      const rotation = codeTransform?.transform?.rotation;
+      codeGraph.position.set(position?.x, position?.y);
+      codeGraph.rotation = rotation || 0;
+    } else {
+      codeGraph.position.set(20, 0);
+    }
+    codeGraph.anchor.set(0.5);
+    this.textGraph.style.fill = holdButtonConsts.codeColor;
+    this.textGraph.setVectorFontSize(holdButtonConsts.codeFontSize);
+    this.textGraph.anchor.set(0.5);
+    this.rectBody.clear();
+    this.rectBody.beginFill(holdButtonConsts.bodyColor, 0);
+    this.rectBody.lineStyle(
+      holdButtonConsts.bodyRectLineWidth,
+      holdButtonConsts.bodyRectLineColor
+    );
+    this.rectBody.drawRect(
+      -holdButtonConsts.bodyRectWidth / 2,
+      -holdButtonConsts.bodyRectHeight / 2,
+      holdButtonConsts.bodyRectWidth,
+      holdButtonConsts.bodyRectHeight
+    );
+    this.rectBody.endFill();
+    this.lineBody.clear();
+    const lineY = this.datas.flip
+      ? holdButtonConsts.bodyRectHeight / 2
+      : -holdButtonConsts.bodyRectHeight / 2;
+    this.lineBody.lineStyle(
+      holdButtonConsts.bodyLineWidth,
+      holdButtonConsts.bodyLineColor
+    );
+    this.lineBody.moveTo(-holdButtonConsts.bodyRectWidth / 2, lineY);
+    this.lineBody.lineTo(holdButtonConsts.bodyRectWidth / 2, lineY);
+  }
+}
+
+export class HoldButtonTemplate extends JlGraphicTemplate<HoldButton> {
+  constructor(dataTemplate: IHoldButtonData) {
+    super(HoldButton.Type, { dataTemplate });
+  }
+  new(): HoldButton {
+    const holdButton = new HoldButton();
+    holdButton.loadData(this.datas);
+    return holdButton;
+  }
+}

src/graphics/holdButton/HoldButtonDrawAssistant.ts

@@ -8,36 +8,32 @@ import {
   IDrawApp,
   JlGraphic,
 } from 'jl-graphic';
-import {
-  GarageDoorBox,
-  GarageDoorBoxTemplate,
-  IGarageDoorBox,
-} from './GarageDoorBox';
+import { IHoldButtonData, HoldButton, HoldButtonTemplate } from './HoldButton';
 
-export interface IGarageDoorBoxDrawOptions {
-  newData: () => IGarageDoorBox;
+export interface IHoldButtonDataDrawOptions {
+  newData: () => IHoldButtonData;
 }
-export class GarageDoorBoxDraw extends GraphicDrawAssistant<
-  GarageDoorBoxTemplate,
-  IGarageDoorBox
+export class HoldButtonDraw extends GraphicDrawAssistant<
+  HoldButtonTemplate,
+  IHoldButtonData
 > {
-  _garageDoorBox: GarageDoorBox | null = null;
-  constructor(app: IDrawApp, template: GarageDoorBoxTemplate) {
+  _holdButton: HoldButton | null = null;
+  constructor(app: IDrawApp, template: HoldButtonTemplate) {
     super(
       app,
       template,
-      'svguse:../../drawIcon.svg#icon-garage-door-box',
-      '设置车库门GarageDoorBox'
+      'svguse:../../drawIcon.svg#icon-hold-button',
+      '扣车按钮HoldButton'
     );
-    GarageDoorBoxInteraction.init(app);
+    HoldButtonInteraction.init(app);
   }
-  public get garageDoorBox(): GarageDoorBox {
-    if (!this._garageDoorBox) {
-      this._garageDoorBox = this.graphicTemplate.new();
-      this._garageDoorBox.loadData(this.graphicTemplate.datas);
-      this.container.addChild(this._garageDoorBox);
+  public get holdButton(): HoldButton {
+    if (!this._holdButton) {
+      this._holdButton = this.graphicTemplate.new();
+      this._holdButton.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._holdButton);
     }
-    return this._garageDoorBox;
+    return this._holdButton;
   }
 
   onLeftUp(e: FederatedMouseEvent): void {
@@ -46,30 +42,30 @@ export class GarageDoorBoxDraw extends GraphicDrawAssistant<
   }
 
   redraw(p: Point): void {
-    this.garageDoorBox.repaint();
+    this.holdButton.repaint();
     this.container.position.set(p.x, p.y);
   }
 
-  prepareData(data: IGarageDoorBox): boolean {
+  prepareData(data: IHoldButtonData): boolean {
     data.transform = this.container.saveTransform();
-    data.code = 'G';
+    data.code = 'H';
     return true;
   }
 }
 /**
  * 构建吸附线
- * @param garageDoorBox
+ * @param holdButton
  */
 function buildAbsorbablePositions(
-  garageDoorBox: GarageDoorBox
+  holdButton: HoldButton
 ): AbsorbablePosition[] {
   const aps: AbsorbablePosition[] = [];
-  const garageDoorBoxs = garageDoorBox.queryStore.queryByType<GarageDoorBox>(
-    GarageDoorBox.Type
+  const holdButtons = holdButton.queryStore.queryByType<HoldButton>(
+    HoldButton.Type
   );
-  const canvas = garageDoorBox.getCanvas();
-  garageDoorBoxs.forEach((item) => {
-    if (item.id === garageDoorBox.id) {
+  const canvas = holdButton.getCanvas();
+  holdButtons.forEach((item) => {
+    if (item.id === holdButton.id) {
       return;
     }
     const ala = new AbsorbableLine(
@@ -86,20 +82,20 @@ function buildAbsorbablePositions(
   return aps;
 }
 
-export class GarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoorBox> {
-  static Name = 'garage_door_box_transform';
+export class HoldButtonInteraction extends GraphicInteractionPlugin<HoldButton> {
+  static Name = 'hold_button_transform';
   constructor(app: IDrawApp) {
-    super(GarageDoorBoxInteraction.Name, app);
+    super(HoldButtonInteraction.Name, app);
   }
   static init(app: IDrawApp) {
-    return new GarageDoorBoxInteraction(app);
+    return new HoldButtonInteraction(app);
   }
-  filter(...grahpics: JlGraphic[]): GarageDoorBox[] | undefined {
+  filter(...grahpics: JlGraphic[]): HoldButton[] | undefined {
     return grahpics
-      .filter((g) => g.type === GarageDoorBox.Type)
-      .map((g) => g as GarageDoorBox);
+      .filter((g) => g.type === HoldButton.Type)
+      .map((g) => g as HoldButton);
   }
-  bind(g: GarageDoorBox): void {
+  bind(g: HoldButton): void {
     g.eventMode = 'static';
     g.cursor = 'pointer';
     g.scalable = true;
@@ -111,7 +107,7 @@ export class GarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoo
     g.codeGraph.eventMode = 'static';
     g.on('transformstart', this.transformstart, this);
   }
-  unbind(g: GarageDoorBox): void {
+  unbind(g: HoldButton): void {
     g.eventMode = 'none';
     g.scalable = false;
     g.rotatable = false;
@@ -124,9 +120,9 @@ export class GarageDoorBoxInteraction extends GraphicInteractionPlugin<GarageDoo
   }
   transformstart(e: GraphicTransformEvent) {
     const target = e.target as DisplayObject;
-    const garageDoorBox = target.getGraphic() as GarageDoorBox;
-    garageDoorBox.getGraphicApp().setOptions({
-      absorbablePositions: buildAbsorbablePositions(garageDoorBox),
+    const holdButton = target.getGraphic() as HoldButton;
+    holdButton.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(holdButton),
     });
   }
 }

src/graphics/ibpBox/IbpBoxDrawAssistant.ts

@@ -16,7 +16,7 @@ export interface IIbpBoxDrawOptions {
 export class IbpBoxDraw extends GraphicDrawAssistant<IbpBoxTemplate, IIbpBox> {
   _gatedBox: IbpBox | null = null;
   constructor(app: IDrawApp, template: IbpBoxTemplate) {
-    super(app, template, 'svguse:../../drawIcon.svg#icon-spks-switch', 'Ibp');
+    super(app, template, 'svguse:../../drawIcon.svg#icon-ibp-box', 'Ibp');
     IbpBoxInteraction.init(app);
   }
   public get gatedBox(): IbpBox {

src/graphics/pslButton/pslButton.ts

@@ -31,6 +31,8 @@ export interface IPslButtonState extends GraphicState {
   set code(v: string);
   get down(): boolean;
   set down(v: boolean);
+  get active(): boolean;
+  set active(v: boolean);
 }
 
 export class PslButton extends JlGraphic {

src/graphics/relay/Relay.ts

@@ -12,6 +12,10 @@ export interface IRelayData extends GraphicData {
   set code(v: string);
   get newModel(): relayCabinetGraphicData.Relay.ModelType; // 型号
   set newModel(v: relayCabinetGraphicData.Relay.ModelType);
+  get showCode(): string; // 展示的编号
+  set showCode(v: string);
+  get defaultInitialPosition(): relayCabinetGraphicData.CjDataItem.PostionType; // 默认初始位置
+  set defaultInitialPosition(v: relayCabinetGraphicData.CjDataItem.PostionType);
   clone(): IRelayData;
   copyFrom(data: IRelayData): void;
   eq(other: IRelayData): boolean;
@@ -57,7 +61,11 @@ export class Relay extends JlGraphic {
   }
 
   doRepaint(): void {
+    if (this.datas.showCode) {
+      this.labelGraphic.text = this.datas.showCode;
+    } else {
       this.labelGraphic.text = this.datas.code;
+    }
     this.labelGraphic.position.set(0, 20);
     this.refDevice.position.set(0, -20);
     const relayGraphic = this.relayGraphic;

src/graphics/relay/RelayDrawAssistant.ts

@@ -9,6 +9,7 @@ import {
 } from 'jl-graphic';
 
 import { IRelayData, Relay, RelayTemplate } from './Relay';
+import { relayCabinetGraphicData } from 'src/protos/relayCabinetLayoutGraphics';
 
 export interface IRelayDrawOptions {
   newData: () => IRelayData;
@@ -39,6 +40,8 @@ export class RelayDraw extends GraphicDrawAssistant<RelayTemplate, IRelayData> {
   }
   prepareData(data: IRelayData): boolean {
     data.transform = this.container.saveTransform();
+    data.defaultInitialPosition =
+      relayCabinetGraphicData.CjDataItem.PostionType.NONE;
     return true;
   }
 }

src/graphics/spksSwitch/SpksSwitch.ts

@@ -13,8 +13,8 @@ export interface ISpksSwitchData extends GraphicData {
   set flip(v: boolean);
   get refStand(): number;
   set refStand(v: number);
-  get refSections(): number[];
-  set refSections(v: number[]);
+  // get refSections(): number[];
+  // set refSections(v: number[]);
 }
 
 const spksSwitchConsts = {