diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts
index e2807da..ad73bdd 100644
--- a/src/drawApp/lineApp.ts
+++ b/src/drawApp/lineApp.ts
@@ -109,6 +109,7 @@ const showType = [
   Turnout.Type,
   Signal.Type,
   Separator.Type,
+  Train.Type,
 ];
 const physicShowType = [...showType, Section.Type];
 const linkShowType = [...showType, SectionLink.Type, AxleCounting.Type];
diff --git a/src/layouts/LineLayout.vue b/src/layouts/LineLayout.vue
index c29e9ae..a3408b2 100644
--- a/src/layouts/LineLayout.vue
+++ b/src/layouts/LineLayout.vue
@@ -7,6 +7,16 @@
       </q-toolbar>
       <q-resize-observer @resize="onHeaderResize" />
     </q-header>
+    <q-drawer
+      side="right"
+      v-model="drawerRight"
+      show-if-above
+      bordered
+      :width="400"
+      :breakpoint="500"
+    >
+      <TrainPage></TrainPage>
+    </q-drawer>
     <q-page-container>
       <div id="line-app-container"></div>
     </q-page-container>
@@ -14,11 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
 import { useLineStore } from 'src/stores/line-store';
 import { useRoute, useRouter } from 'vue-router';
 import { loadLineDatas, getLineApp } from 'src/drawApp/lineApp';
 import { destroySimulation } from 'src/api/Simulation';
+import TrainPage from 'src/pages/TrainPage.vue';
+import { Train } from 'src/graphics/train/Train';
 
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
@@ -27,6 +39,7 @@ const route = useRoute();
 const router = useRouter();
 const lineStore = useLineStore();
 let simulationId = '';
+const drawerRight = ref(false);
 
 const mapName = computed(() => lineStore.lineName);
 
@@ -59,16 +72,30 @@ onMounted(() => {
   const dom = document.getElementById('line-app-container');
   if (dom) {
     simulationId = route.query.simulationId as string;
+    lineStore.setSimulationId(simulationId);
     const lineApp = lineStore.initLineApp(dom);
     loadLineDatas(lineApp);
     onResize();
   } else {
     lineStore.setLineId(null);
+    lineStore.setSimulationId(null);
   }
+  drawerRight.value = false;
 });
 onUnmounted(() => {
   if (simulationId) {
+    lineStore.setSimulationId(null);
     destroySimulation({ simulationId });
   }
 });
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Train.Type) {
+      drawerRight.value = true;
+    } else {
+      drawerRight.value = false;
+    }
+  }
+);
 </script>
diff --git a/src/pages/TrainPage.vue b/src/pages/TrainPage.vue
new file mode 100644
index 0000000..2c4aed8
--- /dev/null
+++ b/src/pages/TrainPage.vue
@@ -0,0 +1,110 @@
+<template>
+  <q-scroll-area class="fit">
+    <div class="q-pa-sm">
+      <q-list separator v-if="trainInfo">
+        <q-item-label header>列车信息</q-item-label>
+
+        <q-card flat bordered>
+          <q-item>
+            <q-item-section>
+              <q-item-label>列车索引</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{ trainInfo.id }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>是否上行</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{
+                trainInfo.up ? '是' : '否'
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>车头所在link的索引</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{ trainInfo.headLinkId }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>车头所在link内的偏移量</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{
+                trainInfo.headLinkOffset
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>车尾所在link的索引</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{ trainInfo.tailLinkId }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>车尾所在link内的偏移量</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{
+                trainInfo.tailLinkOffset
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label>列车所占用的link的索引的列表</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label caption>{{
+                trainInfo.occupiedLinkIndex
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-card>
+      </q-list>
+    </div>
+  </q-scroll-area>
+</template>
+
+<script setup lang="ts">
+import { ITrainState, Train } from 'src/graphics/train/Train';
+import { useLineStore } from 'src/stores/line-store';
+import { ref, watch } from 'vue';
+
+type trainState = {
+  id: string;
+  up: boolean;
+  headLinkId: string;
+  headLinkOffset: number;
+  tailLinkId: string;
+  tailLinkOffset: number;
+  occupiedLinkIndex: string[];
+  expanded?: boolean;
+};
+const lineStore = useLineStore();
+const trainInfo = ref<trainState | null>();
+watch(
+  () => lineStore.selectedGraphics,
+  (val) => {
+    if (val?.length == 1 && val[0].type == Train.Type) {
+      getTrainStates(val[0] as Train);
+    } else {
+      trainInfo.value = null;
+    }
+  }
+);
+function getTrainStates(train: Train) {
+  trainInfo.value = null;
+  const s = train.getStates() as ITrainState;
+  trainInfo.value = s;
+}
+</script>
diff --git a/src/protos/device_state.ts b/src/protos/device_state.ts
index 7e7b2a4..a32a9ad 100644
--- a/src/protos/device_state.ts
+++ b/src/protos/device_state.ts
@@ -327,6 +327,73 @@ export namespace state {
             return SwitchState.deserialize(bytes);
         }
     }
+    export class SignalState extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            id?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("id" in data && data.id != undefined) {
+                    this.id = data.id;
+                }
+            }
+        }
+        get id() {
+            return pb_1.Message.getFieldWithDefault(this, 1, "") as string;
+        }
+        set id(value: string) {
+            pb_1.Message.setField(this, 1, value);
+        }
+        static fromObject(data: {
+            id?: string;
+        }): SignalState {
+            const message = new SignalState({});
+            if (data.id != null) {
+                message.id = data.id;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                id?: string;
+            } = {};
+            if (this.id != null) {
+                data.id = this.id;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.id.length)
+                writer.writeString(1, this.id);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): SignalState {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new SignalState();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        message.id = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): SignalState {
+            return SignalState.deserialize(bytes);
+        }
+    }
     export class TrainState extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {