diff --git a/src/assets/common/sub_title_icon.png b/src/assets/common/sub_title_icon.png
new file mode 100644
index 0000000..de0c384
Binary files /dev/null and b/src/assets/common/sub_title_icon.png differ
diff --git a/src/assets/vehicleManage/train_card_bg.png b/src/assets/trainManage/train_card_bg.png
similarity index 100%
rename from src/assets/vehicleManage/train_card_bg.png
rename to src/assets/trainManage/train_card_bg.png
diff --git a/src/assets/vehicleManage/train_head.png b/src/assets/trainManage/train_head.png
similarity index 100%
rename from src/assets/vehicleManage/train_head.png
rename to src/assets/trainManage/train_head.png
diff --git a/src/assets/vehicleManage/vehicle_manage_bg.png b/src/assets/trainManage/train_manage_bg.png
similarity index 100%
rename from src/assets/vehicleManage/vehicle_manage_bg.png
rename to src/assets/trainManage/train_manage_bg.png
diff --git a/src/components/HeaderBar/homeSubTitle.vue b/src/components/HeaderBar/homeSubTitle.vue
index 09643b4..05d283b 100644
--- a/src/components/HeaderBar/homeSubTitle.vue
+++ b/src/components/HeaderBar/homeSubTitle.vue
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 15:52:40
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-12 16:29:23
+ * @LastEditTime: 2025-09-05 14:00:15
  * @FilePath: \vite-ai\data-dashboard\src\components\contentHeader.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,7 +11,7 @@
         :style="{ 'background-image': `url(${sub_title_bg})`, 'background-size': 'cover', 'background-repeat': 'no-repeat', 'background-position': 'left bottom' }">
         <!-- 左侧标题区域 -->
         <div class="flex items-center left-section pl-[16px]">
-            <img src="@/assets/common/alarm_title.png" class="w-[16px] h-[20px]">
+            <img src="@/assets/common/sub_title_icon.png" class="w-[20px] h-[20px]">
             <div class="fg-title ml-[12px]">
                 {{ title }}
                 <slot name="title"></slot>
@@ -40,7 +40,6 @@ const props = withDefaults(defineProps<{
 //     switch (Number(props.bgLayout)) {
 //         default:
 //             return sub_title_bg;
-
 //     }
 // });
 </script>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index b82a2c5..4299907 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -177,7 +177,7 @@
         width: 24px;
         height: 48px;
         margin-right: 12px;
-        background-image: url("@/assets/common/alarm_title.png");
+        background-image: url("@/assets/common/sub_title_icon.png");
         background-size: contain;
         background-position: center;
         background-repeat: no-repeat;
diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss
index 24e8dbc..a936b9c 100644
--- a/src/views/dashboard/DataOverview.scss
+++ b/src/views/dashboard/DataOverview.scss
@@ -45,7 +45,6 @@
     margin: 0 24px;
     background: url("@/assets/home/realTime_monitor_bg.png") no-repeat center;
     background-size: 100% 100%;
-    
   }
 
   .monitor-images {
@@ -80,11 +79,21 @@
       }
     }
   }
+  .rightInfo-box {
+  
+    // background: linear-gradient(180deg, rgba(7, 16, 19, 0) 0%, #081417 100%);
 
-  .device-info-box {
-    background: linear-gradient(180deg, rgba(7, 16, 19, 0) 0%, #081417 100%);
+    .right-info-content {
+      height: 359px;
+      background: linear-gradient(180deg, rgba(7, 16, 19, 0) 0%, #081417 100%);
+      box-shadow: inset 2px 2px 4px 0px rgba(32, 174, 254, 0.6),
+        inset -2px -2px 4px 0px rgba(32, 174, 254, 0.6);
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid #1fc6ff;
+      margin-top: 4px;
+    }
 
-    .device-info {
+    .device-info-box {
       .total-device {
         .device-total-icon {
           width: 96px;
@@ -112,5 +121,9 @@
         }
       }
     }
+
+    .train-info-box{
+      
+    }
   }
 }
diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue
index a3be41a..a8209db 100644
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@@ -1,8 +1,12 @@
 <script lang="ts" setup>
 import * as echarts from "echarts";
+import { BaseTable } from "@/components/CustomTable";
 import TotalChart from "@/components/Charts/totalChart.vue";
 import PoleMonitorChart from "@/components/Charts/poleMonitorChart.vue";
 import VehicleMonitorChart from "@/components/Charts/vehicleMonitorChart.vue";
+
+import TrainAlarmInfoModel from "./components/TrainAlarmInfoModel.vue";
+
 import HomeSubTitle from "@/components/HeaderBar/homeSubTitle.vue";
 import DeviceStatus from "./components/DeviceStatus.vue";
 import car_device_icon from "@/assets/home/car_device_icon.png";
@@ -61,23 +65,100 @@ const deviceInfo = reactive({
       },
       icon: car_device_icon,
     },
-    {
-      name: "撑杆检测设备",
-      bindVal: {
-        total: 0,
-      },
-      icon: pole_device_icon,
-    },
-    {
-      name: "钩机检测设备",
-      bindVal: {
-        total: 0,
-      },
-      icon: excavator_device_icon,
-    },
+    // {
+    //   name: "撑杆检测设备",
+    //   bindVal: {
+    //     total: 0,
+    //   },
+    //   icon: pole_device_icon,
+    // },
+    // {
+    //   name: "钩机检测设备",
+    //   bindVal: {
+    //     total: 0,
+    //   },
+    //   icon: excavator_device_icon,
+    // },
   ],
 });
 
+const trainListData = ref([
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "撑杆检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "钩机检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "撑杆检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "钩机检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "撑杆检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "钩机检测设备",
+  },
+  {
+    created_at: "2023-10-01 10:00:00",
+    device_position: "车体检测设备",
+  },
+]);
+const trainColumns = [
+  {
+    label: "进场时间",
+    property: "created_at",
+    width: 170,
+  },
+  {
+    label: "缺陷数量",
+    property: "device_position",
+    // width: 550,
+    width: 120,
+  },
+  {
+    type: "action",
+    label: "操作",
+    // width: 210,
+  },
+];
+const isTrainOpen = ref<Boolean>(false); //详情弹窗
+const currentTrainRow = ref<Record<string, any>>({}); // 当前选中行
+
+const openTrainDetail = (row: record<string, any>) => {
+  console.log(row, "openTrainDetail");
+  currentTrainRow.value = row;
+  isTrainOpen.value = true;
+};
+
 const websocketStore = useWebSocketStore();
 // 监听 messages 的变化
 watch(
@@ -123,16 +204,16 @@ const getDeviceInfo = async () => {
           bindVal: data?.appearance,
           icon: car_device_icon,
         },
-        {
-          name: "撑杆检测设备",
-          bindVal: data?.pole,
-          icon: pole_device_icon,
-        },
-        {
-          name: "钩机检测设备",
-          bindVal: data?.excavator,
-          icon: excavator_device_icon,
-        },
+        // {
+        //   name: "撑杆检测设备",
+        //   bindVal: data?.pole,
+        //   icon: pole_device_icon,
+        // },
+        // {
+        //   name: "钩机检测设备",
+        //   bindVal: data?.excavator,
+        //   icon: excavator_device_icon,
+        // },
       ];
     }
   } catch (error) {
@@ -317,36 +398,68 @@ onMounted(() => {
         </li>
       </ul>
     </div>
-    <!-- 设备信息 -->
-    <div class="device-info-box">
-      <div class="module-header">
-        <HomeSubTitle title="设备信息"> </HomeSubTitle>
-      </div>
-      <div class="device-info">
-        <div class="flex items-center justify-center total-device">
-          <div class="device-total-icon mt-[24px]"></div>
-          <div class="device-count ml-[24px]">
-            <div class="fg-mark1 text-[32px] font-bold">
-              {{ deviceTotal }}
+    <div class="rightInfo-box">
+      <!-- 设备信息 -->
+      <div class="device-info-box">
+        <div class="module-header">
+          <HomeSubTitle title="设备信息"> </HomeSubTitle>
+        </div>
+        <div class="device-info right-info-content">
+          <div class="flex items-center justify-center total-device">
+            <div class="device-total-icon mt-[24px]"></div>
+            <div class="device-count ml-[24px]">
+              <div class="fg-mark1 text-[32px] font-bold">
+                {{ deviceTotal }}
+              </div>
+              <div class="text-[14px]">设备总数</div>
             </div>
-            <div class="text-[14px]">设备总数</div>
           </div>
-        </div>
-        <ul class="device-list">
-          <li class="device-card" v-for="(v, k) in deviceInfo.list" :key="k">
-            <div
+          <ul class="device-list">
+            <li class="device-card" v-for="(v, k) in deviceInfo.list" :key="k">
+              <!-- <div
               class="device-card-head text-[16px] flex items-center mb-[12px]"
             >
               <img :src="v.icon" alt="" class="w-[32px]" />
               <span class="ml-[12px]">{{ v.name }}：</span>
               <span class="font-bold">{{ v.bindVal?.total || 0 }}</span>
-            </div>
-            <!-- //TODO 使用echarts重构 https://echarts.zhangmuchen.top/#/detail?cid=164bb-40c1-e483-b7c9b-6cb171ad -->
-            <DeviceStatus :deviceStatus="v.bindVal" />
-          </li>
-        </ul>
+            </div> -->
+              <!-- //TODO 使用echarts重构 https://echarts.zhangmuchen.top/#/detail?cid=164bb-40c1-e483-b7c9b-6cb171ad -->
+              <!-- // TODO 重新计算总数 -->
+              <DeviceStatus :deviceStatus="v.bindVal" />
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="train-info-box mt-[16px]">
+        <div class="module-header">
+          <HomeSubTitle title="近期车辆"> </HomeSubTitle>
+        </div>
+        <div class="train-info right-info-content">
+          <div class="p-[16px] baseTable_wrap full_table">
+            <BaseTable
+              class="bg-transparent baseTable_box"
+              :dataSource="trainListData"
+              :columns="trainColumns"
+              :pageable="false"
+              height="325"
+            >
+              <template v-slot:actionBar="{ row }">
+                <ul class="flex table_action_box">
+                  <li class="flex items-center" @click="openTrainDetail(row)">
+                    <div class="fg-button-primary">详情</div>
+                  </li>
+                </ul>
+              </template>
+            </BaseTable>
+          </div>
+        </div>
       </div>
     </div>
+    <TrainAlarmInfoModel
+      v-model:value="isTrainOpen"
+      :info="currentRow"
+      @close="isTrainOpen = false"
+    />
     <AlarmModal
       v-model:value="isAlarmOpen"
       :info="currentRow"
diff --git a/src/views/dashboard/VehiclManagement.scss b/src/views/dashboard/VehiclManagement.scss
index 512b4ef..6f12421 100644
--- a/src/views/dashboard/VehiclManagement.scss
+++ b/src/views/dashboard/VehiclManagement.scss
@@ -1,7 +1,7 @@
 
 .vehicl-management-wrap{
     height: 813px;
-    background-image: url("@/assets/vehicleManage/vehicle_manage_bg.png");
+    background-image: url("@/assets/trainManage/train_manage_bg.png");
     background-size: 100% 100%;
     background-position: bottom;
     background-repeat: no-repeat;
diff --git a/src/views/dashboard/VehiclManagement.vue b/src/views/dashboard/VehiclManagement.vue
index 5feb90d..acc3c45 100644
--- a/src/views/dashboard/VehiclManagement.vue
+++ b/src/views/dashboard/VehiclManagement.vue
@@ -3,7 +3,7 @@ import { BaseTable } from "@/components/CustomTable";
 import { getVehiclManagementApi } from "@/api/dashboard";
 import { isSuccessApi } from "@/utils/forApi";
 import AlarmModal from "./components/AlarmModal.vue";
-import VehiclModal from "./components/VehiclModal.vue";
+import TrainInfoModel from "./components/TrainInfoModel.vue";
 import { useTrainSaveToExcel } from "@/hooks/useTrainSaveToExcel";
 import { useWebSocketStore } from "@/stores/websocketStore";
 import { onBeforeRouteLeave } from "vue-router";
@@ -12,7 +12,7 @@ defineOptions({
 });
 const currentRow = ref<Record<string, any>>({}); // 当前选中行
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
-const isVehiclOpen = ref<Boolean>(false); //详情弹窗
+const isTrainOpen = ref<Boolean>(false); //详情弹窗
 const currentDetailRow = ref<Record<string, any>>({}); // 当前选中行
 const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
 
@@ -91,7 +91,7 @@ function handleTableChange(record) {
 function openCurrent(row) {
   console.log(row, "openCurrent");
   currentRow.value = row;
-  isVehiclOpen.value = true;
+  isTrainOpen.value = true;
 }
 
 onBeforeRouteLeave(() => {
@@ -140,11 +140,11 @@ onMounted(() => {
           </BaseTable>
         </div>
       </div>
-      <VehiclModal
-        v-model:value="isVehiclOpen"
+      <TrainInfoModel
+        v-model:value="isTrainOpen"
         :info="currentRow"
         :image="currFileList"
-        @close="isVehiclOpen = false"
+        @close="isTrainOpen = false"
       />
       <AlarmModal
         v-model:value="isAlarmOpen"
diff --git a/src/views/dashboard/components/AlarmModal.vue b/src/views/dashboard/components/AlarmModal.vue
index 37b4488..a63d064 100644
--- a/src/views/dashboard/components/AlarmModal.vue
+++ b/src/views/dashboard/components/AlarmModal.vue
@@ -144,7 +144,7 @@ const exportToExcel = async () => {
             .header-icon {
                 width: 24px;
                 height: 48px;
-                background-image: url("@/assets/common/alarm_title.png");
+                background-image: url("@/assets/common/sub_title_icon.png");
                 background-size: contain;
                 background-position: center;
                 background-repeat: no-repeat;
diff --git a/src/views/dashboard/components/AppearanceAlarmModal.vue b/src/views/dashboard/components/AppearanceAlarmModal.vue
index 4c74aca..ee9c0f1 100644
--- a/src/views/dashboard/components/AppearanceAlarmModal.vue
+++ b/src/views/dashboard/components/AppearanceAlarmModal.vue
@@ -232,7 +232,7 @@ onMounted(() => {
                 margin-top: 4px;
                 width: 24px;
                 height: 48px;
-                background-image: url("@/assets/common/alarm_title.png");
+                background-image: url("@/assets/common/sub_title_icon.png");
                 background-size: contain;
                 background-position: center;
                 background-repeat: no-repeat;
diff --git a/src/views/dashboard/components/DeviceStatus.vue b/src/views/dashboard/components/DeviceStatus.vue
index c111b0a..37afcb8 100644
--- a/src/views/dashboard/components/DeviceStatus.vue
+++ b/src/views/dashboard/components/DeviceStatus.vue
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-10 18:00:44
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-08-20 09:19:06
+ * @LastEditTime: 2025-09-05 13:48:09
  * @FilePath: \5G-Loading-Bay-Web\src\views\dashboard\components\DeviceStatus.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -38,9 +38,9 @@ const deviceStatusOptions = ref<Record<string, any>[]>([
 </script>
 
 <template>
-  <ul class="w-full text-sm deviceStatus_box">
+  <ul class="w-full text-sm deviceStatus_box ">
     <li
-      class="flex items-center justify-between w-full"
+      class="flex items-center justify-between w-full h-full"
       :style="{
         marginBottom: '16px',
       }"
@@ -75,6 +75,7 @@ const deviceStatusOptions = ref<Record<string, any>[]>([
 <style lang="scss" scoped>
 .deviceStatus_box {
   li {
+    height: 45px;
     div {
       .deviceStatusOnline {
         width: 20px;
diff --git a/src/views/dashboard/components/DiggerAlarmModal.vue b/src/views/dashboard/components/DiggerAlarmModal.vue
index 7ae6a59..c6ec239 100644
--- a/src/views/dashboard/components/DiggerAlarmModal.vue
+++ b/src/views/dashboard/components/DiggerAlarmModal.vue
@@ -80,7 +80,7 @@ const show = computed({
       .header-icon {
         width: 24px;
         height: 48px;
-        background-image: url("@/assets/common/alarm_title.png");
+        background-image: url("@/assets/common/sub_title_icon.png");
         background-size: contain;
         background-position: center;
         background-repeat: no-repeat;
diff --git a/src/views/dashboard/components/TrainAlarmInfoModel.vue b/src/views/dashboard/components/TrainAlarmInfoModel.vue
new file mode 100644
index 0000000..63e1b8b
--- /dev/null
+++ b/src/views/dashboard/components/TrainAlarmInfoModel.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-06-23 15:50:30
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-09-05 16:48:36
+ * @FilePath: \5G-Web\src\views\dashboard\components\TrainInfoModel.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Props {
+    /** 弹窗显隐 */
+    value: boolean;
+    info: Record<string, any>;
+    image: any;
+}
+interface Emits {
+    (e: "update:value", val: boolean): void;
+}
+const props = withDefaults(defineProps<Props>(), {
+    value: false,
+    info: {},
+    image: []
+});
+
+const emit = defineEmits<Emits>();
+
+
+const show = computed({
+    get() {
+        return props.value;
+    },
+    set(val: boolean) {
+        emit("update:value", val);
+    }
+});
+
+// 动态设置循环的数量
+const itemCount = 16; // 这里可以根据实际需求动态设置
+</script>
+<template>
+    <el-dialog class="trainModal-wrap fg-dialog fg-dialog2" v-model="show" align-center :show-close="false" >
+        <!-- 自定义标题栏 -->
+        <template #header="{ close, titleId, titleClass }">
+            <div class="flex items-center justify-between train-dialog-header fg-dialog-header">
+                <div class="flex items-center justify-center header-left">
+                    <div class="header-icon mr-[12px]"></div>
+                    <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">列车图片</p>
+                </div>
+                <div class="fg-dialog-header-close" @click="close">
+                    
+                </div>
+            </div>
+        </template>
+        <!-- 图片区域 -->
+        <div class="train-content">
+            <div class="train-content-top">
+                <span class="train-content-bottom-title">列车ID:</span>
+                <div class="train-content-top-img">
+                    <div class="train-content-top-img-box">
+                        <img :src="info.arrive_img_url" alt=""></img>
+                    </div>
+                    <div class="train-content-top-img-box">
+                        <img :src="info.leave_img_url" alt=""></img>
+                    </div>
+                </div>
+            </div>
+            <div class="train-content-bottom">
+                <span class="train-content-bottom-title">列车与车厢号</span>
+                <div class="flex items-center train-content-bottom-train">
+                    <div class="train-card-item mb-[8px] mr-[8px] flex items-center justify-center ">
+                        <div class="train_head_icon"></div>
+                    </div>
+                    <ul :class="['train-card-item-list', { 'high-height': info?.data?.train_data?.length > 15 }]">
+                        <li class="flex flex-1 train-card-item" v-for="(item, index) in info?.data?.train_data" :key="index">
+                            <div class="w-[80px] px-[8px] flex flex-col justify-center">
+                                  <div>{{ item.model }}</div>
+                            <div>
+                                <!-- <span class="mr-3">04</span> -->
+                                <span>{{ item.carriage_number }}</span>
+                            </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+
+
+<style lang="scss" >
+@import url('./TrainInfoModel.scss');
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/TrainInfoModel.scss b/src/views/dashboard/components/TrainInfoModel.scss
new file mode 100644
index 0000000..10f8951
--- /dev/null
+++ b/src/views/dashboard/components/TrainInfoModel.scss
@@ -0,0 +1,120 @@
+.trainModal-wrap.el-dialog {
+    .train-dialog-header {
+        color: white;
+        padding: 0;
+        // padding-top: 8px;
+        // margin-bottom: 20px;
+        .header-left {
+            padding: 0 24px;
+            font-weight: bold;
+            font-size: 18px;
+            .header-icon {
+                width: 24px;
+                height: 48px;
+                background-image: url("@/assets/common/sub_title_icon.png");
+                background-size: contain;
+                background-position: center;
+                background-repeat: no-repeat;
+            }
+        }
+    }
+
+    .train-content {
+        box-sizing: border-box;
+        padding: 0 24px;
+        width: 100%;
+        height: 100%;
+
+        .train-content-top {
+            box-sizing: border-box;
+            width: 100%;
+            .train-content-top-img {
+                box-sizing: border-box;
+                padding-top: 16px;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between; /* 水平方向均匀分布间距 */
+                align-content: space-between; /* 垂直方向均匀分布间距 */
+
+            }
+            img {
+                width: 568px;
+                height: 349px;
+            }
+        }
+        .train-content-bottom {
+            box-sizing: border-box;
+            margin-top: 12px;
+            
+            .train-content-bottom-train {
+                box-sizing: border-box;
+                padding-top: 16px;
+                display: flex;
+                width: 100%;
+                height: 82px;
+                .train-card-item {
+                    width: 80px;
+                    height: 56px;
+                    background-image: url("@/assets/trainManage/train_card_bg.png");
+                    background-size: 100% 100%;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    font-weight: 500;
+                    font-size: 12px;
+                    color: #37DBFF;
+                    .train_head_icon{
+                        width: 48px;
+                        height: 48px;
+                        background-image: url("@/assets/trainManage/train_head.png");
+                        background-size: 100% 100%;
+                        background-position: center;
+                        background-repeat: no-repeat;
+                    }
+                }
+                .train-card-item-list,
+                .high-height {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 82px;
+                    padding: 16px 0;
+                    display: flex;
+                    // align-items: flex-end;
+                    overflow-x: auto; /* 开启横向滚动 */
+                    white-space: nowrap; /* 防止车厢内容换行 */
+                    // background-color: #003366; /* 设置与背景相近颜色，这里假设深蓝色背景 */
+                    padding: 0; /* 去除默认内边距 */
+                    margin: 0; /* 去除默认外边距 */
+                                        margin-top: 18px;
+
+                    gap: 8px; /* 车厢之间的间距 */
+                    /* 自定义滚动条样式 */
+                    &::-webkit-scrollbar {
+                        height: 8px; /* 滚动条高度 */
+                        background-color: transparent;
+                        cursor: pointer;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background-color:  rgba(255,255,255,0.6); /* 滚动条滑块颜色 */
+                        border-radius: 4px; /* 滑块圆角 */
+                                                cursor: pointer;
+
+                    }
+                   
+                }
+            }
+        }
+        .train-content-bottom-title {
+            width: 100%;
+            box-sizing: border-box;
+            padding-left: 8px;
+            height: 22px;
+            font-weight: bold;
+            font-size: 14px;
+            color: #FFFFFF;
+            border-left: 3px solid #46A9ED;
+            line-height: 22px;
+            
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/views/dashboard/components/TrainInfoModel.vue b/src/views/dashboard/components/TrainInfoModel.vue
new file mode 100644
index 0000000..63e1b8b
--- /dev/null
+++ b/src/views/dashboard/components/TrainInfoModel.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2025-06-23 15:50:30
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2025-09-05 16:48:36
+ * @FilePath: \5G-Web\src\views\dashboard\components\TrainInfoModel.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Props {
+    /** 弹窗显隐 */
+    value: boolean;
+    info: Record<string, any>;
+    image: any;
+}
+interface Emits {
+    (e: "update:value", val: boolean): void;
+}
+const props = withDefaults(defineProps<Props>(), {
+    value: false,
+    info: {},
+    image: []
+});
+
+const emit = defineEmits<Emits>();
+
+
+const show = computed({
+    get() {
+        return props.value;
+    },
+    set(val: boolean) {
+        emit("update:value", val);
+    }
+});
+
+// 动态设置循环的数量
+const itemCount = 16; // 这里可以根据实际需求动态设置
+</script>
+<template>
+    <el-dialog class="trainModal-wrap fg-dialog fg-dialog2" v-model="show" align-center :show-close="false" >
+        <!-- 自定义标题栏 -->
+        <template #header="{ close, titleId, titleClass }">
+            <div class="flex items-center justify-between train-dialog-header fg-dialog-header">
+                <div class="flex items-center justify-center header-left">
+                    <div class="header-icon mr-[12px]"></div>
+                    <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">列车图片</p>
+                </div>
+                <div class="fg-dialog-header-close" @click="close">
+                    
+                </div>
+            </div>
+        </template>
+        <!-- 图片区域 -->
+        <div class="train-content">
+            <div class="train-content-top">
+                <span class="train-content-bottom-title">列车ID:</span>
+                <div class="train-content-top-img">
+                    <div class="train-content-top-img-box">
+                        <img :src="info.arrive_img_url" alt=""></img>
+                    </div>
+                    <div class="train-content-top-img-box">
+                        <img :src="info.leave_img_url" alt=""></img>
+                    </div>
+                </div>
+            </div>
+            <div class="train-content-bottom">
+                <span class="train-content-bottom-title">列车与车厢号</span>
+                <div class="flex items-center train-content-bottom-train">
+                    <div class="train-card-item mb-[8px] mr-[8px] flex items-center justify-center ">
+                        <div class="train_head_icon"></div>
+                    </div>
+                    <ul :class="['train-card-item-list', { 'high-height': info?.data?.train_data?.length > 15 }]">
+                        <li class="flex flex-1 train-card-item" v-for="(item, index) in info?.data?.train_data" :key="index">
+                            <div class="w-[80px] px-[8px] flex flex-col justify-center">
+                                  <div>{{ item.model }}</div>
+                            <div>
+                                <!-- <span class="mr-3">04</span> -->
+                                <span>{{ item.carriage_number }}</span>
+                            </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+
+
+<style lang="scss" >
+@import url('./TrainInfoModel.scss');
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/VehiclModal.vue b/src/views/dashboard/components/VehiclModal.vue
deleted file mode 100644
index b83bc15..0000000
--- a/src/views/dashboard/components/VehiclModal.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-interface Props {
-    /** 弹窗显隐 */
-    value: boolean;
-    info: Record<string, any>;
-    image: any;
-}
-interface Emits {
-    (e: "update:value", val: boolean): void;
-}
-const props = withDefaults(defineProps<Props>(), {
-    value: false,
-    info: {},
-    image: []
-});
-
-const emit = defineEmits<Emits>();
-
-
-const show = computed({
-    get() {
-        return props.value;
-    },
-    set(val: boolean) {
-        emit("update:value", val);
-    }
-});
-
-// 动态设置循环的数量
-const itemCount = 16; // 这里可以根据实际需求动态设置
-</script>
-<template>
-    <el-dialog class="vehiclModal-wrap fg-dialog fg-dialog2" v-model="show" align-center :show-close="false" >
-        <!-- 自定义标题栏 -->
-        <template #header="{ close, titleId, titleClass }">
-            <div class="flex items-center justify-between vehicl-dialog-header fg-dialog-header">
-                <div class="flex items-center justify-center header-left">
-                    <div class="header-icon mr-[12px]"></div>
-                    <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">列车图片</p>
-                </div>
-                <div class="fg-dialog-header-close" @click="close">
-                    
-                </div>
-            </div>
-        </template>
-        <!-- 图片区域 -->
-        <div class="vehicl-content">
-            <div class="vehicl-content-top">
-                <span class="vehicl-content-bottom-title">列车ID:</span>
-                <div class="vehicl-content-top-img">
-                    <div class="vehicl-content-top-img-box">
-                        <img :src="info.arrive_img_url" alt=""></img>
-                    </div>
-                    <div class="vehicl-content-top-img-box">
-                        <img :src="info.leave_img_url" alt=""></img>
-                    </div>
-                </div>
-            </div>
-            <div class="vehicl-content-bottom">
-                <span class="vehicl-content-bottom-title">列车与车厢号</span>
-                <div class="flex items-center vehicl-content-bottom-vehicl">
-                    <div class="train-card-item mb-[8px] mr-[8px] flex items-center justify-center ">
-                        <div class="train_head_icon"></div>
-                    </div>
-                    <ul :class="['train-card-item-list', { 'high-height': info?.data?.train_data?.length > 15 }]">
-                        <li class="flex flex-1 train-card-item" v-for="(item, index) in info?.data?.train_data" :key="index">
-                            <div class="w-[80px] px-[8px] flex flex-col justify-center">
-                                  <div>{{ item.model }}</div>
-                            <div>
-                                <!-- <span class="mr-3">04</span> -->
-                                <span>{{ item.carriage_number }}</span>
-                            </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </el-dialog>
-</template>
-
-
-
-<style lang="scss">
-.vehiclModal-wrap.el-dialog {
-    .vehicl-dialog-header {
-        color: white;
-        padding: 0;
-        // padding-top: 8px;
-        // margin-bottom: 20px;
-        .header-left {
-            padding: 0 24px;
-            font-weight: bold;
-            font-size: 18px;
-            .header-icon {
-                width: 24px;
-                height: 48px;
-                background-image: url("@/assets/common/alarm_title.png");
-                background-size: contain;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
-        }
-    }
-
-    .vehicl-content {
-        box-sizing: border-box;
-        padding: 0 24px;
-        width: 100%;
-        height: 100%;
-        .vehicl-content-top {
-            box-sizing: border-box;
-           
-            width: 100%;
-            height: 378px;
-            .vehicl-content-top-img {
-                box-sizing: border-box;
-                padding-top: 16px;
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between; /* 水平方向均匀分布间距 */
-                align-content: space-between; /* 垂直方向均匀分布间距 */
-
-            }
-            img {
-                width: 568px;
-                height: 334px;
-            }
-        }
-        .vehicl-content-bottom {
-            box-sizing: border-box;
-            margin-top: 12px;
-            
-            .vehicl-content-bottom-vehicl {
-                box-sizing: border-box;
-                padding-top: 16px;
-                display: flex;
-                width: 100%;
-                height: 98px;
-                .train-card-item {
-                    width: 80px;
-                    height: 56px;
-                    background-image: url("@/assets/vehicleManage/train_card_bg.png");
-                    background-size: 100% 100%;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    font-weight: 500;
-                    font-size: 12px;
-                    color: #37DBFF;
-                    .train_head_icon{
-                        width: 48px;
-                        height: 48px;
-                        background-image: url("@/assets/vehicleManage/train_head.png");
-                        background-size: 100% 100%;
-                        background-position: center;
-                        background-repeat: no-repeat;
-                    }
-                }
-                .train-card-item-list,
-                .high-height {
-                    box-sizing: border-box;
-                    width: 100%;
-                    display: flex;
-                    align-items: flex-end;
-                    overflow-x: auto; /* 开启横向滚动 */
-                    white-space: nowrap; /* 防止车厢内容换行 */
-                    // background-color: #003366; /* 设置与背景相近颜色，这里假设深蓝色背景 */
-                    padding: 0; /* 去除默认内边距 */
-                    margin: 0; /* 去除默认外边距 */
-                    gap: 8px; /* 车厢之间的间距 */
-                    /* 自定义滚动条样式 */
-                    &::-webkit-scrollbar {
-                        height: 8px; /* 滚动条高度 */
-                        background-color: transparent;
-                    }
-                    &::-webkit-scrollbar-thumb {
-                        background-color: #003366; /* 滚动条滑块颜色 */
-                        border-radius: 4px; /* 滑块圆角 */
-                    }
-                   
-                }
-            }
-        }
-        .vehicl-content-bottom-title {
-            width: 100%;
-            box-sizing: border-box;
-            padding-left: 8px;
-            height: 22px;
-            font-weight: bold;
-            font-size: 14px;
-            color: #FFFFFF;
-            border-left: 3px solid #46A9ED;
-            line-height: 22px;
-            
-        }
-    }
-
-}
-</style>
\ No newline at end of file