diff --git a/src/assets/common/bg_vehicl_dialog.png b/src/assets/common/bg_vehicl_dialog.png
new file mode 100644
index 0000000..302c8f6
Binary files /dev/null and b/src/assets/common/bg_vehicl_dialog.png differ
diff --git a/src/assets/common/vehicl_body.png b/src/assets/common/vehicl_body.png
new file mode 100644
index 0000000..0c9a0e0
Binary files /dev/null and b/src/assets/common/vehicl_body.png differ
diff --git a/src/assets/common/vehicl_header.png b/src/assets/common/vehicl_header.png
new file mode 100644
index 0000000..cf693c5
Binary files /dev/null and b/src/assets/common/vehicl_header.png differ
diff --git a/src/assets/footer/menu4.png b/src/assets/footer/menu4.png
new file mode 100644
index 0000000..44aeab9
Binary files /dev/null and b/src/assets/footer/menu4.png differ
diff --git a/src/assets/header/title7.png b/src/assets/header/title7.png
new file mode 100644
index 0000000..a208929
Binary files /dev/null and b/src/assets/header/title7.png differ
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 1fcb5d8..28e805f 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -56,7 +56,7 @@ const isActive = (path: string) => {
             transition: color 0.3s;
 
             // 定义一个循环，从 1 到 4
-            @for $i from 0 through 3 {
+            @for $i from 0 through 4 {
 
                 // 生成动态类名，如 .menu-icon-1、.menu-icon-2 等
                 .nav-icon-#{$i} {
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index 44138c7..d38c1cf 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -38,6 +38,13 @@ export const dashboardRoutes = {
       component: () => import("@/views/dashboard/DeviceStatus.vue"),
       meta: { title: "设备状态" },
     },
+    {
+      path: "vehicle",
+      name: "VehiclManagement",
+      fullPath: "/dashboard/vehicle",
+      component: () => import("@/views/dashboard/VehiclManagement.vue"),
+      meta: { title: "车辆管理" },
+    }
     // { path: "pole", name: "PoleMonitor", component: PoleMonitor },
     // { path: "device", name: "DeviceStatus", component: DeviceStatus },
   ],
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 55a11e1..b029899 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -9,7 +9,7 @@
   margin-left: 8px;
 }
 // 标题图
-@for $i from 0 through 6 {
+@for $i from 0 through 7 {
   // 生成动态类名
   .bg_title_#{$i} {
     // 动态设置背景图片，引用对应的图标
diff --git a/src/views/dashboard/VehiclManagement.scss b/src/views/dashboard/VehiclManagement.scss
new file mode 100644
index 0000000..c6fd71b
--- /dev/null
+++ b/src/views/dashboard/VehiclManagement.scss
@@ -0,0 +1,21 @@
+
+.vehicl-management-wrap{
+    height: 813px;
+    background-image: url("@/assets/common/device_status_bg_line.png");
+    background-size: 100% 100%;
+    background-position: bottom;
+    background-repeat: no-repeat;
+  }
+  .vehicl-management-content-box{
+  
+    .el-scrollbar__view {
+      background: transparent !important;
+      height: 600px;
+    }
+    .el-table__inner-wrapper{
+      background-color: transparent !important;
+    }
+    .el-table__body-wrapper, .el-scrollbar__wrap, .el-scrollbar{
+      background: transparent !important;
+    }
+  }
\ No newline at end of file
diff --git a/src/views/dashboard/VehiclManagement.vue b/src/views/dashboard/VehiclManagement.vue
new file mode 100644
index 0000000..92dbd2b
--- /dev/null
+++ b/src/views/dashboard/VehiclManagement.vue
@@ -0,0 +1,145 @@
+<template>
+    <div class="bg_basic_content">
+        <div class="vehicl-management-wrap">
+            <div class="vehicl-management-header mt-[32px]">
+                <ContentHeader bgLayout="1855">
+                    <template #title>
+                        <div class="w-[200px] bg_title bg_title_7">
+                        </div>
+                    </template>
+                </ContentHeader>
+            </div>
+            <div class="px-[16px] vehicl-management-content-box">
+
+                <div class="mt-[16px] bg-transparent baseTable_wrap full_table">
+
+                    <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
+                        :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
+                        :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
+                        <template v-slot:actionBar="{ row }">
+                            <ul class="flex table_action_box">
+                                <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
+                                    <el-button text>
+                                        <span :style="{
+                                            fontSize: '14px',
+                                            color: '#37DBFF'
+                                        }">
+                                            查看详情
+                                        </span>
+                                    </el-button>
+                                </li>
+                            </ul>
+                        </template>
+                    </BaseTable>
+                </div>
+            </div>
+            <VehiclModal v-model:value="isVehiclOpen" :info="currentDetailRow" :image="currFileList" @close="isVehiclOpen = false" />
+            <AlarmModal v-model:value="isAlarmOpen" :info="currentDetailRow" :image="currFileList" @close="isAlarmOpen = false" />
+        </div>
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { BaseTable } from "@/components/CustomTable";
+import ContentHeader from '@/components/ContentHeader.vue';
+import { getDeviceStatusApi } from '@/api/dashboard';
+import { isSuccessApi } from "@/utils/forApi";
+import AlarmModal from './components/AlarmModal.vue'
+import { useWebSocketStore } from '@/stores/websocketStore';
+import { onBeforeRouteLeave } from 'vue-router';
+import VehiclModal from "./components/VehiclModal.vue";
+
+defineOptions({
+    name: "VehiclManagementWrap"
+});
+const currentRow = ref<Record<string, any>>({});
+const isAlarmOpen = ref<Boolean>(false); //详情弹窗
+const isVehiclOpen = ref<Boolean>(false); //详情弹窗
+const currentDetailRow = ref<Record<string, any>>({}); // 当前选中行
+const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
+
+const websocketStore = useWebSocketStore();
+// 监听 messages 的变化
+watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
+    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+        currentDetailRow.value = newMessages[newMessages?.length - 1];
+        currFileList.value = newMessages[newMessages?.length - 1]?.images;
+        isAlarmOpen.value = true;
+    }
+}, { deep: true, immediate: true });
+
+const columns = [
+    {
+        label: "车辆ID",
+        property: "device_name"
+    },
+    {
+        label: "车厢数量",
+        property: "device_number"
+    },
+    {
+        label: "入场时间",
+        property: "device_position"
+    },
+    {
+        label: "出场时间",
+        property: "device_position"
+    },
+    {
+        label: "停留时间",
+        property: "device_position"
+    },
+    {
+        type: "action",
+        label: "操作"
+    }
+];
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+const listData = ref([]);
+const getList = async () => {
+    try {
+        const { currentPage, pageSize } = pagination.value;
+        const res = await getDeviceStatusApi({ current: currentPage, pageSize })
+        console.log(res.data, 'getList_data')
+        if (isSuccessApi(res)) {
+            listData.value = res.data.data;
+            pagination.value = {
+                ...pagination.value,
+                total: res.data.total
+            };
+        }
+    } catch (error) {
+        console.error('获取数据失败:', error)
+    }
+}
+function handleTableChange(record) {
+    console.log("handleTableChange_record", record);
+    pagination.value = {
+        ...pagination.value,
+        currentPage: record.page,
+        pageSize: record.pageSize
+    };
+    getList();
+}
+
+/**查看详情 */
+function openCurrent(row) {
+    console.log(row, "openCurrent");
+    currentRow.value = row;
+    isVehiclOpen.value = true;
+}
+
+onBeforeRouteLeave(() => {
+    isAlarmOpen.value = false;
+    currentDetailRow.value = {};
+    currFileList.value = [];
+});
+onMounted(() => {
+    getList();
+});
+</script>
+
+<style lang="scss">
+@import url('./VehiclManagement.scss');
+</style>
diff --git a/src/views/dashboard/components/VehiclModal.vue b/src/views/dashboard/components/VehiclModal.vue
new file mode 100644
index 0000000..35b7501
--- /dev/null
+++ b/src/views/dashboard/components/VehiclModal.vue
@@ -0,0 +1,232 @@
+<template>
+    <el-dialog class="vehiclModal-wrap" v-model="show" @close="handleClose">
+        <!-- 自定义标题栏 -->
+        <template #header="{ close, titleId, titleClass }">
+            <div class="flex items-center justify-between vehicl-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>
+        </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="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
+                        <!-- <div>1</div> -->
+                    </div>
+                    <div class="vehicl-content-top-img-box">
+                        <img src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt=""></img>
+                        <!-- <div>1</div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="vehicl-content-bottom">
+                <span class="vehicl-content-bottom-title">列车与车厢号</span>
+                <div class="vehicl-content-bottom-vehicl">
+                    <div class="vehicl-content-bottom-vehicl-header"></div>
+                    <div :class="['vehicl-content-bottom-vehicl-body-box', { 'high-height': itemCount > 15 }]">
+                        <div class="vehicl-content-bottom-vehicl-body" v-for="(item, index) in itemCount" :key="index">
+                            <div>C54K</div>
+                            <div>
+                                <span class="mr-3">04</span>
+                                <span>15189</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<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 handleClose = () => {
+    // emits('close');
+};
+
+const show = computed({
+    get() {
+        return props.value;
+    },
+    set(val: boolean) {
+        emit("update:value", val);
+    }
+});
+
+// 动态设置循环的数量
+const itemCount = 16; // 这里可以根据实际需求动态设置
+</script>
+
+<style lang="scss">
+.vehiclModal-wrap.el-dialog {
+    border: none;
+    overflow: hidden;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: url("@/assets/common/bg_real_dialog.png");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 1200px;
+    height: 630px;
+    padding: 0;
+
+    .el-dialog__header.show-close {
+        padding: 0;
+    }
+
+    .el-dialog__close {
+        width: 56px;
+        height: 56px;
+        color: white;
+        font-size: 18px;
+        padding-top: 4px;
+        padding-right: 20px;
+    }
+
+    .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 {
+                margin-top: 4px;
+                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;
+                // align-items: flex-end;
+                width: 100%;
+                height: 98px;
+                .vehicl-content-bottom-vehicl-header {
+                    margin-right: 8px;
+                    width: 82px;
+                    height: 82px;
+                    background-image: url("@/assets/common/vehicl_header.png");
+                    background-size: 100% 100%;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                }
+                .vehicl-content-bottom-vehicl-body-box,
+                .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; /* 去除默认外边距 */
+                    /* 自定义滚动条样式 */
+                    &::-webkit-scrollbar {
+                        height: 8px; /* 滚动条高度 */
+                        background-color: transparent;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        background-color: #003366; /* 滚动条滑块颜色 */
+                        border-radius: 4px; /* 滑块圆角 */
+                    }
+                    .vehicl-content-bottom-vehicl-body {
+                        box-sizing: border-box;
+                        margin-right: 8px;
+                        padding: 12px 8px;
+                        width: 80px;
+                        height: 66px;
+                        background-image: url("@/assets/common/vehicl_body.png");
+                        background-size: 100% 100%;
+                        background-position: center;
+                        background-repeat: no-repeat;
+                        font-weight: 500;
+                        font-size: 12px;
+                        color: #154DDD;
+                    }
+                }
+                .high-height {
+                    height: 90px;
+                }
+            }
+        }
+        .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