From 301da206e9f284894a8cf755848d14a6747b0cbd Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Fri, 15 Aug 2025 13:40:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=90=84=E6=A8=A1=E5=9D=97=E9=9D=99=E6=80=81=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/appearanceMonitor/afterError.png   | Bin 0 -> 321 bytes
 src/assets/appearanceMonitor/beforeError.png  | Bin 0 -> 317 bytes
 src/assets/vehicleManage/train_card_bg.png    | Bin 0 -> 4262 bytes
 src/assets/vehicleManage/train_head.png       | Bin 0 -> 789 bytes
 src/views/dashboard/AppearanceMonitor.vue     |   8 +-
 src/views/dashboard/DeviceStatus.vue          | 117 +++--
 src/views/dashboard/DiggerMonitor.scss        | 154 ++----
 src/views/dashboard/DiggerMonitor.vue         | 400 ++++++----------
 src/views/dashboard/PoleMonitor.scss          |   4 +-
 .../components/AppearanceAlarmModal.vue       | 104 ++--
 .../dashboard/components/DeleteModal.vue      |   2 +-
 .../dashboard/components/DiggerAlarmModal.vue |  53 +-
 .../components/HistoryVideoModal.vue          | 452 +++++++++---------
 .../dashboard/components/VehiclModal.vue      | 135 +++---
 14 files changed, 616 insertions(+), 813 deletions(-)
 create mode 100644 src/assets/appearanceMonitor/afterError.png
 create mode 100644 src/assets/appearanceMonitor/beforeError.png
 create mode 100644 src/assets/vehicleManage/train_card_bg.png
 create mode 100644 src/assets/vehicleManage/train_head.png

