From 52fd680c7d2b998c5dfde186346aea1c43161e31 Mon Sep 17 00:00:00 2001
From: jiangAB <jiangjin514@foxmail.com>
Date: Mon, 15 Dec 2025 00:14:22 +0800
Subject: [PATCH] update

---
 public/map/components/CompanyShorePower.vue   |  132 +-
 public/map/components/HistoryRecordDialog.vue |  174 +++
 public/map/components/PortOverview.vue        |  402 +++++-
 public/map/components/ShipHistoryDialog.vue   |  303 ++++
 public/map/components/ShipShorePower.vue      | 1282 ++++++++++++++++-
 .../components/ShorePowerHistoryDialog.vue    |  304 ++++
 public/map/components/ShorePowerUsage.vue     |  570 +++++++-
 public/map/components/cesiumMap.vue           |  141 +-
 .../map/components/charts/BarChartMinute.vue  |   18 +-
 .../map/components/charts/WaveLineChart.vue   |  240 +++
 public/map/index.vue                          |   67 +-
 src/api/shorepower/map/index.ts               |   83 +-
 src/plugins/elementPlus/index.ts              |    4 +-
 13 files changed, 3459 insertions(+), 261 deletions(-)
 create mode 100644 public/map/components/HistoryRecordDialog.vue
 create mode 100644 public/map/components/ShipHistoryDialog.vue
 create mode 100644 public/map/components/ShorePowerHistoryDialog.vue
 create mode 100644 public/map/components/charts/WaveLineChart.vue

diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
index 633cddc..fe43fab 100644
--- a/public/map/components/CompanyShorePower.vue
+++ b/public/map/components/CompanyShorePower.vue
@@ -1,31 +1,29 @@
 <template>
   <div class="company-shore-power">
     <div class="left" style="width: 40%;">
-      <!-- <div class="card digital-twin-card--deep-blue ">
+      <!-- 码头信息卡片 -->
+      <div class="card digital-twin-card--deep-blue">
         <div class="card-title">
           <div class="vertical-line"></div>
           <img src="@/assets/svgs/data.svg" class="title-icon" />
-          <span class="title-text">港口企业岸电使用</span>
+          <span class="title-text">码头与泊位信息</span>
         </div>
         <div class="card-content">
-          <BarChart :chart-data="companyComparisonData" title="企业岸电使用对比" color="#4CAF50" />
-        </div>
-      </div> -->
-      <div class="card digital-twin-card--deep-blue ">
-        <div class="card-title">
-          <div class="vertical-line"></div>
-          <img src="@/assets/svgs/data.svg" class="title-icon" />
-          <span class="title-text">码头详情</span>
-        </div>
-        <div class="card-content">
-          <!-- 下拉框和饼图组件 -->
-          <div class="company-selector">
-            <el-select v-model="selectedCompany" placeholder="请选择公司" @change="handleCompanyChange"
-              style="width: 100%; margin-bottom: 20px;">
-              <el-option v-for="item in companyComparisonData" :key="item.name" :label="item.name" :value="item.name" />
-            </el-select>
-
-            <PieChart :chart-data="pieChartData" :title="`${selectedCompany}子项占比`" />
+          <div v-for="company in companyComparisonData" :key="company.name" class="company-section">
+            <!-- 码头名称和总量 -->
+            <div class="company-header">
+              <div class="company-name">{{ company.name }}</div>
+              <div class="company-total">总量: {{ company.value }}</div>
+            </div>
+            <!-- 泊位详情 -->
+            <div class="overview-grid">
+              <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item">
+                <div class="overview-value">{{ berth.value }}</div>
+                
+                <div class="overview-label">{{ berth.name }}</div>
+
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -34,8 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import PieChart from './charts/PieChart.vue'
+import { ref } from 'vue'
 
 // 定义组件属性
 interface ChartDataItem {
@@ -49,21 +46,6 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-
-// 组件内部状态
-const selectedCompany = ref<string>(props.companyComparisonData[0]?.name || '')
-
-// 饼图数据
-const pieChartData = computed(() => {
-  // 根据选中的公司找到对应的数据
-  const selectedCompanyData = props.companyComparisonData.find(item => item.name === selectedCompany.value)
-  return selectedCompanyData?.children || []
-})
-
-// 处理公司选择变化
-const handleCompanyChange = (company: string) => {
-  selectedCompany.value = company
-}
 </script>
 
 <style scoped>
@@ -77,6 +59,7 @@ const handleCompanyChange = (company: string) => {
   display: flex;
   flex-direction: column;
   height: 100%;
+  gap: 10px;
 }
 
 .card {
@@ -89,12 +72,83 @@ const handleCompanyChange = (company: string) => {
   flex: 1;
   height: 100%;
   min-height: 0;
+  overflow-y: auto;
 }
 
-.company-selector {
-  width: 100%;
+/* 总览网格样式 */
+.overview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 8px;
+  padding: 4px;
   height: 100%;
+}
+
+.overview-item {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+}
+
+.overview-label {
+  text-align: center;
+  font-size: 24px;
+  color: #ccc;
+  margin-bottom: 2px;
+}
+
+.overview-value {
+  font-size: 36px;
+  font-weight: bold;
+  color: #1296db;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  margin-bottom: 2px;
+}
+
+.overview-text {
+  font-size: 10px;
+  color: #999;
+  text-align: center;
+}
+
+/* 企业区块样式 */
+.company-section {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.company-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+/* 企业头部样式 */
+.company-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.company-name {
+  font-size: 24px;
+  font-weight: bold;
+  color: #fff;
+}
+
+.company-total {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1296db;
+  background-color: rgba(18, 150, 219, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
 }
 </style>
\ No newline at end of file
diff --git a/public/map/components/HistoryRecordDialog.vue b/public/map/components/HistoryRecordDialog.vue
new file mode 100644
index 0000000..18f5260
--- /dev/null
+++ b/public/map/components/HistoryRecordDialog.vue
@@ -0,0 +1,174 @@
+<template>
+  <el-dialog v-model="visible" :title="title" width="1200px" :before-close="handleClose">
+    <!-- 搜索和筛选区域 -->
+    <div class="filter-container">
+      <el-form :model="queryParams" label-width="80px" inline>
+        <el-form-item label="关键字">
+          <el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" />
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
+      <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+        :width="column.width" :formatter="column.formatter" />
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination v-model:current-page="queryParams.pageNo" v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus'
+
+// 定义组件属性
+interface Props {
+  modelValue: boolean
+  title?: string
+  columns: Array<{
+    prop: string
+    label: string
+    width?: string | number
+    formatter?: (row: any, column: any, cellValue: any) => string
+  }>
+  data: any[]
+}
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'search', params: any): void
+}>()
+
+// 属性定义
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: '历史记录',
+  columns: () => [],
+  data: () => []
+})
+
+// 响应式数据
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const queryParams = ref({
+  keyword: '',
+  startTime: '',
+  endTime: '',
+  pageNo: 1,
+  pageSize: 10
+})
+
+const dateRange = ref<[string, string]>(['', ''])
+const loading = ref(false)
+const total = ref(0)
+
+// 表格数据计算属性
+const tableData = computed(() => {
+  // 在实际应用中，这里应该是从服务器获取的数据
+  // 当前为了演示，我们使用传入的模拟数据
+  return props.data.slice(
+    (queryParams.value.pageNo - 1) * queryParams.value.pageSize,
+    queryParams.value.pageNo * queryParams.value.pageSize
+  )
+})
+
+// 表格列
+const tableColumns = computed(() => props.columns)
+
+// 处理关闭
+const handleClose = () => {
+  visible.value = false
+}
+
+// 处理搜索
+const handleSearch = () => {
+  // 发送搜索事件给父组件
+  emit('search', { ...queryParams.value })
+}
+
+// 重置查询条件
+const resetQuery = () => {
+  queryParams.value.keyword = ''
+  queryParams.value.startTime = ''
+  queryParams.value.endTime = ''
+  dateRange.value = ['', '']
+  queryParams.value.pageNo = 1
+  handleSearch()
+}
+
+// 处理日期变化
+const handleDateChange = (val: [string, string] | null) => {
+  if (val && val[0] && val[1]) {
+    queryParams.value.startTime = val[0]
+    queryParams.value.endTime = val[1]
+  } else {
+    queryParams.value.startTime = ''
+    queryParams.value.endTime = ''
+  }
+}
+
+// 处理分页大小变化
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val
+  queryParams.value.pageNo = 1
+  handleSearch()
+}
+
+// 处理当前页变化
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNo = val
+  handleSearch()
+}
+
+// 监听数据变化并更新总数
+watch(
+  () => props.data,
+  (newData) => {
+    total.value = newData.length
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
index c4aacc6..4ab412b 100644
--- a/public/map/components/PortOverview.vue
+++ b/public/map/components/PortOverview.vue
@@ -1,39 +1,89 @@
 <template>
   <div class="port-overview">
-    <div class="left" style="width: 500px;">
-      <div class="card digital-twin-card--deep-blue ">
-        <div style="display: flex; align-items: center; justify-content: space-between;">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">船舶状态</span>
+    <div class="left" style="width:45%;">
+      <div style="height: 100%; width: 100%; display: flex; gap: 8px; ">
+        <div class="card digital-twin-card--deep-blue ">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">岸电箱状态</span>
+            </div>
+            <input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword"
+              @input="handleSearch" />
           </div>
-          <input class="search-container" type="text" placeholder="搜索船舶" v-model="searchKeyword"
-            @input="handleSearch" />
-        </div>
 
-        <div class=" card-content">
-          <div class="ship-table">
-            <div class="ship-table-header">
-              <div class="ship-table-column ship-name-header">轮船名称</div>
-              <div class="ship-table-column ship-status-header">状态</div>
-            </div>
-            <div class="ship-table-body">
-              <div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
-                @click="handleSwitch(ship)">
-                <div class="ship-table-column ship-name">
-                  <div class="ship-icon">🚢</div>
-                  <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
+          <div class=" card-content">
+            <div class="ship-table">
+              <div class="ship-table-header">
+                <div class="ship-table-column ship-name-header">岸电箱名称</div>
+                <div class="ship-table-column ship-status-header">状态</div>
+                <div class="ship-table-column ship-status-header">历史</div>
+              </div>
+              <div class="ship-table-body">
+                <div v-for="shorepower in filteredShorePowerStatusData" :key="shorepower.id" class="ship-table-row"
+                  @click="handleSwitch(shorepower, 'shorepower')">
+                  <div class="ship-table-column ship-name">
+                    <div class="ship-icon">⚡</div>
+                    <span class="ship-name-text">{{ shorepower.shorePowerEquipment.name }}</span>
+                  </div>
+                  <div class="ship-table-column ship-status">
+                    <div class="status-tag" :class="getStatusClass('正常')">
+                      正常
+                    </div>
+                    <!-- <div class="status-tag" :class="getStatusClass('空闲')">
+                      空闲
+                    </div>
+                    <div class="status-tag" :class="getStatusClass('故障')">
+                      故障
+                    </div> -->
+                  </div>
+                  <div class="ship-table-column ship-status-header">
+                    <el-button type="primary" link @click.stop="showShorePowerHistory(shorepower)">查看</el-button>
+                  </div>
                 </div>
-                <div class="ship-table-column ship-status">
-                  <div class="status-tag" :class="getStatusClass('正常')">
-                    正常
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card digital-twin-card--deep-blue ">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">船舶状态</span>
+            </div>
+            <input class="search-container" type="text" placeholder="搜索船舶" v-model="searchKeyword"
+              @input="handleSearch" />
+          </div>
+
+          <div class=" card-content">
+            <div class="ship-table">
+              <div class="ship-table-header">
+                <div class="ship-table-column ship-name-header">轮船名称</div>
+                <div class="ship-table-column ship-status-header">状态</div>
+                <div class="ship-table-column ship-status-header">历史</div>
+              </div>
+              <div class="ship-table-body">
+                <div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
+                  @click="handleSwitch(ship, 'ship')">
+                  <div class="ship-table-column ship-name">
+                    <div class="ship-icon">🚢</div>
+                    <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
                   </div>
-                  <div class="status-tag" :class="getStatusClass('空闲')">
-                    空闲
+                  <div class="ship-table-column ship-status">
+                    <div class="status-tag" :class="getStatusClass('正常')">
+                      正常
+                    </div>
+                    <!-- <div class="status-tag" :class="getStatusClass('空闲')">
+                      空闲
+                    </div>
+                    <div class="status-tag" :class="getStatusClass('故障')">
+                      故障
+                    </div> -->
                   </div>
-                  <div class="status-tag" :class="getStatusClass('故障')">
-                    故障
+                  <div class="ship-table-column ship-status-header">
+                    <el-button type="primary" link @click.stop="showShipHistory(ship)">查看</el-button>
                   </div>
                 </div>
               </div>
@@ -42,8 +92,8 @@
         </div>
       </div>
     </div>
-    <div class="right" style="width: 1000px;">
-      <div v-if="selectedShip" class="right-two-row">
+    <div class="right" :style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
+      <div v-if="selectedItem && show_type === 'ship'" class="right-two-row">
         <div class="card digital-twin-card--deep-blue">
           <div class="card-title">
             <div class="vertical-line"></div>
@@ -54,51 +104,51 @@
             <div class="ship-detail">
               <div class="detail-item">
                 <span class="label">船名:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.name }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.name }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">英文船名:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.nameEn }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.nameEn }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">船舶呼号:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.callSign }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.callSign }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">船长:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.length }} 米</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.length }} 米</span>
               </div>
               <div class="detail-item">
                 <span class="label">船宽:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.width }} 米</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.width }} 米</span>
               </div>
               <div class="detail-item">
                 <span class="label">满载吃水深度:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.fullLoadDraft }} 米</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.fullLoadDraft }} 米</span>
               </div>
               <div class="detail-item">
                 <span class="label">吨位:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.tonnage }} 吨</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.tonnage }} 吨</span>
               </div>
               <div class="detail-item">
                 <span class="label">航运单位:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shippingCompany }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.shippingCompany }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">岸电联系人:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContact }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.shorePowerContact }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">联系方式:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContactPhone }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">船检登记号:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.inspectionNo }}</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.inspectionNo }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">创建时间:</span>
