diff --git a/.env.dev b/.env.dev
index 4436bae..f9e9a5f 100644
--- a/.env.dev
+++ b/.env.dev
@@ -22,7 +22,7 @@ VITE_DROP_CONSOLE=false
 VITE_SOURCEMAP=true
 
 # 打包路径
-VITE_BASE_PATH='http://server.ayaojies.com.cn:48080'
+VITE_BASE_PATH='http://106.118.88.15:48080'
 
 # 输出路径
 VITE_OUT_DIR=dist
diff --git a/.env.local b/.env.local
index 4cfb0f3..2662574 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://server.ayaojies.com.cn:48080'
+VITE_BASE_URL='http://106.118.88.15:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
diff --git a/.env.prod b/.env.prod
index 7bf2746..3eee7d1 100644
--- a/.env.prod
+++ b/.env.prod
@@ -4,7 +4,7 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://server.ayaojies.com.cn:48080'
+VITE_BASE_URL='http://106.118.88.15:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/.env.stage b/.env.stage
index 380e3ca..a910ed0 100644
--- a/.env.stage
+++ b/.env.stage
@@ -4,7 +4,7 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://server.ayaojies.com.cn:48080'
+VITE_BASE_URL='http://106.118.88.15:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/.env.test b/.env.test
index 2364857..3cdb19d 100644
--- a/.env.test
+++ b/.env.test
@@ -4,7 +4,7 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://server.ayaojies.com.cn:48080'
+VITE_BASE_URL='http://106.118.88.15:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/.eslintrc.js b/.eslintrc.js
index b28255c..496cfb9 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -70,6 +70,7 @@ module.exports = defineConfig({
     'vue/no-v-html': 'off',
     'prettier/prettier': 'off', // 芋艿：默认关闭 prettier 的 ESLint 校验，因为我们使用的是 IDE 的 Prettier 插件
     '@unocss/order': 'off', // 芋艿：禁用 unocss 【css】顺序的提示，因为暂时不需要这么严格，警告也有点繁琐
-    '@unocss/order-attributify': 'off' // 芋艿：禁用 unocss 【属性】顺序的提示，因为暂时不需要这么严格，警告也有点繁琐
+    '@unocss/order-attributify': 'off', // 芋艿：禁用 unocss 【属性】顺序的提示，因为暂时不需要这么严格，警告也有点繁琐
+    'vue/first-attribute-linebreak': 'off' // 禁用属性换行检查，解决与格式化工具的冲突
   }
 })