diff --git a/src/assets/appearanceMonitor/afterError.png b/src/assets/appearanceMonitor/afterError.png
new file mode 100644
index 0000000000000000000000000000000000000000..65dc781995b3661d3678200fe2d3535ebd480253
GIT binary patch
literal 321
zcmeAS@N?(olHy`uVBq!ia0vp^DL|~k!3HGjcg?o|Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>jsP7srqa#<#cEiZMFMIDCwBzbxV?rV$-_
zQ(2&bm;ZsO$odVDp`uMX8n>R6a-6FR-E4j*{?<+7xATmH|4mMD4Q!cow@O;%{J)A7
zYkq&_oqpMJh4o$qk>&#`FSCND^slTj;_6B-sQ<U`^3gq&?KS4H@s9tepKt4}my0xD
zYc%BOaZKQ0N*0i4J|MwzOo2$DwUfJZg-g4XSMKMJ>|5^mF{M8`_3cE~WPusSWIsuE
chL_*FTPbs9*Aa0`pbr^5UHx3vIVCg!0BCM-NdN!<

literal 0
HcmV?d00001

diff --git a/src/assets/appearanceMonitor/beforeError.png b/src/assets/appearanceMonitor/beforeError.png
new file mode 100644
index 0000000000000000000000000000000000000000..7880d6c581b08a674347a8be41b0d2ea16d017e7
GIT binary patch
literal 317
zcmeAS@N?(olHy`uVBq!ia0vp^DL|~k!3HGjcg?o|Qk(@Ik;M!Q+`=Ht$S`Y;1W=H%
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>j697srqa#<#b1xtIb)93EOfQghibdrjCu
zB|XRHyu++Jc)Oz|begVaZQ_1pG%rKox%z&~hc%h^4Bj57ed-suY|5kad3$-EZnl@x
zdS3Up`Sw$(SAO~}NdhyHHr-lsYKB#>lccWP{^KWeZtZd2_iTLt+jGaqQ<b@oDHyOd
z8gleFCh#yN3rI8{kYFKBXjyIX#?-}rl_FpNJ5M`Ys4@Rj<@!0YkwDWj?<mfnT2cC(
Z_miwt0YkdXA)xOVJYD@<);T3K0RY(WZ@2&e

literal 0
HcmV?d00001

diff --git a/src/assets/vehicleManage/train_card_bg.png b/src/assets/vehicleManage/train_card_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6729903e21d2e8d4d709e46259cdd74d9c0f2fb9
GIT binary patch
literal 4262
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
IM6N<$f*k`Sv;Y7A

literal 0
HcmV?d00001

diff --git a/src/assets/vehicleManage/train_head.png b/src/assets/vehicleManage/train_head.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2c36ff65568c02fff1df3426a9ed69e9efe0c9b
GIT binary patch
literal 789
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7OGooCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2BuY>E{-7;jBjuI1_?V#9Q(Ljz3@1be?o-A
z%f8moO)`E8^B8OxKeBved&GG~`UU5iQ%vT&k`Fe?H1=)~$ha@Z)xBQDcCu%c)4%<z
zM1oURWv`m=x%~IsJ{F)=aB$^ZX5Z8Oe?HAue`Qhq(_44<nZD?%ustuY271NC^IyAj
zym0whUk2&+eZ`5j^DNg^zfO6+H81>r;N;jBcMleCH-9z7js3%?3(s|z>!w!S{c*0Y
zVY*-4x?Rf`pUYgGcxXe>t|hV7Z*JY)xW-bf_-`+#!kxE~%jRzOxn2DCXh_f}hC?^%
zZeC-5{Y6)IK?-Bb!e=?2w)Li0bk?Xa?y>rGH+ZG_`{WwgG${we)tRf)+kYzE|7w0#
zrQ!9%V|=?0=^Aq$ST;3wwn+QW58_jw=Co=@v)@V7zMuc?Ugs)_Ys=Ob)L!@9mBc!4
z^^#-#EQ!;e+_u{HyS{wg)W70+3%J_0R&IEu^}T)T%;?$oPj8#a=_%-t#4<sGQN@j+
z6Nwob|5NtoJl(tHCfxkCeP5(9_-@H;7g`s>tz{KoHGj(l!`}2Gob#-w%QZQ9?tD>m
zWziM&1sX|Pzj&_jUFm-yHH^nvcA?ot#+IVhr?=={(XwKw|EeKq+RdfV^LN#UE$ok7
zSqm;M`n+6Ki(z`z@{h`Hno1j2Fl_RvP1IV%bR)jB_V?%L6|r9gp4_TR?%vQSpucGU
zBIX<Mh0ND4JyV%IUCh@fK6F)jp3LoC57s*c=GpG)^4&JCciaC~*=oP}Yen{|Gca86
z5w^X`Yj3*g=J|C6^Vc%o*?F(;wv+wIx*zP{Z#<s1&)3!5eXfD0;X37>$^F&~ix?tT
zKRVwm<~et1$L_i{I|Jst=63d7D^hs**u?X#zi&yk{F(_*K48Y?ul&2NFS>ns7MCK3
N@9FC2vd$@?2>^uXT`~Xw

literal 0
HcmV?d00001

diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue
index 26c0dcd..90782f0 100644
--- a/src/views/dashboard/AppearanceMonitor.vue
+++ b/src/views/dashboard/AppearanceMonitor.vue
@@ -84,7 +84,8 @@ const columns = [
 const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
 const listData = ref([]); // 列表数据
 const currentRow = ref<Record<string, any>>({}); // 当前选中行
-const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
+const currFileList = ref<Record<string, any>[]>([]); // 选中行的文件列表
+const currBeforeFileList = ref<Record<string, any>[]>([]); // 选中行历史文件列表
 // 搜索表单
 const searchForm = reactive({
   train_number: "",
@@ -307,7 +308,6 @@ onMounted(() => {
                   :row-class-name="handleRowClassName"
                   @row-click="handleRowClick"
                 >
-            
                   <template v-slot:actionBar="{ row }">
                     <ul class="flex table_action_box">
                       <li
@@ -335,13 +335,13 @@ onMounted(() => {
       <li>
         <div class="fg-footer-charts-title">日检出量</div>
         <div class="fg-footer-charts-content">
-          <PoleDailyDetectionChart :data="dailyDetectionData" />
+          <!-- <PoleDailyDetectionChart :data="dailyDetectionData" /> -->
         </div>
       </li>
       <li>
         <div class="fg-footer-charts-title">日告警分类</div>
         <div class="fg-footer-charts-content">
-          <PoleDailyAlertChart :data="dailyDetectionData" />
+          <!-- <PoleDailyAlertChart :data="dailyDetectionData" /> -->
         </div>
       </li>
     </ul>
diff --git a/src/views/dashboard/DeviceStatus.vue b/src/views/dashboard/DeviceStatus.vue
index fb91ea5..df6adfe 100644
--- a/src/views/dashboard/DeviceStatus.vue
+++ b/src/views/dashboard/DeviceStatus.vue
@@ -1,62 +1,3 @@
-<template>
-  <div class="bg-basic-content">
-    <div class="device-status-wrap">
-      <div class="device-status-header mt-[32px]">
-        <div class="mt-[24px] py-[16px] pl-[69px] flex items-center">
-          <div class="fg-title">设备状态</div>
-        </div>
-      </div>
-      <div class="px-[24px] device-status-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-[12px]"
-                  @click="openCurrent(row)"
-                >
-                  <div class="fg-button-primary1">即时视频</div>
-                </li>
-
-                <li class="flex items-center" @click="openHistory(row)">
-                  <div class="fg-button-primary">查看详情</div>
-                </li>
-              </ul>
-            </template>
-          </BaseTable>
-        </div>
-      </div>
-      <RealVideoModal
-        v-model:value="isRealOpen"
-        :info="currentRow"
-        @close="isRealOpen = false"
-      />
-      <HistoryVideoModal
-        ref="historyModalRef"
-        v-model:value="isHistoryOpen"
-        :info="currentRow"
-        :historyVideos="historyVideos"
-        @close="isHistoryOpen = false"
-      />
-      <AlarmModal
-        v-model:value="isAlarmOpen"
-        :info="currentDetailRow"
-        :image="currFileList"
-        @close="isAlarmOpen = false"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="tsx">
 import { BaseTable } from "@/components/CustomTable";
 import ContentHeader from "@/components/ContentHeader.vue";
@@ -258,6 +199,64 @@ onMounted(() => {
   getList();
 });
 </script>
+<template>
+  <div class="bg-basic-content">
+    <div class="device-status-wrap">
+      <div class="device-status-header mt-[32px]">
+        <div class="mt-[24px] py-[16px] pl-[69px] flex items-center">
+          <div class="fg-title">设备状态</div>
+        </div>
+      </div>
+      <div class="px-[24px] device-status-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-[12px]"
+                  @click="openCurrent(row)"
+                >
+                  <div class="fg-button-primary1">即时视频</div>
+                </li>
+
+                <li class="flex items-center" @click="openHistory(row)">
+                  <div class="fg-button-primary">查看详情</div>
+                </li>
+              </ul>
+            </template>
+          </BaseTable>
+        </div>
+      </div>
+      <RealVideoModal
+        v-model:value="isRealOpen"
+        :info="currentRow"
+        @close="isRealOpen = false"
+      />
+      <HistoryVideoModal
+        ref="historyModalRef"
+        v-model:value="isHistoryOpen"
+        :info="currentRow"
+        :historyVideos="historyVideos"
+        @close="isHistoryOpen = false"
+      />
+      <AlarmModal
+        v-model:value="isAlarmOpen"
+        :info="currentDetailRow"
+        :image="currFileList"
+        @close="isAlarmOpen = false"
+      />
+    </div>
+  </div>
+</template>
 
 <style lang="scss">
 @import url("./DeviceStatus.scss");
diff --git a/src/views/dashboard/DiggerMonitor.scss b/src/views/dashboard/DiggerMonitor.scss
index a70e55a..313fe3a 100644
--- a/src/views/dashboard/DiggerMonitor.scss
+++ b/src/views/dashboard/DiggerMonitor.scss
@@ -1,122 +1,38 @@
-.digger-monitor-warp {
-    box-sizing: border-box;
-    padding-top: 32px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-    // align-items: center;
-    .digger-monitor-right {
-      box-sizing: border-box;
-      width:970px;
-      // display: flex;
-      background-image: url("@/assets/common/diggerMonitor-main-bg.png");
-      background-size: 100% 100%;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
+.digger-monitor-main-content {
+  background-image: url("@/assets/diggerMonitor/diggerMonitor-main-bg.png");
+  background-size: 100% 100%;
+  background-position: bottom;
+  background-repeat: no-repeat;
+  height: 586px;
+  margin-top: 20px;
 
-    .digger-monitor-search-box {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin: 16px 0;
-    }
-    .right-panel{
-      .el-scrollbar__view {
-        background: transparent !important;
-        height: 600px;
-      }
-      .fixed_pagination{
-        padding: 12px 20px 15px;
-      }
+  .digger-monitor-body {
+    padding: 0 24px;
+  }
+  .digger-monitor-search-box {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 24px 0 16px;;
+  }
+  .right-panel {
+     width: calc(
+      100% - var(--fg-swiper-monitor-slide-iamge-width) -
+        var(--fg-swiper-monitor-main-iamge-width) - var(--fg-box-margin) * 2
+    );
+    .el-scrollbar__view {
+      background: transparent !important;
+      height: 360px;
     }
-
-
-    .digger-monitor-left {
-      width: 49%;
-      background-image: url("@/assets/common/boderBg.png");
-      background-size: 100% 100%;
-      background-position: center;
-      background-repeat: no-repeat;
-      .monitor-left-top {
-        box-sizing: border-box;
-        padding: 32px 16px 20px;
-        min-height: 600px;
-        .file-preview-screen {
-          width: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 492px;
-        //   background-color: red;
-          img {
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: cover;
-          }
-
-          video {
-            width: 100%;
-            max-height: calc(100%);
-          }
-        }
-      }
-      .monitor-left-bottom {
-        width: 100%;
-        padding: 0 16px;
-        margin-bottom: 29px;
-        overflow: visible;
-        .swiper {
-          width: 100%;
-          height: 100%;
-          .swiper-slide {
-            width: 20%;
-            border-radius:4px;
-            height: 144px;
-            img {
-                width: 100%;
-                height: 144px;
-                border-radius:4px;
-                object-fit: cover
-            }
-          }
-          .active-slide img,
-          .active-slide video {
-            border-radius:4px;
-            border: 2px solid #2ECCE0;
-          }
-          .swiper-button-prev,
-          .swiper-button-next {
-            background-color: rgba(0, 0, 0, 0.5);
-            color: white;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-          }
-  
-          .swiper-button-prev::after,
-          .swiper-button-next::after {
-            font-size: 12px ;
-            color: #FFF;
-          }
-  
-          /* 修改按钮悬停样式 */
-          .swiper-button-prev:hover,
-          .swiper-button-next:hover {
-            background-color: rgba(0, 0, 0, 0.8);
-          }
-        }
-      }
-      .empty-bg {
-        box-sizing: border-box;
-        width: 892px;
-        height: 815px;
-        background-image: url("@/assets/common/emptyBg.png");
-        background-size: 156px 102px;
-        background-position: center;
-        background-repeat: no-repeat;
-      }
+  }
+  .digger-monitor-banner {
+    .left-panel {
+      width: calc(
+        var(--fg-swiper-monitor-slide-iamge-width) +
+          var(--fg-swiper-monitor-main-iamge-width) + var(--fg-box-margin)
+      );
+      max-height: 480px;
+      margin-right: 16px;
     }
-  }
\ No newline at end of file
+  }
+}
diff --git a/src/views/dashboard/DiggerMonitor.vue b/src/views/dashboard/DiggerMonitor.vue
index 145e897..42ef73a 100644
--- a/src/views/dashboard/DiggerMonitor.vue
+++ b/src/views/dashboard/DiggerMonitor.vue
@@ -1,129 +1,7 @@
-<template>
-  <div class="digger-monitor-warp">
-    <div class="digger-monitor-left">
-      <template v-if="currFileList?.length">
-        <div class="flex items-center justify-center h-full monitor-left-top">
-          <div class="file-preview-screen">
-            <!-- // TODO 暂时不渲染 -->
-            <img :src="currFileList?.[0]?.image_url" v-if="currFileList?.[0]?.image_url" />
-            <div v-else class="w-full h-full bg-error-picture"></div>
-          </div>
-        </div>
-      </template>
-      <div class="empty-bg" v-else></div>
-    </div>
-    <div class="digger-monitor-right h-[100%]">
-      <div class="module-header">
-        <ContentHeader bgLayout="918">
-          <template #title>
-            <div class="w-[200px] bg_title bg_title_8"></div>
-          </template>
-          <template #extra>
-            <div></div>
-          </template>
-        </ContentHeader>
-      </div>
-      <!-- 表格区域 -->
-      <!-- 搜索区域 -->
-      <div class="px-[16px]">
-        <div class="digger-monitor-search-box">
-          <!-- <el-select
-            v-model="searchForm.station"
-            placeholder="钩机编号"
-            class="custom-select"
-          >
-            <el-option label="小觉站" value="小觉站"></el-option>
-            <el-option label="东西站" value="东西站"></el-option>
-            <el-option label="立杆区" value="立杆区"></el-option>
-          </el-select> -->
-          <el-input
-            v-model="searchForm.train_number"
-            placeholder="请输入列车号"
-            class="custom-input"
-            clearable
-          />
-          <el-input
-            v-model="searchForm.train_carriage_number"
-            placeholder="请输入车厢号"
-            class="custom-input"
-            clearable
-          />
-          <!-- <el-select
-            v-model="searchForm.fault_type"
-            placeholder="故障类型"
-            class="custom-select"
-          >
-            <el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
-            <el-option label="门折页座脱落" value="门折页座脱落"></el-option>
-            <el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
-            <el-option label="小窗裂纹" value="小窗裂纹"></el-option>
-            <el-option label="搭扣未搭" value="搭扣未搭"></el-option>
-            <el-option label="小门外胀" value="小门外胀"></el-option>
-          </el-select> -->
-          <el-button
-            type="primary"
-            @click="handleQuery"
-            class="basic-btn query-btn"
-          >
-            <span class="icon"></span> 查询
-          </el-button>
-          <el-button @click="handleReset" class="basic-btn reset-btn">
-            <span class="icon"></span> 重置
-          </el-button>
-        </div>
-        <!-- 右侧表格区域 -->
-        <div class="w-full right-panel">
-          <div class="bg-transparent baseTable_wrap">
-            <template v-if="pagination.total > 0">
-              <BaseTable
-                class="bg-transparent baseTable_box"
-                :total="pagination.total"
-                :pageSize="pagination.pageSize"
-                :dataSource="listData"
-                :isFixedPagination="true"
-                :columns="columns"
-                :page="pagination.currentPage"
-                @change="handleTableChange"
-                :row-class-name="handleRowClassName"
-                @row-click="handleRowClick"
-              >
-                <template #created_at="{ row }">
-                  <div>{{ row }}</div>
-                </template>
-              </BaseTable>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-    <DiggerAlarmModal
-      v-model:value="isAlarmOpen"
-      :info="currentRow"
-      :fileList="currFileList"
-      @close="isAlarmOpen = false"
-    />
-    <BaseDelete
-      v-model:value="isDeleteOpen"
-      :deleteContent="`
-    <p>
-      确定删除“
-      <span>${currentRow?.alarm_type}</span>
-      ”相关告警记录吗？删除后将找不到此记录，请谨慎操作.
-    </p>
-    `"
-      @delete-confirm="handleDeleteConfirm"
-      :info="currentRow"
-      @close="isDeleteOpen = false"
-    />
-  </div>
-</template>
 <script lang="ts" setup>
-import Player from "@/components/videoPlayer/Player.vue";
-import SwiperPlayer from "./components/SwiperPlayer.vue";
-import ContentHeader from "@/components/ContentHeader.vue";
+import { onBeforeRouteLeave } from "vue-router";
 import { BaseDelete, BaseTable } from "@/components/CustomTable";
-import { Swiper, SwiperSlide } from "swiper/vue";
-import { Navigation, Scrollbar } from "swiper/modules";
+import DiggerAlarmModal from "./components/DiggerAlarmModal.vue";
 import {
   getAppearanceMonitorApi,
   getAppearanceMonitorDetailApi,
@@ -131,17 +9,8 @@ import {
   deleteAppearanceMonitorApi,
 } from "@/api/dashboard";
 import { isSuccessApi } from "@/utils/forApi";
-import DiggerAlarmModal from "./components/DiggerAlarmModal.vue";
 import { useWebSocketStore } from "@/stores/websocketStore";
-import { onBeforeRouteLeave } from "vue-router";
 
-import "swiper/css";
-import "swiper/scss";
-import "swiper/scss/navigation";
-import { color } from "echarts";
-const modules = [Navigation, Scrollbar];
-const activeIndex = ref(-1);
-const swiperRef = ref(null);
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
 const isDeleteOpen = ref<Boolean>(false); //删除弹窗
 const websocketStore = useWebSocketStore();
@@ -149,15 +18,6 @@ const websocketStore = useWebSocketStore();
 watch(
   () => websocketStore.messages,
   (newMessages: string[], oldMessages: string[]) => {
-    // console.log('新消息数组:', newMessages[newMessages?.length - 1].content);
-    // console.log('旧消息数组:', oldMessages);
-    // if (newMessages?.length > oldMessages?.length) {
-    //     // 说明有新消息到来
-    //     const newMessage = newMessages[newMessages?.length - 1];
-    //     // console.log('接收到新的 WebSocket 消息:', newMessage);
-
-    //     // 这里可以添加更多的处理逻辑，例如弹出提示框等
-    // }
     if (newMessages?.length > 0 && !isAlarmOpen.value) {
       console.log(
         newMessages[newMessages?.length - 1],
@@ -222,76 +82,15 @@ const columns = [
     property: "created_at",
   },
   {
-    slot: "operation",
+    type: "action",
     label: "操作",
-    width: 140,
-    formatter: (row) => {
-      return h(
-        "div",
-        {
-          style: {
-            fontSize: "14px",
-            color: "#37EBFF",
-          },
-        },
-        [
-          h(
-            "span",
-            {
-              fontSize: "14px",
-              class: "pf-1",
-            },
-            [
-              h(
-                "i",
-                {
-                  style: {
-                    fontSize: "14px",
-                    letterSpacing: "2px",
-                    marginRight: "4px",
-                    color: "#009DFF",
-                  },
-                  onClick: (row) => {
-                    console.log("row.id");
-                    // 这里可以添加按钮点击后的具体逻辑
-                    isAlarmOpen.value = true;
-                    console.log(isAlarmOpen.value);
-                    currentRow.value = row;
-                  },
-                },
-                "详情"
-              ),
-              h(
-                "i",
-                {
-                  style: {
-                    fontSize: "14px",
-                    letterSpacing: "2px",
-                    marginRight: "4px",
-                    color: "#FF2727",
-                  },
-                  onClick: (row) => {
-                    // console.log(row.id);
-                    // 这里可以添加按钮点击后的具体逻辑
-                    isDeleteOpen.value = true;
-                    currentRow.value = row;
-                  },
-                },
-                "删除"
-              ),
-            ]
-          ),
-        ]
-      );
-    },
+    width: 170,
   },
 ];
 
 const listData = ref([]); // 列表数据
 const currentRow = ref<Record<string, any>>({}); // 当前选中行
 const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
-const currBeforeFileList = ref<Record<string, any>[]>([]); // 故障前详情的文件列表
-const currFile = ref<Record<string, any>>({}); // 详情数据
 // 搜索表单
 const searchForm = reactive({
   train_number: "",
@@ -300,7 +99,6 @@ const searchForm = reactive({
   station: "",
   type: "distance", // TODO 接口正常时约定替换 distance
 });
-const dataLoading = ref(true);
 // 文件详情
 const getFileList = async () => {
   try {
@@ -312,53 +110,15 @@ const getFileList = async () => {
     console.log(res.data, "getDetailList_data");
     if (isSuccessApi(res)) {
       currFileList.value = res.data.data;
-      currFile.value = res.data.data[0];
-      activeIndex.value = 0;
     }
   } catch (error) {
     console.log(error, "getDetailList_error");
   }
 };
-
-// 故障前详情
-const getBeforeFileList = async () => {
-  try {
-    const res = await getBeforeMonitorDetailApi({
-      id: currentRow.value?.id,
-      current: 1,
-      pageSize: 1000,
-    });
-    console.log(res.data, "getDetailList_data");
-    if (isSuccessApi(res)) {
-      currBeforeFileList.value = res.data.data;
-    }
-  } catch (error) {
-    console.log(error, "getDetailList_error");
-  }
-};
-
-// TODO mock 获取视频列表数据
-// const getFileList = async () => {
-//   try {
-//     const resAll = await fetch('/api/v1/record/record_detail_list/', {
-//       method: 'POST'
-//     })
-//     const res = await resAll.json()
-//     if (isSuccessApi(res)) {
-//       currFileList.value = res.data.data;
-//       currFile.value = res.data.data[0];
-//       activeIndex.value = 0;
-//     }
-//   } catch (error) {
-//     console.error('获取数据失败:', error)
-//   }
-// }
-
 function loadDetail() {
   currentRow.value = listData.value[0];
   console.log(currentRow.value, "currentRow");
   getFileList();
-  getBeforeFileList();
 }
 
 // 获取列表
@@ -426,11 +186,23 @@ const handleRowClassName = ({ row }) => {
   return row.id === currentRow.value.id ? "selected-row" : "";
 };
 
+/**查看详情 */
+function openCurrent(row) {
+  console.log(row, "openCurrent");
+  currentRow.value = row;
+  isAlarmOpen.value = true;
+}
+
+// 删除
+function deleteCurrent(row) {
+  isDeleteOpen.value = true;
+  currentRow.value = row;
+}
+
 // 行点击事件处理
 const handleRowClick = (row, event, rowIndex) => {
   currentRow.value = row;
   getFileList();
-  getBeforeFileList();
 };
 
 onBeforeRouteLeave(() => {
@@ -443,6 +215,144 @@ onMounted(() => {
   getList();
 });
 </script>
+<template>
+  <div class="digger-monitor-warp">
+    <div class="digger-monitor-main-content">
+      <div class="module-header">
+        <div class="fg-title pl-[32px] pt-[23px]">
+          <span class="text-[18px]">钩机监测</span>
+        </div>
+      </div>
+      <div class="digger-monitor-body">
+        <!-- 搜索区域 -->
+        <div class="digger-monitor-search-box">
+          <!-- <el-select
+            v-model="searchForm.station"
+            placeholder="钩机编号"
+            class="custom-select"
+          >
+            <el-option label="小觉站" value="小觉站"></el-option>
+            <el-option label="东西站" value="东西站"></el-option>
+            <el-option label="立杆区" value="立杆区"></el-option>
+          </el-select> -->
+          <el-input
+            v-model="searchForm.train_number"
+            placeholder="请输入列车号"
+            class="custom-input"
+            clearable
+          />
+          <el-input
+            v-model="searchForm.train_carriage_number"
+            placeholder="请输入车厢号"
+            class="custom-input"
+            clearable
+          />
+          <!-- <el-select
+            v-model="searchForm.fault_type"
+            placeholder="故障类型"
+            class="custom-select"
+          >
+            <el-option label="下侧门板缺失" value="下侧门板缺失"></el-option>
+            <el-option label="门折页座脱落" value="门折页座脱落"></el-option>
+            <el-option label="小门塔扣丢失" value="小门塔扣丢失"></el-option>
+            <el-option label="小窗裂纹" value="小窗裂纹"></el-option>
+            <el-option label="搭扣未搭" value="搭扣未搭"></el-option>
+            <el-option label="小门外胀" value="小门外胀"></el-option>
+          </el-select> -->
+          <el-button
+            type="primary"
+            @click="handleQuery"
+            class="basic-btn query-btn"
+          >
+            <span class="icon"></span> 查询
+          </el-button>
+          <el-button @click="handleReset" class="basic-btn reset-btn">
+            <span class="icon"></span> 重置
+          </el-button>
+        </div>
+        <!-- 主体内容区域 -->
+        <div class="flex justify-between digger-monitor-banner">
+          <div class="left-panel">
+            <template v-if="currFileList?.length">
+              <div
+                class="flex items-center justify-center h-full monitor-left-top"
+              >
+                <!-- // TODO 暂时不渲染 -->
+                <img
+                  class="w-full h-full"
+                  :src="currFileList?.[0]?.image_url"
+                  v-if="currFileList?.[0]?.image_url"
+                />
+                <div v-else class="w-full h-full fg-empty-image"></div>
+              </div>
+            </template>
+            <div class="empty-bg" v-else></div>
+          </div>
+
+          <!-- 表格区域 -->
+          <!-- 搜索区域 -->
+
+          <!-- 右侧表格区域 -->
+          <div class="right-panel">
+            <div class="bg-transparent baseTable_wrap">
+              <template v-if="pagination.total > 0">
+                <BaseTable
+                  class="bg-transparent baseTable_box"
+                  :total="pagination.total"
+                  :pageSize="pagination.pageSize"
+                  :dataSource="listData"
+                  :isFixedPagination="true"
+                  :columns="columns"
+                  :page="pagination.currentPage"
+                  @change="handleTableChange"
+                  :row-class-name="handleRowClassName"
+                  @row-click="handleRowClick"
+                >
+                  <template v-slot:actionBar="{ row }">
+                    <ul class="flex table_action_box">
+                      <li
+                        class="flex items-center mr-[8px]"
+                        @click="openCurrent(row)"
+                      >
+                        <div class="fg-button-primary">详情</div>
+                      </li>
+                      <li
+                        class="flex items-center mr-[8px]"
+                        @click="deleteCurrent(row)"
+                      >
+                        <div class="fg-button-primary-danger">删除</div>
+                      </li>
+                    </ul>
+                  </template>
+                </BaseTable>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <DiggerAlarmModal
+      v-model:value="isAlarmOpen"
+      :info="currentRow"
+      :fileList="currFileList"
+      @close="isAlarmOpen = false"
+    />
+    <BaseDelete
+      v-model:value="isDeleteOpen"
+      :deleteContent="`
+    <p>
+      确定删除“
+      <span>${currentRow?.alarm_type}</span>
+      ”相关告警记录吗？删除后将找不到此记录，请谨慎操作.
+    </p>
+    `"
+      @delete-confirm="handleDeleteConfirm"
+      :info="currentRow"
+      @close="isDeleteOpen = false"
+    />
+  </div>
+</template>
+
 <style lang="scss">
 @import url("./DiggerMonitor.scss");
 </style>
diff --git a/src/views/dashboard/PoleMonitor.scss b/src/views/dashboard/PoleMonitor.scss
index 4ea4b41..48383b6 100644
--- a/src/views/dashboard/PoleMonitor.scss
+++ b/src/views/dashboard/PoleMonitor.scss
@@ -5,9 +5,7 @@
   background-repeat: no-repeat;
   height: 586px;
   margin-top: 20px;
-  .search-section {
-    padding: 16px 0;
-  }
+
   .pole-monitor-body {
     padding: 0 24px;
   }
diff --git a/src/views/dashboard/components/AppearanceAlarmModal.vue b/src/views/dashboard/components/AppearanceAlarmModal.vue
index 6637ba8..672fb68 100644
--- a/src/views/dashboard/components/AppearanceAlarmModal.vue
+++ b/src/views/dashboard/components/AppearanceAlarmModal.vue
@@ -1,12 +1,14 @@
 <template>
-    <el-dialog class="appearanceAlarmModal" v-model="show" @close="handleClose">
+    <el-dialog class="appearanceAlarmModal fg-dialog" v-model="show" @close="handleClose" align-center :show-close="false" >
         <!-- 自定义标题栏 -->
         <template #header="{ close, titleId, titleClass }">
-            <div class="flex items-center justify-between appearanceAlarm-dialog-header">
+            <div class="flex items-center justify-between appearanceAlarm-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>
+                    <p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">故障提示</p>
+                </div>
+                 <div class="fg-dialog-header-close" @click="close">
+                    
                 </div>
             </div>
         </template>
@@ -17,10 +19,10 @@
                     <img :src="item.image_url" alt="" v-if="index < 4"></img>
                 </template> -->
                 <div class="appearanceAlarm-content-top-left">
-                    <span class="appearanceAlarm-content-top-title">故障前</span>
+                    <div class="appearanceAlarm-error-title-before appearanceAlarm-error-title">故障前</div>
                     <div class="appearanceAlarm-content-top-left-img">
                         <div class="appearanceAlarm-content-top-img">
-                            <img :src="imageBefore" alt=""></img>
+                            <img :src="imageBefore" alt="" />
                         </div>
                         <div class="appearanceAlarm-content-top-img-slider">
                             <swiper ref="swiperModalRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
@@ -35,7 +37,7 @@
                     </div>
                 </div>
                 <div class="appearanceAlarm-content-top-right">
-                    <span class="appearanceAlarm-content-top-title">故障后</span>
+                    <div class="appearanceAlarm-error-title-after appearanceAlarm-error-title">故障后</div>
                     <div class="appearanceAlarm-content-top-right-img">
                         <div class="appearanceAlarm-content-top-img">
                             <img :src="imageAfter" alt=""></img>
@@ -53,18 +55,20 @@
                     </div>
                 </div>
             </div>
-            <div class="appearanceAlarm-content-bottom">
-                <span class="appearanceAlarm-content-bottom-title">列车信息:</span>
-                <div class="appearanceAlarm-content-bottom-info">
+            <div class="appearanceAlarm-content-info mt-[16px]">
+                <div class="font-bold appearanceAlarm-content-info-title mb-[12px]">列车信息:</div>
+                <ul class="appearanceAlarm-content-info-list">
+                     <li>
                     <span class="mr-8">列车编号: <i>{{ info.train_number }}</i></span>
                     <span class="mr-8">车型: <i>{{ info.train_model }}</i></span>
                     <span>发生时间: <i>{{ info.created_at }}</i></span>
-                </div>
-                <div class="appearanceAlarm-content-bottom-info">
+                </li>
+                <li>
                     <span class="mr-8">告警类型: <i>{{ info.alarm_type }}</i></span>
                     <span>故障类型: <i>{{ info.fault_type }}</i></span>
-                </div>
-                <div class="appearanceAlarm-content-bottom-btn">
+                </li>
+                </ul>
+                <div class="appearanceAlarm-content-info-btn">
                     <el-button type="primary" @click="exportToExcel" class="appearanceAlarm-btn">
                         <span class="icon"></span> 导出
                     </el-button>
@@ -215,37 +219,9 @@ onMounted(() => {
 
 <style lang="scss">
 .appearanceAlarmModal.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: 816px;
-    height:609px;
-    padding: 0;
-    // margin-top: calc(50vh - 316px);
-
-    .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;
-    }
-
     .appearanceAlarm-dialog-header {
         color: white;
         padding: 0;
-        padding-top: 8px;
-        margin-bottom: 10px;
         .header-left {
             padding: 0 24px;
             font-weight: bold;
@@ -280,7 +256,26 @@ onMounted(() => {
             //     width: 368px;
             //     height: 216px;
             // }
-            .appearanceAlarm-content-top-title {
+            .appearanceAlarm-error-title{
+                width: 100px;
+                height: 36px;
+                background-image: url("@/assets/appearanceMonitor/beforeError.png");
+                background-size: 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 36px;
+                font-size: 14px;
+                font-weight: 700;
+                margin-bottom: 12px;
+                &.appearanceAlarm-error-title-after{
+                    background-image: url("@/assets/appearanceMonitor/afterError.png");
+                }
+            }
+     
+            .appearanceAlarm-error-title
+            .appearanceAlarm-error-title-before {
                 display: inline-block;
                 width: 42px;
                 height: 20px;
@@ -345,7 +340,7 @@ onMounted(() => {
                     position: absolute;
                     top: 0;
                     left: -16px;
-                    border-left: 2px dashed rgba(255,255,255,0.6);
+                    border-left: 1px dashed rgba(255,255,255,0.6);
                     // width: 2px; /* 分割线宽度 */
                     height: 100%; /* 分割线高度，根据需要调整 */
                     // margin-right: 10px; /* 可选，增加分割线与内容的间距 */
@@ -392,10 +387,8 @@ onMounted(() => {
                 }
                 }
         }
-        .appearanceAlarm-content-bottom {
-            box-sizing: border-box;
-            margin-top: 12px;
-            .appearanceAlarm-content-bottom-title {
+        .appearanceAlarm-content-info {
+            .appearanceAlarm-content-info-title {
                 box-sizing: border-box;
                 padding-left: 8px;
                 height: 22px;
@@ -406,20 +399,25 @@ onMounted(() => {
                 line-height: 22px;
                 
             }
-            .appearanceAlarm-content-bottom-info {
-                box-sizing: border-box;
+            
+            .appearanceAlarm-content-info-list {
+              display: grid;
+                gap: 12px;
+               &>li{
+                 box-sizing: border-box;
                 font-size: 14px;
                 color: #FFFFFF;
                 i {
                     font-style: normal;
                     font-weight: bold;
                 }
+               }
             }
-            .appearanceAlarm-content-bottom-info:nth-of-type(1) {
+            .appearanceAlarm-content-info-list:nth-of-type(1) {
                 margin: 4px 0;
             }
-            .appearanceAlarm-content-bottom-btn {
-                margin-top: 24px;
+            .appearanceAlarm-content-info-btn {
+                margin-top: 32px;
                 text-align: end;
                 .appearanceAlarm-btn {
                     width: 96px;
diff --git a/src/views/dashboard/components/DeleteModal.vue b/src/views/dashboard/components/DeleteModal.vue
index f004c12..48082f7 100644
--- a/src/views/dashboard/components/DeleteModal.vue
+++ b/src/views/dashboard/components/DeleteModal.vue
@@ -106,7 +106,7 @@ const show = computed({
   background-color: transparent;
   width: 573px;
   height: 248px;
-    padding: 0;
+  padding: 0;
   .el-dialog__close {
     width: 32px;
     height: 32px;
diff --git a/src/views/dashboard/components/DiggerAlarmModal.vue b/src/views/dashboard/components/DiggerAlarmModal.vue
index bedab07..f4b10ce 100644
--- a/src/views/dashboard/components/DiggerAlarmModal.vue
+++ b/src/views/dashboard/components/DiggerAlarmModal.vue
@@ -1,9 +1,15 @@
 <template>
-  <el-dialog class="digger-alarm-modal fg-dialog" v-model="show" @close="handleClose">
+  <el-dialog
+    class="digger-alarm-modal fg-dialog"
+    v-model="show"
+    @close="handleClose"
+    align-center
+    :show-close="false"
+  >
     <!-- 自定义标题栏 -->
     <template #header="{ close, titleId, titleClass }">
       <div
-        class="flex items-center justify-between digger-detail-dialog-header"
+        class="flex items-center justify-between digger-detail-dialog-header fg-dialog-header"
       >
         <div class="flex items-center justify-center header-left">
           <div class="header-icon mr-[12px]"></div>
@@ -13,6 +19,7 @@
             钩机详情
           </p>
         </div>
+        <div class="fg-dialog-header-close" @click="close"></div>
       </div>
     </template>
     <!-- 图片区域 -->
@@ -45,7 +52,7 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   value: false,
   info: {},
-  fileList: []
+  fileList: [],
 });
 
 const emit = defineEmits<Emits>();
@@ -66,44 +73,14 @@ const show = computed({
 
 <style lang="scss">
 .digger-alarm-modal.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: 816px;
-  height: 609px;
-  padding: 0;
-  // margin-top: calc(50vh - 316px);
-
-  .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;
-  }
-
   .digger-detail-dialog-header {
-    color: white;
-    padding: 0;
-    padding-top: 8px;
-    margin-bottom: 10px;
+  
     .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");
@@ -116,13 +93,13 @@ const show = computed({
 
   .digger-detail-content {
     box-sizing: border-box;
-    padding: 0 24px;
+    padding: 8px 24px;
     width: 100%;
-    height: 500px;
-    img{
+    height: 529px;
+    img {
       width: 100%;
       height: 100%;
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/HistoryVideoModal.vue b/src/views/dashboard/components/HistoryVideoModal.vue
index 96d6c85..f61595d 100644
--- a/src/views/dashboard/components/HistoryVideoModal.vue
+++ b/src/views/dashboard/components/HistoryVideoModal.vue
@@ -1,64 +1,19 @@
-<template>
-    <el-dialog class="historyVideoModal-wrap" v-model="show" @close="handleClose">
-        <!-- 自定义标题栏 -->
-        <template #header="{ close, titleId, titleClass }">
-            <div class="flex items-center justify-between video-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]">{{
-                        info.device_name }}</p>
-                </div>
-            </div>
-        </template>
-        <div class="flex main-content">
-            <!-- 播放器 -->
-            <Player :src="currentVideo.video_url" :is-playing="isPlaying" @update:progress="handleProgress"
-                @update:duration="handleDuration" @play="isPlaying = true" @pause="isPlaying = false" />
-            <div class="flex video-record-list">
-                <!-- 日期筛选 -->
-                <div class="flex pl-[16px] pr-[24px] items-center">
-                    <span>时间：</span>
-                    <el-select v-model="selectedDate" placeholder="请选择" class="custom-select record_date_select"
-                        clearable @change="handleDateChange" @clear="handleClear">
-                        <el-option v-for="(item, index) in dateList" :key="item" :label="item"
-                            :value="item"></el-option>
-                    </el-select>
-                    <!-- <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"
-                        @change="handleDateChange"></el-date-picker> -->
-                </div>
-                <!-- 记录列表 -->
-                <el-scrollbar style="height: calc(100% - 80px)">
-                    <ul class="record-list-box">
-                        <li v-for="(item, index) in recordList" :key="item.id"
-                            :class="{ active: currentVideo?.id === item.id }" @click="handleItemClick(item)"
-                            class="flex items-center justify-between">
-                            <span class="time">{{ item.created_at }}</span>
-                            <div :class="{ 'play-btn': true, 'playing': isPlaying && currentVideo?.id === item.id }">
-                            </div>
-                        </li>
-                    </ul>
-                </el-scrollbar>
-            </div>
-        </div>
-    </el-dialog>
-</template>
-
 <script lang="ts" setup>
-import Player from '@/components/videoPlayer/Player.vue'
-import { ElMessage } from 'element-plus';
-import { extractUniqueDatesWithMoment, filterDataByDate } from '@/utils/array';
+import Player from "@/components/videoPlayer/Player.vue";
+import { ElMessage } from "element-plus";
+import { extractUniqueDatesWithMoment, filterDataByDate } from "@/utils/array";
 interface Props {
-    value: boolean;   /** 弹窗显隐 */
-    info: Record<string, any>; /** 设备信息 */
-    historyVideos: Record<string, any>[];  /** 历史视频列表 */
+  value: boolean /** 弹窗显隐 */;
+  info: Record<string, any> /** 设备信息 */;
+  historyVideos: Record<string, any>[] /** 历史视频列表 */;
 }
 interface Emits {
-    (e: "update:value", val: boolean): void;
+  (e: "update:value", val: boolean): void;
 }
 const props = withDefaults(defineProps<Props>(), {
-    value: false,
-    info: {},
-    historyVideos: []
+  value: false,
+  info: {},
+  historyVideos: [],
 });
 
 const emit = defineEmits<Emits>();
@@ -67,219 +22,270 @@ const emit = defineEmits<Emits>();
 const dateList = ref<string[]>([]);
 const selectedDate = ref(); // 默认今天
 const recordList = ref([]);
-const currentVideo = ref<Record<string, any>>({})
+const currentVideo = ref<Record<string, any>>({});
 const isPlaying = ref(false);
 
 const togglePlay = () => {
-    isPlaying.value = !isPlaying.value;
+  isPlaying.value = !isPlaying.value;
 };
 
 // TODO 监听进度更新 暂未使用
-const handleProgress = (data: { currentTime: number, duration: number }) => {
-    console.log((data.currentTime / data.duration) * 100, "handleProgress")
-    const progressVal = (data.currentTime / data.duration) * 100
-}
+const handleProgress = (data: { currentTime: number; duration: number }) => {
+  console.log((data.currentTime / data.duration) * 100, "handleProgress");
+  const progressVal = (data.currentTime / data.duration) * 100;
+};
 
 // TODO 处理时长更新 暂未使用
 const handleDuration = (newDuration: number) => {
-    //   duration.value = newDuration
-}
+  //   duration.value = newDuration
+};
 // 加载数据
 const loadData = () => {
-    recordList.value = props.historyVideos
-    dateList.value = extractUniqueDatesWithMoment(recordList.value);
-    currentVideo.value = props.historyVideos[0]; // 切换日期时重置选中
+  recordList.value = props.historyVideos;
+  dateList.value = extractUniqueDatesWithMoment(recordList.value);
+  currentVideo.value = props.historyVideos[0]; // 切换日期时重置选中
 };
 
 // 日期选择变化
 const handleDateChange = (date) => {
-    console.log(date, "handleDateChange_date");
-    if (date) {
-        selectedDate.value = date;
-        recordList.value = filterDataByDate(toRaw(props.historyVideos), date);
-        currentVideo.value = recordList.value[0]; // 切换日期时重置选中
-    } else {
-        loadData()
-    }
+  console.log(date, "handleDateChange_date");
+  if (date) {
+    selectedDate.value = date;
+    recordList.value = filterDataByDate(toRaw(props.historyVideos), date);
+    currentVideo.value = recordList.value[0]; // 切换日期时重置选中
+  } else {
+    loadData();
+  }
 };
 // 点击列表项
 const handleItemClick = (item) => {
-    if (currentVideo.value?.id === item.id) {
-        togglePlay()  // 播放 暂停
-    } else {
-        currentVideo.value = item;
-    }
+  if (currentVideo.value?.id === item.id) {
+    togglePlay(); // 播放 暂停
+  } else {
+    currentVideo.value = item;
+  }
 };
 
 // 视频播放结束
 const handleVideoEnd = () => {
-    // currentIndex.value = -1;
+  // currentIndex.value = -1;
 };
 
 // 时间格式化
 const formatTime = (timeStr) => {
-    return timeStr.split(' ')[1].substring(0, 5); // 只显示时分
+  return timeStr.split(" ")[1].substring(0, 5); // 只显示时分
 };
 
-
 // 处理对话框关闭事件
 const handleClose = () => {
-    emits('close');
+  emits("close");
 };
 
 const show = computed({
-    get() {
-        return props.value;
-    },
-    set(val: boolean) {
-        emit("update:value", val);
-    }
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit("update:value", val);
+  },
 });
 // TODO 后续再做自动播放
-defineExpose({ loadData })
+defineExpose({ loadData });
 </script>
+<template>
+  <el-dialog
+    class="historyVideoModal-wrap fg-dialog fg-dialog2"
+    v-model="show"
+    @close="handleClose"
+    align-center
+    :show-close="false"
+  >
+    <!-- 自定义标题栏 -->
+    <template #header="{ close, titleId, titleClass }">
+      <div
+        class="flex items-center justify-between video-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]"
+          >
+            {{ info.device_name }}
+          </p>
+        </div>
+        <div class="fg-dialog-header-close" @click="close"></div>
+      </div>
+    </template>
+    <div class="flex main-content">
+      <!-- 播放器 -->
+      <Player
+        :src="currentVideo.video_url"
+        :is-playing="isPlaying"
+        @update:progress="handleProgress"
+        @update:duration="handleDuration"
+        @play="isPlaying = true"
+        @pause="isPlaying = false"
+      />
+      <div class="flex video-record-list pl-[24px]">
+        <!-- 日期筛选 -->
+        <div class="flex items-center">
+          <span>时间：</span>
+          <el-select
+            v-model="selectedDate"
+            placeholder="请选择"
+            class="custom-select record_date_select"
+            clearable
+            @change="handleDateChange"
+            @clear="handleClear"
+          >
+            <el-option
+              v-for="(item, index) in dateList"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+          <!-- <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"
+                        @change="handleDateChange"></el-date-picker> -->
+        </div>
+        <!-- 记录列表 -->
+        <el-scrollbar style="height: calc(100% - 80px)">
+          <ul class="record-list-box">
+            <li
+              v-for="(item, index) in recordList"
+              :key="item.id"
+              :class="{ active: currentVideo?.id === item.id }"
+              @click="handleItemClick(item)"
+              class="flex items-center justify-between"
+            >
+              <span class="time">{{ item.created_at }}</span>
+              <div
+                :class="{
+                  'play-btn': true,
+                  playing: isPlaying && currentVideo?.id === item.id,
+                }"
+              ></div>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </div>
+  </el-dialog>
+</template>
 
 <style lang="scss">
 .historyVideoModal-wrap.el-dialog {
-    border: none;
-    overflow: hidden;
-    box-shadow: none;
-    background-color: transparent;
-    background-image: url("@/assets/common/bg_player_dialog.png");
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 1100px;
-    height: 612px;
+  .video-dialog-header {
+    color: white;
     padding: 0;
-    margin-top: calc(50vh - 316px);
-
-    .el-dialog__header.show-close {
-        padding: 0;
+    padding-top: 4px;
+
+    .header-left {
+      padding: 0 24px;
+      font-weight: bold;
+      font-size: 18px;
+
+      .header-icon {
+        width: 48px;
+        height: 48px;
+        background-image: url("@/assets/common/dialog_title_icon.png");
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
     }
-
-    .el-dialog__close {
-        width: 56px;
-        height: 56px;
-        color: white;
-        font-size: 18px;
-        padding-top: 4px;
-        padding-right: 20px;
+  }
+
+  .main-content {
+    padding: 8px 24px 24px;
+
+    // background: red;
+    .video-player-box {
+      border-radius: 0px 0px 4px 4px;
+      overflow: hidden;
+      width: 752px;
+      height: 502px;
+
+      .video-element {
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .video-dialog-header {
-        color: white;
-        padding: 0;
-        padding-top: 4px;
-
-        .header-left {
-            padding: 0 18px;
-            font-weight: bold;
-            font-size: 18px;
-
-            .header-icon {
-                margin-top: 8px;
-                width: 48px;
-                height: 48px;
-                background-image: url("@/assets/common/dialog_title_icon.png");
-                background-size: contain;
-                background-position: center;
-                background-repeat: no-repeat;
-            }
+    .video-record-list {
+      flex-direction: column;
+      flex: 1;
+      color: white;
+
+      .record_date_select {
+        width: 100%;
+        display: flex;
+        flex: 1;
+        border-radius: 2px;
+        // border: none;
+        border: 1px solid rgba(8, 139, 214, 0.4);
+
+        .el-select__wrapper {
+          width: 100%;
+
+          &.is-focused {
+            box-shadow: none;
+          }
+
+          &.is-hovering {
+            border: none;
+          }
+          &:hover {
+            border: none;
+          }
         }
-    }
-
-    .main-content {
-        padding-left: 24px;
-        padding-top: 24px;
-
-        // background: red;
-        .video-player-box {
-            border-radius: 0px 0px 4px 4px;
-            overflow: hidden;
-            width: 752px;
-            height: 502px;
-
-            .video-element {
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        .video-record-list {
-            flex-direction: column;
+      }
+
+      .record-list-box {
+        margin-top: 12px;
+        display: grid;
+        gap: 12px;
+        li {
+          color: white;
+          height: 32px;
+          cursor: pointer;
+          padding-left: 16px;
+          padding-right: 24px;
+          // margin: 6px 0;
+          background: rgba(9, 82, 129, 0.6);
+          border-radius: 2px;
+          border: 1px solid rgba(22, 139, 202, 0.3);
+          &.active,
+          &:hover {
+            background: rgba(9, 82, 129, 0.6);
+            box-shadow: inset 2px 2px 4px 0px rgba(51, 178, 185, 0.6),
+              inset -2px -2px 4px 0px rgba(51, 178, 185, 0.6);
+            border-radius: 2px 2px 2px 2px;
+            border: 1px solid #29cfe2;
+            color: #37dbff;
+          }
+
+          .time {
             flex: 1;
-            color: white;
-
-            .record_date_select {
-                width: 100%;
-                display: flex;
-                flex: 1;
-                border-radius: 2px;
-                // border: none;
-                border: 1px solid rgba(8, 139, 214, 0.4);
-
-
-
-                .el-select__wrapper {
-                    width: 100%;
-
-                    &.is-focused {
-                       
-                        box-shadow: none;
-                    }
-
-                    &.is-hovering {
-                        border: none;
-                    }
-                    &:hover {
-                        border: none;
-                    }
-                }
-            }
-
-            .record-list-box {
-                margin-top: 12px;
-
-                li {
-                    color: white;
-                    height: 32px;
-                    cursor: pointer;
-                    padding-left: 16px;
-                    padding-right: 24px;
-                    // margin: 6px 0;
-
-                    &.active,
-                    &:hover {
-                        background: linear-gradient(90deg, rgba(30, 54, 88, 0) 0%, #0C4FAD 53%, rgba(65, 117, 190, 0) 100%);
-                        color: #37DBFF;
-                        border-radius: 2px;
-                        border: 1px solid;
-                        border-image: linear-gradient(90deg, rgba(12, 24, 64, 0), rgba(69, 174, 250, 1), rgba(102, 102, 102, 0)) 1 1;
-                    }
-
-                    .time {
-                        flex: 1;
-                        font-size: 14px;
-                    }
-
-                    .play-btn {
-                        width: 20px;
-                        height: 20px;
-                        background: url("@/assets/common/player_icon.png") no-repeat center center;
-                        background-size: contain;
-                    }
-
-                    .playing {
-                        background: url("@/assets/common/pause_icon.png") no-repeat center center;
-                        background-size: contain;
-                    }
-                }
-            }
+            font-size: 14px;
+          }
+
+          .play-btn {
+            width: 20px;
+            height: 20px;
+            background: url("@/assets/common/player_icon.png") no-repeat center
+              center;
+            background-size: contain;
+          }
+
+          .playing {
+            background: url("@/assets/common/pause_icon.png") no-repeat center
+              center;
+            background-size: contain;
+          }
         }
-
-
-
+      }
     }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/dashboard/components/VehiclModal.vue b/src/views/dashboard/components/VehiclModal.vue
index 189ad23..e51718d 100644
--- a/src/views/dashboard/components/VehiclModal.vue
+++ b/src/views/dashboard/components/VehiclModal.vue
@@ -1,3 +1,40 @@
+<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>
 <template>
     <el-dialog class="vehiclModal-wrap fg-dialog fg-dialog2" v-model="show" @close="handleClose" align-center :show-close="false" >
         <!-- 自定义标题栏 -->
@@ -29,60 +66,28 @@
             <div class="vehicl-content-bottom">
                         <!-- //TODO 车厢图片需要替换 -->
                 <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': info?.data?.train_data?.length > 15 }]">
-                        <div class="vehicl-content-bottom-vehicl-body" v-for="(item, index) in info?.data?.train_data" :key="index">
-                            <div>{{ item.model }}</div>
+                <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>
-                    </div>
+                            </div>
+                        </li>
+                    </ul>
                 </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 {
@@ -96,7 +101,6 @@ const itemCount = 16; // 这里可以根据实际需求动态设置
             font-weight: bold;
             font-size: 18px;
             .header-icon {
-                margin-top: 4px;
                 width: 24px;
                 height: 48px;
                 background-image: url("@/assets/common/alarm_title.png");
@@ -134,23 +138,33 @@ const itemCount = 16; // 这里可以根据实际需求动态设置
         .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");
+                .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;
+                    }
                 }
-                .vehicl-content-bottom-vehicl-body-box,
+                .train-card-item-list,
                 .high-height {
                     box-sizing: border-box;
                     width: 100%;
@@ -161,6 +175,7 @@ const itemCount = 16; // 这里可以根据实际需求动态设置
                     // background-color: #003366; /* 设置与背景相近颜色，这里假设深蓝色背景 */
                     padding: 0; /* 去除默认内边距 */
                     margin: 0; /* 去除默认外边距 */
+                    gap: 8px; /* 车厢之间的间距 */
                     /* 自定义滚动条样式 */
                     &::-webkit-scrollbar {
                         height: 8px; /* 滚动条高度 */
@@ -170,23 +185,7 @@ const itemCount = 16; // 这里可以根据实际需求动态设置
                         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;
+                   
                 }
             }
         }