-                <span class="value">{{ new Date(selectedShip.shipBasicInfo.createTime).toLocaleString() }}</span>
+                <span class="value">{{ new Date(selectedItem.shipBasicInfo.createTime).toLocaleString() }}</span>
               </div>
             </div>
           </div>
@@ -113,42 +163,128 @@
             <div class="ship-detail">
               <div class="detail-item">
                 <span class="label">停泊状态:</span>
-                <span class="value">{{ selectedShip.shorePowerAndShip.type === 'left' ? '左舷停泊' :
-                  selectedShip.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedShip.shorePowerAndShip.type
+                <span class="value">{{ selectedItem.shorePowerAndShip.type === 'left' ? '左舷停泊' :
+                  selectedItem.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedItem.shorePowerAndShip.type
                 }}</span>
               </div>
               <div class="detail-item">
                 <span class="label">靠泊状态:</span>
-                <span class="value">{{ getShorePowerStatusText(selectedShip.shorePowerAndShip.status) }}</span>
+                <span class="value">{{ getShorePowerStatusText(selectedItem.shorePowerAndShip.status) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else-if="selectedItem && show_type === 'shorepower'" class="right-two-row">
+        <div class="card digital-twin-card--deep-blue">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">岸电箱详情</span>
+          </div>
+          <div class="card-content">
+            <div class="ship-detail">
+              <div class="detail-item">
+                <span class="label">名称:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">位置:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.position }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">电压:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.voltage }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">频率:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.frequency }} </span>
+              </div>
+              <div class="detail-item">
+                <span class="label">容量:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.capacity }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前电压:</span>
+                <span class="value"></span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前电流:</span>
+                <span class="value"></span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前频率:</span>
+                <span class="value"></span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前总用量:</span>
+                <span class="value">{{ selectedItem.shorePowerEquipment.measureValue }}</span>
               </div>
             </div>
           </div>
         </div>
+        <!-- <div class="card digital-twin-card--deep-blue">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">岸电信息</span>
+          </div>
+          <div class="card-content">
+            <div class="ship-detail">
+              <div class="detail-item">
+                <span class="label">停泊状态:</span>
+                <span class="value">{{ selectedItem.shorePowerAndShip.type === 'left' ? '左舷停泊' :
+                  selectedItem.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedItem.shorePowerAndShip.type
+                }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">靠泊状态:</span>
+                <span class="value">{{ getShorePowerStatusText(selectedItem.shorePowerAndShip.status) }}</span>
+              </div>
+            </div>
+          </div>
+        </div> -->
       </div>
 
       <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;">
         <div class="card-title">
           <div class="vertical-line"></div>
           <img src="@/assets/svgs/data.svg" class="title-icon" />
-          <span class="title-text">船舶详情</span>
+          <span class="title-text">设备详情</span>
         </div>
         <div class="card-content">
-          <div class="no-selection">请选择一艘船舶以查看详细信息</div>
+          <div class="no-selection">请选择设备以查看详细信息</div>
         </div>
       </div>
     </div>
+
+    <!-- 岸电箱历史记录弹窗 -->
+    <ShorePowerHistoryDialog v-model="shorePowerHistoryVisible" :data="shorePowerHistoryData"
+      :ship-connection-data="shorePowerConnectionData" @search="handleShorePowerHistorySearch"
+      @ship-connection-search="handleShorePowerConnectionSearch" />
+
+    <!-- 船舶历史记录弹窗 -->
+    <ShipHistoryDialog v-model="shipHistoryVisible" :berthing-data="shipHistoryData"
+      :shore-power-connection-data="shipShorePowerConnectionData" @berthing-search="handleShipHistorySearch"
+      @shore-power-connection-search="handleShipShorePowerConnectionSearch" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-
+import ShorePowerHistoryDialog from './ShorePowerHistoryDialog.vue'
+import ShipHistoryDialog from './ShipHistoryDialog.vue'
+import { MapApi } from "@/api/shorepower/map";
 // 定义组件属性
 interface ShipItem {
   id: string;
   shipBasicInfo: {
     name: string;
   };
+  shorePowerEquipment: {
+    name: string;
+    measureValue: string;
+  };
   shorePowerAndShip?: {
     status?: string;
     powerUsage?: number;
@@ -158,14 +294,44 @@ interface ShipItem {
 
 interface Props {
   shipStatusData: ShipItem[];
-  selectedShip: ShipItem | null;
+  shorePowerStatusData: ShipItem[];
+  // selectedItem: ShipItem | null;
 }
 
 const props = defineProps<Props>()
 
 // 搜索关键字
 const searchKeyword = ref('')
+const storeSearchKeyword = ref('')
+const show_type = ref('ship')
+const selectedItem = ref<ShipItem | null>(null)
+
+// 历史记录弹窗相关
+const shorePowerHistoryVisible = ref(false)
+const shipHistoryVisible = ref(false)
+const currentShorePower = ref<ShipItem | null>(null)
+const currentShip = ref<ShipItem | null>(null)
 
+// 岸电箱历史记录表格列
+const shorePowerHistoryColumns = [
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'time', label: '时间', width: 180 },
+  { prop: 'operation', label: '操作类型' },
+  { prop: 'voltage', label: '电压(V)' },
+  { prop: 'current', label: '电流(A)' },
+  { prop: 'power', label: '功率(kW)' },
+  { prop: 'energy', label: '用电量(kWh)' }
+]
+
+// 船舶靠泊历史记录表格列
+const shipHistoryColumns = [
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'time', label: '时间', width: 180 },
+  { prop: 'operation', label: '操作类型' },
+  { prop: 'berthPosition', label: '泊位位置' },
+  { prop: 'duration', label: '停泊时长(小时)' },
+  { prop: 'powerConsumption', label: '用电量(kWh)' }
+]
 // 过滤后的船舶数据
 const filteredShipStatusData = computed(() => {
   if (!searchKeyword.value) {
@@ -176,22 +342,144 @@ const filteredShipStatusData = computed(() => {
   )
 })
 
+// 模拟岸电箱历史数据
+const shorePowerHistoryData = ref<any[]>([
+  { id: 1, time: '2023-05-01 08:30:00', operation: '连接', voltage: '380', current: '120', power: '45.6', energy: '12.5' },
+  { id: 2, time: '2023-05-01 12:15:00', operation: '运行', voltage: '382', current: '118', power: '45.1', energy: '35.2' },
+  { id: 3, time: '2023-05-01 16:45:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
+  { id: 4, time: '2023-05-02 09:20:00', operation: '连接', voltage: '379', current: '122', power: '46.3', energy: '8.7' },
+  { id: 5, time: '2023-05-02 14:30:00', operation: '运行', voltage: '381', current: '119', power: '45.4', energy: '28.9' },
+  { id: 6, time: '2023-05-02 18:50:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
+  { id: 7, time: '2023-05-03 07:45:00', operation: '连接', voltage: '380', current: '121', power: '45.9', energy: '15.3' },
+  { id: 8, time: '2023-05-03 13:20:00', operation: '运行', voltage: '382', current: '120', power: '45.8', energy: '42.1' },
+  { id: 9, time: '2023-05-03 17:30:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
+  { id: 10, time: '2023-05-04 10:15:00', operation: '连接', voltage: '378', current: '123', power: '46.5', energy: '9.8' }
+])
+
+// 模拟船舶靠泊历史数据
+const shipHistoryData = ref<any[]>([
+  { id: 1, time: '2023-04-15 09:30:00', operation: '靠泊', berthPosition: '1号泊位', duration: '12.5', powerConsumption: '125.6' },
+  { id: 2, time: '2023-04-16 14:20:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
+  { id: 3, time: '2023-04-20 08:45:00', operation: '靠泊', berthPosition: '3号泊位', duration: '8.2', powerConsumption: '89.3' },
+  { id: 4, time: '2023-04-21 16:30:00', operation: '离泊', berthPosition: '3号泊位', duration: '0', powerConsumption: '0' },
+  { id: 5, time: '2023-04-25 11:15:00', operation: '靠泊', berthPosition: '2号泊位', duration: '15.7', powerConsumption: '156.8' },
+  { id: 6, time: '2023-04-26 18:40:00', operation: '离泊', berthPosition: '2号泊位', duration: '0', powerConsumption: '0' },
+  { id: 7, time: '2023-05-01 07:20:00', operation: '靠泊', berthPosition: '1号泊位', duration: '18.3', powerConsumption: '189.2' },
+  { id: 8, time: '2023-05-02 15:50:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
+  { id: 9, time: '2023-05-05 09:10:00', operation: '靠泊', berthPosition: '4号泊位', duration: '6.4', powerConsumption: '67.5' },
+  { id: 10, time: '2023-05-06 13:45:00', operation: '离泊', berthPosition: '4号泊位', duration: '0', powerConsumption: '0' }
+])
+
+// 模拟岸电箱连接船舶数据
+const shorePowerConnectionData = ref<any[]>([
+  { id: 1, shipName: '远航号', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
+  { id: 2, shipName: '海鹰号', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
+  { id: 3, shipName: '巨轮号', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
+  { id: 4, shipName: '远洋号', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
+  { id: 5, shipName: '海豚号', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
+])
+
+// 模拟船舶连接岸电箱数据
+const shipShorePowerConnectionData = ref<any[]>([
+  { id: 1, shorePowerName: '1号岸电箱', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
+  { id: 2, shorePowerName: '2号岸电箱', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
+  { id: 3, shorePowerName: '1号岸电箱', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
+  { id: 4, shorePowerName: '3号岸电箱', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
+  { id: 5, shorePowerName: '2号岸电箱', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
+])
+
+const handleSelectItem = async (item: ShipItem) => {
+  const deviceId = item.shorePower?.totalPowerDeviceId;
+  const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId })
+  console.log(res)
+  selectedItem.value = {
+    ...item,
+    shorePowerEquipment: {
+      ...item.shorePowerEquipment,
+      'measureValue': res[0].measureValue || 'N/A',
+    }
+  }
+}
+
+const filteredShorePowerStatusData = computed(() => {
+  if (!storeSearchKeyword.value) {
+    return props.shipStatusData
+  }
+  return props.shipStatusData.filter(ship =>
+    ship.shorePowerEquipment.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
+  )
+})
+
 // 处理搜索输入
 const handleSearch = () => {
   // 输入处理逻辑（如果需要额外处理可以在这里添加）
 }
 
+// 显示岸电箱历史记录
+const showShorePowerHistory = (shorepower: ShipItem) => {
+  currentShorePower.value = shorepower
+  shorePowerHistoryVisible.value = true
+}
+
+// 显示船舶历史记录
+const showShipHistory = (ship: ShipItem) => {
+  currentShip.value = ship
+  shipHistoryVisible.value = true
+}
+
+// 处理岸电箱历史记录搜索
+const handleShorePowerHistorySearch = (params: any) => {
+  console.log('岸电箱历史记录搜索参数:', params)
+  // 实际项目中这里会调用接口获取数据
+  // 模拟延迟
+  setTimeout(() => {
+    console.log('岸电箱历史记录搜索完成')
+  }, 500)
+}
+
+// 处理船舶历史记录搜索
+const handleShipHistorySearch = (params: any) => {
+  console.log('船舶历史记录搜索参数:', params)
+  // 实际项目中这里会调用接口获取数据
+  // 模拟延迟
+  setTimeout(() => {
+    console.log('船舶历史记录搜索完成')
+  }, 500)
+}
+
+// 处理岸电箱连接船舶记录搜索
+const handleShorePowerConnectionSearch = (params: any) => {
+  console.log('岸电箱连接船舶记录搜索参数:', params)
+  // 实际项目中这里会调用接口获取数据
+  // 模拟延迟
+  setTimeout(() => {
+    console.log('岸电箱连接船舶记录搜索完成')
+  }, 500)
+}
+
+// 处理船舶连接岸电箱记录搜索
+const handleShipShorePowerConnectionSearch = (params: any) => {
+  console.log('船舶连接岸电箱记录搜索参数:', params)
+  // 实际项目中这里会调用接口获取数据
+  // 模拟延迟
+  setTimeout(() => {
+    console.log('船舶连接岸电箱记录搜索完成')
+  }, 500)
+}
+
 // 定义事件
 const emit = defineEmits<{
   (e: 'switch-ship', ship: ShipItem): void;
-  (e: 'item-click', ship: ShipItem): void;
+  // handleSelectItem(ship)
+
 }>()
 
 // 处理船舶选择
-const handleSwitch = (ship: ShipItem) => {
+const handleSwitch = (ship: ShipItem, type: string) => {
   // console.log(ship)
+  show_type.value = type
   emit('switch-ship', ship)
-  emit('item-click', ship)
+  handleSelectItem(ship)
 }
 
 const shorePowerStatusMap = {
@@ -232,6 +520,14 @@ const getStatusClass = (status: string) => {
       return 'status-default'
   }
 }
+
+onMounted(() => {
+  console.log(props.shipStatusData)
+})
+
+onMounted(() => {
+  console.log(props.shorePowerStatusData)
+})
 </script>
 
 <style scoped>
diff --git a/public/map/components/ShipHistoryDialog.vue b/public/map/components/ShipHistoryDialog.vue
new file mode 100644
index 0000000..87f8a55
--- /dev/null
+++ b/public/map/components/ShipHistoryDialog.vue
@@ -0,0 +1,303 @@
+<template>
+  <el-dialog v-model="visible" title="船舶历史记录" width="1200px" :before-close="handleClose">
+    <el-tabs v-model="activeTab">
+      <!-- 船舶靠泊历史记录 tab -->
+      <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing">
+        <!-- 搜索和筛选区域 -->
+        <div class="filter-container">
+          <el-form :model="berthingQueryParams" label-width="80px" inline>
+            <el-form-item label="关键字">
+              <el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleBerthingSearch" />
+            </el-form-item>
+            <el-form-item label="时间范围">
+              <el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleBerthingSearch">搜索</el-button>
+              <el-button @click="resetBerthingQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 数据表格 -->
+        <el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
+          <el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+            :width="column.width" :formatter="column.formatter" />
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize"
+            :page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" />
+        </div>
+      </el-tab-pane>
+
+      <!-- 船舶连接岸电箱历史记录 tab -->
+      <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
+        <!-- 搜索和筛选区域 -->
+        <div class="filter-container">
+          <el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline>
+            <el-form-item label="关键字">
+              <el-input v-model="shorePowerConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable
+                @keyup.enter="handleShorePowerConnectionSearch" />
+            </el-form-item>
+            <el-form-item label="时间范围">
+              <el-date-picker v-model="shorePowerConnectionDateRange" type="daterange" range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+                @change="handleShorePowerConnectionDateChange" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button>
+              <el-button @click="resetShorePowerConnectionQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 数据表格 -->
+        <el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%" v-loading="shorePowerConnectionLoading">
+          <el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+            :width="column.width" :formatter="column.formatter" />
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo" v-model:page-size="shorePowerConnectionQueryParams.pageSize"
+            :page-sizes="[10, 20, 50, 100]" :total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleShorePowerConnectionSizeChange" @current-change="handleShorePowerConnectionCurrentChange" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { 
+  ElDialog, 
+  ElTabs, 
+  ElTabPane, 
+  ElForm, 
+  ElFormItem, 
+  ElInput, 
+  ElDatePicker, 
+  ElButton, 
+  ElTable, 
+  ElTableColumn, 
+  ElPagination 
+} from 'element-plus'
+
+// 定义组件属性
+interface Props {
+  modelValue: boolean
+  berthingData?: any[]
+  shorePowerConnectionData?: any[]
+}
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'berthing-search', params: any): void
+  (e: 'shore-power-connection-search', params: any): void
+}>()
+
+// 属性定义
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  berthingData: () => [],
+  shorePowerConnectionData: () => []
+})
+
+// 响应式数据
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const activeTab = ref('shipBerthing')
+
+// 船舶靠泊历史记录相关数据
+const berthingQueryParams = ref({
+  keyword: '',
+  startTime: '',
+  endTime: '',
+  pageNo: 1,
+  pageSize: 10
+})
+
+const berthingDateRange = ref<[string, string]>(['', ''])
+const berthingLoading = ref(false)
+const berthingTotal = ref(0)
+
+// 船舶靠泊历史记录表格数据
+const berthingTableData = computed(() => {
+  // 在实际应用中，这里应该是从服务器获取的数据
+  // 当前为了演示，我们使用传入的模拟数据
+  return props.berthingData?.slice(
+    (berthingQueryParams.value.pageNo - 1) * berthingQueryParams.value.pageSize,
+    berthingQueryParams.value.pageNo * berthingQueryParams.value.pageSize
+  ) || []
+})
+
+// 船舶靠泊历史记录表格列
+const berthingColumns = ref([
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'time', label: '时间', width: 180 },
+  { prop: 'operation', label: '操作类型' },
+  { prop: 'berthPosition', label: '泊位位置' },
+  { prop: 'duration', label: '停泊时长(小时)' },
+  { prop: 'powerConsumption', label: '用电量(kWh)' }
+])
+
+// 船舶连接岸电箱历史记录相关数据
+const shorePowerConnectionQueryParams = ref({
+  keyword: '',
+  startTime: '',
+  endTime: '',
+  pageNo: 1,
+  pageSize: 10
+})
+
+const shorePowerConnectionDateRange = ref<[string, string]>(['', ''])
+const shorePowerConnectionLoading = ref(false)
+const shorePowerConnectionTotal = ref(0)
+
+// 船舶连接岸电箱历史记录表格数据
+const shorePowerConnectionTableData = computed(() => {
+  // 在实际应用中，这里应该是从服务器获取的数据
+  // 当前为了演示，我们使用传入的模拟数据
+  return props.shorePowerConnectionData?.slice(
+    (shorePowerConnectionQueryParams.value.pageNo - 1) * shorePowerConnectionQueryParams.value.pageSize,
+    shorePowerConnectionQueryParams.value.pageNo * shorePowerConnectionQueryParams.value.pageSize
+  ) || []
+})
+
+// 船舶连接岸电箱历史记录表格列
+const shorePowerConnectionColumns = ref([
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'shorePowerName', label: '岸电箱名称', width: 150 },
+  { prop: 'time', label: '连接时间', width: 180 },
+  { prop: 'duration', label: '连接时长(小时)', width: 120 },
+  { prop: 'powerConsumption', label: '用电量(kWh)', width: 120 },
+  { prop: 'status', label: '状态', width: 100 }
+])
+
+// 处理关闭
+const handleClose = () => {
+  visible.value = false
+}
+
+// 船舶靠泊历史记录相关方法
+const handleBerthingSearch = () => {
+  // 发送搜索事件给父组件
+  emit('berthing-search', { ...berthingQueryParams.value })
+}
+
+const resetBerthingQuery = () => {
+  berthingQueryParams.value.keyword = ''
+  berthingQueryParams.value.startTime = ''
+  berthingQueryParams.value.endTime = ''
+  berthingDateRange.value = ['', '']
+  berthingQueryParams.value.pageNo = 1
+  handleBerthingSearch()
+}
+
+const handleBerthingDateChange = (val: [string, string] | null) => {
+  if (val && val[0] && val[1]) {
+    berthingQueryParams.value.startTime = val[0]
+    berthingQueryParams.value.endTime = val[1]
+  } else {
+    berthingQueryParams.value.startTime = ''
+    berthingQueryParams.value.endTime = ''
+  }
+}
+
+const handleBerthingSizeChange = (val: number) => {
+  berthingQueryParams.value.pageSize = val
+  berthingQueryParams.value.pageNo = 1
+  handleBerthingSearch()
+}
+
+const handleBerthingCurrentChange = (val: number) => {
+  berthingQueryParams.value.pageNo = val
+  handleBerthingSearch()
+}
+
+// 船舶连接岸电箱历史记录相关方法
+const handleShorePowerConnectionSearch = () => {
+  // 发送搜索事件给父组件
+  emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
+}
+
+const resetShorePowerConnectionQuery = () => {
+  shorePowerConnectionQueryParams.value.keyword = ''
+  shorePowerConnectionQueryParams.value.startTime = ''
+  shorePowerConnectionQueryParams.value.endTime = ''
+  shorePowerConnectionDateRange.value = ['', '']
+  shorePowerConnectionQueryParams.value.pageNo = 1
+  handleShorePowerConnectionSearch()
+}
+
+const handleShorePowerConnectionDateChange = (val: [string, string] | null) => {
+  if (val && val[0] && val[1]) {
+    shorePowerConnectionQueryParams.value.startTime = val[0]
+    shorePowerConnectionQueryParams.value.endTime = val[1]
+  } else {
+    shorePowerConnectionQueryParams.value.startTime = ''
+    shorePowerConnectionQueryParams.value.endTime = ''
+  }
+}
+
+const handleShorePowerConnectionSizeChange = (val: number) => {
+  shorePowerConnectionQueryParams.value.pageSize = val
+  shorePowerConnectionQueryParams.value.pageNo = 1
+  handleShorePowerConnectionSearch()
+}
+
+const handleShorePowerConnectionCurrentChange = (val: number) => {
+  shorePowerConnectionQueryParams.value.pageNo = val
+  handleShorePowerConnectionSearch()
+}
+
+// 监听数据变化并更新总数
+watch(
+  () => props.berthingData,
+  (newData) => {
+    berthingTotal.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.shorePowerConnectionData,
+  (newData) => {
+    shorePowerConnectionTotal.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue
index 5e0d3bc..b1c9746 100644
--- a/public/map/components/ShipShorePower.vue
+++ b/public/map/components/ShipShorePower.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ship-shore-power">
-    <div class="left" style="width: 50%;">
-      <div class="card digital-twin-card--deep-blue " style="flex: 1;">
+    <div class="left" style="width: 70%;">
+      <div class="card digital-twin-card--deep-blue" style="flex: 1;">
         <div class="card-title">
           <div class="vertical-line"></div>
           <img src="@/assets/svgs/data.svg" class="title-icon" />
@@ -24,32 +24,455 @@
           </div>
         </div>
       </div>
-      <div class="card digital-twin-card--deep-blue " style="flex: 3;">
-        <div class="card-title">
-          <div class="vertical-line"></div>
-          <img src="@/assets/svgs/data.svg" class="title-icon" />
-          <span class="title-text">数据</span>
+      <div class="card digital-twin-card--deep-blue" style="flex: 3;">
+        <div class="card-title data-card-title">
+          <div class="title-section">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">数据</span>
+          </div>
+          <div class="filter-controls">
+            <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-right: 10px;"
+              @change="handleStatusFilterChange">
+              <el-option label="全部" value="all" />
+              <el-option label="使用岸电" value="using" />
+              <el-option label="未使用岸电" value="not-using" />
+            </el-select>
+            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateRangeChange"
+              class="date-range-picker" />
+            <el-button @click="resetFilter" style="margin-left: 10px;">重置筛选</el-button>
+          </div>
         </div>
         <div class="card-content">
           <div class="ship-data-table-container">
-            <div class="ship-data-table">
-              <div v-for="(ship, index) in shipData" :key="index" class="ship-data-row">
-                <div class="ship-data-cell ship-name">{{ ship.name }}</div>
-                <div class="ship-data-cell wharf-name">{{ ship.wharf }}</div>
-                <div class="ship-data-cell berth-number">{{ ship.berth }}</div>
-                <div class="ship-data-cell content shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
-              </div>
-            </div>
+            <el-table :data="filteredShipData" class="ship-data-table" @row-click="handleShipClick"
+              highlight-current-row>
+              <el-table-column prop="name" label="船名" />
+              <el-table-column prop="wharf" label="码头" />
+              <el-table-column prop="berth" label="泊位" />
+              <el-table-column prop="beginTime" label="开始用电时间">
+                <template #default="scope">
+                  <span>{{ formatDateTime(scope.row.beginTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="endTime" label="结束用电时间">
+                <template #default="scope">
+                  <span>{{ formatDateTime(scope.row.endTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="status" label="岸电状态" width="400">
+                <template #default="scope">
+                  <span :class="['shore-power-status', scope.row.statusClass]">{{ scope.row.status }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="departureHarborDistrict" label="起运港" />
+              <el-table-column prop="arrivalHarborDistrict" label="到达港" />
+              <el-table-column label="操作" width="100">
+                <template #default="scope">
+                  <el-button type="primary" size="small" @click.stop="showDetail(scope.row)">更多</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
       </div>
     </div>
+    <!-- 船舶详情对话框 -->
+    <el-dialog v-model="detailDialogVisible" title="更多信息" width="1000px" class="ship-detail-dialog">
+      <el-tabs v-if="selectedShip" v-model="activeTab">
+        <el-tab-pane label="用电申请信息" name="applyInfo">
+          <el-form :model="selectedShip.applyInfo" label-width="200px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船方代理单位:">
+                  <span>{{ selectedShip.applyInfo?.agentCompany || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="代理人联系方式:">
+                  <span>{{ selectedShip.applyInfo?.agentContact || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="是否申请使用岸电:">
+                  <span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="到达泊位:">
+                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="到达码头:">
+                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalDock, dockIdAndNameList) }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="到达港:">
+                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalHarborDistrict, harborDistrictIdAndNameList)
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="起运港:">
+                  <span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="编号:">
+                  <span>{{ selectedShip.applyInfo?.id || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物类型（装货）:">
+                  <span>{{ selectedShip.applyInfo?.loadingCargoCategory || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="货物名称（装货）:">
+                  <span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物吨数（装货）:">
+                  <span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="装货/卸货:">
+                  <span>{{ selectedShip.applyInfo?.operationType || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="计划靠泊时间:">
+                  <span>{{ selectedShip.applyInfo?.plannedBerthTime ? new
+                    Date(selectedShip.applyInfo.plannedBerthTime).toLocaleString() : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="计划离泊时间:">
+                  <span>{{ selectedShip.applyInfo?.plannedDepartureTime ? new
+                    Date(selectedShip.applyInfo.plannedDepartureTime).toLocaleString() : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="未使用岸电原因:">
+                  <span>{{ getReasonText(selectedShip.applyInfo?.reason) }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="备注:">
+                  <span>{{ selectedShip.applyInfo?.remark || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船舶编号:">
+                  <span>{{ selectedShip.applyInfo?.shipId || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="申请状态:">
+                  <span>{{ selectedShip.applyInfo?.status || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="内贸/外贸:">
+                  <span>{{ selectedShip.applyInfo?.tradeType || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="货物类型(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoCategory || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物名称(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="货物吨数(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="航次:">
+                  <span>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="创建时间:">
+                  <span>{{ selectedShip.applyInfo?.createTime ? new
+                    Date(selectedShip.applyInfo.createTime).toLocaleString()
+                    : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="船舶用电信息" name="usageRecordInfo">
+          <el-form :model="selectedShip.usageRecordInfo" label-width="200px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="实际靠泊时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.actualBerthTime) }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="实际离泊时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.actualDepartureTime) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电申请编号:">
+                  <span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电开始时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电开始时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电开始时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="创建时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电结束时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="编号:">
+                  <span>{{ selectedShip.usageRecordInfo?.id || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电结束时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电结束时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电结束时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电结束时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电开始时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电开始时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="船舶编号:">
+                  <span>{{ selectedShip.usageRecordInfo?.shipId || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="作业单状态:">
+                  <span>{{ selectedShip.usageRecordInfo?.status || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="船舶基础信息" name="shipBasicInfo">
+          <el-form :model="selectedShip.shipBasicInfo" label-width="200px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船舶呼号:">
+                  <span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="创建时间:">
+                  <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="满载吃水深度:">
+                  <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
+                    selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="编号:">
+                  <span>{{ selectedShip.shipBasicInfo?.id || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船检登记号:">
+                  <span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="船舶长度:">
+                  <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船名:">
+                  <span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="英文船名:">
+                  <span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="航运单位名称:">
+                  <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="岸电负责人:">
+                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="联系方式:">
+                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="船舶吨位:">
+                  <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船舶宽度:">
+                  <span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+        <!-- 可以在这里添加更多的tab页 -->
+      </el-tabs>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="detailDialogVisible = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-// import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-
+import { ref, computed, onMounted } from 'vue'
+import { MapApi } from "@/api/shorepower/map";
+import dayjs from 'dayjs';
 // 定义组件属性
 interface ShipDataItem {
   name: string;
@@ -57,16 +480,537 @@ interface ShipDataItem {
   berth: string;
   status: string;
   statusClass: string;
+  departureHarborDistrict: string;
+  arrivalHarborDistrict: string;
+  shipBasicInfo?: {
+    /**
+     * 船舶呼号
+     */
+    callSign: string;
+    /**
+     * 创建时间
+     */
+    createTime: Date;
+    /**
+     * 满载吃水深度
+     */
+    fullLoadDraft: number;
+    /**
+     * 编号
+     */
+    id: number;
+    /**
+     * 船检登记号
+     */
+    inspectionNo: string;
+    /**
+     * 船舶长度
+     */
+    length: number;
+    /**
+     * 船名
+     */
+    name: string;
+    /**
+     * 英文船名
+     */
+    nameEn: string;
+    /**
+     * 航运单位名称
+     */
+    shippingCompany: string;
+    /**
+     * 岸电负责人
+     */
+    shorePowerContact: string;
+    /**
+     * 联系方式
+     */
+    shorePowerContactPhone: string;
+    /**
+     * 船舶吨位
+     */
+    tonnage: number;
+    /**
+     * 船舶宽度
+     */
+    width: number;
+    [property: string]: any;
+  }
+  applyInfo?: {
+    /**
+     * 船方代理单位
+     */
+    agentCompany: string;
+    /**
+     * 代理人联系方式
+     */
+    agentContact: string;
+    /**
+     * 是否申请使用岸电
+     */
+    applyShorePower: boolean;
+    /**
+     * 到达泊位
+     */
+    arrivalBerth: number;
+    /**
+     * 到达码头
+     */
+    arrivalDock: number;
+    /**
+     * 到达港
+     */
+    arrivalHarborDistrict: number;
+    /**
+     * 创建时间
+     */
+    createTime: Date;
+    /**
+     * 起运港
+     */
+    departureHarborDistrict: string;
+    /**
+     * 编号
+     */
+    id: number;
+    /**
+     * 货物类型（装货）
+     */
+    loadingCargoCategory: number;
+    /**
+     * 货物名称（装货）
+     */
+    loadingCargoName: string;
+    /**
+     * 货物吨数（装货）
+     */
+    loadingCargoTonnage: number;
+    /**
+     * 装货/卸货
+     */
+    operationType: number;
+    /**
+     * 计划靠泊时间
+     */
+    plannedBerthTime: Date;
+    /**
+     * 计划离泊时间
+     */
+    plannedDepartureTime: Date;
+    /**
+     * 未使用岸电原因
+     */
+    reason?: number;
+    /**
+     * 备注
+     */
+    remark?: string;
+    /**
+     * 船舶编号
+     */
+    shipId: number;
+    /**
+     * 申请状态
+     */
+    status: number;
+    /**
+     * 内贸/外贸
+     */
+    tradeType: number;
+    /**
+     * 货物类型(卸货)
+     */
+    unloadingCargoCategory: number;
+    /**
+     * 货物名称(卸货)
+     */
+    unloadingCargoName: string;
+    /**
+     * 货物吨数(卸货)
+     */
+    unloadingCargoTonnage: number;
+    /**
+     * 航次
+     */
+    voyage: string;
+    [property: string]: any;
+  }
+  usageRecordInfo?: {
+    /**
+     * 实际靠泊时间
+     */
+    actualBerthTime?: Date;
+    /**
+     * 实际离泊时间
+     */
+    actualDepartureTime?: Date;
+    /**
+     * 用电申请编号
+     */
+    applyId: number;
+    /**
+     * 用电开始时供电方操作人
+     */
+    beginPowerSupplyOperator?: string;
+    /**
+     * 用电开始时用电方操作人
+     */
+    beginPowerUsageOperator?: string;
+    /**
+     * 用电开始时间
+     */
+    beginTime?: Date;
+    /**
+     * 创建时间
+     */
+    createTime: Date;
+    /**
+     * 用电结束时间
+     */
+    endTime?: Date;
+    /**
+     * 编号
+     */
+    id: number;
+    /**
+     * 用电结束时供电方操作人
+     */
+    overPowerSupplyOperator?: string;
+    /**
+     * 用电结束时用电方操作人
+     */
+    overPowerUsageOperator?: string;
+    /**
+     * 用电结束时间人工读数
+     */
+    powerEndManualReading?: number;
+    /**
+     * 用电结束时间系统读数
+     */
+    powerEndSystemReading?: number;
+    /**
+     * 用电开始时间人工读数
+     */
+    powerStartManualReading?: number;
+    /**
+     * 用电开始时间系统读数
+     */
+    powerStartSystemReading?: number;
+    /**
+     * 船舶编号
+     */
+    shipId: number;
+    /**
+     * 作业单状态
+     */
+    status: number;
+    [property: string]: any;
+  }
+  shorePower?: {
+    totalPowerDeviceId: string;
+  };
 }
 
 interface Props {
-  berthingShips: number;
-  shorePowerShips: number;
-  noShorePowerShips: number;
   shipData: ShipDataItem[];
 }
 
 const props = defineProps<Props>()
+// 定义组件事件
+const emit = defineEmits<{
+  (e: 'switch-ship', ship: ShipDataItem): void;
+  (e: 'item-click', ship: ShipDataItem): void;
+}>()
+const localShipData = ref<ShipDataItem[]>([])
+const dateRange = ref<[string, string] | []>([])
+const statusFilter = ref<string>('all') // 'all', 'using', 'not-using'
+
+// 控制详情对话框显示
+const detailDialogVisible = ref(false)
+// 存储当前选中的船舶数据
+const selectedShip = ref<ShipDataItem | null>(null)
+// 控制tab标签页
+const activeTab = ref('applyInfo')
+
+// 存储从API获取的字典数据
+const berthIdAndNameList = ref<{ id: string, name: string }[]>([])
+const dockIdAndNameList = ref<{ id: string, name: string }[]>([])
+const harborDistrictIdAndNameList = ref<{ id: string, name: string }[]>([])
+
+// 从localShipData计算船舶数量指标（始终保持显示所有数据的统计）
+const berthingShips = computed(() => localShipData.value.length)
+const shorePowerShips = computed(() => localShipData.value.filter(ship => ship.statusClass === 'status-using').length)
+const noShorePowerShips = computed(() => berthingShips.value - shorePowerShips.value)
+
+// 从filteredShipData计算筛选后的船舶数量指标（用于表格下方或其他需要显示筛选结果的地方）
+const filteredBerthingShips = computed(() => filteredShipData.value.length)
+const filteredShorePowerShips = computed(() => filteredShipData.value.filter(ship => ship.statusClass === 'status-using').length)
+const filteredNoShorePowerShips = computed(() => filteredBerthingShips.value - filteredShorePowerShips.value)
+
+// 过滤后的船舶数据
+const filteredShipData = computed(() => {
+  // 先按状态筛选
+  let statusFilteredData = localShipData.value;
+  if (statusFilter.value === 'using') {
+    statusFilteredData = localShipData.value.filter(ship => ship.statusClass === 'status-using');
+  } else if (statusFilter.value === 'not-using') {
+    statusFilteredData = localShipData.value.filter(ship => ship.statusClass !== 'status-using');
+  }
+
+  // 再按日期范围筛选
+  if (!dateRange.value || dateRange.value.length !== 2) {
+    return statusFilteredData;
+  }
+
+  const [startDate, endDate] = dateRange.value;
+  if (!startDate || !endDate) {
+    return statusFilteredData;
+  }
+
+  // 将字符串日期转换为时间戳进行比较
+  const startTimestamp = new Date(startDate).getTime();
+  const endTimestamp = new Date(endDate).getTime();
+
+  return statusFilteredData.filter(ship => {
+    // 检查船舶的开始用电时间是否存在
+    const beginTime = ship.beginTime ? new Date(ship.beginTime).getTime() : null;
+
+    // 如果开始时间不存在，则不包含在结果中
+    if (!beginTime) {
+      return false;
+    }
+
+    // 检查结束用电时间是否存在
+    const endTime = ship.endTime ? new Date(ship.endTime).getTime() : null;
+
+    // 如果开始时间和结束时间都存在，则检查是否在范围内
+    if (beginTime && endTime) {
+      return (beginTime >= startTimestamp && beginTime <= endTimestamp) ||
+        (endTime >= startTimestamp && endTime <= endTimestamp) ||
+        (beginTime <= startTimestamp && endTime >= endTimestamp); // 跨越整个范围的情况
+    }
+
+    // 如果只有开始时间存在
+    if (beginTime && !endTime) {
+      return beginTime >= startTimestamp && beginTime <= endTimestamp;
+    }
+
+    // 默认情况（应该不会到达这里）
+    return false;
+  });
+});
+
+// 处理日期范围变化
+const handleDateRangeChange = (val: [string, string] | []) => {
+  dateRange.value = val;
+};
+
+// 处理状态筛选变化
+const handleStatusFilterChange = (val: string) => {
+  statusFilter.value = val;
+};
+
+// 重置筛选
+const resetFilter = () => {
+  dateRange.value = [];
+  statusFilter.value = 'all';
+};
+
+// 处理船舶列表点击事件
+const handleShipClick = (row: ShipDataItem, column: any, event: Event) => {
+  // emit('switch-ship', row)
+  emit('item-click', row)
+}
+
+// 根据ID查找对应的名称
+const findNameById = (id: string | number | undefined, list: { id: string, name: string }[]) => {
+  // 处理undefined或null值
+  if (id === undefined || id === null) {
+    return '-';
+  }
+
+  // 转换为字符串进行比较
+  const idStr = id.toString();
+  const item = list.find(item => item.id == idStr)
+  return item ? item.name : idStr // 如果找不到匹配项，返回原ID
+}
+
+// 获取未使用岸电原因的文本描述
+const getReasonText = (reason: number | undefined) => {
+  if (reason === undefined) return '-';
+
+  // 状态码映射表
+  const reasonMap: Record<number, string> = {
+    1: '岸电用电接口不匹配',
+    2: '岸电设施电压/频率不匹配',
+    3: '电缆长度不匹配',
+    4: '气象因素禁止作业',
+    5: '船电设施损坏',
+    6: '岸电设施维护中',
+    7: '无受电设备',
+    8: '拒绝使用岸电',
+    9: '其他'
+  }
+
+  return reasonMap[reason] || reason.toString()
+}
+
+// 格式化时间戳为可读时间格式
+const formatDateTime = (timestamp: string | number | Date | undefined) => {
+  if (!timestamp) return '-';
+  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
+}
+
+const showStatus = async (ship: ShipDataItem) => {
+  const { usageRecordInfo, applyInfo } = ship;
+  if (applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) {
+
+    const start = new Date(usageRecordInfo.beginTime);
+    const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date();
+
+    // 校验日期有效性
+    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
+      return null;
+    }
+
+    // 校验时间顺序
+    if (end < start) {
+      return null; // 或抛出错误、记录日志等
+    }
+
+    // 计算总毫秒差
+    const diffMs = end.getTime() - start.getTime();
+
+    // 转换为秒
+    const totalSeconds = Math.floor(diffMs / 1000);
+
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    let useValue = 0;
+
+    // 检查是否有结束读数
+    const hasEndReading = usageRecordInfo.powerEndManualReading || usageRecordInfo.powerEndSystemReading;
+
+    if (hasEndReading) {
+      // 有结束读数，使用常规计算方式
+      // 优先计算人工差值
+      const manualDiff = usageRecordInfo.powerStartManualReading !== undefined && usageRecordInfo.powerEndManualReading !== undefined
+        ? usageRecordInfo.powerEndManualReading - usageRecordInfo.powerStartManualReading
+        : null;
+      // 然后计算系统差值
+      const systemDiff = usageRecordInfo.powerStartSystemReading !== undefined && usageRecordInfo.powerEndSystemReading !== undefined
+        ? usageRecordInfo.powerEndSystemReading - usageRecordInfo.powerStartSystemReading
+        : null;
+      // 使用人工差值优先，然后系统差值，最后默认0
+      useValue = manualDiff ?? systemDiff ?? 0;
+    } else {
+      // 没有结束读数，使用实时数据计算
+      const deviceId = ship.shorePower?.totalPowerDeviceId;
+      if (deviceId) {
+        try {
+          // 调用API获取实时数据
+          const realtimeData = await MapApi.getRealtimeDataByIdList({ ids: deviceId });
+          if (realtimeData && realtimeData.length > 0) {
+            const measureValue = realtimeData[0].measureValue;
+
+            // 优先使用人工开始读数，然后系统开始读数
+            const startReading = usageRecordInfo.powerStartManualReading ?? usageRecordInfo.powerStartSystemReading ?? 0;
+            useValue = measureValue - startReading;
+          }
+        } catch (error) {
+          console.error('获取实时数据失败:', error);
+          useValue = 0;
+        }
+      }
+    }
+
+    return {
+      statusClass: 'status-using',
+      status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`
+    }
+  } else if (applyInfo.reason != 0) {
+    // 状态码映射表 - 包含状态文本和颜色类型
+    const statusMap: Record<string, { text: string; colorType: string }> = {
+      '1': { text: '岸电用电接口不匹配', colorType: 'default' },
+      '2': { text: '岸电设施电压/频率不匹配', colorType: 'success' },
+      '3': { text: '电缆长度不匹配', colorType: 'success' },
+      '4': { text: '气象因素禁止作业', colorType: 'success' },
+      '5': { text: '船电设施损坏', colorType: 'warning' },
+      '6': { text: '岸电设施维护中', colorType: 'warning' },
+      '7': { text: '无受电设备', colorType: 'danger' },
+      '8': { text: '拒绝使用岸电', colorType: 'danger' },
+      '9': { text: '其他', colorType: 'danger' }
+    }
+
+    const reasonKey = applyInfo.reason.toString()
+    const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason, colorType: 'default' }
+
+    // 根据颜色类型设置对应的状态类
+    let statusClass = 'status-cable'
+    switch (statusInfo.colorType) {
+      case 'danger':
+        statusClass = 'status-danger'
+        break
+      case 'warning':
+        statusClass = 'status-warning'
+        break
+      case 'success':
+        statusClass = 'status-success'
+        break
+      default:
+        statusClass = 'status-cable'
+    }
+
+    return {
+      statusClass: statusClass,
+      status: statusInfo.text
+    }
+  } else {
+    return {
+      statusClass: '',
+      status: 'unknown'
+    }
+  }
+}
+
+const buildData = async (ship: ShipDataItem) => {
+  // const { name, wharf, berth, status, statusClass, usageRecordInfo } = ship;
+  const statusResult = await showStatus(ship) || {};
+  const { statusClass, status } = statusResult;
+  return {
+    applyInfo: ship.applyInfo,
+    usageRecordInfo: ship.usageRecordInfo,
+    shipBasicInfo: ship.shipBasicInfo,
+    name: ship.shipBasicInfo.name,
+    wharf: findNameById(ship.applyInfo?.arrivalDock.toString(), dockIdAndNameList.value),
+    berth: findNameById(ship.applyInfo?.arrivalBerth.toString(), berthIdAndNameList.value),
+    beginTime: ship.usageRecordInfo?.beginTime,
+    endTime: ship.usageRecordInfo?.endTime,
+    departureHarborDistrict: ship.applyInfo?.departureHarborDistrict,
+    arrivalHarborDistrict: findNameById(ship.applyInfo?.arrivalHarborDistrict.toString(), harborDistrictIdAndNameList.value),
+    status: status,
+    statusClass: statusClass,
+  }
+}
+// 显示船舶详情
+const showDetail = (row: ShipDataItem) => {
+  console.log('first')
+  selectedShip.value = row
+  detailDialogVisible.value = true
+}
+
+onMounted(async () => {
+  // 从API获取字典数据
+  berthIdAndNameList.value = await MapApi.getBerthIdAndNameList()
+  dockIdAndNameList.value = await MapApi.getDockIdAndNameList()
+  harborDistrictIdAndNameList.value = await MapApi.getHarborDistrictIdAndNameList()
+
+  // 构建本地数据，使用Promise.all等待所有异步操作完成
+  localShipData.value = await Promise.all(props.shipData.map(ship => buildData(ship)));
+})
 </script>
 
 <style scoped>
@@ -74,31 +1018,215 @@ const props = defineProps<Props>()
   display: flex;
   height: 100%;
   gap: 10px;
+  color: #ffffff;
+  background-color: transparent;
 }
 
 .ship-data-table-container {
   height: 100%;
   overflow-y: auto;
+  background-color: transparent !important;
+  overflow-x: hidden;
 }
 
 .ship-data-table {
   width: 100%;
+  background-color: transparent !important;
+  color: #ffffff !important;
+  table-layout: auto;
 }
 
-.ship-data-row {
-  display: flex;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+.ship-data-table :deep(*) {
+  background-color: transparent !important;
 }
 
-.ship-data-cell {
-  flex: 1;
-  padding: 1px;
+.ship-data-table :deep(.el-table) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+  width: 100%;
+}
+
+.ship-data-table :deep(.el-table__body) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.ship-data-table :deep(.el-table__header) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-on) {
+  color: #4CAF50 !important;
+}
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-off) {
+  color: #F44336 !important;
+}
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-danger) {
+  color: #F44336 !important;
+}
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-warning) {
+  color: #FFC107 !important;
+}
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-success) {
+  color: #4CAF50 !important;
+}
+
+.ship-data-table :deep(.el-table__body .shore-power-status.status-cable) {
+  color: #2196F3 !important;
+}
+
+.ship-data-table :deep(.el-table__cell) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__header-wrapper) {
+  background-color: rgba(30, 120, 255, 0.2) !important;
+  font-weight: bold;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.ship-data-table :deep(.el-table__header th) {
+  background-color: transparent !important;
+  color: #fff !important;
   font-size: 16px;
-  /* color: #fff; */
+  padding: 12px 0;
+  white-space: nowrap;
+}
+
+.ship-data-table :deep(.el-table__body td .shore-power-status) {
+  font-weight: bold;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.ship-data-table :deep(.el-table__body td) {
+  background-color: transparent !important;
+  font-size: 16px;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ship-data-table :deep(.el-table__body td .shore-power-status) {
+  font-weight: bold;
+}
+
+.ship-data-table :deep(.el-table__body-wrapper tr) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__row) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__row:hover) {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  cursor: pointer;
+}
+
+.ship-data-table :deep(.el-table__row.current-row) {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.ship-data-table :deep(.el-table__body-wrapper) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__inner-wrapper::before) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__header-wrapper tr th) {
+  background-color: rgba(30, 120, 255, 0.2) !important;
+  color: #ffffff !important;
+}
+
+.ship-data-table :deep(table) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.ship-data-table :deep(.el-table__empty-block) {
+  background-color: transparent !important;
+}
+
+.ship-data-table :deep(.el-table__placeholder) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.ship-data-table :deep(.el-table__expanded-cell) {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.ship-data-table :deep(.el-table__footer-wrapper) {
+  background-color: transparent !important;
+}
+
+/* 数据卡片标题样式 */
+.data-card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.title-section {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  /* 允许标题部分收缩 */
 }
 
-.ship-data-cell.content {
-  flex: 2;
+.filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.date-range-picker {
+  width: 200px;
+  flex-shrink: 0;
+  /* 防止日期选择器收缩 */
+}
+
+/* 响应式设计：当屏幕较小时调整布局 */
+@media (max-width: 1200px) {
+  .data-card-title {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .title-section {
+    justify-content: center;
+    margin-bottom: 10px;
+  }
+
+  .filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .date-range-picker {
+    width: 100%;
+    max-width: 200px;
+    align-self: center;
+  }
 }
 
 .shore-power-status {
@@ -106,21 +1234,109 @@ const props = defineProps<Props>()
 }
 
 .shore-power-status.status-on {
-  color: #4CAF50;
+  color: #4CAF50 !important;
 }
 
 .shore-power-status.status-off {
-  color: #F44336;
+  color: #F44336 !important;
+}
+
+.shore-power-status.status-danger {
+  color: #F44336 !important;
+}
+
+.shore-power-status.status-warning {
+  color: #FFC107 !important;
+}
+
+.shore-power-status.status-success {
+  color: #4CAF50 !important;
+}
+
+.shore-power-status.status-cable {
+  color: #2196F3 !important;
 }
 
 .overview-value {
-  font-size: 24px;
+  font-size: 42px;
   font-weight: 700;
 }
 
 .overview-label {
-  font-size: 18px;
+  font-size: 32px;
   font-weight: 700;
+}
+
+.overview-grid {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.overview-item {
+  flex: 1;
+  text-align: center;
+}
+
+/* 船舶详情对话框样式 */
+.ship-detail-dialog :deep(.el-dialog) {
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: #ffffff;
+}
+
+.ship-detail-dialog :deep(.el-dialog__header) {
+  background-color: rgba(30, 120, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 15px 20px;
+}
+
+.ship-detail-dialog :deep(.el-dialog__title) {
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.ship-detail-dialog :deep(.el-dialog__body) {
+  padding: 20px;
+}
+
+.ship-detail-dialog :deep(.el-form-item__label) {
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.ship-detail-dialog :deep(.el-form-item__content) {
+  color: #ffffff;
+}
+
+.ship-detail-dialog :deep(.el-row) {
+  margin-bottom: 10px;
+}
+
+.ship-detail-dialog :deep(h3) {
+  color: #409EFF;
+  margin: 15px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 5px;
+}
+
+.ship-detail-dialog :deep(.el-dialog__footer) {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 15px 20px;
+}
+
+.dialog-footer :deep(.el-button) {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #ffffff;
+}
 
+.dialog-footer :deep(.el-button:hover) {
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.5);
 }
 </style>
\ No newline at end of file
diff --git a/public/map/components/ShorePowerHistoryDialog.vue b/public/map/components/ShorePowerHistoryDialog.vue
new file mode 100644
index 0000000..cca2865
--- /dev/null
+++ b/public/map/components/ShorePowerHistoryDialog.vue
@@ -0,0 +1,304 @@
+<template>
+  <el-dialog v-model="visible" title="岸电箱历史记录" width="1200px" :before-close="handleClose">
+    <el-tabs v-model="activeTab">
+      <!-- 岸电箱历史记录 tab -->
+      <el-tab-pane label="岸电箱历史记录" name="shorePower">
+        <!-- 搜索和筛选区域 -->
+        <div class="filter-container">
+          <el-form :model="queryParams" label-width="80px" inline>
+            <el-form-item label="关键字">
+              <el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" />
+            </el-form-item>
+            <el-form-item label="时间范围">
+              <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+              <el-button @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 数据表格 -->
+        <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
+          <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+            :width="column.width" :formatter="column.formatter" />
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination v-model:current-page="queryParams.pageNo" v-model:page-size="queryParams.pageSize"
+            :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+      </el-tab-pane>
+
+      <!-- 岸电箱连接船舶记录 tab -->
+      <el-tab-pane label="岸电箱连接船舶记录" name="shipConnection">
+        <!-- 搜索和筛选区域 -->
+        <div class="filter-container">
+          <el-form :model="shipConnectionQueryParams" label-width="80px" inline>
+            <el-form-item label="关键字">
+              <el-input v-model="shipConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable
+                @keyup.enter="handleShipConnectionSearch" />
+            </el-form-item>
+            <el-form-item label="时间范围">
+              <el-date-picker v-model="shipConnectionDateRange" type="daterange" range-separator="至"
+                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
+                @change="handleShipConnectionDateChange" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleShipConnectionSearch">搜索</el-button>
+              <el-button @click="resetShipConnectionQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <!-- 数据表格 -->
+        <el-table :data="shipConnectionTableData" border stripe style="width: 100%" v-loading="shipConnectionLoading">
+          <el-table-column v-for="column in shipConnectionColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+            :width="column.width" :formatter="column.formatter" />
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+          <el-pagination v-model:current-page="shipConnectionQueryParams.pageNo" v-model:page-size="shipConnectionQueryParams.pageSize"
+            :page-sizes="[10, 20, 50, 100]" :total="shipConnectionTotal" layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleShipConnectionSizeChange" @current-change="handleShipConnectionCurrentChange" />
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { 
+  ElDialog, 
+  ElTabs, 
+  ElTabPane, 
+  ElForm, 
+  ElFormItem, 
+  ElInput, 
+  ElDatePicker, 
+  ElButton, 
+  ElTable, 
+  ElTableColumn, 
+  ElPagination 
+} from 'element-plus'
+
+// 定义组件属性
+interface Props {
+  modelValue: boolean
+  data?: any[]
+  shipConnectionData?: any[]
+}
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'search', params: any): void
+  (e: 'ship-connection-search', params: any): void
+}>()
+
+// 属性定义
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  data: () => [],
+  shipConnectionData: () => []
+})
+
+// 响应式数据
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const activeTab = ref('shorePower')
+
+// 岸电箱历史记录相关数据
+const queryParams = ref({
+  keyword: '',
+  startTime: '',
+  endTime: '',
+  pageNo: 1,
+  pageSize: 10
+})
+
+const dateRange = ref<[string, string]>(['', ''])
+const loading = ref(false)
+const total = ref(0)
+
+// 表格数据计算属性
+const tableData = computed(() => {
+  // 在实际应用中，这里应该是从服务器获取的数据
+  // 当前为了演示，我们使用传入的模拟数据
+  return props.data?.slice(
+    (queryParams.value.pageNo - 1) * queryParams.value.pageSize,
+    queryParams.value.pageNo * queryParams.value.pageSize
+  ) || []
+})
+
+// 表格列
+const tableColumns = ref([
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'time', label: '时间', width: 180 },
+  { prop: 'operation', label: '操作类型' },
+  { prop: 'voltage', label: '电压(V)' },
+  { prop: 'current', label: '电流(A)' },
+  { prop: 'power', label: '功率(kW)' },
+  { prop: 'energy', label: '用电量(kWh)' }
+])
+
+// 岸电箱连接船舶记录相关数据
+const shipConnectionQueryParams = ref({
+  keyword: '',
+  startTime: '',
+  endTime: '',
+  pageNo: 1,
+  pageSize: 10
+})
+
+const shipConnectionDateRange = ref<[string, string]>(['', ''])
+const shipConnectionLoading = ref(false)
+const shipConnectionTotal = ref(0)
+
+// 岸电箱连接船舶记录表格数据
+const shipConnectionTableData = computed(() => {
+  // 在实际应用中，这里应该是从服务器获取的数据
+  // 当前为了演示，我们使用传入的模拟数据
+  return props.shipConnectionData?.slice(
+    (shipConnectionQueryParams.value.pageNo - 1) * shipConnectionQueryParams.value.pageSize,
+    shipConnectionQueryParams.value.pageNo * shipConnectionQueryParams.value.pageSize
+  ) || []
+})
+
+// 岸电箱连接船舶记录表格列
+const shipConnectionColumns = ref([
+  { prop: 'id', label: '记录ID', width: 80 },
+  { prop: 'shipName', label: '船舶名称', width: 150 },
+  { prop: 'time', label: '连接时间', width: 180 },
+  { prop: 'duration', label: '连接时长(小时)', width: 120 },
+  { prop: 'powerConsumption', label: '用电量(kWh)', width: 120 },
+  { prop: 'status', label: '状态', width: 100 }
+])
+
+// 处理关闭
+const handleClose = () => {
+  visible.value = false
+}
+
+// 岸电箱历史记录相关方法
+const handleSearch = () => {
+  // 发送搜索事件给父组件
+  emit('search', { ...queryParams.value })
+}
+
+const resetQuery = () => {
+  queryParams.value.keyword = ''
+  queryParams.value.startTime = ''
+  queryParams.value.endTime = ''
+  dateRange.value = ['', '']
+  queryParams.value.pageNo = 1
+  handleSearch()
+}
+
+const handleDateChange = (val: [string, string] | null) => {
+  if (val && val[0] && val[1]) {
+    queryParams.value.startTime = val[0]
+    queryParams.value.endTime = val[1]
+  } else {
+    queryParams.value.startTime = ''
+    queryParams.value.endTime = ''
+  }
+}
+
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val
+  queryParams.value.pageNo = 1
+  handleSearch()
+}
+
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNo = val
+  handleSearch()
+}
+
+// 岸电箱连接船舶记录相关方法
+const handleShipConnectionSearch = () => {
+  // 发送搜索事件给父组件
+  emit('ship-connection-search', { ...shipConnectionQueryParams.value })
+}
+
+const resetShipConnectionQuery = () => {
+  shipConnectionQueryParams.value.keyword = ''
+  shipConnectionQueryParams.value.startTime = ''
+  shipConnectionQueryParams.value.endTime = ''
+  shipConnectionDateRange.value = ['', '']
+  shipConnectionQueryParams.value.pageNo = 1
+  handleShipConnectionSearch()
+}
+
+const handleShipConnectionDateChange = (val: [string, string] | null) => {
+  if (val && val[0] && val[1]) {
+    shipConnectionQueryParams.value.startTime = val[0]
+    shipConnectionQueryParams.value.endTime = val[1]
+  } else {
+    shipConnectionQueryParams.value.startTime = ''
+    shipConnectionQueryParams.value.endTime = ''
+  }
+}
+
+const handleShipConnectionSizeChange = (val: number) => {
+  shipConnectionQueryParams.value.pageSize = val
+  shipConnectionQueryParams.value.pageNo = 1
+  handleShipConnectionSearch()
+}
+
+const handleShipConnectionCurrentChange = (val: number) => {
+  shipConnectionQueryParams.value.pageNo = val
+  handleShipConnectionSearch()
+}
+
+// 监听数据变化并更新总数
+watch(
+  () => props.data,
+  (newData) => {
+    total.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.shipConnectionData,
+  (newData) => {
+    shipConnectionTotal.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue
index eacfc9f..f592b1d 100644
--- a/public/map/components/ShorePowerUsage.vue
+++ b/public/map/components/ShorePowerUsage.vue
@@ -2,52 +2,80 @@
   <div class="shore-power-usage">
     <!-- Average Mode -->
     <template v-if="displayMode === 'average'">
-      <div class="left" style="width: 40%;">
+      <div class="left average" style="width: 40%;">
         <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
           @click="handleSelectCard(card.id)">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">{{ card.title }}</span>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">{{ card.title }}</span>
+            </div>
+            <div v-if="card.type === 'overview'" class="time-range-selector">
+              <button v-for="option in timeRangeOptions" :key="option.value"
+                :class="['time-range-btn', { active: timeRange === option.value }]"
+                @click.stop="handleTimeRangeChange(option.value)">
+                {{ option.label }}
+              </button>
+            </div>
+            <div v-if="card.type === 'chart'" class="show-value">
+              <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                ''}}总量:</span>
+              <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+            </div>
           </div>
           <div class="card-content">
             <div v-if="card.type === 'overview'" class="overview-grid">
               <div class="overview-item">
-                <div class="overview-value">{{ totalPower }}</div>
+                <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
                 <div class="overview-label">累计用电（千瓦时）</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ fuelReduction }}</div>
+                <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
                 <div class="overview-label">减少燃油（吨）</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ co2Reduction }}</div>
+                <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
                 <div class="overview-label">减少二氧化碳排放（千克）</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ pm25Reduction }}</div>
+                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
                 <div class="overview-label">减少PM2.5排放（千克）</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ noxReduction }}</div>
+                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
                 <div class="overview-label">减少氮氧化物（千克）</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ so2Reduction }}</div>
+                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
                 <div class="overview-label">减少二氧化硫（千克）</div>
               </div>
             </div>
-            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
       </div>
-      <div class="right" style="width: 40%;">
+      <div class="right average" style="width: 40%;">
         <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
           @click="handleSelectCard(card.id)">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">{{ card.title }}</span>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">{{ card.title }}</span>
+            </div>
+            <div v-if="card.type === 'overview'" class="time-range-selector">
+              <button v-for="option in timeRangeOptions" :key="option.value"
+                :class="['time-range-btn', { active: timeRange === option.value }]"
+                @click.stop="handleTimeRangeChange(option.value)">
+                {{ option.label }}
+              </button>
+            </div>
+            <div v-if="card.type === 'chart'" class="show-value">
+              <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                ''}}总量:</span>
+              <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+            </div>
           </div>
           <div class="card-content">
             <div v-if="card.type === 'overview'" class="overview-grid">
@@ -76,7 +104,7 @@
                 <div class="overview-label">减少二氧化硫（千克）</div>
               </div>
             </div>
-            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
       </div>
@@ -87,78 +115,107 @@
       <div class="big">
         <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
           class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">{{ card.title }}</span>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">{{ card.title }}</span>
+            </div>
+            <div v-if="card.type === 'overview'" class="time-range-selector">
+              <button v-for="option in timeRangeOptions" :key="option.value"
+                :class="['time-range-btn', { active: timeRange === option.value }]"
+                @click.stop="handleTimeRangeChange(option.value)">
+                {{ option.label }}
+              </button>
+            </div>
+            <div v-if="card.type === 'chart'" class="show-value">
+              <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                ''}}总量:</span>
+              <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+            </div>
           </div>
           <div class="card-content">
             <div v-if="card.type === 'overview'" class="overview-grid">
               <div class="overview-item">
-                <div class="overview-value">{{ totalPower }}</div>
-                <div class="overview-label">累计用电（千瓦时）</div>
+                <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
+                <div class="overview-label">累计用电(千瓦时)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ fuelReduction }}</div>
-                <div class="overview-label">减少燃油（吨）</div>
+                <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                <div class="overview-label">减少燃油(吨)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ co2Reduction }}</div>
-                <div class="overview-label">减少二氧化碳排放（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                <div class="overview-label">减少二氧化碳排放(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ pm25Reduction }}</div>
-                <div class="overview-label">减少PM2.5排放（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                <div class="overview-label">减少PM2.5排放(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ noxReduction }}</div>
-                <div class="overview-label">减少氮氧化物（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                <div class="overview-label">减少氮氧化物(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ so2Reduction }}</div>
-                <div class="overview-label">减少二氧化硫（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                <div class="overview-label">减少二氧化硫(千克)</div>
               </div>
             </div>
-            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color"
+              :magnify-mode="true" />
           </div>
         </div>
       </div>
       <div class="one-row">
         <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
           class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">{{ card.title }}</span>
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">{{ card.title }}</span>
+            </div>
+            <div v-if="card.type === 'overview'" class="time-range-selector">
+              <button v-for="option in timeRangeOptions" :key="option.value"
+                :class="['time-range-btn', { active: timeRange === option.value }]"
+                @click.stop="handleTimeRangeChange(option.value)">
+                {{ option.label }}
+              </button>
+            </div>
+            <div v-if="card.type === 'chart'" class="show-value">
+              <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                ''}}总量:</span>
+              <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+            </div>
           </div>
           <div class="card-content">
             <div v-if="card.type === 'overview'" class="overview-grid">
               <div class="overview-item">
-                <div class="overview-value">{{ totalPower }}</div>
-                <div class="overview-label">累计用电（千瓦时）</div>
+                <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
+                <div class="overview-label">累计用电(千瓦时)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ fuelReduction }}</div>
-                <div class="overview-label">减少燃油（吨）</div>
+                <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                <div class="overview-label">减少燃油(吨)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ co2Reduction }}</div>
-                <div class="overview-label">减少二氧化碳排放（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                <div class="overview-label">减少二氧化碳排放(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ pm25Reduction }}</div>
-                <div class="overview-label">减少PM2.5排放（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                <div class="overview-label">减少PM2.5排放(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ noxReduction }}</div>
-                <div class="overview-label">减少氮氧化物（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                <div class="overview-label">减少氮氧化物(千克)</div>
               </div>
               <div class="overview-item">
-                <div class="overview-value">{{ so2Reduction }}</div>
-                <div class="overview-label">减少二氧化硫（千克）</div>
+                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                <div class="overview-label">减少二氧化硫(千克)</div>
               </div>
             </div>
-            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
       </div>
@@ -168,7 +225,9 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import BarChartMinute from './charts/BarChartMinute.vue'
+import WaveLineChart from './charts/WaveLineChart.vue'
+import { MapApi } from "@/api/shorepower/map";
+import dayjs from 'dayjs';
 
 // 定义组件属性
 interface ChartDataItem {
@@ -182,23 +241,178 @@ interface CardInfo {
   type: 'overview' | 'chart';
   unit?: string;
   color?: string;
+  value: string;
+}
+
+interface ShorePowerUsageData {
+  totalPower: number; // 累计用电（千瓦时）
+  fuelReduction: number; // 减少燃油（吨）
+  co2Reduction: number; // 减少二氧化碳排放（千克）
+  pm25Reduction: number; // 减少PM2.5排放（千克）
+  noxReduction: number; // 减少氮氧化物（千克）
+  so2Reduction: number; // 减少二氧化硫（千克）
+}
+
+export interface MeasureDataRealtimeRespVO {
+  /**
+   * 创建时间
+   */
+  createTime: Date;
+  /**
+   * 设备编号code
+   */
+  deviceCode: string;
+  /**
+   * 设备编号
+   */
+  deviceId: number;
+  /**
+   * 设备名称
+   */
+  deviceName: string;
+  /**
+   * 设备状态
+   */
+  deviceStatus: number;
+  /**
+   * 编号
+   */
+  id: number;
+  /**
+   * 增量费用
+   */
+  incrementCost?: number;
+  /**
+   * 增量值
+   */
+  incrementValue: number;
+  /**
+   * 采集时间
+   */
+  measureTime: Date;
+  /**
+   * 采集值
+   */
+  measureValue: number;
 }
 
-interface Props {
-  totalPower: number;
-  fuelReduction: number;
-  co2Reduction: number;
-  pm25Reduction: number;
-  noxReduction: number;
-  so2Reduction: number;
+export interface deviceData {
+  [key: string]: MeasureDataRealtimeRespVO
 }
 
-const props = defineProps<Props>()
-const displayMode = ref<'average' | 'magnify'>('average')
+// const props = defineProps<Props>()
+
+const totalPower = ref<string>('0')
+const fuelReduction = ref<string>('0')
+const co2Reduction = ref<string>('0')
+const pm25Reduction = ref<string>('0')
+const noxReduction = ref<string>('0')
+const so2Reduction = ref<string>('0')
+
+const displayMode = ref<'average' | 'magnify'>('magnify')
 const selectedCard = ref<string>('overview')
 // 创建统一的模拟数据源
 const commonChartData = ref<ChartDataItem[]>([])
 
+// 实时数据图表数组
+const totalPowerChartData = ref<ChartDataItem[]>([])
+const co2ReductionChartData = ref<ChartDataItem[]>([])
+const so2ReductionChartData = ref<ChartDataItem[]>([])
+const noxReductionChartData = ref<ChartDataItem[]>([])
+const pm25ReductionChartData = ref<ChartDataItem[]>([])
+const fuelReductionChartData = ref<ChartDataItem[]>([])
+
+const chartData = ref({
+  'realtime': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'day': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'week': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'month': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'quarter': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'year': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+
+})
+
+// 获取对应卡片的图表数据
+const getChartData = (cardId: string): ChartDataItem[] => {
+  switch (cardId) {
+    case 'overview':
+      return totalPowerChartData.value
+    case 'fuel':
+      return fuelReductionChartData.value
+    case 'co2':
+      return co2ReductionChartData.value
+    case 'pm25':
+      return pm25ReductionChartData.value
+    case 'nox':
+      return noxReductionChartData.value
+    case 'so2':
+      return so2ReductionChartData.value
+    default:
+      return commonChartData.value
+  }
+}
+
+// 时间范围选项
+const timeRange = ref<'realtime' | 'day' | 'week' | 'month' | 'quarter' | 'year'>('realtime')
+
+// 时间范围选项定义
+const timeRangeOptions = [
+  { value: 'realtime', label: '实时' },
+  { value: 'day', label: '日' },
+  { value: 'week', label: '周' },
+  { value: 'month', label: '月' },
+  // { value: 'quarter', label: '季' },
+  { value: 'year', label: '年' }
+]
+
+// 处理时间范围选择
+const handleTimeRangeChange = (range: 'realtime' | 'day' | 'week' | 'month' | 'quarter' | 'year') => {
+  timeRange.value = range
+  // 这里可以添加根据时间范围切换数据源的逻辑
+}
+
 // 定义卡片信息
 const cards = ref<CardInfo[]>([
   {
@@ -211,35 +425,40 @@ const cards = ref<CardInfo[]>([
     title: '减少燃油（吨）',
     type: 'chart',
     unit: '吨',
-    color: '#4CAF50' // 绿色 - 代表节能、清洁能源
+    color: '#4CAF50', // 绿色 - 代表节能、清洁能源
+    value: 'fuel'
   },
   {
     id: 'co2',
     title: '减少CO₂排放（千克）',
     type: 'chart',
     unit: '千克',
-    color: '#2E7D32' // 深绿色/蓝绿 - 温室气体（国际常用低碳绿色系）
+    color: '#2E7D32', // 深绿色/蓝绿 - 温室气体（国际常用低碳绿色系）
+    value: 'co2'
   },
   {
     id: 'pm25',
     title: '减少PM2.5排放（千克）',
     type: 'chart',
     unit: '千克',
-    color: '#9E9E9E' // 灰色 - 颗粒物（国际通用）
+    color: '#9E9E9E', // 灰色 - 颗粒物（国际通用）
+    value: 'pm25'
   },
   {
     id: 'nox',
     title: '减少NOₓ排放（千克）',
     type: 'chart',
     unit: '千克',
-    color: '#FF9800' // 橙色 - 氮氧化物（国际通用）
+    color: '#FF9800', // 橙色 - 氮氧化物（国际通用）
+    value: 'nox'
   },
   {
     id: 'so2',
     title: '减少SO₂排放（千克）',
     type: 'chart',
     unit: '千克',
-    color: '#FFEB3B' // 黄色 - 二氧化硫（国际通用）
+    color: '#FFEB3B', // 黄色 - 二氧化硫（国际通用）
+    value: 'so2'
   }
 ])
 
@@ -271,7 +490,7 @@ const generateInitialData = () => {
 }
 
 // 定时器引用
-let timer: number | null = null
+let timer: ReturnType<typeof setInterval>;
 
 // 追加新数据
 const appendNewData = () => {
@@ -282,10 +501,152 @@ const appendNewData = () => {
   })
 }
 
+const handleGetRealTimeAllData = async () => {
+  try {
+    const res: deviceData = await MapApi.getRealtimeAllData({})
+    const ids = Object.values(res).map(item => item.id);
+    console.log(ids);
+    const params = {
+      ids: ids.join(','),
+      // year: new Date().getFullYear()
+    }
+    const yearDataRes: deviceData = await MapApi.getYearDataByIdList(params);
+    const weekDataRes: deviceData = await MapApi.getWeekDataByIdList(params);
+    const monthDataRes: deviceData = await MapApi.getMonthDataByIdList(params);
+    const dayDataRes: deviceData = await MapApi.getDayDataByIdList(params);
+    // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
+
+    const realTimeSum = Object.values(res).reduce((acc, item) => acc + item.measureValue, 0);
+    const daySum = realTimeSum - Object.values(dayDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const monthSum = realTimeSum - Object.values(monthDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    // const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const yearSum = realTimeSum - Object.values(yearDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+
+    // totalPower.value = realTimeSum.toFixed(2)
+    // co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨
+    // so2Reduction.value = (realTimeSum * 10.5 / 1000000).toFixed(2) // 克转化为吨
+    // noxReduction.value = (realTimeSum * 18.1 / 1000000).toFixed(2) // 克转化为吨
+    // pm25Reduction.value = (realTimeSum * 1.46 / 1000000).toFixed(2) // 克转化为吨
+    // fuelReduction.value = (realTimeSum * 0.22 / 1000).toFixed(2) // 转化为吨
+
+    const incrementRealTimeSum = Object.values(res).reduce((acc, item) => acc + item.incrementValue, 0);
+
+
+    chartData.value.realtime = {
+      totalPower: Number(realTimeSum.toFixed(2)),
+      fuel: Number((realTimeSum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((realTimeSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((realTimeSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((realTimeSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((realTimeSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+    chartData.value.day = {
+      totalPower: Number(daySum.toFixed(2)),
+      fuel: Number((daySum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((daySum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((daySum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((daySum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((daySum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+    chartData.value.week = {
+      totalPower: Number(weekSum.toFixed(2)),
+      fuel: Number((weekSum * 0.22 / 1).toFixed(2)), // 转化为吨
+      co2: Number((weekSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((weekSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((weekSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((weekSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+    chartData.value.month = {
+      totalPower: Number(monthSum.toFixed(2)),
+      fuel: Number((monthSum * 0.22 / 1).toFixed(2)), // 转化为吨
+      co2: Number((monthSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((monthSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((monthSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((monthSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+    chartData.value.year = {
+      totalPower: Number(yearSum.toFixed(2)),
+      fuel: Number((yearSum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((yearSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((yearSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((yearSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((yearSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+
+    // 记录实时数据到图表数组
+    const now = new Date()
+    const timestamp = now.toLocaleTimeString()
+
+    // 计算各指标值（转换为合适的单位）并保留两位小数
+    const totalPowerValue = Number(incrementRealTimeSum.toFixed(2))
+    const co2Value = Number((incrementRealTimeSum * 670 / 1000).toFixed(2)) // 克转化为千克
+    const so2Value = Number((incrementRealTimeSum * 10.5 / 1000).toFixed(2)) // 克转化为千克
+    const noxValue = Number((incrementRealTimeSum * 18.1 / 1000).toFixed(2)) // 克转化为千克
+    const pm25Value = Number((incrementRealTimeSum * 1.46 / 1000).toFixed(2)) // 克转化为千克
+    const fuelValue = Number((incrementRealTimeSum * 0.22 / 1).toFixed(2)) // 转化为千克
+
+    // 添加到各图表数据数组
+    totalPowerChartData.value.push({ name: timestamp, value: totalPowerValue })
+    co2ReductionChartData.value.push({ name: timestamp, value: co2Value })
+    so2ReductionChartData.value.push({ name: timestamp, value: so2Value })
+    noxReductionChartData.value.push({ name: timestamp, value: noxValue })
+    pm25ReductionChartData.value.push({ name: timestamp, value: pm25Value })
+    fuelReductionChartData.value.push({ name: timestamp, value: fuelValue })
+
+    // 保持数组最多包含20个数据点（对应约3分钟，每10秒一条）
+    const maxDataPoints = 10
+    totalPowerChartData.value = totalPowerChartData.value.slice(-maxDataPoints)
+    co2ReductionChartData.value = co2ReductionChartData.value.slice(-maxDataPoints)
+    so2ReductionChartData.value = so2ReductionChartData.value.slice(-maxDataPoints)
+    noxReductionChartData.value = noxReductionChartData.value.slice(-maxDataPoints)
+    pm25ReductionChartData.value = pm25ReductionChartData.value.slice(-maxDataPoints)
+    fuelReductionChartData.value = fuelReductionChartData.value.slice(-maxDataPoints)
+
+    // 更新通用图表数据（保持向后兼容）
+    commonChartData.value.push({ name: timestamp, value: totalPowerValue })
+    commonChartData.value = commonChartData.value.slice(-maxDataPoints)
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleGetAllDeviceDataByTimeRange = async () => {
+  try {
+    // 当前时间的时间戳（毫秒）
+    const nowTimestamp = dayjs().valueOf().toString();
+
+    // 两天前的时间戳（毫秒）
+    const twoDaysAgoTimestamp = dayjs().subtract(2, 'day').valueOf().toString();
+    const params = {
+      start: twoDaysAgoTimestamp,
+      end: nowTimestamp,
+      timeType: '3'
+    }
+    const res = await MapApi.getByStartAndEndTimeAndTimeType(params)
+    console.log(res)
+
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
 // 组件挂载时初始化数据和定时器
 onMounted(() => {
-  commonChartData.value = generateInitialData()
-  timer = window.setInterval(appendNewData, 1000)
+  handleGetAllDeviceDataByTimeRange()
+  // commonChartData.value = generateInitialData()
+  // timer = window.setInterval(appendNewData, 1000)
+  let i = 1
+  handleGetRealTimeAllData()
+  timer = setInterval(() => {
+    handleGetRealTimeAllData(i)
+    i++
+  }, 5000)
 })
 
 // 组件销毁前清除定时器
@@ -303,6 +664,17 @@ onBeforeUnmount(() => {
   gap: 10px;
 }
 
+.average {
+
+  .overview-value {
+    font-size: 36px;
+  }
+
+  .overview-label {
+    font-size: 18px;
+  }
+}
+
 .magnify {
   width: 100%;
   padding: 12px;
@@ -324,11 +696,11 @@ onBeforeUnmount(() => {
     }
 
     .overview-value {
-      font-size: 32px;
+      font-size: 48px;
     }
 
     .overview-label {
-      font-size: 24px;
+      font-size: 28px;
     }
   }
 
@@ -337,6 +709,10 @@ onBeforeUnmount(() => {
     display: flex;
     gap: 8px;
 
+    .card .card-title .title-text {
+      font-size: 14px;
+    }
+
     .card {
       flex: 1;
     }
@@ -348,6 +724,56 @@ onBeforeUnmount(() => {
   cursor: pointer;
 }
 
+.time-range-selector {
+  display: flex;
+  gap: 8px;
+}
+
+.show-value {
+  font-size: 18px;
+  font-weight: 600;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  color: #FFF;
+}
+
+.show-value-label {
+  font-size: 12px;
+  font-weight: 600;
+  font-weight: bold;
+}
+
+.show-value-value {
+  font-size: 18px;
+  font-weight: 600;
+  font-weight: bold;
+}
+
+.time-range-btn {
+  padding: 4px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.time-range-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+.time-range-btn.active {
+  background: rgba(76, 175, 80, 0.8);
+  border-color: #4CAF50;
+  color: #fff;
+}
+
 .right {
   /* gap: 0 */
 }
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
index f2ce4d1..15e2154 100644
--- a/public/map/components/cesiumMap.vue
+++ b/public/map/components/cesiumMap.vue
@@ -124,7 +124,27 @@ onMounted(async () => {
 
     // （可选）同时限制最小缩放距离，防止滚轮进入模型内部
     // 例如，限制最小距离为 1000.0 米
-    controller.minimumZoomDistance = 1000;
+    const MIN_HEIGHT = 1200;
+    controller.minimumZoomDistance = MIN_HEIGHT - 100;
+
+    const canvas = viewer.scene.canvas;
+
+    canvas.addEventListener(
+      "wheel",
+      (e) => {
+        const height = viewer.camera.positionCartographic.height;
+
+        // 只拦截“继续向内”
+        if (height <= MIN_HEIGHT && e.deltaY < 0) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      {
+        passive: false,
+        capture: true
+      }
+    );
 
     // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
     // 步骤 2: 添加高德地图卫星影像底图
@@ -220,6 +240,9 @@ onMounted(async () => {
           console.log('dataObj.icon', dataObj.icon)
           if (dataObj.icon === 'ship_green' || dataObj.icon === 'ship_red') {
             const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
+            if (!itemShipInfo) {
+              return;
+            }
             const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
             const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
             const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
@@ -255,7 +278,7 @@ onMounted(async () => {
               position: labelPosition, // 船上方约10米
               label: {
                 text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
-                font: '16px sans-serif',
+                font: '20px sans-serif',
                 fillColor: Cesium.Color.LIME,
                 outlineColor: Cesium.Color.BLACK,
                 outlineWidth: 2,
@@ -264,23 +287,39 @@ onMounted(async () => {
                 disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
               }
             });
-            // if (dataObj.icon === 'ship_red') {
-            const overlayBillboard = viewer.entities.add({
-              position: statusPosition,
-              billboard: {
-                image: '/img/故障.png',
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                disableDepthTestDistance: Number.POSITIVE_INFINITY,
-                scale: new Cesium.CallbackProperty(function (time, result) {
-                  // t 会随着时间不断变化
-                  const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
-                  const pulse = 0.4 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
-                  return pulse;
-                }, false)
-              }
-            });
-            // }
+            // 根据概率分布决定是否显示状态图标
+            // 50%概率不显示，25%显示故障，25%显示离线
+            const rand = Math.random();
+            let statusImage = null;
+            if (rand < 0.8) {
+              // 50%概率：不显示状态图标
+              statusImage = null;
+            } else if (rand < 0.9) {
+              // 25%概率：显示故障图标
+              statusImage = '/img/故障.png';
+            } else {
+              // 25%概率：显示离线图标
+              statusImage = '/img/离线.png';
+            }
+
+            // 只有当需要显示状态图标时才添加实体
+            if (statusImage) {
+              const overlayBillboard = viewer.entities.add({
+                position: statusPosition,
+                billboard: {
+                  image: statusImage,
+                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                  verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                  scale: new Cesium.CallbackProperty(function (time, result) {
+                    // t 会随着时间不断变化
+                    const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+                    const pulse = 0.4 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                    return pulse;
+                  }, false)
+                }
+              });
+            }
 
           }
           if (dataObj.type === 'text') {
@@ -289,7 +328,7 @@ onMounted(async () => {
               position: labelPosition, // 船上方约10米
               label: {
                 text: dataObj.name || `Marker-${item.id || index}`,
-                font: '12px sans-serif',
+                font: '20px sans-serif',
                 fillColor: Cesium.Color.WHITE,
                 outlineColor: Cesium.Color.BLACK,
                 outlineWidth: 2,
@@ -300,6 +339,7 @@ onMounted(async () => {
             });
           }
           if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) {
+            const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
             const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
             const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
             // 投放岸电箱模型
@@ -333,6 +373,7 @@ onMounted(async () => {
             // 保存模型实例到数据项
             itemWithModel.modelInstance = electricalBoxModel;
             itemWithModel.modelType = 'electrical_box';
+            itemWithModel = { ...itemWithModel, ...itemShipInfo };
 
             viewer.entities.add({
               // pickable: false,
@@ -343,7 +384,7 @@ onMounted(async () => {
               },
               label: {
                 text: '岸电箱' || `Marker-${item.id || index}`,
-                font: '10px sans-serif',
+                font: '16px sans-serif',
                 fillColor: Cesium.Color.WHITE,
                 outlineColor: Cesium.Color.BLACK,
                 outlineWidth: 2,
@@ -353,26 +394,44 @@ onMounted(async () => {
               }
             });
 
-            const overlayBillboard = viewer.entities.add({
-              position: position,
-              // pickable: false,
-              properties: {
-                modelType: 'electrical_box',
-                data: itemWithModel
-              },
-              billboard: {
-                image: '/img/故障.png',
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                disableDepthTestDistance: Number.POSITIVE_INFINITY,
-                scale: new Cesium.CallbackProperty(function (time, result) {
-                  // t 会随着时间不断变化
-                  const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
-                  const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
-                  return pulse;
-                }, false)
-              }
-            });
+            // 根据概率分布决定是否显示状态图标
+            // 50%概率不显示，25%显示故障，25%显示离线
+            const rand = Math.random();
+            let statusImage = null;
+            if (rand < 0.5) {
+              // 50%概率：不显示状态图标
+              statusImage = null;
+            } else if (rand < 0.75) {
+              // 25%概率：显示故障图标
+              statusImage = '/img/故障.png';
+            } else {
+              // 25%概率：显示离线图标
+              statusImage = '/img/离线.png';
+            }
+
+            // 只有当需要显示状态图标时才添加实体
+            if (statusImage) {
+              const overlayBillboard = viewer.entities.add({
+                position: position,
+                // pickable: false,
+                properties: {
+                  modelType: 'electrical_box',
+                  data: itemWithModel
+                },
+                billboard: {
+                  image: statusImage,
+                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                  verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                  scale: new Cesium.CallbackProperty(function (time, result) {
+                    // t 会随着时间不断变化
+                    const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+                    const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                    return pulse;
+                  }, false)
+                }
+              });
+            }
           }
 
           // 创建红点标记
diff --git a/public/map/components/charts/BarChartMinute.vue b/public/map/components/charts/BarChartMinute.vue
index 091598c..027afca 100644
--- a/public/map/components/charts/BarChartMinute.vue
+++ b/public/map/components/charts/BarChartMinute.vue
@@ -11,12 +11,14 @@ interface Props {
   chartData?: Array<{ name: string; value: number }>
   title?: string
   color?: string
+  magnifyMode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   chartData: () => [],
   title: '',
-  color: '#1296DB' // 默认使用蓝色
+  color: '#1296DB', // 默认使用蓝色
+  magnifyMode: false
 })
 
 // 图表容器引用和实例
@@ -59,7 +61,7 @@ const updateChart = () => {
     grid: {
       left: '1%',
       right: '1%',
-      top: '5%',
+      top: '10%',
       bottom: '1%',
       containLabel: true
     },
@@ -108,7 +110,7 @@ const updateChart = () => {
       {
         type: 'bar',
         data: props.chartData.map(item => item.value),
-        barWidth: 1, // 设置柱子宽度为1px
+        barWidth: props.magnifyMode ? 100 : 25, // 大屏模式下增大柱子宽度
         itemStyle: {
           color: {
             type: 'linear',
@@ -129,6 +131,16 @@ const updateChart = () => {
           },
           borderRadius: [1, 1, 0, 0]
         },
+        label: {
+          show: true,
+          position: 'top',
+          color: 'rgba(255, 255, 255, 0.7)',
+          fontSize: props.magnifyMode ? 32 : 8,
+          formatter: '+{c}',
+          labelLayout: {
+            hideOverlap: true
+          }
+        },
         emphasis: {
           itemStyle: {
             color: props.color // 使用传入的颜色高亮
diff --git a/public/map/components/charts/WaveLineChart.vue b/public/map/components/charts/WaveLineChart.vue
new file mode 100644
index 0000000..475e0d3
--- /dev/null
+++ b/public/map/components/charts/WaveLineChart.vue
@@ -0,0 +1,240 @@
+<template>
+  <div ref="chartContainer" class="wave-line-chart-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import * as echarts from 'echarts'
+
+// 定义组件属性
+interface Props {
+  chartData?: Array<{ name: string; value: number }>
+  title?: string
+  color?: string
+  magnifyMode?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  chartData: () => [],
+  title: '',
+  color: '#1296db',
+  magnifyMode: false
+})
+
+// 图表容器引用和实例
+const chartContainer = ref<HTMLDivElement | null>(null)
+let chartInstance: echarts.ECharts | null = null
+
+// 初始化图表
+const initChart = () => {
+  if (chartContainer.value) {
+    chartInstance = echarts.init(chartContainer.value)
+    updateChart()
+  }
+}
+
+// 更新图表
+const updateChart = () => {
+  if (!chartInstance || !props.chartData.length) return
+
+  // 创建波浪效果的数据点
+  const waveData = props.chartData.map(item => {
+    return {
+      ...item,
+      value: item.value
+    }
+  })
+
+  const option = {
+    title: {
+      // text: props.title,
+      textStyle: {
+        color: '#fff',
+        fontSize: props.magnifyMode ? 24 : 14
+      },
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      borderColor: 'rgba(30, 120, 255, 0.4)',
+      borderWidth: 1,
+      textStyle: {
+        color: '#fff',
+        fontSize: props.magnifyMode ? 20 : 12
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: props.chartData.map(item => item.name),
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: props.magnifyMode ? 18 : 10,
+        rotate: 0,
+        interval: Math.ceil(props.chartData.length / 12), // 减少间隔以显示更多标签
+        formatter: (value: string) => {
+          // 更灵活的时间格式化
+          if (value.includes(':')) {
+            const parts = value.split(':');
+            if (parts.length >= 2) {
+              // 如果是完整的时间格式 HH:mm:ss
+              if (parts[2] && parts[2] === '00') {
+                return parts[0] + ':' + parts[1];
+              }
+              // 如果是 HH:mm 格式
+              return parts[0] + ':' + parts[1];
+            }
+          }
+          return value;
+        },
+        margin: 10
+      }
+    },
+    yAxis: {
+      type: 'value',
+      // 设置 Y 轴最小值略低于数据中的最小值，以提供更好的可视化效果
+      min: (value: any) => {
+        if (props.chartData && props.chartData.length > 0) {
+          const minValue = props.chartData[0].value
+          // 计算一个合适的最小值，略低于实际最小值
+          // const range = value.max - minValue;
+          return minValue; // 最小值不低于0
+        }
+        return undefined;
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        }
+      },
+      axisLabel: {
+        color: 'rgba(255, 255, 255, 0.7)',
+        fontSize: props.magnifyMode ? 18 : 10
+      }
+    },
+    series: [
+      {
+        data: waveData.map(item => item.value),
+        type: 'line',
+        smooth: true,
+        showSymbol: true,
+        symbol: 'circle',
+        symbolSize: props.magnifyMode ? 8 : 4,
+        lineStyle: {
+          color: props.color,
+          width: props.magnifyMode ? 4 : 2
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.color + '80' // 添加透明度
+              },
+              {
+                offset: 1,
+                color: props.color + '00' // 透明
+              }
+            ]
+          }
+        },
+        // 添加波浪效果的特殊配置
+        emphasis: {
+          focus: 'series'
+        },
+        // 显示数据点和数值
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff',
+          fontSize: props.magnifyMode ? 16 : 10,
+          formatter: '{c}',
+          distance: props.magnifyMode ? 10 : 5
+        }
+      },
+      // 添加一个辅助系列来增强波浪视觉效果
+      {
+        data: props.chartData.map(item => item.value),
+        type: 'line',
+        smooth: true,
+        showSymbol: false,
+        lineStyle: {
+          color: props.color + '60',
+          width: props.magnifyMode ? 2 : 1,
+          type: 'dashed'
+        },
+        // 辅助系列不显示数据标签以避免重叠
+        label: {
+          show: false
+        }
+      }
+    ],
+    grid: {
+      left: '1%',
+      right: '1%',
+      top: props.title ? (props.magnifyMode ? '10%' : '15%') : '5%',
+      bottom: '1%',
+      containLabel: true
+    }
+  }
+
+  chartInstance.setOption(option)
+}
+
+// 监听数据变化
+watch(
+  () => props.chartData,
+  () => {
+    updateChart()
+  },
+  { deep: true }
+)
+
+// 窗口大小改变时重绘图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  // 延迟初始化，确保DOM已经完全渲染
+  setTimeout(() => {
+    initChart()
+  }, 200)
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件销毁前清理资源
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+})
+</script>
+
+<style scoped>
+.wave-line-chart-container {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/index.vue b/public/map/index.vue
index 541eddb..16f1391 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -19,13 +19,13 @@
 
     <!-- 港区概览 -->
     <template v-if="activeHeadGroup === 0">
-      <PortOverview :ship-status-data="shipStatusData" :selected-ship="selectedShip" @item-click="handleSwitch" />
+      <PortOverview :ship-status-data="shipStatusData" :shore-power-status-data="shorePowerStatusData"
+        @item-click="handleSwitch" />
     </template>
 
     <!-- 港口岸电使用情况 -->
     <template v-if="activeHeadGroup === 1">
-      <ShorePowerUsage :total-power="totalPower" :fuel-reduction="fuelReduction" :co2-reduction="co2Reduction"
-        :pm25-reduction="pm25Reduction" :nox-reduction="noxReduction" :so2-reduction="so2Reduction" />
+      <ShorePowerUsage />
     </template>
 
     <!-- 港口企业岸电使用 -->
@@ -35,8 +35,7 @@
 
     <!-- 船舶岸电使用情况 -->
     <template v-if="activeHeadGroup === 3">
-      <ShipShorePower :berthing-ships="berthingShips" :shore-power-ships="shorePowerShips"
-        :no-shore-power-ships="noShorePowerShips" :ship-data="shipData" />
+      <ShipShorePower :ship-data="shipStatusData" :selected-ship="selectedShip" @item-click="handleSwitch" />
     </template>
 
     <template v-if="activeHeadGroup === 4">
@@ -141,12 +140,12 @@ const selectHeadGroup = async (value: number) => {
 const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 
 // 总览数据
-const totalPower = ref<number>(857525.45)
-const fuelReduction = ref<number>(108.04)
-const co2Reduction = ref<number>(574542.06)
-const pm25Reduction = ref<number>(1251.99)
-const noxReduction = ref<number>(15521.21)
-const so2Reduction = ref<number>(9004.03)
+// const totalPower = ref<number>(857525.45)
+// const fuelReduction = ref<number>(108.04)
+// const co2Reduction = ref<number>(574542.06)
+// const pm25Reduction = ref<number>(1251.99)
+// const noxReduction = ref<number>(15521.21)
+// const so2Reduction = ref<number>(9004.03)
 
 // 船舶岸电使用情况数据
 const berthingShips = ref<number>(13)
@@ -209,7 +208,7 @@ const handleOverviewClick = () => {
 /* 切换至模型视角 */
 const handleSwitch = (item) => {
   console.log(item)
-  selectedShip.value = item
+  // selectedShip.value = item
   mapComponentRef.value?.switchModelView(item.modelInstance)
 }
 
@@ -477,6 +476,40 @@ const totalPowerDeviceId = computed(() => {
   return [...new Set(ids)]
 })
 
+// 从子组件获取的岸电箱状态数据
+const shorePowerStatusData = computed(() => {
+  if (!mapComponentRef.value || !mapComponentRef.value.dataWithModels) {
+    return []
+  }
+
+  // 过滤出轮船类的数据
+  return mapComponentRef.value.dataWithModels
+    .filter(item => item.modelType === 'electrical_box')
+    .map((item, index) => {
+      // 解析数据中的状态信息
+      let status = ['正常'] // 默认状态
+      try {
+        if (item.data && typeof item.data === 'string') {
+          const dataObj = JSON.parse(item.data)
+          // 根据实际数据结构提取状态信息
+          // 这里假设dataObj中有status字段，如果没有则使用默认值
+          if (dataObj.status) {
+            status = Array.isArray(dataObj.status) ? dataObj.status : [dataObj.status]
+          }
+        } else if (item.data && item.data.status) {
+          status = Array.isArray(item.data.status) ? item.data.status : [item.data.status]
+        }
+      } catch (error) {
+        console.error('解析船舶状态失败:', error)
+      }
+
+      return {
+        id: item.id || index + 1,
+        ...item
+      }
+    })
+})
+
 // 从子组件获取的船舶数据
 const shipStatusData = computed(() => {
   if (!mapComponentRef.value || !mapComponentRef.value.dataWithModels) {
@@ -995,7 +1028,7 @@ const shipStatusData = computed(() => {
 .overview-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 6px;
+  gap: 2px;
   padding: 2px;
   height: 100%;
 }
@@ -1005,22 +1038,22 @@ const shipStatusData = computed(() => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 4px;
+  // padding: 4px;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 8px;
 }
 
 .overview-value {
-  font-size: 18px;
+  font-size: 24px;
   font-weight: bold;
   color: #1296db;
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-  margin-bottom: 5px;
+  margin-bottom: 0px;
 }
 
 .overview-label {
   text-align: center;
-  font-size: 12px;
+  font-size: 14px;
   color: #ccc;
 }
 
diff --git a/src/api/shorepower/map/index.ts b/src/api/shorepower/map/index.ts
index 646eb4d..0b8de6a 100644
--- a/src/api/shorepower/map/index.ts
+++ b/src/api/shorepower/map/index.ts
@@ -73,5 +73,86 @@ export const MapApi = {
       url: `/energy/device/getDeviceStatusByIds?ids=${ids.join(',')}`,
       // params
     })
-  }
+  },
+
+  // 查询全部设备实时数据
+  getRealtimeAllData: async (params: any) => {
+    return await request.get({
+      url: `/energy/measure-data-realtime/getAll`,
+      params
+    })
+  },
+
+  // 查询多个设备实时数据
+  getRealtimeDataByIdList: async (params: any) => {
+    return await request.get({
+      url: `/energy/measure-data-realtime/getByIdList`,
+      params
+    })
+  },
+
+  // 查询多个设备年数据
+  getYearDataByIdList: async (params: any) => {
+    return await request.get({
+      url: `/energy/select/year/getByIdList`,
+      params
+    })
+  },
+
+  // 查询多个设备周数据
+  getWeekDataByIdList: async (params: any) => {
+    return await request.get({
+      url: `/energy/select/week/getByIdList`,
+      params
+    })
+  },
+
+  // 查询多个设备月数据
+  getMonthDataByIdList: async (params: any) => {
+    return await request.get({
+      url: `/energy/select/month/getByIdList`,
+      params
+    })
+  },
+
+  // 查询多个设备日数据
+  getDayDataByIdList: async (params: any) => {
+    return await request.get({
+      url: `/energy/select/day/getByIdList`,
+      params
+    })
+  },
+  // 查询所有船舶和岸电设备ID和名称列表
+  getBerthIdAndNameList: async () => {
+    return await request.get({
+      url: `/shorepower/berth/expand/selectIdAndNameList`,
+    })
+  },
+
+  getShorepowerIdAndNameList: async () => {
+    return await request.get({
+      url: `/shorepower/berth/expand/selectIdAndNameList`,
+    })
+  },
+  // 查询所有码头和名称列表
+  getDockIdAndNameList: async () => {
+    return await request.get({
+      url: `/shorepower/dock/expand/selectIdAndNameList`,
+    })
+  },
+
+  // 查询所有起运港和到达港和名称列表
+  getHarborDistrictIdAndNameList: async () => {
+    return await request.get({
+      url: `/shorepower/harbor-district/expand/selectIdAndNameList`,
+    })
+  },
+
+  getByStartAndEndTimeAndTimeType: async (params: any) => {
+    return await request.get({
+      url: `/energy/select/getByStartAndEndTimeAndTimeType`,
+      params
+    })
+  },
+
 }
diff --git a/src/plugins/elementPlus/index.ts b/src/plugins/elementPlus/index.ts
index 0ae2a8b..226f721 100644
--- a/src/plugins/elementPlus/index.ts
+++ b/src/plugins/elementPlus/index.ts
@@ -1,10 +1,10 @@
 import type { App } from 'vue'
 // 需要全局引入一些组件，如ElScrollbar，不然一些下拉项样式有问题
-import { ElLoading, ElScrollbar, ElButton } from 'element-plus'
+import { ElLoading, ElScrollbar, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElTable, ElTableColumn, ElPagination, ElCol, ElRow } from 'element-plus'
 
 const plugins = [ElLoading]
 
-const components = [ElScrollbar, ElButton]
+const components = [ElScrollbar, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElTable, ElTableColumn, ElPagination, ElCol, ElRow]
 
 export const setupElementPlus = (app: App<Element>) => {
   plugins.forEach((plugin) => {