diff --git a/public.zip b/public.zip
deleted file mode 100644
index 467acd8..0000000
Binary files a/public.zip and /dev/null differ
diff --git a/public/img/未连接.png b/public/img/未连接.png
new file mode 100644
index 0000000..5c8736b
Binary files /dev/null and b/public/img/未连接.png differ
diff --git a/public/map/.index.vue.swp b/public/map/.index.vue.swp
deleted file mode 100644
index 05064c4..0000000
Binary files a/public/map/.index.vue.swp and /dev/null differ
diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
new file mode 100644
index 0000000..e7f88c9
--- /dev/null
+++ b/public/map/components/CompanyShorePower.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="company-shore-power">
+    <div class="left" style="width: 1000px;">
+      <!-- 码头信息卡片 -->
+      <div class="card digital-twin-card--deep-blue">
+        <div class="card-title" 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>
+          <!-- <div>
+            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+              format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
+          </div> -->
+
+        </div>
+
+        <div class="card-content">
+          <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">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
+            </div>
+            <div class="overview-grid">
+              <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
+                @click="showShorePowerHistory(berth)">
+                <div class="overview-value">{{ berth.measureValue?.toFixed(2)
+                  || 0 }}</div>
+
+                <div class="overview-label">{{ berth.name }}</div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ship-history-dialog v-if="historyVisible.visible" v-model="historyVisible.visible"
+      :ship-param="historyVisible.searchParams" :realtime-device-data="realtimeDeviceData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MapApi } from "@/api/shorepower/map";
+import ShipHistoryDialog from './ShipHistoryDialog.vue';
+import { RealtimeDeviceData } from '@/types/shorepower';
+// 定义组件属性
+interface ChartDataItem {
+  name: string;
+  value?: number;
+  measureValue?: number;
+  children?: ChartDataItem[];
+}
+
+const historyVisible = ref({
+  visible: false,
+  searchParams: {
+    shipId: 0 as number | null,
+    ids: [] as number[] | null,
+    type: 1 as number
+  }
+})
+
+// 计算总量的函数
+const calculateTotal = (children?: ChartDataItem[]) => {
+  if (!children || children.length === 0) return 0;
+  return children.reduce((total, item) => {
+    return total + (item.measureValue || 0);
+  }, 0);
+};
+
+// 显示岸电箱历史记录
+const showShorePowerHistory = (berth: ChartDataItem) => {
+  console.log(berth)
+  // console.log('shorepower', shorepower)
+  // currentShorePower.value = shorepower
+  /* shorePowerHistoryVisible.value = {
+    visible: true,
+    shorePowerId: shorepower.id || 0
+  } */
+  historyVisible.value = {
+    visible: true,
+    searchParams: {
+      shipId: null,
+      ids: [berth.id],
+      type: 4,
+    }
+  }
+}
+
+interface Props {
+  companyComparisonData?: ChartDataItem[];
+  realtimeDeviceData: RealtimeDeviceData[];
+}
+
+const props = defineProps<Props>()
+const companyComparisonData = ref<ChartDataItem[]>([])
+const handleGetBuildData = async () => {
+  const dockList = await MapApi.getDockIdAndNameList()
+  const berthList = await MapApi.getBerthIdAndNameList()
+  const buildData = dockList.map(dock => ({
+    ...dock,
+    children: berthList.filter(berth => berth.dockId === dock.id).map(berth => ({
+      ...berth,
+      ...props.realtimeDeviceData.find(item => (item.id === berth.id) && (item.deviceCode.includes('Kwh')))
+    }))
+  }))
+  console.log('buildData', buildData)
+  console.log('props.realtimeDeviceData', props.realtimeDeviceData)
+  companyComparisonData.value = buildData
+  /* MapApi.getBerthIdAndNameList().then(res => {
+    console.log(res)
+    const buildData = res.map(item => ({
+      ...item,
+      children: props.realtimeDeviceData.filter(item => item.id === item.id)
+    }))
+
+  }) */
+}
+watch(() => props.realtimeDeviceData, (newVal) => {
+  handleGetBuildData()
+})
+onMounted(() => {
+  // console.log(props.realtimeDeviceData)
+  handleGetBuildData()
+
+})
+</script>
+
+<style scoped>
+.company-shore-power {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+
+.left {
+  /* display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 10px; */
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-content {
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  padding-bottom: 50px;
+  overflow-y: auto;
+}
+
+/* 总览网格样式 */
+.overview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 8px;
+  padding: 4px;
+  height: 100%;
+}
+
+.overview-item {
+  cursor: pointer;
+  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;
+}
+
+/* 自定义滚动条样式 */
+.card-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.card-content::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.card-content::-webkit-scrollbar-thumb {
+  background: rgba(17, 138, 237, 0.7);
+  border-radius: 3px;
+}
+
+.card-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(17, 138, 237, 1);
+}
+</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/PieChart.vue b/public/map/components/PieChart.vue
deleted file mode 100644
index e26879c..0000000
--- a/public/map/components/PieChart.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div ref="chartContainer" class="pie-chart-container"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import * as echarts from 'echarts'
-
-// 定义组件props
-interface Props {
-  chartData?: Array<{ name: string; value: number }>
-  title?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  chartData: () => [],
-  title: ''
-})
-
-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) return
-
-  const option = {
-    title: {
-      // text: props.title,
-      left: 'center',
-      textStyle: {
-        color: '#FFF'
-      }
-    },
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      show: true,
-      type: 'scroll',       // 👈 开启可滚动图例
-      orient: 'vertical',   // 👈 垂直排列
-      right: 10,
-      top: 'center',
-      textStyle: {
-        color: '#FFF'
-      }
-    },
-    series: [
-      {
-        name: props.title,
-        type: 'pie',
-        radius: ['30%', '50%'],
-        center: ['35%', '50%'], // 👈 左移饼图避免与图例重叠
-        avoidLabelOverlap: true,
-        itemStyle: {
-          borderRadius: 0,
-          borderColor: '#fff',
-          borderWidth: 1
-        },
-        label: {
-          show: true,
-          formatter: '{b}\n{d}%',
-          fontSize: 10
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 14,
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: true
-        },
-        data: props.chartData
-      }
-    ]
-  }
-
-  chartInstance.setOption(option, true)
-}
-
-// 窗口大小改变时重置图表大小
-const handleResize = () => {
-  if (chartInstance) {
-    chartInstance.resize()
-  }
-}
-
-// 监听数据变化
-watch(
-  () => props.chartData,
-  () => {
-    updateChart()
-  },
-  { deep: true }
-)
-
-// 初始化和销毁
-onMounted(() => {
-  initChart()
-  window.addEventListener('resize', handleResize)
-})
-
-onBeforeUnmount(() => {
-  if (chartInstance) {
-    chartInstance.dispose()
-  }
-  window.removeEventListener('resize', handleResize)
-})
-</script>
-
-<style scoped>
-.pie-chart-container {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
new file mode 100644
index 0000000..6250084
--- /dev/null
+++ b/public/map/components/PortOverview.vue
@@ -0,0 +1,506 @@
+<template>
+  <div class="port-overview">
+    <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="handlStoreSearch" />
+          </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="shorepower in filteredShorePowerList" :key="shorepower.id" class="ship-table-row"
+                  @click="handleSelectShorePower(shorepower)">
+                  <div class="ship-table-column ship-name">
+                    <div class="ship-icon">⚡</div>
+                    <span class="ship-name-text">{{ shorepower.name }}</span>
+                  </div>
+                  <div class="ship-table-column ship-status">
+                    <div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)">
+                      {{ shorepower.storePowerStatus }}
+                    </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>
+            </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="handleSelectItem(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="ship-table-column ship-status">
+                    <div class="status-tag" :class="getStatusClass(ship.shipStatus)">
+                      {{ ship.shipStatus }}
+                    </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="showShipHistory(ship)">查看</el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right" style="width: 20%">
+      <div v-if="shipSelectedItem && show_type === 'ship'" 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">{{ shipSelectedItem.shipBasicInfo.name + '-' + shipSelectedItem.shipBasicInfo.nameEn
+                  }}</span>
+              </div>
+              <!-- <div class="detail-item">
+                <span class="label">英文船名:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.nameEn }}</span>
+              </div> -->
+              <!-- <div class="detail-item">
+                <span class="label">船舶呼号:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.callSign }}</span>
+              </div> -->
+              <div class="detail-item">
+                <span class="label">长度:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.length }} 米</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">宽度:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.width }} 米</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">吨位:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.tonnage }} 吨</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">满载吃水深度:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.fullLoadDraft }} 米</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">电压:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.voltageDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">电流:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.currentDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">频率:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.frequencyDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">靠泊状态:</span>
+                <span class="value">{{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.status,
+                  SHORE_POWER_STATUS,
+                ) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">靠泊类型:</span>
+                <span class="value">{{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.type, BERTH_TYPE)
+                  }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">靠泊时间:</span>
+                <span class="value">{{ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualBerthTime) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前状态:</span>
+                <span class="value">{{ shipSelectedItem.shipStatus }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
+                <span class="label">岸电使用时长:</span>
+                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useTime }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
+                <span class="label">岸电使用用量:</span>
+                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useValue }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason != 0" class="detail-item">
+                <span class="label">未使用岸电原因:</span>
+                <span class="value">{{ getOperationTypeLabel(shipSelectedItem?.applyInfo?.reason,
+                  UNUSED_SHORE_POWER_REASON) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">岸电联系人:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">联系方式:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
+              </div>
+              <!-- <div class="detail-item">
+                <span class="label">航运单位:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shippingCompany }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">岸电联系人:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">联系方式:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">船检登记号:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.inspectionNo }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">创建时间:</span>
+                <span class="value">{{ new Date(shipSelectedItem.shipBasicInfo.createTime).toLocaleString() }}</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>
+          </div>
+        </div> -->
+      </div>
+      <div v-if="shorepowerSelectedItem && 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">{{ shorepowerSelectedItem?.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">位置:</span>
+                <span class="value">{{ shorepowerSelectedItem?.position }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">电压:</span>
+                <span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.voltage }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">频率:</span>
+                <span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.frequency }} </span>
+              </div>
+              <div class="detail-item">
+                <span class="label">容量:</span>
+                <span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.capacity }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前电压:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.voltageDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前电流:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.currentDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前频率:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.frequencyDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前总用量:</span>
+                <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.totalPowerDeviceId,
+                  'measureValue') }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前状态:</span>
+                <span class="value">{{ shorepowerSelectedItem.storePowerStatus }}</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>
+        </div>
+        <div class="card-content">
+          <div class="no-selection">请选择设备以查看详细信息</div>
+        </div>
+      </div> -->
+    </div>
+    <ShipHistoryDialog v-model="shipHistoryVisible.visible" :ship-param="shipHistoryVisible.searchParams"
+      :realtime-device-data="realtimeDeviceData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ShipHistoryDialog from './ShipHistoryDialog.vue'
+import { MapApi } from "@/api/shorepower/map";
+import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower';
+import { BERTH_TYPE, getOperationTypeLabel, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable';
+import { formatDuration, formatTimestamp, getValueById, showStatus } from './utils';
+// 定义组件属性
+type ShipItem = ShipRespVo & { id: string; modelInstance?: any; };
+
+interface Props {
+  shipStatusData: ShipItem[];
+  shorePowerStatusData: ShipItem[];
+  realtimeDeviceData: RealtimeDeviceData[];
+  shorePowerList: (ShorePowerBerth & { position: string; })[];
+  shipDataList: ShipRespVo[];
+  // selectedItem: ShipItem | null;
+}
+
+const props = defineProps<Props>()
+
+// 搜索关键字
+const searchKeyword = ref('')
+const storeSearchKeyword = ref('')
+const show_type = ref('ship')
+const shipSelectedItem = ref<ShipItem | null>(null)
+const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null)
+
+
+const shipHistoryVisible = ref({
+  visible: false,
+  searchParams: {
+    shipId: 0 as number | null,
+    ids: [] as number[] | null,
+    type: 1 as number
+  }
+})
+const currentShorePower = ref<ShorePowerBerth | null>(null)
+const currentShip = ref<ShipItem | null>(null)
+
+// const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
+
+// 过滤后的船舶数据
+const filteredShipStatusData = computed(() => {
+  if (!searchKeyword.value) {
+    return props.shipDataList
+  }
+  return props.shipDataList.filter(ship =>
+    ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  )
+})
+
+// 过滤后的岸电箱数据
+const filteredShorePowerList = computed(() => {
+  if (!storeSearchKeyword.value) {
+    return props.shorePowerList
+  }
+  return props.shorePowerList.filter(shorepower =>
+    shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
+  )
+})
+
+const handleSelectItem = async (item: ShipRespVo) => {
+  show_type.value = 'ship'
+  const deviceId = item.shorePower?.totalPowerDeviceId;
+  const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId })
+  console.log(res)
+  shipSelectedItem.value = {
+    ...item,
+    shorePowerEquipment: {
+      ...item.shorePowerEquipment,
+      'measureValue': res[0].measureValue || 'N/A',
+    }
+  }
+  emit('item-click', {
+    type: 'ship',
+    item: item
+  })
+}
+
+// 处理搜索输入
+const handleSearch = () => {
+  // 输入处理逻辑（如果需要额外处理可以在这里添加）
+}
+
+// 处理岸电箱搜索输入
+const handlStoreSearch = () => {
+  // 输入处理逻辑（如果需要额外处理可以在这里添加）
+}
+
+// 显示岸电箱历史记录
+const showShorePowerHistory = (shorepower: ShorePowerBerth) => {
+  console.log('shorepower', shorepower)
+  currentShorePower.value = shorepower
+  /* shorePowerHistoryVisible.value = {
+    visible: true,
+    shorePowerId: shorepower.id || 0
+  } */
+  shipHistoryVisible.value = {
+    visible: true,
+    searchParams: {
+      shipId: null,
+      ids: [shorepower.id],
+      type: 5,
+    }
+  }
+}
+
+// 显示船舶历史记录
+const showShipHistory = (ship: ShipItem) => {
+  console.log('ship', ship)
+  currentShip.value = ship
+  shipHistoryVisible.value = {
+    visible: true,
+    searchParams: {
+      shipId: ship.shipBasicInfo.id,
+      ids: null,
+      type: 1,
+    }
+  }
+}
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'switch-ship', ship: ShipItem): void;
+  (e: 'item-click', item: any): void;
+  // handleSelectItem(ship)
+
+}>()
+
+// 处理船舶选择
+const handleSwitch = (ship: ShipItem, type: string) => {
+  // console.log(ship)
+  show_type.value = type
+  emit('switch-ship', ship)
+  handleSelectItem(ship)
+}
+
+const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => {
+  show_type.value = 'shorepower'
+  // selectedItem.value = shorepower
+  shorepowerSelectedItem.value = shorepower
+  emit('item-click', {
+    type: 'shorepower_box',
+    item: shorepower
+  })
+  // const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId })
+  // console.log('voltageDeviceId', data)
+}
+
+const getStatusClass = (status: string | undefined) => {
+  switch (status) {
+    case '正常':
+      return 'status-normal'
+    case '在线':
+      return 'status-normal'
+    case '空闲':
+      return 'status-idle'
+    case '故障':
+      return 'status-fault'
+    case '超容':
+      return 'status-maintenance'
+    case '异常':
+      return 'status-abnormal'
+    case '维修中':
+      return 'status-maintenance'
+    case '岸电使用中':
+      return 'status-shorepower'
+    // case '岸电故障':
+    //   return 'status-fault'
+    default:
+      return 'status-default'
+  }
+}
+
+watch(() => props.shipDataList, (newVal) => {
+  console.log('newVal', newVal)
+})
+
+onMounted(() => {
+  // console.log(props.shorePowerStatusData)
+})
+</script>
+
+<style scoped>
+.port-overview {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+
+.right-two-row {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+
+.search-container {
+  height: 100%;
+  width: 200px;
+  border-radius: 4px;
+  border: 1px solid rgb(10, 130, 170);
+  color: #FFF;
+  padding: 0 10px;
+  margin-bottom: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/ShipHistoryDialog.vue b/public/map/components/ShipHistoryDialog.vue
new file mode 100644
index 0000000..5bcccfd
--- /dev/null
+++ b/public/map/components/ShipHistoryDialog.vue
@@ -0,0 +1,426 @@
+<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-select v-model="berthingQueryParams.type" style="width: 120px" placeholder="请选择类型">
+            <el-option v-for="item in FACILITY_TYPE" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <!-- <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="handleShorePowerConnectionSearch">搜索</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> -->
+
+
+    <!-- <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 { MapApi } from "@/api/shorepower/map";
+import {
+  ElDialog,
+  ElTabs,
+  ElTabPane,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElDatePicker,
+  ElButton,
+  ElTable,
+  ElTableColumn,
+  ElPagination
+} from 'element-plus'
+import { CARGO_CATEGORY, FACILITY_TYPE, HARBOR_DISTRICT, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable';
+import { formatDuration, formatTimestamp, showStatus } from './utils';
+import { RealtimeDeviceData } from '@/types/shorepower';
+
+// 定义组件属性
+interface Props {
+  modelValue: boolean
+  berthingData?: any[]
+  shipParam?: { type: number, ids: number[] | null, shipId: number | null }
+  shorePowerConnectionData?: any[]
+  realtimeDeviceData: RealtimeDeviceData[];
+}
+
+// 定义事件
+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,
+  shipId: 0,
+  berthingData: () => [],
+  shorePowerConnectionData: () => []
+})
+
+// 响应式数据
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// 船舶靠泊历史记录相关数据
+const berthingQueryParams = ref({
+  // keyword: '',
+  startTime: '',
+  endTime: '',
+  ids: null as number[] | null,
+  shipId: null as number | null,
+  type: 1 as number | null,
+  pageNo: 1,
+  pageSize: 10
+})
+
+const berthingDateRange = ref<[string, string]>(['', ''])
+const berthingLoading = ref(false)
+const berthingTotal = ref(0)
+
+// 船舶靠泊历史记录表格数据
+const berthingTableData = ref<any[]>([])
+
+// 船舶靠泊历史记录表格列
+const berthingColumns = ref([
+  {
+    prop: 'shipBasicInfo',
+    label: '船舶名称-英文名称',
+    width: 200,
+    formatter: (row) => {
+      const name = row.shipBasicInfo?.name || '';
+      const nameEn = row.shipBasicInfo?.nameEn || '';
+      return `${name}${name && nameEn ? '-' : ''}${nameEn}`;
+    }
+  },
+  { prop: 'shipBasicInfo.length', label: '船长', width: 200 },
+  { prop: 'shipBasicInfo.width', label: '船宽', width: 150 },
+  { prop: 'shipBasicInfo.tonnage', label: '最大载重', width: 150 },
+  { prop: 'shipBasicInfo.voyage', label: '航线', width: 150 },
+  { prop: 'applyInfo.departureHarborDistrict', label: '起运港', width: 150 },
+  { prop: 'arrivalHarborDistrict', label: '到达港', width: 150 },
+  { prop: 'applyInfo.operationType', label: '靠泊类型', width: 150, formatter: (_row, _column, cellValue) => getOperationTypeLabel(cellValue, OPERATION_TYPE) },
+  { prop: '', label: '作业内容', width: 180 },
+  /* {
+    prop: 'applyInfo.loadingCargoCategory', label: '货物类型', width: 180,
+    formatter: (row) => {
+      if (row.applyInfo.operationType === 1) {
+        return getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY);
+      } else if (row.applyInfo.operationType === 2) {
+        return row.applyInfo.unloadingCargoCategory;
+      } else if (row.applyInfo.operationType === 3) {
+        return '装' + row.applyInfo.loadingCargoCategory + '-卸' + row.applyInfo.unloadingCargoCategory
+      }
+      return '';
+    }
+  }, */
+
+  {
+    prop: 'applyInfo.loadingCargoCategory', label: '货物名称', width: 180,
+    formatter: (row) => {
+      if (row.applyInfo.operationType === 1) {
+        const label = getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY);
+        return label;
+      } else if (row.applyInfo.operationType === 2) {
+        const label = getOperationTypeLabel(row.applyInfo.unloadingCargoCategory, CARGO_CATEGORY);
+        return label;
+      } else if (row.applyInfo.operationType === 3) {
+        return '装' + getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY) + '-卸' + getOperationTypeLabel(row.applyInfo.unloadingCargoCategory, CARGO_CATEGORY)
+      }
+      return '';
+    }
+  },
+  {
+    prop: 'applyInfo.loadingCargoCategory', label: '货物吨数', width: 180,
+    formatter: (row) => {
+      if (row.applyInfo.operationType === 1) {
+        return row.applyInfo.loadingCargoTonnage;
+      } else if (row.applyInfo.operationType === 2) {
+        return row.applyInfo.unloadingCargoTonnage;
+      } else if (row.applyInfo.operationType === 3) {
+        return '装' + row.applyInfo.loadingCargoTonnage + '-卸' + row.applyInfo.unloadingCargoTonnage
+      }
+      return '';
+    }
+  },
+  { prop: 'usageRecordInfo.actualBerthTime', label: '靠泊时间', width: 180, formatter: (row) => formatTimestamp(row.usageRecordInfo.actualBerthTime) },
+  { prop: 'usageRecordInfo.actualDepartureTime', label: '离泊时间', width: 180, formatter: (row) => formatTimestamp(row.usageRecordInfo.actualDepartureTime) },
+  {
+    prop: 'useStatus.status', label: '岸电使用情况', width: 180,
+    formatter: (row) => {
+      const status = showStatus(row, props.realtimeDeviceData);
+      return status?.status || '';
+    }
+  },
+
+])
+
+const shorePowerConnectionTotal = ref(0)
+
+// 处理日期变化
+const handleBerthingDateChange = (val: [string, string]) => {
+  if (val && val.length === 2) {
+    berthingQueryParams.value.startTime = val[0] + ' 00:00:00'
+    berthingQueryParams.value.endTime = val[1] + ' 23:59:59'
+  } else {
+    berthingQueryParams.value.startTime = ''
+    berthingQueryParams.value.endTime = ''
+  }
+  handleShorePowerConnectionSearch()
+}
+
+// 处理关闭
+const handleClose = () => {
+  berthingQueryParams.value.ids = null
+  berthingQueryParams.value.shipId = null
+  berthingQueryParams.value.type = 1
+  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
+  handleShorePowerConnectionSearch()
+}
+
+
+const handleBerthingSizeChange = (val: number) => {
+  berthingQueryParams.value.pageSize = val
+  berthingQueryParams.value.pageNo = 1
+  handleShorePowerConnectionSearch()
+}
+
+const handleBerthingCurrentChange = (val: number) => {
+  berthingQueryParams.value.pageNo = val
+  handleShorePowerConnectionSearch()
+}
+
+// 船舶连接岸电箱历史记录相关方法
+const handleShorePowerConnectionSearch = () => {
+  // const 
+  const params = {
+    // shipId: berthingQueryParams.value.shipId,
+    // ids: berthingQueryParams.value.ids,
+    ...(berthingQueryParams.value.ids ? { ids: berthingQueryParams.value.ids } : {}),
+    ...(berthingQueryParams.value.shipId ? { shipId: berthingQueryParams.value.shipId } : {}),
+    type: berthingQueryParams.value.type,
+    pageNo: 1,
+    pageSize: 9999 // 请求足够多的数据，以便在前端进行筛选和分页
+  }
+  handleGetShipHistortyList(params)
+  // 发送搜索事件给父组件
+  // emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
+}
+
+// 监听数据变化并更新总数
+watch(
+  () => props.berthingData,
+  (newData) => {
+    berthingTotal.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.shorePowerConnectionData,
+  (newData) => {
+    shorePowerConnectionTotal.value = newData?.length || 0
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.shipParam,
+  (newShipParam) => {
+    if (newShipParam) {
+      // 当船舶ID变化时，触发搜索
+      berthingTableData.value = []
+      if (newShipParam.shipId) {
+        berthingQueryParams.value.shipId = newShipParam.shipId
+      } else {
+        berthingQueryParams.value.shipId = null
+      }
+      if (newShipParam.ids && newShipParam.ids.length > 0) {
+        berthingQueryParams.value.ids = newShipParam.ids
+      } else {
+        berthingQueryParams.value.ids = null
+      }
+      berthingQueryParams.value.type = newShipParam.type
+      // handleGetShipHistortyList()
+      handleShorePowerConnectionSearch()
+    }
+  }
+)
+const handleGetShipHistortyList = async (param) => {
+  console.log('handleGetShipHistortyList', param)
+  if (!param) return;
+  // try {
+  const res = await MapApi.getShipHistoryPage({
+    /* shipId: param.id, // 将字符串转换为数字
+    pageNo: 1,
+    pageSize: 10,
+    type: param.type, */
+    // ids: [parseInt(id, 10)]
+    ...param
+  })
+  console.log(res);
+
+  // 本地日期筛选逻辑
+  let filteredList = [...res.list];
+  if (berthingQueryParams.value.startTime || berthingQueryParams.value.endTime) {
+    filteredList = filteredList.filter(item => {
+      const berthTime = item.usageRecordInfo?.actualBerthTime;
+      if (!berthTime) return false;
+
+      const berthTimestamp = new Date(berthTime).getTime();
+      const startTime = berthingQueryParams.value.startTime ? new Date(berthingQueryParams.value.startTime).getTime() : 0;
+      const endTime = berthingQueryParams.value.endTime ? new Date(berthingQueryParams.value.endTime).getTime() : Infinity;
+
+      // 检查靠泊时间是否在筛选范围内
+      if (berthTimestamp >= startTime && berthTimestamp <= endTime) {
+        return true;
+      }
+
+      // 如果有离泊时间，也检查离泊时间是否在筛选范围内
+      if (item.usageRecordInfo?.actualDepartureTime) {
+        const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
+        if (departureTimestamp >= startTime && departureTimestamp <= endTime) {
+          return true;
+        }
+      }
+
+      // 检查筛选范围是否与靠泊-离泊时间段有重叠
+      if (item.usageRecordInfo?.actualDepartureTime) {
+        const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
+        if (berthTimestamp <= endTime && departureTimestamp >= startTime) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }
+
+  // 前端分页逻辑
+  const totalFiltered = filteredList.length;
+  const pageNo = berthingQueryParams.value.pageNo;
+  const pageSize = berthingQueryParams.value.pageSize;
+  const startIndex = (pageNo - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedList = filteredList.slice(startIndex, endIndex);
+  const harborDistructList = await HARBOR_DISTRICT()
+  const buildData = await Promise.all(paginatedList.map(async item => ({
+    ...item,
+    arrivalHarborDistrict: getOperationTypeLabel(item.applyInfo.arrivalHarborDistrict, harborDistructList),
+  })))
+  berthingTableData.value = buildData
+  berthingTotal.value = totalFiltered
+}
+
+onMounted(() => {
+  console.log('页面加载了！')
+  // console.log('props.shipId', props.shipId)
+})
+</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
new file mode 100644
index 0000000..9d767a3
--- /dev/null
+++ b/public/map/components/ShipShorePower.vue
@@ -0,0 +1,1356 @@
+<template>
+  <div class="ship-shore-power">
+    <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" />
+          <span class="title-text">概览</span>
+        </div>
+        <div class="card-content">
+          <div class="overview-grid">
+            <div class="overview-item">
+              <div class="overview-value">{{ berthingShips }}</div>
+              <div class="overview-label">在泊船舶数量</div>
+            </div>
+            <div class="overview-item">
+              <div class="overview-value">{{ shorePowerShips }}</div>
+              <div class="overview-label">使用岸电船舶数量</div>
+            </div>
+            <div class="overview-item">
+              <div class="overview-value">{{ noShorePowerShips }}</div>
+              <div class="overview-label">未使用岸电船舶数量</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <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">
+            <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">
+            <!-- 船舶代理信息 -->
+            <h3>船舶代理信息</h3>
+            <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>
+
+            <!-- 航行计划信息 -->
+            <h3>航行计划信息</h3>
+            <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>{{ 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>{{ findNameById(selectedShip.applyInfo?.arrivalDock, dockIdAndNameList) }}</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>{{ 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>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 货物信息 -->
+            <h3>货物信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="装货/卸货:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.operationType, OPERATION_TYPE) || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物类型（装货）:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.loadingCargoCategory, CARGO_CATEGORY) || '-'
+                    }}</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-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物类型(卸货):">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.unloadingCargoCategory, CARGO_CATEGORY) || '-'
+                    }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="货物名称(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="货物吨数(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 岸电申请状态 -->
+            <h3>岸电申请状态</h3>
+            <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" v-if="selectedShip.applyInfo?.reason !== 0">
+                <el-form-item label="未使用岸电原因:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.reason, UNUSED_SHORE_POWER_REASON) || '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="申请状态:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.status, APPLY_STATUS) || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="内贸/外贸:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.tradeType, TRADE_TYPE) || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 其他信息 -->
+            <h3>其他信息</h3>
+            <el-row :gutter="20">
+              <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">
+            <!-- 用电时间信息 -->
+            <h3>用电时间信息</h3>
+            <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>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</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>
+
+            <!-- 电量读数信息 -->
+            <h3>电量读数信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电开始时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电开始时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电结束时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电结束时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 操作人员信息 -->
+            <h3>操作人员信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电开始时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电开始时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="用电结束时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="用电结束时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 状态信息 -->
+            <h3>状态信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="作业单状态:">
+                  <span>{{ getOperationTypeLabel(selectedShip.usageRecordInfo?.status, WORK_STATUS) || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 关联信息 -->
+            <h3>其他信息</h3>
+            <!-- <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?.shipId || '-' }}</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-row>
+          </el-form>
+        </el-tab-pane>
+        <el-tab-pane label="船舶基础信息" name="shipBasicInfo">
+          <el-form :model="selectedShip.shipBasicInfo" label-width="200px">
+            <!-- 船舶识别信息 -->
+            <h3>船舶识别信息</h3>
+            <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?.callSign || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="船检登记号:">
+                  <span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 船舶技术参数 -->
+            <h3>船舶技术参数</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船舶长度:">
+                  <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+              <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-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="船舶吨位:">
+                  <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
+                  }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="满载吃水深度:">
+                  <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
+                    selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 联系信息 -->
+            <h3>联系信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="岸电负责人:">
+                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="联系方式:">
+                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 运营信息 -->
+            <h3>运营信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="航运单位名称:">
+                  <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <!-- 系统信息 -->
+            <h3>系统信息</h3>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="创建时间:">
+                  <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-tab-pane>
+      </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, computed, onMounted } from 'vue'
+import { MapApi } from "@/api/shorepower/map";
+import dayjs from 'dayjs';
+import { ShipRespVo } from '@/types/shorepower';
+import { APPLY_STATUS, CARGO_CATEGORY, getOperationTypeLabel, OPERATION_TYPE, TRADE_TYPE, UNUSED_SHORE_POWER_REASON, WORK_STATUS } from './dictionaryTable';
+// 定义组件属性
+interface ShipDataItem {
+  name: string;
+  wharf: string;
+  berth: string;
+  status: string;
+  statusClass: string;
+  departureHarborDistrict: string;
+  arrivalHarborDistrict: string;
+  beginTime?: Date;
+  endTime?: Date;
+  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 {
+  shipData: ShipRespVo[];
+}
+
+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 && applyInfo.reason !== undefined && 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 && applyInfo.reason !== undefined && 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()
+  console.log('props.shipData', props.shipData)
+  // 构建本地数据，使用Promise.all等待所有异步操作完成
+  localShipData.value = await Promise.all(props.shipData.map(ship => buildData(ship)));
+})
+</script>
+
+<style scoped>
+.ship-shore-power {
+  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-table :deep(*) {
+  background-color: transparent !important;
+}
+
+.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;
+  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;
+  /* 允许标题部分收缩 */
+}
+
+.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 {
+  font-weight: bold;
+}
+
+.shore-power-status.status-on {
+  color: #4CAF50 !important;
+}
+
+.shore-power-status.status-off {
+  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: 42px;
+  font-weight: 700;
+}
+
+.overview-label {
+  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..edcdbdc
--- /dev/null
+++ b/public/map/components/ShorePowerHistoryDialog.vue
@@ -0,0 +1,343 @@
+<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="shorePowerTableData" 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'
+import { MapApi } from "@/api/shorepower/map";
+
+// 定义组件属性
+interface Props {
+  modelValue: boolean
+  data?: any[]
+  shipConnectionData?: any[]
+  shorePowerId: number
+}
+
+// 定义事件
+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,
+  shorePowerId: 0,
+  data: () => [],
+  shipConnectionData: () => []
+})
+
+// 响应式数据
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const shorePowerTableData = ref<any[]>([])
+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 }
+)
+
+watch(
+  () => props.shorePowerId,
+  (newShorePowerId) => {
+    if (newShorePowerId) {
+      // 当岸电箱ID变化时，触发搜索
+      shorePowerTableData.value = []
+      handleGetShorePowerHistoryList(newShorePowerId)
+    }
+  }
+)
+
+const handleGetShorePowerHistoryList = async (id) => {
+  console.log('handleGetShorePowerHistoryList', id)
+  if (!id) return;
+  // try {
+  const res = await MapApi.getShipHistoryPage({
+    // shipId: parseInt(id, 10), // 将字符串转换为数字
+    pageNo: 1,
+    pageSize: 10,
+    type: 5,
+    ids: [parseInt(id, 10)]
+  })
+  console.log(res);
+  const buildData = await Promise.all(res.list.map(async item => ({
+    ...item,
+  })))
+  shorePowerTableData.value = buildData
+}
+
+onMounted(() => {
+  console.log('页面加载了！')
+  console.log('props.shipId', props.shorePowerId)
+})
+</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
new file mode 100644
index 0000000..e6e90c9
--- /dev/null
+++ b/public/map/components/ShorePowerUsage.vue
@@ -0,0 +1,1272 @@
+<template>
+  <div class="shore-power-usage">
+    <template v-if="pageType === 'realtime'">
+      <!-- Average Mode -->
+      <template v-if="displayMode === 'average'">
+        <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 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">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @click.stop />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
+                  start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM" value-format="YYYY-MM"
+                  class="date-range-picker" @click.stop />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" type="weekrange" range-separator="至"
+                  start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                  class="date-range-picker" @click.stop /> -->
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-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">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+        <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 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">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @click.stop />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
+                  start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM" value-format="YYYY-MM"
+                  class="date-range-picker" @click.stop />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" type="weekrange" range-separator="至"
+                  start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                  class="date-range-picker" @click.stop /> -->
+                <el-date-picker v-else type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @click.stop />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-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>
+                <div class="overview-item">
+                  <div class="overview-value">{{ fuelReduction }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ co2Reduction }}</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>
+                <div class="overview-item">
+                  <div class="overview-value">{{ noxReduction }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ so2Reduction }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Magnify Mode -->
+      <div v-if="displayMode === 'magnify'" class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            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">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-button type="primary" @click.stop="pageType = 'history'">历史查询</el-button>
+                <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">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <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 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">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="pageType === 'history'">
+      <!-- Average Mode -->
+      <template v-if="displayMode === 'average'">
+        <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 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 historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-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">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+        <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 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">
+                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                  format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
+                <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>
+                <div class="overview-item">
+                  <div class="overview-value">{{ fuelReduction }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ co2Reduction }}</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>
+                <div class="overview-item">
+                  <div class="overview-value">{{ noxReduction }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ so2Reduction }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Magnify Mode -->
+      <div v-if="displayMode === 'magnify'" class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            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">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" v-model="dateRange" type="yearrange"
+                  range-separator="至" start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @change="handleSelectDate" />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" v-model="dateRange" type="monthrange"
+                  range-separator="至" start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM"
+                  value-format="YYYY-MM" class="date-range-picker" @change="handleSelectDate" />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" v-model="dateRange" type="week"
+                  range-separator="至" start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" class="date-range-picker" @change="handleSelectDate" /> -->
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @change="handleSelectDate" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="pageType = 'realtime'">实时显示</el-button>
+                <!-- <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">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(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 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">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(card.id)" :title="card.title"
+                :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import WaveLineChart from './charts/WaveLineChart.vue'
+import { MapApi } from "@/api/shorepower/map";
+import dayjs from 'dayjs';
+import { RealtimeDeviceData } from '@/types/shorepower';
+import { formatTimestamp, parseRangeToTimestamp } from './utils';
+
+
+interface Props {
+  realtimeDeviceData: RealtimeDeviceData[];
+  activeHeadGroup?: number;
+}
+
+const props = defineProps<Props>()
+// 定义组件属性
+interface ChartDataItem {
+  name: string;
+  value: number;
+}
+
+interface CardInfo {
+  id: string;
+  title: string;
+  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;
+}
+
+export interface deviceData {
+  [key: string]: MeasureDataRealtimeRespVO
+}
+
+// const props = defineProps<Props>()
+
+const pageType = ref<'realtime' | 'history'>('realtime')
+const dateRange = ref<string[]>([])
+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 h_totalPowerChartData = ref<ChartDataItem[]>([])
+const h_co2ReductionChartData = ref<ChartDataItem[]>([])
+const h_so2ReductionChartData = ref<ChartDataItem[]>([])
+const h_noxReductionChartData = ref<ChartDataItem[]>([])
+const h_pm25ReductionChartData = ref<ChartDataItem[]>([])
+const h_fuelReductionChartData = ref<ChartDataItem[]>([])
+const historyData = ref({
+  'totalPower': 0,
+  'fuel': 0,
+  'co2': 0,
+  'pm25': 0,
+  'nox': 0,
+  'so2': 0,
+})
+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,
+  },
+
+})
+
+function aggregateByIndex(data: RawItem[][]): ChartDataItem[] {
+  if (data.length === 0) return [];
+
+  // 找出最大长度（防止越界）
+  const maxLength = Math.max(...data.map(group => group.length));
+
+  const result: ChartDataItem[] = [];
+
+  for (let i = 0; i < maxLength; i++) {
+    let totalValue = 0;
+    let timeLabel = '';
+
+    for (const group of data) {
+      const item = group[i];
+      if (item) {
+        totalValue += item.measureValue;
+        // 第一次遇到有效时间就记录（假设所有 group[i].measureTime 相同）
+        if (!timeLabel) {
+          timeLabel = formatTimestamp(item.measureTime);
+        }
+      }
+    }
+
+    // 如果这一列完全没有数据，跳过（或根据需求处理）
+    if (timeLabel) {
+      result.push({
+        name: timeLabel,
+        value: totalValue
+      });
+    }
+  }
+
+  return result;
+}
+
+const calculateTotalDiff = (data) => {
+  return data.reduce((total, subArray) => {
+    if (subArray.length === 0) {
+      return total; // 空数组跳过
+    }
+    const first = subArray[0].measureValue;
+    const last = subArray[subArray.length - 1].measureValue;
+    return total + (last - first);
+  }, 0);
+}
+
+const handleSelectDate = async (range: string[] | null) => {
+  if (!range || range.length !== 2) {
+    // 清空逻辑
+    return;
+  }
+
+  const timestamps = parseRangeToTimestamp(range, historyTimeGranularity.value);
+  if (!timestamps) return;
+
+  const [start, end] = timestamps;
+  let timeTypeId = 0
+  switch (historyTimeGranularity.value) {
+    case 'day':
+      timeTypeId = 3
+      break
+    /* case 'week':
+      timeTypeId = 4
+      break */
+    case 'month':
+      timeTypeId = 4
+      break
+    case 'year':
+      timeTypeId = 5
+      break
+    default:
+      timeTypeId = 0
+      break
+  }
+  const params = {
+    start,
+    end,
+    timeType: timeTypeId // 或者映射为后端需要的 code
+  };
+  console.log(params)
+  const res = await MapApi.getByStartAndEndTimeAndTimeType(params)
+  const array = Object.values(res);
+  if (array.length === 0) {
+    historyData.value = {
+      totalPower: 0,
+      fuel: 0,
+      co2: 0,
+      pm25: 0,
+      nox: 0,
+      so2: 0,
+    }
+    h_fuelReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_co2ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_so2ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_noxReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_pm25ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    return;
+  }
+  console.log(array)
+  const totalDiff = calculateTotalDiff(array);
+  console.log(totalDiff)
+
+
+  historyData.value = {
+    totalPower: Number(totalDiff.toFixed(2)),
+    fuel: Number((totalDiff * 0.22 / 1).toFixed(2)), // 转化为千克
+    co2: Number((totalDiff * 670 / 1000).toFixed(2)), // 克转化为千克
+    pm25: Number((totalDiff * 1.46 / 1000).toFixed(2)), // 克转化为千克
+    nox: Number((totalDiff * 18.1 / 1000).toFixed(2)), // 克转化为千克
+    so2: Number((totalDiff * 10.5 / 1000).toFixed(2)), // 克转化为千克
+  }
+  const chartData = aggregateByIndex(array);
+  const fuelChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 0.22 / 1).toFixed(2)) }))
+  h_fuelReductionChartData.value = fuelChartData;
+
+  const co2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 670 / 1000).toFixed(2)) }))
+  h_co2ReductionChartData.value = co2ChartData;
+
+  const pm25ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 1.46 / 1000).toFixed(2)) }))
+  h_pm25ReductionChartData.value = pm25ChartData;
+
+  const noxChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 18.1 / 1000).toFixed(2)) }))
+  h_noxReductionChartData.value = noxChartData;
+
+  const so2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 10.5 / 1000).toFixed(2)) }))
+  h_so2ReductionChartData.value = so2ChartData;
+};
+
+// 获取对应卡片的图表数据
+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 getHistoryChartData = (cardId: string): ChartDataItem[] => {
+  switch (cardId) {
+    case 'overview':
+      return totalPowerChartData.value
+    case 'fuel':
+      return h_fuelReductionChartData.value
+    case 'co2':
+      return h_co2ReductionChartData.value
+    case 'pm25':
+      return h_pm25ReductionChartData.value
+    case 'nox':
+      return h_noxReductionChartData.value
+    case 'so2':
+      return h_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 historyTimeGranularity = ref<'year' | 'month' | 'week' | 'day'>('day')
+
+// 历史模式时间颗粒度选项定义
+const historyTimeGranularityOptions = [
+  { value: 'year', label: '年' },
+  { value: 'month', label: '月' },
+  // { value: 'week', label: '周' },
+  { value: 'day', label: '日' }
+]
+
+// 处理历史模式时间颗粒度选择
+const handleHistoryTimeGranularityChange = (granularity: 'year' | 'month' | 'week' | 'day') => {
+  historyTimeGranularity.value = granularity
+  // 这里可以添加根据时间颗粒度切换数据源的逻辑
+}
+
+// 处理日期范围确认
+const handleDateRangeConfirm = () => {
+  // 这里可以添加处理日期范围确认的逻辑
+  console.log('日期范围已确认，当前颗粒度：', historyTimeGranularity.value)
+  // 可以调用API获取选中日期范围内的数据
+}
+
+// 定义卡片信息
+const cards = ref<CardInfo[]>([
+  {
+    id: 'overview',
+    title: '总览',
+    type: 'overview'
+  },
+  {
+    id: 'fuel',
+    title: '减少燃油（吨）',
+    type: 'chart',
+    unit: '吨',
+    color: '#4CAF50', // 绿色 - 代表节能、清洁能源
+    value: 'fuel'
+  },
+  {
+    id: 'co2',
+    title: '减少CO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#2E7D32', // 深绿色/蓝绿 - 温室气体（国际常用低碳绿色系）
+    value: 'co2'
+  },
+  {
+    id: 'pm25',
+    title: '减少PM2.5排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#9E9E9E', // 灰色 - 颗粒物（国际通用）
+    value: 'pm25'
+  },
+  {
+    id: 'nox',
+    title: '减少NOₓ排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FF9800', // 橙色 - 氮氧化物（国际通用）
+    value: 'nox'
+  },
+  {
+    id: 'so2',
+    title: '减少SO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FFEB3B', // 黄色 - 二氧化硫（国际通用）
+    value: 'so2'
+  }
+])
+
+const handleSelectCard = (cardId: string) => {
+  // 如果当前已经是放大模式且点击的是当前选中的大卡片，则返回平均模式
+  if (displayMode.value === 'magnify' && selectedCard.value === cardId) {
+    displayMode.value = 'average'
+  } else {
+    // 否则进入放大模式并选中指定卡片
+    displayMode.value = 'magnify'
+    selectedCard.value = cardId
+  }
+}
+// 生成初始数据
+const generateInitialData = () => {
+  const now = new Date()
+  const data: ChartDataItem[] = []
+
+  // 生成过去5分钟的数据，每10秒一条
+  for (let i = 29; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 10000)
+    data.push({
+      name: time.toLocaleTimeString(),
+      value: Math.floor(Math.random() * 100) + 10
+    })
+  }
+
+  return data
+}
+
+// 定时器引用
+let timer: ReturnType<typeof setInterval>;
+
+// 追加新数据
+const appendNewData = () => {
+  const now = new Date()
+  commonChartData.value.push({
+    name: now.toLocaleTimeString(),
+    value: Math.floor(Math.random() * 100) + 10
+  })
+}
+
+const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]) => {
+  try {
+    const res: RealtimeDeviceData[] = realtimeDeviceData.filter(item => item.deviceCode.includes('Kwh'));
+    const ids = res.map(item => item.id);
+    console.log(ids);
+    const params = {
+      ids: ids.join(','),
+      // year: new Date().getFullYear()
+    }
+    if (!params.ids) return;
+    let yearDataRes: RealtimeDeviceData[] = []
+    let weekDataRes: RealtimeDeviceData[] = []
+    let monthDataRes: RealtimeDeviceData[] = []
+    let dayDataRes: RealtimeDeviceData[] = []
+
+    try {
+      yearDataRes = await MapApi.getYearDataByIdList(params);
+      weekDataRes = await MapApi.getWeekDataByIdList(params);
+      monthDataRes = await MapApi.getMonthDataByIdList(params);
+      dayDataRes = await MapApi.getDayDataByIdList(params);
+    } catch (error) {
+      console.log(error);
+    }
+
+    // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
+
+    const realTimeSum = 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.measureValue, 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();
+
+
+
+  } catch (error) {
+    console.error(error)
+  }
+} */
+
+watch(() => props.realtimeDeviceData, (newValue) => {
+  handleGetRealTimeAllData(newValue)
+})
+
+// 组件挂载时初始化数据和定时器
+onMounted(() => {
+  // handleGetAllDeviceDataByTimeRange()
+  handleGetRealTimeAllData(props.realtimeDeviceData)
+})
+
+// 监听 activeHeadGroup 变化，当组件变为可见时触发 resize
+watch(() => props.activeHeadGroup, (newVal) => {
+  if (newVal === 1) {
+    // 延迟执行 resize，确保 DOM 已经更新
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 100)
+  }
+}, { immediate: true })
+
+// 组件销毁前清除定时器
+onBeforeUnmount(() => {
+
+})
+</script>
+
+<style lang="scss" scoped>
+.shore-power-usage {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+
+.card .card-content {
+  overflow: hidden !important;
+}
+
+.average {
+
+  .overview-value {
+    font-size: 36px;
+  }
+
+  .overview-label {
+    font-size: 18px;
+  }
+}
+
+.magnify {
+  width: 100%;
+  padding: 12px;
+  height: calc(100vh - 72px);
+  position: absolute;
+  top: 72px;
+  left: 0px;
+  display: flex;
+  flex-direction: column;
+  /* background-color: red; */
+  gap: 8px;
+  overflow-y: auto;
+
+  .big {
+    height: 70%;
+
+    .card {
+      height: 100%;
+    }
+
+    .overview-value {
+      font-size: 48px;
+    }
+
+    .overview-label {
+      font-size: 28px;
+    }
+  }
+
+  .one-row {
+    height: 30%;
+    display: flex;
+    gap: 8px;
+
+    .card .card-title .title-text {
+      font-size: 14px;
+    }
+
+    .card {
+      flex: 1;
+    }
+  }
+}
+
+.card {
+  padding: 6px;
+  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 */
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/_index.vue b/public/map/components/bk/components_index.vue
similarity index 100%
rename from public/map/components/_index.vue
rename to public/map/components/bk/components_index.vue
diff --git a/public/map/_index.vue b/public/map/components/bk/map_index.vue
similarity index 97%
rename from public/map/_index.vue
rename to public/map/components/bk/map_index.vue
index 370a8c9..08ebdcb 100644
--- a/public/map/_index.vue
+++ b/public/map/components/bk/map_index.vue
@@ -366,7 +366,7 @@ const buildDlData = () => {
 }
 const updateDataDate = (number: number) => {
   if (number == 5) {
-    window.open("http://server.ayaojies.com.cn:801/login", '_blank');
+    window.open("http://106.118.88.15:801/login", '_blank');
   } else {
     dataDate.value = number
     usedDl.value = 835229.9 * number
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
new file mode 100644
index 0000000..0c76e36
--- /dev/null
+++ b/public/map/components/cesiumMap.vue
@@ -0,0 +1,1398 @@
+<template>
+  <div>
+    <div ref="cesiumContainerRef" class="cesium-container"></div>
+    <div class="btn-group">
+      <!-- <el-button class="get-view-btn" size="small" type="primary" @click="getCurrentViewInfo"
+        style="margin-right: 10px;">获取当前视角</el-button> -->
+      <!-- <el-button class="view-btn" size="small" type="success" @click="switchView('overview')"
+      style="margin-right: 10px;">概览视角</el-button> -->
+      <!-- <el-button class="view-btn" size="small" type="warning" @click="switchView('view1')"
+      style="margin-right: 10px;">视角1</el-button>
+    <el-button class="view-btn" size="small" type="warning" @click="switchView('view2')"
+      style="margin-right: 10px;">视角2</el-button> -->
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import coordtransform from 'coordtransform';
+import { MapApi } from "@/api/shorepower/map";
+import { toRaw } from 'vue'
+// ⚠️ 注意：通过 window 访问全局 Cesium 对象
+const Cesium = window.Cesium;
+
+const props = defineProps({
+  shorePowerList: {
+    type: Array,
+    required: true,
+    // 可选：添加自定义 validator（更严格）
+    validator(value) {
+      return Array.isArray(value) && value.every(item =>
+        typeof item === 'object' &&
+        item !== null &&
+        typeof item.position === 'string'
+        // 注意：无法验证是否符合 ShorePowerBerth 结构（因为 JS 没有接口）
+      );
+    }
+  },
+  shipDataList: {
+    type: Array,
+    required: true,
+    // 可选：添加自定义 validator（更严格）
+    validator(value) {
+      return Array.isArray(value) && value.every(item =>
+        typeof item === 'object' &&
+        item !== null &&
+        typeof item.shipName === 'string'
+        // 注意：无法验证是否符合 ShipRespVo 结构（因为 JS 没有接口）
+      );
+    }
+  },
+  onInstanceClick: {
+    type: Function,
+    default: (data) => { }
+  }
+})
+
+// 自定义流动线材质类
+class PolylineFlowMaterialProperty {
+  constructor(options) {
+    options = options || {};
+    this._definitionChanged = new Cesium.Event();
+    this._color = undefined;
+    this._colorSubscription = undefined;
+    this.color = options.color || Cesium.Color.YELLOW;
+    this.duration = options.duration || 2000; // 加快速度，从2000ms减少到1000ms
+    this.percent = options.percent || 0.1;
+    this.gradient = options.gradient || 0.01;
+    this._time = (new Date()).getTime();
+  }
+
+  get isConstant() {
+    return false;
+  }
+
+  get definitionChanged() {
+    return this._definitionChanged;
+  }
+
+  getType() {
+    return 'PolylineFlow';
+  }
+
+  getValue(time, result) {
+    if (!result) {
+      result = {};
+    }
+
+    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
+    result.image = undefined;
+    result.time = ((new Date()).getTime() - this._time) % this.duration / this.duration;
+    result.percent = this.percent;
+    result.gradient = this.gradient;
+
+    return result;
+  }
+
+  equals(other) {
+    return this === other ||
+      (other instanceof PolylineFlowMaterialProperty &&
+        Cesium.Property.equals(this._color, other._color) &&
+        this.duration === other.duration &&
+        this.percent === other.percent &&
+        this.gradient === other.gradient);
+  }
+}
+
+Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
+  color: Cesium.createPropertyDescriptor('color')
+});
+
+// 注册自定义材质
+Cesium.Material.PolylineFlowType = 'PolylineFlow';
+Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineFlowType, {
+  fabric: {
+    type: Cesium.Material.PolylineFlowType,
+    uniforms: {
+      color: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
+      time: 0,
+      percent: 0.1,
+      gradient: 0.01
+    },
+    source: `
+      czm_material czm_getMaterial(czm_materialInput materialInput)
+      {
+        czm_material material = czm_getDefaultMaterial(materialInput);
+        vec2 st = materialInput.st;
+        float t = time * 3.0; // 调整箭头速度
+        
+        // 基础线段颜色，确保线条始终可见
+        vec3 baseColor = color.rgb;
+        
+        // 创建箭头效果
+        float alpha = 0.2; // 基础透明度
+        
+        // 创建多个移动的箭头
+        float arrowPos1 = mod(t - st.s * 5.0, 5.0);
+        float arrow1 = smoothstep(0.7, 0.9, arrowPos1) * (1.0 - smoothstep(0.9, 1.1, arrowPos1));
+        float arrowHead1 = smoothstep(0.4, 0.9, arrowPos1) * (1.0 - smoothstep(0.9, 1.3, arrowPos1));
+        
+        float arrowPos2 = mod(t - st.s * 5.0 + 2.5, 5.0);
+        float arrow2 = smoothstep(0.7, 0.9, arrowPos2) * (1.0 - smoothstep(0.9, 1.1, arrowPos2));
+        float arrowHead2 = smoothstep(0.4, 0.9, arrowPos2) * (1.0 - smoothstep(0.9, 1.3, arrowPos2));
+        
+        // 组合箭头效果
+        float arrowEffect = max(max(arrow1, arrowHead1), max(arrow2, arrowHead2));
+        
+        // 应用箭头效果到透明度
+        alpha = 0.2 + arrowEffect * 0.8;
+        
+        material.alpha = alpha;
+        material.diffuse = baseColor;
+        return material;
+      }
+    `
+  },
+  translucent: function (material) {
+    return true;
+  }
+});
+
+let viewer = null;
+const cesiumContainerRef = ref(null); // 引用 DOM 元素
+const history = ref(null); // 历史数据
+const dataWithModels = ref([]); // 存储带有模型实例的数据列表
+
+// 定义预设视角参数
+const presetViews = {
+  overview: {
+    "longitude": 118.5132903711312,
+    "latitude": 38.84648563549342,
+    "height": 12675.768680075478,
+    "heading": 353.6789759103708,
+    "pitch": -36.657258995301596,
+    "roll": 0.0343469697692715
+  }
+};
+
+// 岸电箱点击回调函数
+let onElectricalBoxClick = null;
+let globalModelInstance = null
+// 设置岸电箱点击回调函数的方法
+const setElectricalBoxClickCallback = (callback) => {
+  onElectricalBoxClick = callback;
+};
+
+const createView = (obj) => {
+  return {
+    destination: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude, obj.height),
+    orientation: {
+      heading: Cesium.Math.toRadians(obj.heading),
+      pitch: Cesium.Math.toRadians(obj.pitch),
+      roll: Cesium.Math.toRadians(obj.roll)
+    }
+  }
+}
+
+onMounted(async () => {
+  if (!Cesium) {
+    console.error("Cesium 对象未找到，请检查 index.html 文件！");
+    return;
+  }
+
+  // 步骤 1: 初始化 Viewer 并配置为使用高德地图影像和平坦地形
+  try {
+    viewer = new Cesium.Viewer(cesiumContainerRef.value, {
+      // **核心设置：禁用所有默认影像，我们将手动添加高德地图**
+      imageryProvider: false,
+      // infoBox: true,
+      // **使用平坦地形，避免依赖 Cesium Ion**
+      terrainProvider: new Cesium.EllipsoidTerrainProvider(),
+      // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
+      // 禁用所有不必要的UI控件
+      timeline: false,
+      animation: false,
+      baseLayerPicker: false,
+      geocoder: false,
+      sceneModePicker: false,
+      navigationHelpButton: false,
+      infoBox: false,
+      fullscreenButton: false,
+      homeButton: false,
+
+      // 启用抗锯齿和其他渲染优化
+      contextOptions: {
+        webgl: {
+          antialias: true
+        }
+      }
+    });
+
+
+
+    // 禁用所有鼠标和键盘的相机控制操作
+    /*  viewer.scene.screenSpaceCameraController.enableRotate = false;
+     viewer.scene.screenSpaceCameraController.enableTranslate = false;
+     viewer.scene.screenSpaceCameraController.enableZoom = false;
+     viewer.scene.screenSpaceCameraController.enableTilt = false;
+     viewer.scene.screenSpaceCameraController.enableLook = false; */
+
+    // 渲染优化设置
+    // 启用抗锯齿
+    viewer.scene.postProcessStages.fxaa.enabled = true;
+
+    // 启用深度测试，确保模型能够被地形正确遮挡
+    viewer.scene.globe.depthTestAgainstTerrain = true;
+
+    // 启用时钟动画，确保模型能够根据时间更新
+    viewer.clock.shouldAnimate = true;
+
+    // 相机控制设置
+    const controller = viewer.scene.screenSpaceCameraController;
+    // 设置最大缩放距离（相机到地球中心的最大距离）
+    // 500,000.0 米 = 500 公里
+    const MAX_DISTANCE = 500000.0;
+
+    // 启用缩放，然后设置其最大限制
+    controller.enableZoom = true;
+    controller.maximumZoomDistance = MAX_DISTANCE;
+
+    // （可选）同时限制最小缩放距离，防止滚轮进入模型内部
+    // 例如，限制最小距离为 1000.0 米
+    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: 添加高德地图卫星影像底图
+    const gaodeImage = new Cesium.UrlTemplateImageryProvider({
+      url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+      subdomains: ['1', '2', '3', '4'],
+      layer: 'gaodeImgLayer',
+      style: 'default',
+      format: 'image/png',
+      maximumLevel: 16
+    });
+    const dataInfo = history.value ? history.value : await MapApi.getAllData()
+    const shipData = props.shipDataList
+    console.log('shipData', shipData)
+    const shorePowerList = props.shorePowerList
+
+    // const unitedData = 
+
+    // 通用添加函数，遍历dataInfo并创建标记
+    let arr = {
+      arr1: [],
+      arr2: [],
+      arr3: [],
+      arr4: [],
+      arr5: []
+    }
+    // const addMarkersFromDataInfo = (dataInfo) => {
+    //   // 更严格的数组检查
+    //   if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) {
+    //     console.log('No valid dataInfo array provided');
+    //     return [];
+    //   }
+
+    //   // 创建新数组存储带有模型实例的数据
+    //   const dataWithModelsArray = [];
+
+    //   console.log(`Processing ${dataInfo.length} items`);
+
+    //   dataInfo.forEach((item, index) => {
+    //     // 检查基本数据结构
+    //     if (!item) {
+    //       console.warn(`Item at index ${index} is null or undefined`);
+    //       return;
+    //     }
+
+    //     try {
+    //       // 创建包含模型实例的数据项副本
+    //       let itemWithModel = { ...item };
+
+    //       // 解析data字段为JSON对象
+    //       let dataObj;
+    //       if (typeof item.data === 'string') {
+    //         try {
+    //           dataObj = JSON.parse(item.data);
+    //         } catch (parseError) {
+    //           console.warn(`Failed to parse data for item ${item.id || index}:`, parseError);
+    //           dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项
+    //           return;
+    //         }
+    //       } else {
+    //         dataObj = item.data;
+    //       }
+
+    //       // 检查dataObj是否有效
+    //       if (!dataObj) {
+    //         console.warn(`No data object found for item ${item.id || index}`);
+    //         dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项
+    //         return;
+    //       }
+
+    //       // 获取坐标信息 - 更严格的验证
+    //       let longitude, latitude;
+    //       let wgsLon, wgsLat;
+    //       if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) {
+    //         const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+    //         wgsLon = wgsCoords[0];
+    //         wgsLat = wgsCoords[1];
+    //         // 确保坐标是有效数字
+    //         latitude = wgsLat;
+    //         longitude = wgsLon;
+    //         // 检查坐标是否为有效数字
+    //         if (isNaN(latitude) || isNaN(longitude)) {
+    //           console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy);
+    //           dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项
+    //           return;
+    //         }
+
+    //         // 检查坐标范围（简单验证）
+    //         if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) {
+    //           console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]);
+    //           dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项
+    //           return;
+    //         }
+    //       } else {
+    //         console.warn('无效的坐标信息:', item);
+    //         dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
+    //         return;
+    //       }
+    //       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);
+    //         // 投放船模型
+    //         const shipModel = viewer.entities.add({
+    //           name: 'Cargo Ship Model',
+    //           position: position,
+    //           orientation: Cesium.Transforms.headingPitchRollQuaternion(
+    //             position,
+    //             new Cesium.HeadingPitchRoll(
+    //               Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+    //               Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+    //               Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+    //             )
+    //           ),
+    //           model: {
+    //             uri: '/model/cargo_ship_07.glb',
+    //             scale: 1.5, // 调整模型大小
+    //             // minimumPixelSize: 100, // 确保模型至少显示为50像素大小
+    //             // 启用深度测试，使模型能够被地形遮挡
+    //             enableDepthTest: true,
+    //             // 启用背光剔除，提高渲染性能
+    //             backFaceCulling: true
+    //           }
+    //         });
+
+    //         // 保存模型实例到数据项
+    //         itemWithModel.modelInstance = shipModel;
+    //         itemWithModel.modelType = 'ship';
+    //         itemWithModel = { ...itemWithModel, ...itemShipInfo };
+
+    //         viewer.entities.add({
+    //           position: labelPosition, // 船上方约10米
+    //           label: {
+    //             text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
+    //             font: '20px sans-serif',
+    //             fillColor: Cesium.Color.LIME,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+    //         // 根据概率分布决定是否显示状态图标
+    //         // 50%概率不显示，25%显示故障，25%显示离线
+    //         const rand = Math.random();
+    //         let statusImage = null;
+    //         if (rand < 1) {
+    //           // 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') {
+    //         const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
+    //         viewer.entities.add({
+    //           position: labelPosition, // 船上方约10米
+    //           label: {
+    //             text: dataObj.name || `Marker-${item.id || index}`,
+    //             font: '20px sans-serif',
+    //             fillColor: Cesium.Color.WHITE,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+    //       }
+    //       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);
+    //         // 投放岸电箱模型
+    //         const electricalBoxModel = viewer.entities.add({
+    //           name: '岸电箱',
+    //           position: position,
+    //           // 添加唯一标识用于识别点击事件
+    //           properties: {
+    //             modelType: 'electrical_box',
+    //             data: itemWithModel
+    //           },
+    //           orientation: Cesium.Transforms.headingPitchRollQuaternion(
+    //             position,
+    //             new Cesium.HeadingPitchRoll(
+    //               Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+    //               Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+    //               Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+    //             )
+    //           ),
+    //           model: {
+    //             uri: '/model/electrical_box.glb',
+    //             scale: 1.5, // 调整模型大小
+    //             // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
+    //             // 启用深度测试，使模型能够被地形遮挡
+    //             enableDepthTest: true,
+    //             // 启用背光剔除，提高渲染性能
+    //             backFaceCulling: true
+    //           },
+    //         });
+    //         console.log(item)
+    //         if (item.name.includes('国投-206泊位-插座箱') || item.name.includes('国投-207泊位-插座箱')) {
+    //           arr.push(electricalBoxModel)
+    //         }
+
+    //         // 保存模型实例到数据项
+    //         itemWithModel.modelInstance = electricalBoxModel;
+    //         itemWithModel.modelType = 'electrical_box';
+    //         itemWithModel = { ...itemWithModel, ...itemShipInfo };
+
+    //         viewer.entities.add({
+    //           // pickable: false,
+    //           position: labelPosition, // 船上方约10米
+    //           properties: {
+    //             modelType: 'electrical_box',
+    //             data: itemWithModel
+    //           },
+    //           label: {
+    //             text: '岸电箱' || `Marker-${item.id || index}`,
+    //             font: '16px sans-serif',
+    //             fillColor: Cesium.Color.WHITE,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+
+    //         // 根据概率分布决定是否显示状态图标
+    //         // 50%概率不显示，25%显示故障，25%显示离线
+    //         console.log(shorePowerList, itemShipInfo)
+    //         const x = itemShipInfo.shorePower.id;
+    //         const itemObj = shorePowerList.find(obj => obj.id === x);
+    //         const rand = Math.random();
+    //         let statusImage = null;
+    //         if ([3, 4, 6].includes(itemObj.status)) {
+    //           // 50%概率：不显示状态图标
+    //           statusImage = null;
+    //         } else if ([1, 2, 8].includes(itemObj.status)) {
+    //           // 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)
+    //             }
+    //           });
+    //         }
+    //       }
+
+    //       // 创建红点标记
+    //       /* const entity = viewer.entities.add({
+    //         name: item.name || `Marker-${item.id || index}`,
+    //         position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1),
+    //         point: {
+    //           pixelSize: 10,
+    //           color: Cesium.Color.RED,
+    //           outlineColor: Cesium.Color.WHITE,
+    //           outlineWidth: 2
+    //         },
+    //         // 可以添加标签显示名称
+    //         label: {
+    //           text: item.name || `Marker-${item.id || index}`,
+    //           font: '14px sans-serif',
+    //           fillColor: Cesium.Color.WHITE,
+    //           outlineColor: Cesium.Color.BLACK,
+    //           outlineWidth: 2,
+    //           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+    //           pixelOffset: new Cesium.Cartesian2(0, -15)
+    //         }
+    //       }); 
+    //       // 保存点标记实例到数据项
+    //       itemWithModel.modelInstance = entity;
+    //       itemWithModel.modelType = 'point';
+    //       */
+
+    //       // 将处理后的数据项添加到新数组
+    //       dataWithModelsArray.push(itemWithModel);
+    //     } catch (error) {
+    //       console.error('Error processing item:', item, error);
+    //       // 创建一个基本的数据项副本并添加到数组
+    //       dataWithModelsArray.push({ ...item });
+    //     }
+    //   });
+
+
+    //   return dataWithModelsArray;
+    // };
+
+
+
+    // 步骤 3: 将图层添加到 Viewer 中
+    viewer.imageryLayers.addImageryProvider(gaodeImage);
+
+    // const addStoreP
+
+
+    // 调用通用函数创建标记并获取带有模型实例的数据
+    // dataWithModels.value = addMarkersFromDataInfo(dataInfo);
+    const createMarker = () => {
+      const modelInstance = []
+      const labelInstance = []
+      const oneTitleInstance = []
+      const twoTitleInstance = []
+      shorePowerList.forEach((item) => {
+        const itemShipInfo = dataInfo.filter(mapitem => (item.id === mapitem.parentId) && mapitem.type === 5)
+        const result = itemShipInfo
+          .filter(item => {
+            try {
+              const data = JSON.parse(item.data);
+              return data.type === 'icon' && data.icon.includes('interface');
+            } catch (e) {
+              return false; // 忽略无法解析的 data
+            }
+          })
+          .map(item => JSON.parse(item.data));
+        if (!result || result.length === 0) return
+        const dataObj = result[0]
+        let longitude, latitude;
+        let wgsLon, wgsLat;
+        const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+        wgsLon = wgsCoords[0];
+        wgsLat = wgsCoords[1];
+        latitude = wgsLat;
+        longitude = wgsLon;
+        const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1);
+        const xelectricalBoxModel = viewer.entities.add({
+          name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'shorepower_box',
+            data: item
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/electrical_box.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        console.log(item.name)
+        if (['国投-206泊位-高压', '国投-207泊位-高压', '国投-208泊位-高压'].includes(item.name)) {
+          arr.arr1.push(xelectricalBoxModel)
+        }
+        if (['国投-209泊位-高压', '国投-210泊位-高压'].includes(item.name)) {
+          arr.arr2.push(xelectricalBoxModel)
+        }
+        if (['国投-203泊位-高压', '国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) {
+          arr.arr3.push(xelectricalBoxModel)
+        }
+        if (['华电-806泊位-高压', '华电-807泊位-高压'].includes(item.name)) {
+          arr.arr4.push(xelectricalBoxModel)
+        }
+        if (['华电-808泊位-高压', '华电-809泊位-高压', '华电-810泊位-高压'].includes(item.name)) {
+          arr.arr5.push(xelectricalBoxModel)
+        }
+
+
+
+
+        modelInstance.push({
+          model: xelectricalBoxModel,
+          type: 'shorepower_box',
+          data: item
+        })
+
+        const MODEL_HEIGHT_METERS = 80;
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+        const xelectricalBoxLabel = viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          properties: {
+            modelType: 'shorepower_box',
+            data: item
+          },
+          name: '岸电箱 Label',
+          label: {
+            text: '岸电箱',
+            font: '24px sans-serif',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            disableDepthTest: true,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
+          }
+        });
+
+        let statusImage = null;
+        if ([3, 4, 6].includes(item.status)) {
+          // 50%概率：不显示状态图标
+          statusImage = null;
+        } else if ([1, 2, 8].includes(item.status)) {
+          // 25%概率：显示故障图标
+          statusImage = '/img/故障.png';
+        } else {
+          // 25%概率：显示离线图标
+          statusImage = '/img/离线.png';
+        }
+        // 只有当需要显示状态图标时才添加实体
+        if (statusImage) {
+          const overlayBillboard = viewer.entities.add({
+            position: xposition,
+            properties: {
+              modelType: 'shorepower_box',
+              data: item
+            },
+            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)
+            }
+          });
+        }
+        labelInstance.push(xelectricalBoxLabel)
+      })
+      shipData.forEach(item => {
+        // console.log(dataInfo)
+
+        const itemShipInfo = dataInfo.filter(shipItem => (item.shorePower.id === shipItem.parentId) && shipItem.type === 5)
+        // console.log(itemShipInfo)
+        const result = itemShipInfo
+          .filter(item => {
+            try {
+              const data = JSON.parse(item.data);
+              return data.type === 'icon' && data.icon.includes('ship_green');
+            } catch (e) {
+              return false; // 忽略无法解析的 data
+            }
+          })
+          .map(item => JSON.parse(item.data));
+        if (!result || result.length === 0) return
+        const dataObj = result[0]
+        console.log(dataObj)
+        let longitude, latitude;
+        let wgsLon, wgsLat;
+        const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+        wgsLon = wgsCoords[0];
+        wgsLat = wgsCoords[1];
+        latitude = wgsLat;
+        longitude = wgsLon;
+        const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 15);
+        const xelectricalBoxModel = viewer.entities.add({
+          // name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'ship',
+            data: item
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/cargo_ship_07.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        modelInstance.push({
+          model: xelectricalBoxModel,
+          type: 'ship',
+          data: item
+        })
+
+        const MODEL_HEIGHT_METERS = 80;
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+        const xelectricalBoxLabel = viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          name: '船',
+          properties: {
+            modelType: 'ship',
+            data: item
+          },
+          label: {
+            text: item.shipBasicInfo.name,
+            font: '28px sans-serif',
+            fillColor: Cesium.Color.LIME,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            disableDepthTest: true,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
+          }
+        });
+        labelInstance.push(xelectricalBoxLabel)
+
+        let statusImage = null;
+        if (item.shipStatus === '正常') {
+          // statusImage = null;
+        } else if (item.shipStatus === '超容') {
+          statusImage = '/img/故障.png';
+        } else {
+          statusImage = '/img/未连接.png';
+        }
+        // 只有当需要显示状态图标时才添加实体
+        if (statusImage) {
+          const overlayBillboard = viewer.entities.add({
+            position: xposition,
+            properties: {
+              modelType: 'ship',
+              data: item
+            },
+            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.3 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                return pulse;
+              }, false)
+            }
+          });
+        }
+
+        /* if (!itemShipInfo) {
+          return;
+        } */
+        /* if (!itemShipInfo || itemShipInfo.length === 0) return
+        const itemShipInfoObj = itemShipInfo[0]
+
+        console.log('itemShipInfoObj', itemShipInfoObj)
+        console.log('dataInfo', dataInfo)
+        console.log('item', item) */
+      })
+
+      // 其他信息
+      dataInfo.forEach(item => {
+        // console.log(item)
+        if (['华能曹妃甸码头名字', '华电储运码头名字', '国投曹妃甸码头名字'].includes(item.name)) {
+          const dataObj = JSON.parse(item.data)
+          let longitude, latitude;
+          let wgsLon, wgsLat;
+          const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+          wgsLon = wgsCoords[0];
+          wgsLat = wgsCoords[1];
+          // latitude = wgsLat;
+          // longitude = wgsLon;
+          const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 0);
+          const label = viewer.entities.add({
+            position: labelPosition, // 船上方约10米
+            label: {
+              text: dataObj.name || `Marker-${item.id || index}`,
+              font: '16px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+              disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+            }
+          });
+          twoTitleInstance.push(label)
+
+        }
+      })
+      dataInfo.forEach(item => {
+        // console.log(item)
+        if (['港区'].includes(item.name)) {
+          const dataObj = JSON.parse(item.data)
+          let longitude, latitude;
+          let wgsLon, wgsLat;
+          const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+          wgsLon = wgsCoords[0];
+          wgsLat = wgsCoords[1];
+          // latitude = wgsLat;
+          // longitude = wgsLon;
+          const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 0);
+          const label = viewer.entities.add({
+            position: labelPosition, // 船上方约10米
+            label: {
+              text: dataObj.name || `Marker-${item.id || index}`,
+              font: `${dataObj?.fontSize || 16}px sans-serif`,
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+              disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+            }
+          });
+          oneTitleInstance.push(label)
+
+        }
+      })
+      return {
+        modelInstance,
+        labelInstance,
+        oneTitleInstance,
+        twoTitleInstance
+      }
+    }
+    const { modelInstance, labelInstance, oneTitleInstance, twoTitleInstance } = createMarker()
+    globalModelInstance = modelInstance
+    // const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
+    const tempExe = [
+      { lat: 38.95011597126687, lon: 118.45831747850713 },
+      { lat: 38.94718179373664, lon: 118.46547582577227 },
+      { lat: 38.95400625667645, lon: 118.45959803541668 },
+      { lat: 38.97994932460509, lon: 118.45949374251144 },
+      { lat: 38.99238637115607, lon: 118.45970382914341 },
+    ]
+
+    // 创建流动线材质
+    function createFlowMaterial() {
+      return new PolylineFlowMaterialProperty({
+        color: Cesium.Color.YELLOW,
+        duration: 5000, // 动画持续时间(毫秒)
+        percent: 0.6,   // 流动部分占整个线条的比例
+        gradient: 0.3   // 流动部分的渐变
+      });
+    }
+    function tempCreate(item) {
+      tempExe.forEach((exeItem, index) => {
+        const wgsCoords = coordtransform.wgs84togcj02(exeItem.lon, exeItem.lat);
+        const xposition = Cesium.Cartesian3.fromDegrees(exeItem.lon, exeItem.lat, 1);
+        const xelectricalBoxModel = viewer.entities.add({
+          name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'electrical_box',
+            // data: itemWithModel
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(150),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/electrical_box.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        const MODEL_HEIGHT_METERS = 80;
+
+        // 1. 获取模型的世界坐标 (xposition)
+        // xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1); 
+
+        // 2. 将标签的位置计算为：模型位置 + 高度偏移
+        // 我们需要沿着地球的法线方向（即向上）偏移。
+
+        // 获取模型位置的地理坐标 (经度, 纬度, 高度)
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+
+        // 增加高度，将标签放置在模型顶部上方
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+
+        // 将新的地理坐标转换回世界坐标作为标签的位置
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+
+        // 添加 Label 实体
+        viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          name: '岸电箱 Label',
+          label: {
+            text: '岸电箱',
+            font: '24px sans-serif',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+
+            // *** 关键设置 1：禁用深度测试，确保标签显示在模型上方 ***
+            // 确保它不会被模型或地球遮挡。
+            disableDepthTest: true,
+
+            // 关键设置 2：移除 pixelOffset（因为我们使用了 3D 位置偏移）
+            // pixelOffset: new Cesium.Cartesian2(0, 0), 
+
+            // 关键设置 3：控制文字大小随距离缩放 (实现“真实大小”效果)
+            // 使用 near/far scalar 控制，避免缩放地图时文字过大
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
+            // ⚠️ 请根据您的场景调整这四个参数
+          }
+        });
+        // 创建连接线：将xelectricalBoxModel与arr中的每个实体连接
+        arr[`arr${index + 1}`].forEach((entity, idx) => {
+          // 创建唯一的线实体ID
+          const lineEntity = viewer.entities.add({
+            name: `connection_line_${idx}`,
+            polyline: {
+              positions: new Cesium.CallbackProperty(() => {
+                // 获取主岸电箱的位置
+                const mainPosition = xelectricalBoxModel.position.getValue(viewer.clock.currentTime);
+                // 获取目标实体的位置
+                const targetPosition = entity.position.getValue(viewer.clock.currentTime);
+
+                // 返回包含两个点的数组（起点和终点）
+                return [mainPosition, targetPosition];
+              }, false),
+              width: 3,
+              material: createFlowMaterial(),
+              // 启用深度测试，使线条能够被地形遮挡
+              enableDepthTest: true
+            }
+          });
+          console.log('lineEntity', lineEntity)
+        });
+
+      })
+    }
+    tempCreate()
+
+    // 设置初始视角
+    viewer.camera.flyTo(createView(presetViews.overview));
+    // 设置显示高度阈值
+    const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息
+    // const targets = [];       // 把需要控制的 entities push 进来
+    /* const targets = titleInstance
+      .filter(item => item.modelInstance)
+      .map(item => toRaw(item.modelInstance)); */
+    // console.log('targets', targets)
+    viewer.camera.changed.addEventListener(() => {
+      // 这个函数会在相机的任何属性发生变化后立即被调用。
+      const height = viewer.camera.positionCartographic.height;
+      // console.log("相机高度（即缩放级别）已变化:", height.toFixed(2), "米");
+
+      // 控制模型显示/隐藏
+      const visible = height <= SHOW_HEIGHT; // 1000m内才显示模型等信息
+      twoTitleInstance.forEach(entity => {
+        if (entity.show !== visible) {
+          entity.show = visible;
+        }
+      });
+      oneTitleInstance.forEach(entity => {
+        if (entity.show === visible) {
+          entity.show = !visible;
+        }
+      });
+
+      // 其他缩放级别逻辑
+      if (height < 100000) {
+        // 放大到街景级别
+        console.log("当前处于近距离缩放级别。");
+      } else if (height > 5000000) {
+        // 缩小到全球级别
+        console.log("当前处于远距离缩放级别。");
+      }
+    });
+
+    // 添加地图点击事件
+    /* const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      console.log('地图点击事件触发');
+    
+      // 首先检查是否点击到了模型
+      const pickedObject = viewer.scene.pick(movement.position);
+    
+      if (pickedObject && pickedObject.id && pickedObject.id.properties) {
+        // 检查是否是岸电箱模型
+        const properties = pickedObject.id.properties;
+        if (properties.modelType && properties.modelType.getValue() === 'shorepower_box') {
+          // 触发岸电箱点击回调
+          const electricalBoxData = properties.data.getValue();
+          console.log('岸电箱模型被点击:', electricalBoxData);
+    
+          // 如果定义了回调函数，则调用它
+          if (typeof onElectricalBoxClick === 'function') {
+            onElectricalBoxClick(electricalBoxData);
+          }
+    
+          // 阻止进一步处理
+          return;
+        }
+      }
+    
+      // 如果不是点击模型，则处理地面点击
+      // 尝试多种方式获取点击位置
+      const ray = viewer.camera.getPickRay(movement.position);
+    
+      // 方法1: 从地球表面拾取
+      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+    
+      // 如果从地球表面拾取失败，尝试从场景中拾取
+      if (!cartesian) {
+        cartesian = viewer.scene.pickPosition(movement.position);
+        console.log('使用场景拾取方法');
+      }
+    
+      // 如果仍然失败，尝试使用相机计算位置
+      if (!cartesian) {
+        // 获取屏幕中心点作为替代方案（仅用于调试）
+        console.log('无法从点击位置获取精确坐标');
+        return;
+      }
+    
+      if (cartesian) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        if (cartographic) {
+          const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+          const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+          const gcj02 = coordtransform.gcj02towgs84(longitude, latitude);
+          console.log('点击位置经纬度:', {
+            longitude: gcj02[0],
+            latitude: gcj02[1]
+          });
+        } else {
+          console.log('无法从笛卡尔坐标转换为大地坐标');
+        }
+      } else {
+        console.log('未能获取到地球表面的点击位置');
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK); */
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      const pickedObject = viewer.scene.pick(movement.position);
+
+      // 获取点击位置的经纬度
+      const cartesian = viewer.scene.pickPosition(movement.position);
+      if (Cesium.defined(cartesian)) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        console.log(`当前点击位置的经纬度: 经度 ${longitude}°, 纬度 ${latitude}°`);
+      }
+
+      if (Cesium.defined(pickedObject)) {
+        const entity = pickedObject.id; // 获取实体对象
+
+        if (entity && entity.properties) {
+          // 从 properties 中读取自定义数据
+          const type = entity.properties.modelType.getValue();
+
+          console.log(`点击了一个实体。类型是: ${type}`);
+          if (type === 'shorepower_box' || type === 'ship') {
+            console.log(entity.properties.data.getValue())
+            // onElectricalBoxClick(entity.properties.data.getValue())
+            // 触发自定义点击事件
+            props.onInstanceClick({
+              type,
+              data: entity.properties.data.getValue()
+            });
+          }
+          // 如果您存储了 data: itemWithModel (一个复杂对象)
+          // const fullData = entity.properties.data.getValue(); 
+
+          // ... 接着执行您的业务逻辑，如弹出信息窗口等 ...
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    // 确保启用场景的鼠标事件
+    viewer.scene.screenSpaceCameraController.enableInputs = true;
+
+    // 启用拾取透明物体
+    viewer.scene.useDepthPicking = true;
+
+    console.log('Cesium 高德地图 Viewer 初始化成功');
+  } catch (error) {
+    console.error('Cesium Viewer 初始化失败:', error);
+  }
+});
+
+// 监听shorePowerList的变化
+watch(
+  () => props.shorePowerList,
+  (newList, oldList) => {
+    console.log('ShorePowerList updated:', newList);
+    if (newList && newList.length > 0) {
+      // 当shorePowerList更新时，可以在这里添加相应的处理逻辑
+      // 例如：更新地图上的岸电箱标记、刷新连接线等
+      console.log('处理shorePowerList数据:', newList);
+      // 这里可以调用相关的更新函数来处理新数据
+    }
+  },
+  { deep: true } // 深度监听数组和对象的变化
+);
+
+// 视角切换方法
+const switchView = (viewName) => {
+  const viewParams = presetViews[viewName];
+  if (viewParams && viewer) {
+    viewer.camera.flyTo({
+      ...createView(viewParams),
+      duration: 2.0 // 动画持续时间（秒）
+    });
+  }
+};
+
+/**
+ * 切换到指定模型视图，并允许设置自定义的飞离距离。
+ * @param {Cesium.Entity} view - 要飞向的 Entity 实例。
+ * @param {number} [extraDistance=15000.0] - 额外的飞离距离 (米)。
+ * @param {number} [estimatedRadius=500.0] - 用于计算视角范围的估计模型半径 (米)。
+ */
+const switchModelView = (item, extraDistance = 1000, estimatedRadius = 1000.0) => {
+  const clickItem = toRaw(item)
+  console.log(item)
+  let entityInstance = null
+  if (clickItem.type === 'shorepower_box') {
+    console.log(clickItem.item)
+    const instance = globalModelInstance.filter((item) => item.type === 'shorepower_box').find(twoItem => twoItem.data
+      .id === clickItem.item.id)
+    console.log(instance)
+    if (instance.model) {
+      entityInstance = instance.model
+    }
+  } else if (clickItem.type === 'ship') {
+    console.log(clickItem.item)
+    console.log(globalModelInstance)
+    const instance = globalModelInstance.filter((item) => item.type === 'ship').find(twoItem => twoItem.data.shipBasicInfo
+      .id === clickItem.item.shipBasicInfo.id)
+    console.log(instance)
+    if (instance.model) {
+      entityInstance = instance.model
+    }
+    // 处理船舶点击
+  }
+  // return
+  console.log('目标模型实体:', entityInstance);
+
+  if (viewer && entityInstance && entityInstance.position) {
+
+    // 1. 获取模型当前的世界坐标
+    // 必须使用 getValue(viewer.clock.currentTime) 来获取当前准确的位置
+    const position = entityInstance.position.getValue(viewer.clock.currentTime);
+
+    if (!position) {
+      console.warn("无法获取模型位置，执行默认 flyTo。");
+      viewer.flyTo(entityInstance, { duration: 3.0 });
+      return;
+    }
+
+    // 2. 手动创建边界球 (因为 Entity 实例没有 readyPromise 或 boundingSphere 属性)
+    // 使用一个估计的半径来计算视角范围
+    const manualBoundingSphere = new Cesium.BoundingSphere(
+      position,
+      estimatedRadius // 使用估计半径
+    );
+
+    // 3. 定义相机相对于边界球的偏移量 (Heading, Pitch, Range)
+    const cameraOffset = new Cesium.HeadingPitchRange(
+      Cesium.Math.toRadians(0.0),      // Heading (航向), 0度朝北
+      Cesium.Math.toRadians(-45.0),    // Pitch (俯仰), -45度斜向下看
+      manualBoundingSphere.radius + extraDistance // Range (距离) = 估计半径 + 额外距离
+    );
+
+    // 4. 执行飞行动作
+    viewer.camera.flyToBoundingSphere(
+      manualBoundingSphere,
+      {
+        offset: cameraOffset,
+        duration: 3.0 // 飞行时间
+      }
+    );
+    console.log(`飞往模型中心，距离模型中心 ${(manualBoundingSphere.radius + extraDistance) / 1000} 公里。`);
+
+  } else if (viewer && entityInstance) {
+    // 作为一个简单的 fallback 选项
+    viewer.flyTo(entityInstance, { duration: 3.0 });
+    console.warn("模型位置属性无效，执行默认 flyTo。");
+  } else {
+    console.error("Cesium Viewer 或模型实例无效。");
+  }
+};
+
+// 获取当前视角信息的方法
+const getCurrentViewInfo = () => {
+  if (!viewer) {
+    console.warn('Viewer 尚未初始化');
+    return null;
+  }
+  const camera = viewer.camera;
+
+  const position = camera.position;  // 世界笛卡尔坐标系 x,y,z
+  const cartographic = Cesium.Cartographic.fromCartesian(position);
+  console.log(
+    {
+      longitude: Cesium.Math.toDegrees(cartographic.longitude),
+      latitude: Cesium.Math.toDegrees(cartographic.latitude),
+      height: cartographic.height,
+      heading: Cesium.Math.toDegrees(camera.heading),
+      pitch: Cesium.Math.toDegrees(camera.pitch),
+      roll: Cesium.Math.toDegrees(camera.roll)
+    }
+  )
+
+};
+
+// 暴露方法和数据给父组件使用
+defineExpose({
+  switchView,
+  dataWithModels,
+  switchModelView,
+  setElectricalBoxClickCallback
+});
+
+onBeforeUnmount(() => {
+  // 销毁 Viewer，释放 WebGL 资源
+  if (viewer) {
+    viewer.destroy();
+    viewer = null;
+    console.log('Cesium Viewer 已销毁');
+  }
+});
+</script>
+
+<style scoped>
+.cesium-container {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.btn-group {
+  position: absolute;
+  top: 10px;
+  z-index: 1000;
+  display: flex;
+  gap: 12rpx;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/BarChart.vue b/public/map/components/charts/BarChart.vue
similarity index 100%
rename from public/map/components/BarChart.vue
rename to public/map/components/charts/BarChart.vue
diff --git a/public/map/components/charts/BarChartMinute.vue b/public/map/components/charts/BarChartMinute.vue
new file mode 100644
index 0000000..b25dc2f
--- /dev/null
+++ b/public/map/components/charts/BarChartMinute.vue
@@ -0,0 +1,184 @@
+<template>
+  <div ref="chartContainer" class="bar-chart-minute-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
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  chartData: () => [],
+  title: '',
+  color: '#4CAF50' // 固定使用绿色
+})
+
+// 图表容器引用和实例
+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 option = {
+    title: {
+      // text: props.title,
+      textStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      left: 'center'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      borderColor: 'rgba(30, 120, 255, 0.4)',
+      borderWidth: 1,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    grid: {
+      left: '1%',
+      right: '1%',
+      top: '5%',
+      bottom: '1%',
+      containLabel: true
+    },
+    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)',
+        rotate: 0,
+        interval: Math.ceil(props.chartData.length / 24), // 每小时显示一个标签
+        formatter: (value: string) => {
+          // 只显示小时:00:00的标签
+          if (value.endsWith(':00:00')) {
+            return value.split(':')[0] + '时'
+          }
+          return ''
+        },
+        margin: 10
+      },
+      axisTick: {
+        interval: Math.ceil(props.chartData.length / 24)
+      }
+    },
+    yAxis: {
+      type: 'value',
+      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)'
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: props.chartData.map(item => item.value),
+        barWidth: 1, // 设置柱子宽度为1px
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#4CAF50' // 固定使用绿色
+              },
+              {
+                offset: 1,
+                color: '#4CAF5080' // 绿色带透明度
+              }
+            ]
+          },
+          borderRadius: [1, 1, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#4CAF50' // 固定使用绿色高亮
+          }
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+// 监听数据变化
+watch(
+  () => props.chartData,
+  () => {
+    updateChart()
+  },
+  { deep: true }
+)
+
+// 窗口大小改变时重绘图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  setTimeout(() => {
+    initChart()
+  }, 200)
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件销毁前清理资源
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+})
+</script>
+
+<style scoped>
+.bar-chart-minute-container {
+  width: 100%;
+  height: 100%;
+  /* min-height: 200px; */
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/LineChart.vue b/public/map/components/charts/LineChart.vue
similarity index 92%
rename from public/map/components/LineChart.vue
rename to public/map/components/charts/LineChart.vue
index 1f3b849..3b3cd79 100644
--- a/public/map/components/LineChart.vue
+++ b/public/map/components/charts/LineChart.vue
@@ -37,12 +37,12 @@ const updateChart = () => {
 
   const option = {
     title: {
-      text: props.title,
+      // text: props.title,
       textStyle: {
         color: '#fff',
         fontSize: 14
       },
-      left: 'center'
+      // left: 'center'
     },
     tooltip: {
       trigger: 'axis',
@@ -113,10 +113,10 @@ const updateChart = () => {
       }
     ],
     grid: {
-      left: '5%',
-      right: '5%',
-      top: '15%',
-      bottom: '10%',
+      left: '1%',
+      right: '1%',
+      top: '5%',
+      bottom: '1%',
       containLabel: true
     }
   }
@@ -142,7 +142,10 @@ const handleResize = () => {
 
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart()
+  // 延迟初始化，确保DOM已经完全渲染
+  setTimeout(() => {
+    initChart()
+  }, 200)
   window.addEventListener('resize', handleResize)
 })
 
@@ -160,6 +163,6 @@ onBeforeUnmount(() => {
 .line-chart-container {
   width: 100%;
   height: 100%;
-  min-height: 200px;
+  min-height: 0;
 }
 </style>
\ No newline at end of file
diff --git a/public/map/components/charts/PieChart.vue b/public/map/components/charts/PieChart.vue
new file mode 100644
index 0000000..dc0a908
--- /dev/null
+++ b/public/map/components/charts/PieChart.vue
@@ -0,0 +1,183 @@
+<template>
+  <div ref="chartContainer" class="pie-chart-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import * as echarts from 'echarts'
+
+// 定义组件props
+interface Props {
+  chartData?: Array<{ name: string; value: number }>
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  chartData: () => [],
+  title: ''
+})
+
+const chartContainer = ref<HTMLDivElement | null>(null)
+let chartInstance: echarts.ECharts | null = null
+
+// 初始化图表
+const initChart = () => {
+  if (chartContainer.value) {
+    chartInstance = echarts.init(chartContainer.value)
+    updateChart()
+  }
+}
+
+// 计算数据总和
+const getTotalValue = () => {
+  if (!props.chartData) return 0
+  const total = props.chartData.reduce((sum, item) => sum + item.value, 0)
+  return Math.round(total * 100) / 100 // 保留两位小数
+}
+
+// 更新图表
+const updateChart = () => {
+  if (!chartInstance || !props.chartData) return
+
+  const totalValue = getTotalValue()
+
+  const option = {
+    title: {
+      // text: props.title,
+      left: 'center',
+      textStyle: {
+        color: '#FFF'
+      }
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      show: true,
+      // type: 'scroll',       // 👈 开启可滚动图例
+      orient: 'horizontal', // 👈 水平排列
+      top: 10,              // 👈 放在顶部
+      left: 'center',       // 👈 居中对齐
+      textStyle: {
+        color: '#FFF'
+      }
+    },
+    series: [
+      {
+        name: props.title,
+        type: 'pie',
+        radius: ['35%', '55%'], // 调整内外半径，增加厚度
+        center: ['50%', '40%'], // 👈 调整饼图位置，因为图例已移到顶部
+        padAngle: 5, // 添加间隙角度
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 0,
+          borderColor: 'transparent', // 取消边框
+          borderWidth: 0 // 边框宽度设为0
+        },
+        label: {
+          show: true,
+          formatter: (params) => {
+            return params.name + '\n' + params.value.toFixed(2)
+          },
+          fontSize: 16,
+          color: '#FFFFFF', // 设置文本颜色为白色
+          textBorderColor: 'transparent', // 取消文本边缘的发光效果
+          textBorderWidth: 0
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter: (params) => {
+              return params.name + '\n' + params.value.toFixed(2)
+            },
+            fontSize: 14,
+            fontWeight: 'bold',
+            color: '#FFFFFF', // 设置强调时文本颜色为白色
+            textBorderColor: 'transparent', // 取消文本边缘的发光效果
+            textBorderWidth: 0
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: props.chartData
+      },
+      {
+        name: '总量',
+        type: 'pie',
+        radius: ['0%', '35%'], // 内部圆环用于显示总数，与外环内半径匹配
+        center: ['50%', '40%'],
+        hoverAnimation: false, // 禁用悬停动画
+        label: {
+          show: true,
+          position: 'center',
+          formatter: [`{title|总数}`, `{value|${totalValue.toFixed(2)}}`].join('\n'),
+          rich: {
+            title: {
+              color: '#FFF',
+              fontSize: 14,
+              lineHeight: 20
+            },
+            value: {
+              color: '#FFF',
+              fontSize: 20,
+              fontWeight: 'bold',
+              lineHeight: 30
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: totalValue,
+            itemStyle: {
+              color: 'rgba(0, 0, 0, 0)' // 透明色
+            }
+          }
+        ]
+      }
+    ]
+  }
+
+  chartInstance.setOption(option, true)
+}
+
+// 窗口大小改变时重置图表大小
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 监听数据变化
+watch(
+  () => props.chartData,
+  () => {
+    updateChart()
+  },
+  { deep: true }
+)
+
+// 初始化和销毁
+onMounted(() => {
+  initChart()
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+.pie-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/public/map/components/charts/WaveLineChart.vue b/public/map/components/charts/WaveLineChart.vue
new file mode 100644
index 0000000..b241d3b
--- /dev/null
+++ b/public/map/components/charts/WaveLineChart.vue
@@ -0,0 +1,254 @@
+<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
+      },
+      formatter: (params: any) => {
+        // params是一个数组，包含当前鼠标位置的所有系列数据
+        if (params && params.length > 0) {
+          const time = params[0].name; // 获取时间
+          const value = params[0].value; // 获取数据值
+          return `时间: ${time}<br/>数值: ${value}`;
+        }
+        return '';
+      }
+    },
+    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 = Math.min(...props.chartData.map(item => item.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'
+        },
+        // 辅助系列不显示在tooltip中
+        tooltip: {
+          show: false
+        },
+        // 辅助系列不显示数据标签以避免重叠
+        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/components/dictionaryTable.ts b/public/map/components/dictionaryTable.ts
new file mode 100644
index 0000000..8e8ec49
--- /dev/null
+++ b/public/map/components/dictionaryTable.ts
@@ -0,0 +1,120 @@
+import { MapApi } from "@/api/shorepower/map";
+
+export const getOperationTypeLabel = (value: string | number | undefined | null, options: { label: string, value: string | number }[]) => {
+  try {
+    const item = options.find(opt => opt.value === value);
+  return item ? item.label : '';
+  } catch (error) {
+    return ''
+  }
+
+};
+
+// 装货/卸货
+export const OPERATION_TYPE = [
+    { label: '装货', value: 1 },
+    { label: '卸货', value: 2 },
+    { label: '卸货并装货', value: 2 },
+]
+
+// 获取类型
+export const CARGO_CATEGORY = [
+    { label: '空船', value: 0 },
+    { label: '散货', value: 1 },
+    { label: '集装箱', value: 2 },
+    { label: '液体货物', value: 3 },
+    { label: '件杂货', value: 4 },
+    { label: '危险品', value: 5 },
+    { label: '冷藏货物', value: 6 },
+]
+
+// 未使用岸电原因
+export const UNUSED_SHORE_POWER_REASON = [
+    { label: '岸电用电接口不匹配', value: 1 },
+    { label: '岸电设施电压/频率不匹配', value: 2 },
+    { label: '电缆长度不匹配', value: 3 },
+    { label: '气象因素禁止作业', value: 4 },
+    { label: '船电设施损坏', value: 5 },
+    { label: '岸电设施维护中', value: 6 },
+    { label: '无受电设备', value: 7 },
+    { label: '拒绝使用岸电', value: 8 },
+    { label: '其他', value: 9 },
+]
+
+// 港区map
+export const HARBOR_DISTRICT = async () => {
+  const res = await MapApi.getHarborDistrictIdAndNameList()
+  return res.map(item => ({
+    ...item,
+    label: item.name,
+    value: item.id
+  }))
+}
+
+// doc 码头map
+export const DOCK_DISTRICT = async () => {
+  const res = await MapApi.getDockIdAndNameList()
+  return res.map(item => ({
+    ...item,
+    label: item.name,
+    value: item.id
+  }))
+}
+
+// 岸电状态
+export const SHORE_POWER_STATUS = [
+  { label: '待靠泊', value: 1 },
+  { label: '靠泊中', value: 2 },
+  { label: '岸电接入中', value: 3 },
+  { label: '用电中', value: 4 },
+  { label: '岸电卸载中', value: 5 },
+  { label: '岸电卸载完成', value: 6 },
+  { label: '离泊', value: 7 },
+  { label: '未使用岸电', value: 9 }
+]
+
+export const BERTH_TYPE = [
+  { label: '左舷停舶', value: 'left' },
+  { label: '右舷停舶', value: 'right' },
+]
+
+// 设施类型
+export const FACILITY_TYPE = [
+  { label: '港区', value: 1 },
+  { label: '码头', value: 2 },
+  { label: '岸电设施', value: 3 },
+  { label: '泊位', value: 4 },
+  { label: '用电接口', value: 5 },
+]
+
+// 贸易类型
+export const TRADE_TYPE = [
+  { label: '内贸', value: 1 },
+  { label: '外贸', value: 2 },
+]
+
+// 作业状态
+export const WORK_STATUS = [
+  { label: '待作业', value: 1 },
+  { label: '前往作业中', value: 2 },
+  { label: '接电中', value: 3 },
+  { label: '待拆除岸电', value: 4 },
+  { label: '岸电卸载中', value: 5 },
+  { label: '待上报数据', value: 6 },
+  { label: '作业完成', value: 7 },
+  { label: '未成功接入', value: 9 },
+]
+
+// 申请状态
+export const APPLY_STATUS = [
+  { label: '待签合同', value: 2 },
+  { label: '待付款', value: 3 },
+  { label: '待确认收款', value: 4 },
+  { label: '待送电', value: 5 },
+  { label: '用电中', value: 6 },
+  { label: '信息收集中', value: 7 },
+  { label: '待退款', value: 8 },
+  { label: '用电完成', value: 9 },
+  { label: '申请完成', value: 10 },
+  { label: '已取消', value: 11 },
+]
\ No newline at end of file
diff --git a/public/map/components/index.html b/public/map/components/index.html
deleted file mode 100644
index 0305cf7..0000000
--- a/public/map/components/index.html
+++ /dev/null
@@ -1,240 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <title>CesiumJS 天地图纯影像示例</title>
-    
-    <link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
-    <script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script>
-    
-    <style>
-        /* 确保 Cesium 容器占满整个浏览器窗口 */
-        body { margin: 0; overflow: hidden; }
-        #cesiumContainer { width: 100%; height: 100vh; }
-        
-        /* 悬浮按钮样式 */
-        .control-btn {
-            position: absolute;
-            z-index: 1000;
-            padding: 10px 15px;
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-            transition: background-color 0.3s;
-        }
-        
-        .control-btn:hover {
-            background-color: rgba(0, 0, 0, 0.9);
-        }
-        
-        #cameraInfoBtn {
-            top: 20px;
-            right: 20px;
-        }
-        
-        /* 视角切换按钮 */
-        .view-buttons {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 10px;
-            z-index: 1000;
-        }
-        
-        .view-btn {
-            padding: 8px 16px;
-            background-color: rgba(0, 0, 0, 0.7);
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 14px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-            transition: background-color 0.3s;
-        }
-        
-        .view-btn:hover {
-            background-color: rgba(0, 0, 0, 0.9);
-        }
-    </style>
-</head>
-<body>
-    <div id="cesiumContainer"></div>
-    <button id="cameraInfoBtn" class="control-btn">获取当前视角参数</button>
-    
-    <!-- 视角切换按钮 -->
-    <div class="view-buttons">
-        <button class="view-btn" data-view="overview">全局视角</button>
-        <button class="view-btn" data-view="ship1">船1视角</button>
-        <button class="view-btn" data-view="ship2">船2视角</button>
-        <button class="view-btn" data-view="ship3">船3视角</button>
-        <button class="view-btn" data-view="ship4">船4视角</button>
-    </div>
-
-    <script type="module">
-        // ----------------------------------------------------------------------
-        // ** 请替换为您申请的天地图密钥 **
-        // ----------------------------------------------------------------------
-        const TDT_KEY = 'b19d3ad72716d1a28cf77836dfa19a71'; 
-
-        // 步骤 1: 初始化 Viewer 并配置为使用天地图影像和平坦地形
-        const viewer = new Cesium.Viewer('cesiumContainer', {
-            // **核心设置：禁用所有默认影像，我们将手动添加天地图**
-            imageryProvider: false, 
-            
-            // **使用平坦地形，避免依赖 Cesium Ion**
-            terrainProvider: new Cesium.EllipsoidTerrainProvider(), 
-            
-            // 禁用所有不必要的UI控件
-            timeline: false,         
-            animation: false,        
-            baseLayerPicker: false,  
-            geocoder: false,         
-            sceneModePicker: false,  
-            navigationHelpButton: false, 
-            infoBox: false,          
-            fullscreenButton: false, 
-            homeButton: false,
-            
-            // 启用抗锯齿和其他渲染优化
-            contextOptions: {
-                webgl: {
-                    antialias: true
-                }
-            }
-        });
-        
-        // 禁用所有鼠标和键盘的相机控制操作
-        viewer.scene.screenSpaceCameraController.enableRotate = false;
-        viewer.scene.screenSpaceCameraController.enableTranslate = false;
-        viewer.scene.screenSpaceCameraController.enableZoom = false;
-        viewer.scene.screenSpaceCameraController.enableTilt = false;
-        viewer.scene.screenSpaceCameraController.enableLook = false;
-        
-        // 渲染优化设置
-        // 启用抗锯齿
-        viewer.scene.postProcessStages.fxaa.enabled = true;
-        
-        // 启用深度测试，确保模型能够被地形正确遮挡
-        viewer.scene.globe.depthTestAgainstTerrain = true;
-
-        // 步骤 2: 添加天地图卫星影像底图 (img: 卫星图层, w: WGS84坐标系)
-        const tdtImage = new Cesium.WebMapTileServiceImageryProvider({
-            // URL 中 LAYER=img 表示卫星影像图层
-            url: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + TDT_KEY,
-            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
-            layer: 'tdtImgLayer',
-            style: 'default',
-            format: 'tiles',
-            tileMatrixSetID: 'w', // 确保使用 WGS84 坐标系
-            maximumLevel: 18 
-        });
-
-        // 步骤 3: 将图层添加到 Viewer 中
-        viewer.imageryLayers.addImageryProvider(tdtImage);
-
-        // **注意：由于您要求不添加标注层，因此这里不添加 tdtCVA 或 tdtCIA**
-
-        // 引入我们自定义的标记和定位功能
-        import { initMarkerAndPosition } from './src/cesium-utils.js';
-        
-        // 初始化标记和定位
-        initMarkerAndPosition(viewer);
-        
-        // 定义预设视角参数
-        const presetViews = {
-            overview: {
-                destination: Cesium.Cartesian3.fromDegrees(118.4603328835826, 38.953967794772765, 560.0105923892418),
-                orientation: {
-                    heading: Cesium.Math.toRadians(231.0260194269599),
-                    pitch: Cesium.Math.toRadians(-24.749471814600415),
-                    roll: Cesium.Math.toRadians(0.005508519138937096)
-                }
-            },
-            ship1: {
-                destination: Cesium.Cartesian3.fromDegrees(118.45467237056748 + 0.005, 38.94345692673452, 150), // 在船的前方
-                orientation: {
-                    heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
-                    pitch: Cesium.Math.toRadians(-15),
-                    roll: 0
-                }
-            },
-            ship2: {
-                destination: Cesium.Cartesian3.fromDegrees(118.45183602217774 + 0.005, 38.94485094840323, 150), // 在船的前方
-                orientation: {
-                    heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
-                    pitch: Cesium.Math.toRadians(-15),
-                    roll: 0
-                }
-            },
-            ship3: {
-                destination: Cesium.Cartesian3.fromDegrees(118.4468305964142 + 0.005, 38.947237470602076, 150), // 在船的前方
-                orientation: {
-                    heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
-                    pitch: Cesium.Math.toRadians(-15),
-                    roll: 0
-                }
-            },
-            ship4: {
-                destination: Cesium.Cartesian3.fromDegrees(118.44446808752532 + 0.005, 38.94835610136433, 150), // 在船的前方
-                orientation: {
-                    heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32)
-                    pitch: Cesium.Math.toRadians(-15),
-                    roll: 0
-                }
-            }
-        };
-        
-        // 设置初始视角
-        viewer.camera.setView(presetViews.overview);
-        
-        // 添加按钮点击事件监听器
-        document.getElementById('cameraInfoBtn').addEventListener('click', function() {
-            // 获取当前相机位置
-            const camera = viewer.camera;
-            const position = camera.position;
-            const cartographic = Cesium.Cartographic.fromCartesian(position);
-            
-            // 转换为度数
-            const longitude = Cesium.Math.toDegrees(cartographic.longitude);
-            const latitude = Cesium.Math.toDegrees(cartographic.latitude);
-            const height = cartographic.height;
-            
-            // 获取相机方向
-            const heading = Cesium.Math.toDegrees(camera.heading);
-            const pitch = Cesium.Math.toDegrees(camera.pitch);
-            const roll = Cesium.Math.toDegrees(camera.roll);
-            
-            // 输出到控制台
-            console.log('当前相机视角参数:');
-            console.log('位置 - 经度:', longitude, '纬度:', latitude, '高度:', height);
-            console.log('方向 - 航向角:', heading, '俯仰角:', pitch, '翻滚角:', roll);
-            
-            // 显示提示信息
-            alert('相机参数已输出到控制台，请打开开发者工具查看。');
-        });
-        
-        // 添加视角切换按钮事件监听器
-        document.querySelectorAll('.view-btn').forEach(button => {
-            button.addEventListener('click', function() {
-                const viewName = this.getAttribute('data-view');
-                const viewParams = presetViews[viewName];
-                
-                if (viewParams) {
-                    viewer.camera.flyTo({
-                        destination: viewParams.destination,
-                        orientation: viewParams.orientation,
-                        duration: 2.0 // 动画持续时间（秒）
-                    });
-                }
-            });
-        });
-    </script>
-</body>
-</html>
\ No newline at end of file
diff --git a/public/map/components/index.vue b/public/map/components/index.vue
deleted file mode 100644
index e3c5aba..0000000
--- a/public/map/components/index.vue
+++ /dev/null
@@ -1,529 +0,0 @@
-<template>
-  <div>
-    <div ref="cesiumContainerRef" class="cesium-container"></div>
-    <div class="btn-group">
-      <!-- <el-button class="get-view-btn" size="small" type="primary" @click="getCurrentViewInfo"
-      style="margin-right: 10px;">获取当前视角</el-button> -->
-      <!-- <el-button class="view-btn" size="small" type="success" @click="switchView('overview')"
-      style="margin-right: 10px;">概览视角</el-button> -->
-      <!-- <el-button class="view-btn" size="small" type="warning" @click="switchView('view1')"
-      style="margin-right: 10px;">视角1</el-button>
-    <el-button class="view-btn" size="small" type="warning" @click="switchView('view2')"
-      style="margin-right: 10px;">视角2</el-button> -->
-    </div>
-  </div>
-
-</template>
-
-<script setup>
-import { onMounted, onBeforeUnmount, ref } from 'vue';
-import coordtransform from 'coordtransform';
-import { MapApi } from "@/api/shorepower/map";
-import { toRaw } from 'vue'
-// ⚠️ 注意：通过 window 访问全局 Cesium 对象
-const Cesium = window.Cesium;
-
-let viewer = null;
-const cesiumContainerRef = ref(null); // 引用 DOM 元素
-const history = ref(null); // 历史数据
-const dataWithModels = ref([]); // 存储带有模型实例的数据列表
-
-// 定义预设视角参数
-const presetViews = {
-  overview: {
-    "longitude": 118.5132903711312,
-    "latitude": 38.84648563549342,
-    "height": 12675.768680075478,
-    "heading": 353.6789759103708,
-    "pitch": -36.657258995301596,
-    "roll": 0.0343469697692715
-  }
-};
-
-const createView = (obj) => {
-  return {
-    destination: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude, obj.height),
-    orientation: {
-      heading: Cesium.Math.toRadians(obj.heading),
-      pitch: Cesium.Math.toRadians(obj.pitch),
-      roll: Cesium.Math.toRadians(obj.roll)
-    }
-  }
-}
-
-onMounted(async () => {
-  if (!Cesium) {
-    console.error("Cesium 对象未找到，请检查 index.html 文件！");
-    return;
-  }
-
-  // 步骤 1: 初始化 Viewer 并配置为使用高德地图影像和平坦地形
-  try {
-    viewer = new Cesium.Viewer(cesiumContainerRef.value, {
-      // **核心设置：禁用所有默认影像，我们将手动添加高德地图**
-      imageryProvider: false,
-
-      // **使用平坦地形，避免依赖 Cesium Ion**
-      terrainProvider: new Cesium.EllipsoidTerrainProvider(),
-      // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
-      // 禁用所有不必要的UI控件
-      timeline: false,
-      animation: false,
-      baseLayerPicker: false,
-      geocoder: false,
-      sceneModePicker: false,
-      navigationHelpButton: false,
-      infoBox: false,
-      fullscreenButton: false,
-      homeButton: false,
-
-      // 启用抗锯齿和其他渲染优化
-      contextOptions: {
-        webgl: {
-          antialias: true
-        }
-      }
-    });
-
-
-
-    // 禁用所有鼠标和键盘的相机控制操作
-    /*  viewer.scene.screenSpaceCameraController.enableRotate = false;
-     viewer.scene.screenSpaceCameraController.enableTranslate = false;
-     viewer.scene.screenSpaceCameraController.enableZoom = false;
-     viewer.scene.screenSpaceCameraController.enableTilt = false;
-     viewer.scene.screenSpaceCameraController.enableLook = false; */
-
-    // 渲染优化设置
-    // 启用抗锯齿
-    viewer.scene.postProcessStages.fxaa.enabled = true;
-
-    // 启用深度测试，确保模型能够被地形正确遮挡
-    viewer.scene.globe.depthTestAgainstTerrain = true;
-
-    // 启用时钟动画，确保模型能够根据时间更新
-    viewer.clock.shouldAnimate = true;
-
-    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
-    // 步骤 2: 添加高德地图卫星影像底图
-    const gaodeImage = new Cesium.UrlTemplateImageryProvider({
-      url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-      subdomains: ['1', '2', '3', '4'],
-      layer: 'gaodeImgLayer',
-      style: 'default',
-      format: 'image/png',
-      maximumLevel: 16
-    });
-    const dataInfo = history.value ? history.value : await MapApi.getAllData()
-    const shipData = await MapApi.getShipInfo({
-      harborDistrictId: 1
-    })
-    console.log('shipData', shipData)
-
-    // const unitedData = 
-
-    // 通用添加函数，遍历dataInfo并创建标记
-    const addMarkersFromDataInfo = (dataInfo) => {
-      // 更严格的数组检查
-      if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) {
-        console.log('No valid dataInfo array provided');
-        return [];
-      }
-
-      // 创建新数组存储带有模型实例的数据
-      const dataWithModelsArray = [];
-
-      console.log(`Processing ${dataInfo.length} items`);
-
-      dataInfo.forEach((item, index) => {
-        // 检查基本数据结构
-        if (!item) {
-          console.warn(`Item at index ${index} is null or undefined`);
-          return;
-        }
-
-        try {
-          // 创建包含模型实例的数据项副本
-          let itemWithModel = { ...item };
-
-          // 解析data字段为JSON对象
-          let dataObj;
-          if (typeof item.data === 'string') {
-            try {
-              dataObj = JSON.parse(item.data);
-            } catch (parseError) {
-              console.warn(`Failed to parse data for item ${item.id || index}:`, parseError);
-              dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项
-              return;
-            }
-          } else {
-            dataObj = item.data;
-          }
-
-          // 检查dataObj是否有效
-          if (!dataObj) {
-            console.warn(`No data object found for item ${item.id || index}`);
-            dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项
-            return;
-          }
-
-          // 获取坐标信息 - 更严格的验证
-          let longitude, latitude;
-          let wgsLon, wgsLat;
-          if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) {
-            const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
-            wgsLon = wgsCoords[0];
-            wgsLat = wgsCoords[1];
-            // 确保坐标是有效数字
-            latitude = wgsLat;
-            longitude = wgsLon;
-            // 检查坐标是否为有效数字
-            if (isNaN(latitude) || isNaN(longitude)) {
-              console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy);
-              dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项
-              return;
-            }
-
-            // 检查坐标范围（简单验证）
-            if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) {
-              console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]);
-              dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项
-              return;
-            }
-          } else {
-            console.warn('无效的坐标信息:', item);
-            dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
-            return;
-          }
-
-          if (dataObj.icon === 'ship_green') {
-            const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
-            const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
-            const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
-            // 投放船模型
-            const shipModel = viewer.entities.add({
-              name: 'Cargo Ship Model',
-              position: position,
-              orientation: Cesium.Transforms.headingPitchRollQuaternion(
-                position,
-                new Cesium.HeadingPitchRoll(
-                  Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
-                  Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
-                  Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
-                )
-              ),
-              model: {
-                uri: '/model/cargo_ship_07.glb',
-                scale: 1.5, // 调整模型大小
-                // minimumPixelSize: 100, // 确保模型至少显示为50像素大小
-                // 启用深度测试，使模型能够被地形遮挡
-                enableDepthTest: true,
-                // 启用背光剔除，提高渲染性能
-                backFaceCulling: true
-              }
-            });
-
-            // 保存模型实例到数据项
-            itemWithModel.modelInstance = shipModel;
-            itemWithModel.modelType = 'ship';
-            itemWithModel = { ...itemWithModel, ...itemShipInfo };
-
-            viewer.entities.add({
-              position: labelPosition, // 船上方约10米
-              label: {
-                text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
-                font: '12px sans-serif',
-                fillColor: Cesium.Color.WHITE,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
-            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.6 + Math.sin(t * 4) * 0.2;  // (基准0.6, 幅度±0.2)
-                  return pulse;
-                }, false)
-              }
-            });
-          }
-          if (dataObj.type === 'text') {
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
-            viewer.entities.add({
-              position: labelPosition, // 船上方约10米
-              label: {
-                text: dataObj.name || `Marker-${item.id || index}`,
-                font: '20px sans-serif',
-                fillColor: Cesium.Color.WHITE,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
-          }
-          if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) {
-            const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
-            // 投放岸电箱模型
-            const electricalBoxModel = viewer.entities.add({
-              name: 'Electrical Box Model',
-              position: position,
-              orientation: Cesium.Transforms.headingPitchRollQuaternion(
-                position,
-                new Cesium.HeadingPitchRoll(
-                  Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
-                  Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
-                  Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
-                )
-              ),
-              model: {
-                uri: '/model/electrical_box.glb',
-                scale: 1, // 调整模型大小
-                // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
-                // 启用深度测试，使模型能够被地形遮挡
-                enableDepthTest: true,
-                // 启用背光剔除，提高渲染性能
-                backFaceCulling: true
-              }
-            });
-
-            // 保存模型实例到数据项
-            itemWithModel.modelInstance = electricalBoxModel;
-            itemWithModel.modelType = 'electrical_box';
-
-            viewer.entities.add({
-              position: labelPosition, // 船上方约10米
-              label: {
-                text: '岸电箱' || `Marker-${item.id || index}`,
-                font: '10px sans-serif',
-                fillColor: Cesium.Color.WHITE,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
-          }
-
-          // 创建红点标记
-          /* const entity = viewer.entities.add({
-            name: item.name || `Marker-${item.id || index}`,
-            position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1),
-            point: {
-              pixelSize: 10,
-              color: Cesium.Color.RED,
-              outlineColor: Cesium.Color.WHITE,
-              outlineWidth: 2
-            },
-            // 可以添加标签显示名称
-            label: {
-              text: item.name || `Marker-${item.id || index}`,
-              font: '14px sans-serif',
-              fillColor: Cesium.Color.WHITE,
-              outlineColor: Cesium.Color.BLACK,
-              outlineWidth: 2,
-              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-              pixelOffset: new Cesium.Cartesian2(0, -15)
-            }
-          }); 
-          // 保存点标记实例到数据项
-          itemWithModel.modelInstance = entity;
-          itemWithModel.modelType = 'point';
-          */
-
-          // 将处理后的数据项添加到新数组
-          dataWithModelsArray.push(itemWithModel);
-        } catch (error) {
-          console.error('Error processing item:', item, error);
-          // 创建一个基本的数据项副本并添加到数组
-          dataWithModelsArray.push({ ...item });
-        }
-      });
-
-      return dataWithModelsArray;
-    };
-
-    // 步骤 3: 将图层添加到 Viewer 中
-    viewer.imageryLayers.addImageryProvider(gaodeImage);
-
-    // 调用通用函数创建标记并获取带有模型实例的数据
-    dataWithModels.value = addMarkersFromDataInfo(dataInfo);
-
-    // 设置初始视角
-    viewer.camera.flyTo(createView(presetViews.overview));
-    // 设置显示高度阈值
-    const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息
-    // const targets = [];       // 把需要控制的 entities push 进来
-    const targets = dataWithModels.value
-      .filter(item => item.modelInstance)
-      .map(item => toRaw(item.modelInstance));
-    console.log('targets', targets)
-    viewer.camera.changed.addEventListener(() => {
-      // 这个函数会在相机的任何属性发生变化后立即被调用。
-      const height = viewer.camera.positionCartographic.height;
-      // console.log("相机高度（即缩放级别）已变化:", height.toFixed(2), "米");
-
-      // 控制模型显示/隐藏
-      const visible = height <= SHOW_HEIGHT; // 1000m内才显示模型等信息
-      targets.forEach(entity => {
-        if (entity.show !== visible) {
-          entity.show = visible;
-        }
-      });
-
-      // 其他缩放级别逻辑
-      if (height < 100000) {
-        // 放大到街景级别
-        console.log("当前处于近距离缩放级别。");
-      } else if (height > 5000000) {
-        // 缩小到全球级别
-        console.log("当前处于远距离缩放级别。");
-      }
-    });
-
-    // 添加地图点击事件
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-    handler.setInputAction(function (movement) {
-      console.log('地图点击事件触发');
-
-      // 尝试多种方式获取点击位置
-      const ray = viewer.camera.getPickRay(movement.position);
-
-      // 方法1: 从地球表面拾取
-      let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-
-      // 如果从地球表面拾取失败，尝试从场景中拾取
-      if (!cartesian) {
-        cartesian = viewer.scene.pickPosition(movement.position);
-        console.log('使用场景拾取方法');
-      }
-
-      // 如果仍然失败，尝试使用相机计算位置
-      if (!cartesian) {
-        // 获取屏幕中心点作为替代方案（仅用于调试）
-        console.log('无法从点击位置获取精确坐标');
-        return;
-      }
-
-      if (cartesian) {
-        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-        if (cartographic) {
-          const longitude = Cesium.Math.toDegrees(cartographic.longitude);
-          const latitude = Cesium.Math.toDegrees(cartographic.latitude);
-          const gcj02 = coordtransform.gcj02towgs84(longitude, latitude);
-          console.log('点击位置经纬度:', {
-            longitude: gcj02[0],
-            latitude: gcj02[1]
-          });
-        } else {
-          console.log('无法从笛卡尔坐标转换为大地坐标');
-        }
-      } else {
-        console.log('未能获取到地球表面的点击位置');
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-    // 确保启用场景的鼠标事件
-    viewer.scene.screenSpaceCameraController.enableInputs = true;
-
-    // 启用拾取透明物体
-    viewer.scene.useDepthPicking = true;
-
-    console.log('Cesium 高德地图 Viewer 初始化成功');
-  } catch (error) {
-    console.error('Cesium Viewer 初始化失败:', error);
-  }
-});
-
-// 视角切换方法
-const switchView = (viewName) => {
-  const viewParams = presetViews[viewName];
-  if (viewParams && viewer) {
-    viewer.camera.flyTo({
-      ...createView(viewParams),
-      duration: 2.0 // 动画持续时间（秒）
-    });
-  }
-};
-
-// 视角切换方法
-const switchModelView = (view) => {
-  const modelInstance = toRaw(view);
-  console.log(modelInstance)
-  if (viewer && view) {
-    viewer.flyTo(modelInstance);
-  }
-};
-
-// 获取当前视角信息的方法
-const getCurrentViewInfo = () => {
-  if (!viewer) {
-    console.warn('Viewer 尚未初始化');
-    return null;
-  }
-  const camera = viewer.camera;
-
-  const position = camera.position;  // 世界笛卡尔坐标系 x,y,z
-  const cartographic = Cesium.Cartographic.fromCartesian(position);
-  console.log(
-    {
-      longitude: Cesium.Math.toDegrees(cartographic.longitude),
-      latitude: Cesium.Math.toDegrees(cartographic.latitude),
-      height: cartographic.height,
-      heading: Cesium.Math.toDegrees(camera.heading),
-      pitch: Cesium.Math.toDegrees(camera.pitch),
-      roll: Cesium.Math.toDegrees(camera.roll)
-    }
-  )
-
-};
-
-// 暴露方法和数据给父组件使用
-defineExpose({
-  switchView,
-  dataWithModels,
-  switchModelView
-});
-
-onBeforeUnmount(() => {
-  // 销毁 Viewer，释放 WebGL 资源
-  if (viewer) {
-    viewer.destroy();
-    viewer = null;
-    console.log('Cesium Viewer 已销毁');
-  }
-});
-</script>
-
-<style scoped>
-.cesium-container {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-.btn-group {
-  position: absolute;
-  top: 10px;
-  z-index: 1000;
-  display: flex;
-  gap: 12rpx;
-}
-</style>
\ No newline at end of file
diff --git a/public/map/components/utils.ts b/public/map/components/utils.ts
new file mode 100644
index 0000000..1c0c147
--- /dev/null
+++ b/public/map/components/utils.ts
@@ -0,0 +1,244 @@
+import { RealtimeDeviceData, ShipRespVo } from "@/types/shorepower";
+import dayjs from "dayjs";
+import { MapApi } from "@/api/shorepower/map";
+/**
+ * 将毫秒时间戳格式化为 'YYYY/MM/DD HH:mm:ss' 格式
+ * @param timestamp 毫秒时间戳
+ * @returns 格式化后的时间字符串
+ */
+export const formatTimestamp = (
+  timestamp: number | null | undefined,
+  format = 'YYYY/MM/DD HH:mm:ss'
+): string => {
+  if (!timestamp) return '';
+  // 处理秒级时间戳（10位数字）
+  if (timestamp < 1e12) {
+    timestamp *= 1000;
+  }
+  return dayjs(timestamp).format(format);
+};
+
+/**
+ * 将两个时间戳之间的差值格式化为 "X小时Y分钟Z秒"
+ * @param {number} startTime - 开始时间戳（毫秒）
+ * @param {number} endTime - 结束时间戳（毫秒）
+ * @returns {string} 格式化后的时间字符串，如 "2小时30分钟15秒"
+ */
+export function formatDuration(startTime?: number, endTime?: number): string {
+  if (!startTime || !endTime) return '--';
+  const diffMs = Math.max(0, endTime - startTime);
+  const totalSeconds = Math.floor(diffMs / 1000);
+
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  let result = '';
+  if (hours > 0) result += `${hours}小时`;
+  if (minutes > 0) result += `${minutes}分钟`;
+  if (seconds > 0 || result === '') result += `${seconds}秒`;
+
+  return result || '0秒';
+}
+
+// 岸电使用文本构建
+export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDeviceData[]): { statusClass: string, status: string, useTime: string, useValue: string } | null {
+  const { usageRecordInfo, applyInfo } = ship;
+  if (!applyInfo || !usageRecordInfo || !usageRecordInfo.beginTime) {
+    return null;
+  }
+  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 measureValueStr = getValueById(realtimeDeviceData || [], deviceId,
+                  'measureValue')
+          if (measureValueStr !== undefined) {
+
+            // 优先使用人工开始读数，然后系统开始读数
+            const startReading = usageRecordInfo.powerStartManualReading ?? usageRecordInfo.powerStartSystemReading ?? 0;
+            const measureValue = typeof measureValueStr === 'string' ? parseFloat(measureValueStr) : measureValueStr;
+            useValue = measureValue - startReading;
+          }
+        } catch (error) {
+          console.error('获取实时数据失败:', error);
+          useValue = 0;
+        }
+      }
+    }
+
+    return {
+      statusClass: 'status-using',
+      status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`,
+      useTime: `${hours}小时${minutes}分钟${seconds}秒`,
+      useValue: useValue.toFixed(2) + 'kWH'
+    }
+  } else if (applyInfo.reason != 0) {
+    // 状态码映射表 - 包含状态文本和颜色类型
+    const statusMap: Record<string, { text: string; colorType: string }> = {
+      '-1': { text: '未知错误', colorType: 'default' },
+      '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() || '-1'
+    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'
+    }
+  }
+}
+
+
+/**
+ * 根据 id 查找对象数组中的指定字段值，并保留两位小数
+ * @param list - 对象数组，每个对象必须包含 id 字段
+ * @param id - 要查找的 id 值
+ * @param valueField - 要返回的字段名（必须是对象中除 id 外的 key）
+ * @returns 字段值，未找到则返回 undefined
+ */
+export function getValueById<T extends { id: number | string }, K extends keyof Omit<T, 'id'>>(
+  list: T[],
+  id: T['id'],
+  valueField: K
+): T[K] extends number | string ? string | undefined : T[K] | undefined {
+  const item = list.find(item => item.id === id);
+  
+  if (!item) return undefined;
+  
+  const value = item[valueField];
+  
+  // 如果值是数字或可以转换为数字的字符串，则保留两位小数
+  if (typeof value === 'number') {
+    return Number(value).toFixed(2) as any;
+  }
+  
+  if (typeof value === 'string' && !isNaN(Number(value))) {
+    return Number(value).toFixed(2) as any;
+  }
+  
+  // 否则返回原始值
+  return value as any;
+}
+
+export function parseRangeToTimestamp(range: string[], granularity: 'year' | 'month' | 'week' | 'day'): [number, number] | null {
+  if (!range || range.length !== 2) return null;
+
+  const [startStr, endStr] = range;
+
+  let startDate: Date;
+  let endDate: Date;
+
+  switch (granularity) {
+    case 'year':
+      // '2023' → 2023-01-01 00:00:00  ~ 2023-12-31 23:59:59
+      startDate = new Date(`${startStr}-01-01T00:00:00`);
+      endDate = new Date(`${endStr}-12-31T23:59:59`);
+      break;
+
+    case 'month':
+      // '2023-05' → 2023-05-01 00:00:00  ~ 2023-05-31 23:59:59
+      startDate = new Date(`${startStr}-01T00:00:00`);
+      // 获取该月最后一天
+      const yearMonth = startStr.split('-');
+      const nextMonth = new Date(+yearMonth[0], +yearMonth[1], 0); // 本月最后一天
+      endDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), nextMonth.getDate(), 23, 59, 59);
+      // 同样处理 endStr
+      const endYearMonth = endStr.split('-');
+      const endNextMonth = new Date(+endYearMonth[0], +endYearMonth[1], 0);
+      endDate = new Date(endNextMonth.getFullYear(), endNextMonth.getMonth(), endNextMonth.getDate(), 23, 59, 59);
+      break;
+
+    case 'week':
+    case 'day':
+    default:
+      // '2023-05-01' → 2023-05-01 00:00:00 ~ 2023-05-01 23:59:59（week 实际也是日期）
+      startDate = new Date(`${startStr}T00:00:00`);
+      endDate = new Date(`${endStr}T23:59:59`);
+      break;
+  }
+
+  const start = startDate.getTime();
+  const end = endDate.getTime();
+
+  if (isNaN(start) || isNaN(end)) {
+    console.error('日期解析失败:', range, granularity);
+    return null;
+  }
+
+  return [start, end];
+}
\ No newline at end of file
diff --git a/public/map/index.vue b/public/map/index.vue
index 87d8ce3..18c3182 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -1,13 +1,17 @@
 <template>
   <div>
-    <PublicMapComponents ref="mapComponentRef" class="map-base" :defCenter="[38.8417433306111, 118.43845367431642]"
-      :defZoom="12" />
-    <!-- <div class="show-data"> -->
+    <PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
+      :ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick" />
+    <div v-else class="loading">
+      <div style="margin: 0 auto">
+        loading
+      </div>
+    </div>
     <div class="head">
       <div class="head-title">
         <span>曹妃甸港区船舶岸电监管平台</span>
       </div>
-      <el-button class="view-btn" size="small" type="success" @click="mapComponentRef.switchView('overview')"
+      <el-button class="view-btn" size="small" type="success" @click="handleOverviewClick"
         style="margin-right: 10px;">概览视角</el-button>
 
       <div class="head-group">
@@ -21,341 +25,227 @@
 
     <!-- 港区概览 -->
     <template v-if="activeHeadGroup === 0">
-      <div class="left">
-        <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-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 shipStatusData" :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>
-                  <div class="ship-table-column ship-status">
-                    <div class="status-tag" :class="getStatusClass('正常')">
-                      正常
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="right">
-        <div v-if="selectedShip" class="card digital-twin-card--deep-blue" style="flex: 2;">
-          <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">{{ selectedShip.shipBasicInfo.name }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">英文船名:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.nameEn }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">船舶呼号:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.callSign }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">船长:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.length }} 米</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">船宽:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.width }} 米</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">满载吃水深度:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.fullLoadDraft }} 米</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">吨位:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.tonnage }} 吨</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">航运单位:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shippingCompany }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">岸电联系人:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContact }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">联系方式:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContactPhone }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">船检登记号:</span>
-                <span class="value">{{ selectedShip.shipBasicInfo.inspectionNo }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">创建时间:</span>
-                <span class="value">{{ new Date(selectedShip.shipBasicInfo.createTime).toLocaleString() }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="selectedShip && selectedShip.shorePowerAndShip" 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>
-          </div>
-          <div class="card-content">
-            <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>
-              </div>
-              <div class="detail-item">
-                <span class="label">靠泊状态:</span>
-                <span class="value">{{ getShorePowerStatusText(selectedShip.shorePowerAndShip.status) }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="selectedShip && !selectedShip.shorePowerAndShip" 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="no-selection">暂无岸电信息</div>
-          </div>
-        </div>
-
-        <div v-if="!selectedShip" 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="no-selection">请选择一艘船舶以查看详细信息</div>
-          </div>
-        </div>
-      </div>
+      <PortOverview :ship-status-data="shipStatusData" :shore-power-status-data="shorePowerStatusData"
+        @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList"
+        :ship-data-list="shipDataList" />
     </template>
 
     <!-- 港口岸电使用情况 -->
-    <template v-if="activeHeadGroup === 1">
-      <div class="left">
-        <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="overview-grid">
-              <div class="overview-item">
-                <div class="overview-value">{{ totalPower }}</div>
-                <div class="overview-label">累计用电（千瓦时）</div>
-              </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ fuelReduction }}</div>
-                <div class="overview-label">减少燃油（吨）</div>
-              </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ co2Reduction }}</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>
-              <div class="overview-item">
-                <div class="overview-value">{{ noxReduction }}</div>
-                <div class="overview-label">减少氮氧化物（千克）</div>
-              </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ so2Reduction }}</div>
-                <div class="overview-label">减少二氧化硫（千克）</div>
-              </div>
-            </div>
-          </div>
-        </div>
+    <!-- <template v-if="activeHeadGroup === 1"> -->
+    <ShorePowerUsage v-show="activeHeadGroup === 1" :realtime-device-data="realtimeDeviceData"
+      :active-head-group="activeHeadGroup" />
+    <!-- </template> -->
 
-        <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">
-            <LineChart :chart-data="fuelReductionData" title="减少燃油趋势" color="#4CAF50" style="height: 200px;" />
-          </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">
-            <LineChart :chart-data="co2ReductionData" title="减少CO₂排放趋势" color="#F44336" style="height: 200px;" />
-          </div>
-        </div>
-      </div>
-
-      <div class="right">
-        <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">减少PM2.5排放（千克）</span>
-          </div>
-          <div class="card-content">
-            <LineChart :chart-data="pm25ReductionData" title="减少PM2.5排放趋势" color="#FF9800" style="height: 200px;" />
-          </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">
-            <LineChart :chart-data="noxReductionData" title="减少NOₓ排放趋势" color="#9C27B0" style="height: 200px;" />
-          </div>
-        </div>
+    <!-- 港口企业岸电使用 -->
+    <!-- <template v-if="activeHeadGroup === 2"> -->
+    <CompanyShorePower v-show="activeHeadGroup === 2" :companyComparisonData="companyComparisonData"
+      :realtime-device-data="realtimeDeviceData" />
+    <!-- </template> -->
 
-        <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">
-            <LineChart :chart-data="so2ReductionData" title="减少SO₂排放趋势" color="#00BCD4" style="height: 200px;" />
-          </div>
-        </div>
-      </div>
+    <!-- 船舶岸电使用情况 -->
+    <template v-if="activeHeadGroup === 3">
+      <ShipShorePower :ship-data="shipDataList" :selected-ship="selectedShip" @item-click="handleSwitch" />
     </template>
 
-    <!-- 港口企业岸电使用 -->
-    <template v-if="activeHeadGroup === 2">
-      <div class="left">
-        <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">
-            <BarChart :chart-data="companyComparisonData" title="企业岸电使用对比" color="#4CAF50" style="height: 300px;" />
-          </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}子项占比`" style="height: 300px;" />
+    <template v-if="activeHeadGroup === 4">
+      <div v-if="selectedElectricalBox.type" class="right" style="width: 20%">
+        <div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row">
+          <div class="card digital-twin-card--deep-blue">
+            <div class="card-title">
+              <el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
+              <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">{{ selectedElectricalBox.data.shipBasicInfo.name + '-' +
+                    selectedElectricalBox.data.shipBasicInfo.nameEn
+                  }}</span>
+                </div>
+                <!-- <div class="detail-item">
+                <span class="label">英文船名:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.nameEn }}</span>
+              </div> -->
+                <!-- <div class="detail-item">
+                <span class="label">船舶呼号:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.callSign }}</span>
+              </div> -->
+                <div class="detail-item">
+                  <span class="label">长度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.length }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">宽度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.width }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">吨位:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.tonnage }} 吨</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">满载吃水深度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.fullLoadDraft }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电压:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.voltageDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电流:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.currentDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">频率:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.frequencyDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">靠泊状态:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.status,
+                    SHORE_POWER_STATUS,
+                  ) }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">靠泊类型:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.type,
+                    BERTH_TYPE)
+                  }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">靠泊时间:</span>
+                  <span class="value">{{
+                    formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualBerthTime) }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前状态:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipStatus }}</span>
+                </div>
+                <div v-if="selectedElectricalBox.data.applyInfo.reason === 0" class="detail-item">
+                  <span class="label">岸电使用时长</span>
+                  <span class="value">{{ showStatus(selectedElectricalBox.data, realtimeDeviceData)?.useTime }}</span>
+                </div>
+                <div v-if="selectedElectricalBox.data.applyInfo.reason === 0" class="detail-item">
+                  <span class="label">岸电使用用量:</span>
+                  <span class="value">{{ showStatus(selectedElectricalBox.data, realtimeDeviceData)?.useValue }}</span>
+                </div>
+                <div v-if="selectedElectricalBox.data.applyInfo.reason != 0" class="detail-item">
+                  <span class="label">未使用岸电原因:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data?.applyInfo?.reason,
+                    UNUSED_SHORE_POWER_REASON) }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">岸电联系人:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContact
+                  }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">联系方式:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContactPhone
+                  }}</span>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
-    </template>
+          <!-- <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">
 
-    <!-- 船舶岸电使用情况 -->
-    <template v-if="activeHeadGroup === 3">
-      <div class="left" style="width: 800px;">
-        <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" />
-            <span class="title-text">概览</span>
-          </div>
-          <div class="card-content">
-            <div class="overview-grid">
-              <div class="overview-item">
-                <div class="overview-value">{{ berthingShips }}</div>
-                <div class="overview-label">在泊船舶数量</div>
-              </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ shorePowerShips }}</div>
-                <div class="overview-label">使用岸电船舶数量</div>
-              </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ noShorePowerShips }}</div>
-                <div class="overview-label">未使用岸电船舶数量</div>
               </div>
             </div>
-          </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>
-          <div class="card-content">
-            <div class="ship-data-table-container" ref="scrollContainerRef">
-              <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 shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
+        <div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row">
+          <div class="card digital-twin-card--deep-blue">
+            <div class="card-title">
+              <el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
+              <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">{{ selectedElectricalBox.data?.name }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">位置:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.position }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电压:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.voltage }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">频率:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.frequency }} </span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">容量:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.capacity }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前电压:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.voltageDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前电流:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.currentDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前频率:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.frequencyDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前总用量:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data?.totalPowerDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前状态:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.storePowerStatus }}</span>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <!-- <div class="right" style="width: 600px;">
-    </div> -->
     </template>
-
-
   </div>
 </template>
 
 <script setup lang="ts">
 
-import PublicMapComponents from './components/index.vue'
-import LineChart from './components/LineChart.vue'
-import BarChart from './components/BarChart.vue'
-import PieChart from './components/PieChart.vue'
+import PublicMapComponents from './components/cesiumMap.vue'
+import PortOverview from './components/PortOverview.vue'
+import ShorePowerUsage from './components/ShorePowerUsage.vue'
+import CompanyShorePower from './components/CompanyShorePower.vue'
+import ShipShorePower from './components/ShipShorePower.vue'
 import dayjs from 'dayjs'
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import { MapApi } from "@/api/shorepower/map";
+import { RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'
+import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './components/dictionaryTable'
+import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
 defineOptions({ name: 'PublicMap' })
-
+let getRealtimeIntervalId: NodeJS.Timeout | null = null
 const headGroupList = ref<{ value: number, label: string }[]>([
   { value: 0, label: '港区概览' },
   { value: 1, label: '港口岸电使用情况' },
@@ -369,7 +259,8 @@ const activeHeadGroup = ref<number>(-1)
 interface PublicMapComponentsType {
   switchView: (viewName: string) => void
   dataWithModels: any[]
-  switchModelView: () => void
+  switchModelView: (data: any) => void
+  setElectricalBoxClickCallback: (callback: (data: any) => void) => void
 }
 
 const mapComponentRef = ref<PublicMapComponentsType | null>(null)
@@ -381,59 +272,23 @@ const selectHeadGroup = async (value: number) => {
   }
   activeHeadGroup.value = value
   if (value === 1) {
-    const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
-    console.log('deviceStatus', deviceStatus)
+    // const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
+    // console.log('deviceStatus', deviceStatus)
   }
 }
 
+
+
 // 实时时间显示
 const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 
-// 总览数据
-const totalPower = ref<string>('857525.45')
-const fuelReduction = ref<string>('108.04')
-const co2Reduction = ref<string>('574542.06')
-const pm25Reduction = ref<string>('1251.99')
-const noxReduction = ref<string>('15521.21')
-const so2Reduction = ref<string>('9004.03')
-
-// 船舶岸电使用情况数据
-const berthingShips = ref<string>('13')
-const shorePowerShips = ref<string>('3')
-const noShorePowerShips = ref<string>('10')
-
-// 船舶数据列表
-const shipData = ref([
-  { name: '华元503', wharf: '华能码头', berth: '3泊位', status: '使用岸电21小时45分钟，2479kWH', statusClass: 'status-using' },
-  { name: '信洋新征程', wharf: '国投码头', berth: '202#泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '华海航2', wharf: '华电码头（储运）', berth: '806泊位', status: '船电设施损坏，预计2025-11-30恢复', statusClass: 'status-damaged' },
-  { name: '东亿603', wharf: '国投码头', berth: '205#泊位', status: '电缆长度不匹配', statusClass: 'status-cable' },
-  { name: '恒远88', wharf: '华能码头', berth: '5泊位', status: '使用岸电12小时30分钟，1850kWH', statusClass: 'status-using' },
-  { name: '海昌10', wharf: '国投码头', berth: '103#泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '长航99', wharf: '华电码头（储运）', berth: '702泊位', status: '使用岸电8小时15分钟，1200kWH', statusClass: 'status-using' },
-  { name: '中远之星', wharf: '华能码头', berth: '1泊位', status: '电缆接口不匹配', statusClass: 'status-cable' },
-  { name: '渤海1号', wharf: '国投码头', berth: '301#泊位', status: '使用岸电15小时20分钟，2100kWH', statusClass: 'status-using' },
-  { name: '津港101', wharf: '华电码头（储运）', berth: '608泊位', status: '船电设施维护中', statusClass: 'status-damaged' },
-  { name: '胜利888', wharf: '华能码头', berth: '4泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '东方明珠', wharf: '国投码头', berth: '208#泊位', status: '使用岸电20小时10分钟，2750kWH', statusClass: 'status-using' },
-  { name: '海洋之星', wharf: '华电码头（储运）', berth: '901泊位', status: '电缆长度不足', statusClass: 'status-cable' },
-  { name: '中远海1', wharf: '华能码头', berth: '2泊位', status: '使用岸电18小时40分钟，2500kWH', statusClass: 'status-using' },
-  { name: '大连先锋', wharf: '国投码头', berth: '105#泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '青岛港9', wharf: '华电码头（储运）', berth: '505泊位', status: '船电设施故障', statusClass: 'status-damaged' },
-  { name: '上海号', wharf: '华能码头', berth: '6泊位', status: '使用岸电14小时30分钟，1950kWH', statusClass: 'status-using' },
-  { name: '广州先锋', wharf: '国投码头', berth: '305#泊位', status: '电缆接口问题', statusClass: 'status-cable' },
-  { name: '深圳港7', wharf: '华电码头（储运）', berth: '801泊位', status: '使用岸电9小时25分钟，1350kWH', statusClass: 'status-using' },
-  { name: '宁波号', wharf: '华能码头', berth: '7泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '厦门先锋', wharf: '国投码头', berth: '210#泊位', status: '使用岸电16小时15分钟，2200kWH', statusClass: 'status-using' },
-  { name: '福州港8', wharf: '华电码头（储运）', berth: '705泊位', status: '船电设施维护', statusClass: 'status-damaged' },
-  { name: '天津号', wharf: '华能码头', berth: '8泊位', status: '使用岸电11小时50分钟，1650kWH', statusClass: 'status-using' },
-  { name: '秦皇岛先锋', wharf: '国投码头', berth: '109#泊位', status: '电缆长度不匹配', statusClass: 'status-cable' },
-  { name: '唐山港6', wharf: '华电码头（储运）', berth: '603泊位', status: '使用岸电13小时25分钟，1850kWH', statusClass: 'status-using' },
-  { name: '黄骅港5', wharf: '华能码头', berth: '9泊位', status: '无受电设备', statusClass: 'status-no-equipment' },
-  { name: '曹妃甸1', wharf: '国投码头', berth: '312#泊位', status: '使用岸电19小时30分钟，2600kWH', statusClass: 'status-using' },
-  { name: '京唐港4', wharf: '华电码头（储运）', berth: '508泊位', status: '船电设施故障', statusClass: 'status-damaged' },
-  { name: '营口港3', wharf: '华能码头', berth: '10泊位', status: '使用岸电10小时45分钟，1500kWH', statusClass: 'status-using' }
-])
+// 实时设备采集值
+const realtimeDeviceData = ref<RealtimeDeviceData[]>([])
+const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
+const shipDataList = ref<ShipRespVo[]>([])
+const dataLoad = ref<boolean>(false)
+
+
 
 // 自动滚动相关变量
 const scrollContainerRef = ref<HTMLElement | null>(null)
@@ -448,35 +303,59 @@ const updateTime = () => {
 }
 
 const selectedShip = ref(null)
+const selectedElectricalBox = ref({
+  type: '',
+  data: null
+})
 
-const handleSwitch = (item) => {
-  console.log(item)
-  selectedShip.value = item
-  mapComponentRef.value?.switchModelView(item.modelInstance)
-}
-
-const shorePowerStatusMap = {
-  1: '待靠泊',
-  2: '靠泊中',
-  3: '岸电接入中',
-  4: '用电中',
-  5: '岸电卸载中',
-  6: '岸电卸载完成',
-  7: '离泊',
-  9: '未使用岸电'
+/* 回到初始视角 */
+const handleOverviewClick = () => {
+  mapComponentRef.value?.switchView('overview')
 }
 
-// 状态转换函数
-const getShorePowerStatusText = (status: number | string) => {
-  const statusNum = Number(status);
-  console.log(status)
-  return shorePowerStatusMap[statusNum] || status;
-}
+/* 切换至模型视角 */
+const handleSwitch = (item) => {
+  console.log(item)
+  // selectedShip.value = item
+  mapComponentRef.value?.switchModelView(item)
+}
+
+/* const handleFlyToitem = (item) => {
+  mapComponentRef.value?.switchModelView(item)
+} */
+
+// 处理岸电箱点击事件
+const handleElectricalBoxClick = (data) => {
+  activeHeadGroup.value = 4
+  console.log('岸电箱被点击:', data);
+  // 设置选中的岸电箱数据
+  // selectedElectricalBox.value = data;
+  selectedElectricalBox.value = {
+    type: data.type,
+    data: data.data
+  }
+  // 这里可以添加更多的处理逻辑，比如切换到特定的视图等
+};
+
+// 关闭岸电箱详情面板
+const closeElectricalBoxInfo = () => {
+  activeHeadGroup.value = -1;
+  selectedElectricalBox.value = {
+    type: '',
+    data: null
+  };
+};
 
 // 启动定时器更新时间
 let timer: NodeJS.Timeout
 onMounted(() => {
   timer = setInterval(updateTime, 1000)
+
+  // 设置岸电箱点击回调
+  if (mapComponentRef.value) {
+    console.log('mapComponentRef.value', mapComponentRef.value)
+    mapComponentRef.value.setElectricalBoxClickCallback(handleElectricalBoxClick);
+  }
 })
 
 // 组件卸载时清除所有资源
@@ -613,6 +492,112 @@ const startAutoScroll = () => {
   console.log('Auto scroll started')
 }
 
+const handleGetRealtimeAllData = async () => {
+  const data = await MapApi.getRealtimeAllData({})
+  const arrayOfObjects = Object.values(data) as RealtimeDeviceData[]
+  realtimeDeviceData.value = arrayOfObjects
+  // console.log('getRealtimeAllData', arrayOfObjects)
+
+}
+
+const StatusMap = {
+  1: '故障',
+  2: '故障',
+  3: '在线',
+  4: '在线',
+  5: '离线',
+  6: '在线',
+  8: '故障',
+  9: '离线',
+}
+
+// 状态转换函数
+const StatusText = (status: number | string) => {
+  const statusNum = Number(status);
+  // console.log(status)
+  return StatusMap[statusNum] || status;
+}
+
+const handleGetStorePower = async () => {
+  // console.log('loading')
+  const harborDistrictId = 1
+  const harborDistrictList = await HARBOR_DISTRICT()
+  const dockDistrictList = await DOCK_DISTRICT()
+  const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
+  ShorePowerList.value = res.map(item => ({
+    ...item,
+    storePowerStatus: StatusText(item.status),
+    position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
+  }))
+  // console.log('11', res)
+}
+
+const getShipStatus = (ship: ShipRespVo) => {
+  if (ship.shorePowerAndShip.status === 9) {
+    return '未使用'
+  } else {
+    const shorePower = realtimeDeviceData.value.find(item => item.deviceId === ship.shorePowerAndShip.shorePowerId)
+    if (!shorePower) {
+      return '未知'
+    }
+    // const shorePower = ShorePowerList.value.find(item => item.shorePowerId === ship.shorePowerAndShip.shorePowerId)
+    // return shorePower?.storePowerStatus || '故障'
+    if ([2, 5, 8].includes(shorePower.deviceStatus)) {
+      return '故障'
+    } else if (shorePower?.deviceStatus === 6) {
+      return '超容'
+    } else {
+      const Vobj = realtimeDeviceData.value.find(item => item.deviceId === ship.shorePower.voltageDeviceId)
+      const Cobj = realtimeDeviceData.value.find(item => item.deviceId === ship.shorePower.currentDeviceId)
+      let capacity = 0
+      try {
+        capacity = Number(ship.shorePowerEquipment.capacity)
+        console.log('capacity', capacity, Vobj.measureValue, Cobj?.measureValue)
+      } catch (error) {
+        return '获取岸电容量失败'
+      }
+      const power = (Vobj?.measureValue ?? 0) * (Cobj?.measureValue ?? 0);
+      if (power / 1000 > capacity) {
+        return '超容'
+      }
+      return '正常'
+    }
+  }
+}
+
+const handleGetShipData = async () => {
+  const shipData = await MapApi.getShipInfo({
+    harborDistrictId: 1
+  })
+  const buildData = shipData.map(item => ({
+    ...item,
+    shipStatus: getShipStatus(item),
+  }))
+  shipDataList.value = buildData
+}
+
+// 监听组件挂载
+onMounted(async () => {
+  // 延迟启动滚动，确保DOM已渲染
+  await handleGetRealtimeAllData()
+  await handleGetStorePower()
+  await handleGetShipData()
+  dataLoad.value = true
+  getRealtimeIntervalId = setInterval(() => {
+    handleGetRealtimeAllData()
+  }, 5000)
+})
+
+// 监听组件卸载
+onUnmounted(() => {
+  if (getRealtimeIntervalId) {
+    clearInterval(getRealtimeIntervalId)
+    getRealtimeIntervalId = null
+  }
+})
+
+
+
 // 监听组件挂载
 onMounted(() => {
   timer = setInterval(updateTime, 1000)
@@ -644,102 +629,6 @@ watch(
   { deep: true }
 )
 
-// 模拟折线图数据
-const lineChartData = ref([
-  { name: '1月', value: 120 },
-  { name: '2月', value: 132 },
-  { name: '3月', value: 101 },
-  { name: '4月', value: 134 },
-  { name: '5月', value: 90 },
-  { name: '6月', value: 230 },
-  { name: '7月', value: 210 },
-  { name: '8月', value: 150 },
-  { name: '9月', value: 180 },
-  { name: '10月', value: 200 },
-  { name: '11月', value: 190 },
-  { name: '12月', value: 220 }
-])
-
-// 减少燃油（吨）数据
-const fuelReductionData = ref([
-  { name: '1月', value: 80 },
-  { name: '2月', value: 85 },
-  { name: '3月', value: 70 },
-  { name: '4月', value: 90 },
-  { name: '5月', value: 60 },
-  { name: '6月', value: 150 },
-  { name: '7月', value: 140 },
-  { name: '8月', value: 100 },
-  { name: '9月', value: 120 },
-  { name: '10月', value: 130 },
-  { name: '11月', value: 125 },
-  { name: '12月', value: 145 }
-])
-
-// 减少二氧化碳排放（千克）数据
-const co2ReductionData = ref([
-  { name: '1月', value: 200 },
-  { name: '2月', value: 220 },
-  { name: '3月', value: 180 },
-  { name: '4月', value: 240 },
-  { name: '5月', value: 160 },
-  { name: '6月', value: 380 },
-  { name: '7月', value: 350 },
-  { name: '8月', value: 260 },
-  { name: '9月', value: 300 },
-  { name: '10月', value: 320 },
-  { name: '11月', value: 310 },
-  { name: '12月', value: 360 }
-])
-
-// 减少PM2.5排放（千克）数据
-const pm25ReductionData = ref([
-  { name: '1月', value: 15 },
-  { name: '2月', value: 18 },
-  { name: '3月', value: 12 },
-  { name: '4月', value: 20 },
-  { name: '5月', value: 10 },
-  { name: '6月', value: 35 },
-  { name: '7月', value: 32 },
-  { name: '8月', value: 22 },
-  { name: '9月', value: 28 },
-  { name: '10月', value: 30 },
-  { name: '11月', value: 29 },
-  { name: '12月', value: 33 }
-])
-
-// 减少氮氧化物（千克）数据
-const noxReductionData = ref([
-  { name: '1月', value: 25 },
-  { name: '2月', value: 28 },
-  { name: '3月', value: 22 },
-  { name: '4月', value: 30 },
-  { name: '5月', value: 18 },
-  { name: '6月', value: 45 },
-  { name: '7月', value: 42 },
-  { name: '8月', value: 32 },
-  { name: '9月', value: 38 },
-  { name: '10月', value: 40 },
-  { name: '11月', value: 39 },
-  { name: '12月', value: 43 }
-])
-
-// 减少二氧化硫（千克）数据
-const so2ReductionData = ref([
-  { name: '1月', value: 20 },
-  { name: '2月', value: 22 },
-  { name: '3月', value: 18 },
-  { name: '4月', value: 25 },
-  { name: '5月', value: 15 },
-  { name: '6月', value: 38 },
-  { name: '7月', value: 35 },
-  { name: '8月', value: 28 },
-  { name: '9月', value: 32 },
-  { name: '10月', value: 34 },
-  { name: '11月', value: 33 },
-  { name: '12月', value: 37 }
-])
-
 // 三个公司的岸电使用对比数据
 const companyComparisonData = ref([
   {
@@ -789,16 +678,6 @@ const selectedCompany = ref('华能码头')
 // 饼图数据
 const pieChartData = ref<Array<{ name: string; value: number }>>([])
 
-// 处理公司选择变化
-const handleCompanyChange = (companyName: string) => {
-  const selectedCompanyData = companyComparisonData.value.find(company => company.name === companyName)
-  if (selectedCompanyData && selectedCompanyData.children) {
-    pieChartData.value = selectedCompanyData.children
-  } else {
-    pieChartData.value = []
-  }
-}
-
 // 初始化饼图数据
 onMounted(async () => {
   // 默认选中华能码头的数据
@@ -823,15 +702,15 @@ const totalPowerDeviceId = computed(() => {
   return [...new Set(ids)]
 })
 
-// 从子组件获取的船舶数据
-const shipStatusData = computed(() => {
+// 从子组件获取的岸电箱状态数据
+const shorePowerStatusData = computed(() => {
   if (!mapComponentRef.value || !mapComponentRef.value.dataWithModels) {
     return []
   }
 
   // 过滤出轮船类的数据
   return mapComponentRef.value.dataWithModels
-    .filter(item => item.modelType === 'ship')
+    .filter(item => item.modelType === 'electrical_box')
     .map((item, index) => {
       // 解析数据中的状态信息
       let status = ['正常'] // 默认状态
@@ -857,24 +736,39 @@ const shipStatusData = computed(() => {
     })
 })
 
-// 获取状态对应的样式类
-const getStatusClass = (status: string) => {
-  switch (status) {
-    case '正常':
-      return 'status-normal'
-    case '异常':
-      return 'status-abnormal'
-    case '维修中':
-      return 'status-maintenance'
-    case '岸电使用中':
-      return 'status-shorepower'
-    case '岸电故障':
-      return 'status-fault'
-    default:
-      return 'status-default'
+// 从子组件获取的船舶数据
+const shipStatusData = computed(() => {
+  if (!mapComponentRef.value || !mapComponentRef.value.dataWithModels) {
+    return []
   }
-}
 
+  // 过滤出轮船类的数据
+  return mapComponentRef.value.dataWithModels
+    .filter(item => item.modelType === 'ship')
+    .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
+      }
+    })
+})
 
 </script>
 <style lang="scss">
@@ -947,6 +841,16 @@ const getStatusClass = (status: string) => {
   display: flex;
   flex-direction: column;
 
+  .search-container {
+    height: 100%;
+    width: 200px;
+    border-radius: 4px;
+    border: 1px solid rgb(10, 130, 170);
+    padding: 0 10px;
+    margin-bottom: 8px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
   .card-title {
     font-size: 18px;
     font-weight: 600;
@@ -954,6 +858,27 @@ const getStatusClass = (status: string) => {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
+    position: relative;
+
+    .close-btn {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #FFF;
+      font-size: 20px;
+      padding: 0;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: #ff4d4f;
+        background-color: rgba(255, 77, 79, 0.1);
+      }
+    }
 
     .vertical-line {
       width: 2px;
@@ -969,7 +894,7 @@ const getStatusClass = (status: string) => {
     }
 
     .title-text {
-      font-size: 16px;
+      font-size: 18px;
       color: #FFF;
       font-weight: 500;
     }
@@ -978,41 +903,15 @@ const getStatusClass = (status: string) => {
   .card-content {
     flex: 1;
     min-height: 0;
-  }
-
-  .overview-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 6px;
-    padding: 2px;
-  }
-
-  .overview-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 4px;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-  }
-
-  .overview-value {
-    font-size: 18px;
-    font-weight: bold;
-    color: #1296db;
-    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-    margin-bottom: 5px;
-  }
-
-  .overview-label {
-    text-align: center;
-    font-size: 12px;
-    color: #ccc;
+    width: 100%;
+    // padding: 10px;
+    height: 100%;
+    overflow-y: auto;
   }
 }
 
 /* 船舶数据表格样式 */
-.card-content {
+.ship-data-table-container .card-content {
   height: 100%;
   padding: 10px;
 }
@@ -1069,6 +968,13 @@ const getStatusClass = (status: string) => {
   white-space: nowrap;
 }
 
+.right-two-row {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+
+
 .ship-name {
   width: 20%;
 }
@@ -1085,23 +991,6 @@ const getStatusClass = (status: string) => {
   width: 35%;
 }
 
-/* 状态样式 */
-.status-using {
-  color: #00ff00;
-}
-
-.status-no-equipment {
-  color: #ff6600;
-}
-
-.status-damaged {
-  color: #ff3300;
-}
-
-.status-cable {
-  color: #ffcc00;
-}
-
 .head {
   display: flex;
   justify-content: space-between;
@@ -1166,7 +1055,7 @@ const getStatusClass = (status: string) => {
   left: 0px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 8px;
   overflow-y: auto;
 }
 
@@ -1179,7 +1068,7 @@ const getStatusClass = (status: string) => {
   right: 0px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 8px;
   overflow-y: auto;
 }
 
@@ -1206,6 +1095,7 @@ const getStatusClass = (status: string) => {
   justify-content: space-between;
   padding: 4px 0;
   border-bottom: 1px solid rgba(30, 120, 255, 0.2);
+  font-size: 24px;
 }
 
 .detail-item:last-child {
@@ -1240,7 +1130,7 @@ const getStatusClass = (status: string) => {
   background-color: rgba(17, 138, 237, 0.3);
   border-bottom: 1px solid rgba(30, 120, 255, 0.4);
   font-weight: bold;
-  font-size: 14px;
+  font-size: 18px;
 }
 
 .ship-table-body {
@@ -1252,7 +1142,7 @@ const getStatusClass = (status: string) => {
 .ship-table-row {
   display: flex;
   cursor: pointer;
-  padding: 3px 6px;
+  padding: 8px 8px;
   border-bottom: 1px solid rgba(30, 120, 255, 0.2);
   transition: background-color 0.2s ease;
 }
@@ -1286,7 +1176,7 @@ const getStatusClass = (status: string) => {
 }
 
 .ship-name-text {
-  font-size: 14px;
+  font-size: 18px;
   color: #e6f2ff;
   white-space: nowrap;
   overflow: hidden;
@@ -1303,7 +1193,7 @@ const getStatusClass = (status: string) => {
 .status-tag {
   padding: 2px 4px;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 16px;
   font-weight: 500;
   color: #fff;
   text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
@@ -1314,6 +1204,20 @@ const getStatusClass = (status: string) => {
   box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
 }
 
+/* 空闲状态 */
+.status-idle {
+  background-color: #2196F3;
+  /* 蓝色 */
+  box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
+}
+
+/* 故障状态 */
+.status-fault {
+  background-color: #F44336;
+  /* 红色 */
+  box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
+}
+
 .status-abnormal {
   background-color: #F44336;
   box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
@@ -1329,10 +1233,10 @@ const getStatusClass = (status: string) => {
   box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
 }
 
-.status-fault {
+/* .status-fault {
   background-color: #9C27B0;
   box-shadow: 0 0 5px rgba(156, 39, 176, 0.5);
-}
+} */
 
 .status-default {
   background-color: #607D8B;
@@ -1340,20 +1244,24 @@ const getStatusClass = (status: string) => {
 }
 
 /* 滚动条样式 */
-.ship-table-body::-webkit-scrollbar {
+.ship-table-body::-webkit-scrollbar,
+.card-content::-webkit-scrollbar {
   width: 6px;
 }
 
-.ship-table-body::-webkit-scrollbar-track {
+.ship-table-body::-webkit-scrollbar-track,
+.card-content::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
 }
 
-.ship-table-body::-webkit-scrollbar-thumb {
+.ship-table-body::-webkit-scrollbar-thumb,
+.card-content::-webkit-scrollbar-thumb {
   background: rgba(30, 120, 255, 0.5);
   border-radius: 3px;
 }
 
-.ship-table-body::-webkit-scrollbar-thumb:hover {
+.ship-table-body::-webkit-scrollbar-thumb:hover,
+.card-content::-webkit-scrollbar-thumb:hover {
   background: rgba(30, 120, 255, 0.7);
 }
 
@@ -1376,4 +1284,83 @@ const getStatusClass = (status: string) => {
   opacity: 0;
   transform: translateX(20px);
 }
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  padding: 2px;
+  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: 8px;
+}
+
+.overview-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1296db;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  margin-bottom: 0px;
+}
+
+.overview-label {
+  text-align: center;
+  font-size: 14px;
+  color: #ccc;
+}
+
+/* 状态样式 */
+.status-using {
+  color: #00ff00;
+}
+
+.status-no-equipment {
+  color: #ff6600;
+}
+
+.status-damaged {
+  color: #ff3300;
+}
+
+.status-cable {
+  color: #ffcc00;
+}
+
+/* 岸电箱详情样式 */
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #1296db;
+  margin: 15px 0 8px 0;
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgba(18, 150, 219, 0.3);
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.15);
+}
+
+.label {
+  color: #ddd;
+  font-size: 16px;
+}
+
+.value {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
 </style>
diff --git a/src/api/shorepower/map/index.ts b/src/api/shorepower/map/index.ts
index 646eb4d..f7c05bf 100644
--- a/src/api/shorepower/map/index.ts
+++ b/src/api/shorepower/map/index.ts
@@ -1,4 +1,11 @@
 import request from '@/config/axios'
+import {
+  apiResponse,
+  PageResultShipRespVo,
+  shipHistoryPageRequest,
+  ShipRespVo,
+  ShorePowerBerth
+} from '@/types/shorepower'
 
 /** 地图信息 */
 export interface Map {
@@ -70,8 +77,107 @@ export const MapApi = {
   // 查询用电接口设备状态
   getDeviceStatusByIds: async (ids: any) => {
     return await request.get({
-      url: `/energy/device/getDeviceStatusByIds?ids=${ids.join(',')}`,
+      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
+    })
+  },
+
+  // 查询所有码头和名称列表
+  getShorepowerIdAndNameListByHarborDistrictId: async (
+    harborDistrictId: number
+  ): Promise<ShorePowerBerth[]> => {
+    return await request.get({
+      url: `/shorepower/shore-power/expand/selectAllByHarborDistrict?harborDistrictId=${harborDistrictId}`
+    })
+  },
+
+  // 查询船舶历史数据分页
+  getShipHistoryPage: async (
+    params: shipHistoryPageRequest
+  ): Promise<apiResponse<PageResultShipRespVo<ShipRespVo>>> => {
+    return await request.post({
+      url: `/shorepower/shore-power-and-ship/expand/getHistoryPage`,
+      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) => {
diff --git a/src/types/shorepower.d.ts b/src/types/shorepower.d.ts
new file mode 100644
index 0000000..4ac7b0d
--- /dev/null
+++ b/src/types/shorepower.d.ts
@@ -0,0 +1,479 @@
+interface ShorePowerBerth {
+  id: number
+  berthId: number
+  equipmentId: number
+  name: string
+  totalPowerDeviceId: number
+  frequencyDeviceId: number
+  voltageDeviceId: number
+  currentDeviceId: number
+  status: number
+  createTime: number // Unix timestamp in milliseconds
+  shorePowerEquipmentInfo: ShorePowerEquipmentInfo
+  storePowerStatus?: string
+}
+
+interface ShorePowerEquipmentInfo {
+  id: number
+  dockId: number
+  name: string
+  capacity: string // 可考虑转为 number，但原始数据为字符串 "2000"
+  voltage: string // 如 "0.4/0.44"
+  frequency: string // 如 "50/60"
+  createTime: number // Unix timestamp in milliseconds
+}
+
+interface shipHistoryPageRequest {
+  /**
+   * 查询编号
+   */
+  ids?: number[]
+  /**
+   * 页码，从 1 开始
+   */
+  pageNo: number
+  /**
+   * 每页条数，最大值为 100
+   */
+  pageSize: number
+  /**
+   * 船舶编号
+   */
+  shipId?: number
+  /**
+   * 查询类型
+   */
+  type?: number
+  [property: string]: any
+}
+
+/**
+ * CommonResultPageResultShipRespVo
+ */
+interface apiResponse<T> {
+  code?: number
+  data?: T
+  msg?: string
+  [property: string]: any
+}
+
+/**
+ * PageResultShipRespVo，分页结果
+ */
+interface PageResultShipRespVo<T> {
+  /**
+   * 数据
+   */
+  list: T[]
+  /**
+   * 总量
+   */
+  total: number
+  [property: string]: any
+}
+
+/**
+ * ShipRespVo，管理后台 - 船舶岸电使用情况 Response VO
+ */
+export interface ShipRespVo {
+  /**
+   * 船舶状态
+   */
+  shipStatus?: string
+  /**
+   * 用电申请信息
+   */
+  applyInfo: ApplyRespVO
+  /**
+   * 船舶基础信息
+   */
+  shipBasicInfo: ShipBasicInfoRespVO
+  /**
+   * 用电接口信息
+   */
+  shorePower: ShorePowerRespVO
+  /**
+   * 岸电接口与船舶关系
+   */
+  shorePowerAndShip: ShorePowerAndShipRespVO
+  /**
+   * 岸电设施信息
+   */
+  shorePowerEquipment: ShorePowerEquipmentRespVO
+  /**
+   * 船舶用电信息
+   */
+  usageRecordInfo: UsageRecordRespVO
+  [property: string]: any
+}
+
+/**
+ * 用电申请信息
+ *
+ * ApplyRespVO，管理后台 - 用电申请 Response VO
+ */
+export interface ApplyRespVO {
+  /**
+   * 船方代理单位
+   */
+  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
+}
+
+/**
+ * 船舶基础信息
+ *
+ * ShipBasicInfoRespVO，管理后台 - 船舶基础信息 Response VO
+ */
+export interface ShipBasicInfoRespVO {
+  /**
+   * 船舶呼号
+   */
+  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
+}
+
+/**
+ * 用电接口信息
+ *
+ * ShorePowerRespVO，管理后台 - 岸电 Response VO
+ */
+export interface ShorePowerRespVO {
+  /**
+   * 泊位编号
+   */
+  berthId: number
+  /**
+   * 创建时间
+   */
+  createTime: Date
+  /**
+   * 岸电设备编号
+   */
+  equipmentId: number
+  /**
+   * 频率设备编号
+   */
+  frequencyDeviceId: number
+  /**
+   * 编号
+   */
+  id: number
+  /**
+   * 名称
+   */
+  name: string
+  /**
+   * 总电量设备编号
+   */
+  totalPowerDeviceId: number
+  /**
+   * 电压设备编号
+   */
+  voltageDeviceId: number
+  [property: string]: any
+}
+
+/**
+ * 岸电接口与船舶关系
+ *
+ * ShorePowerAndShipRespVO，管理后台 - 岸电接口与船舶关系 Response VO
+ */
+export interface ShorePowerAndShipRespVO {
+  /**
+   * 申请单编号
+   */
+  applyId: number
+  /**
+   * 创建时间
+   */
+  createTime: Date
+  /**
+   * 编号
+   */
+  id: number
+  /**
+   * 船舶编号
+   */
+  shipId: number
+  /**
+   * 岸电接口编号
+   */
+  shorePowerId: number
+  /**
+   * 靠泊状态
+   */
+  status: number
+  /**
+   * 靠泊类型
+   */
+  type: string
+  [property: string]: any
+}
+
+/**
+ * 岸电设施信息
+ *
+ * ShorePowerEquipmentRespVO，管理后台 - 岸电设施 Response VO
+ */
+export interface ShorePowerEquipmentRespVO {
+  /**
+   * 装机容量
+   */
+  capacity: string
+  /**
+   * 创建时间
+   */
+  createTime: Date
+  /**
+   * 码头编号
+   */
+  dockId: number
+  /**
+   * 频率
+   */
+  frequency: string
+  /**
+   * 编号
+   */
+  id: number
+  /**
+   * 名称
+   */
+  name: string
+  /**
+   * 电压
+   */
+  voltage: string
+  [property: string]: any
+}
+
+/**
+ * 船舶用电信息
+ *
+ * UsageRecordRespVO，管理后台 - 用电记录 Response VO
+ */
+export interface UsageRecordRespVO {
+  /**
+   * 实际靠泊时间
+   */
+  actualBerthTime?: Date
+  /**
+   * 实际离泊时间
+   */
+  actualDepartureTime?: number | null | undefined
+  /**
+   * 用电申请编号
+   */
+  applyId: number
+  /**
+   * 用电开始时供电方操作人
+   */
+  beginPowerSupplyOperator?: string
+  /**
+   * 用电开始时用电方操作人
+   */
+  beginPowerUsageOperator?: string
+  /**
+   * 用电开始时间
+   */
+  beginTime?: number
+  /**
+   * 创建时间
+   */
+  createTime: Date
+  /**
+   * 用电结束时间
+   */
+  endTime?: number
+  /**
+   * 编号
+   */
+  id: number
+  /**
+   * 用电结束时供电方操作人
+   */
+  overPowerSupplyOperator?: string
+  /**
+   * 用电结束时用电方操作人
+   */
+  overPowerUsageOperator?: string
+  /**
+   * 用电结束时间人工读数
+   */
+  powerEndManualReading?: number
+  /**
+   * 用电结束时间系统读数
+   */
+  powerEndSystemReading?: number
+  /**
+   * 用电开始时间人工读数
+   */
+  powerStartManualReading?: number
+  /**
+   * 用电开始时间系统读数
+   */
+  powerStartSystemReading?: number
+  /**
+   * 船舶编号
+   */
+  shipId: number
+  /**
+   * 作业单状态
+   */
+  status: number
+  [property: string]: any
+}
+
+interface RealtimeDeviceData {
+  createTime: number // 时间戳（毫秒）
+  deviceCode: string
+  deviceId: number
+  deviceName: string
+  deviceStatus: number
+  id: number
+  incrementCost: number
+  incrementValue: number
+  measureTime: number // 时间戳（毫秒）
+  measureValue: number
+}