From 6dacc2ba09148d126f3c578eaa2841e9eba5acca Mon Sep 17 00:00:00 2001
From: jiangAB <jiangjin514@foxmail.com>
Date: Fri, 12 Dec 2025 11:13:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/map/components/CompanyShorePower.vue   |  88 ++++
 public/map/components/PortOverview.vue        | 140 +++++++
 public/map/components/ShipShorePower.vue      | 189 +++++++++
 public/map/components/ShorePowerUsage.vue     | 130 ++++++
 .../{_index.vue => bk/components_index.vue}   |   0
 .../bk/map_index.vue}                         |   0
 .../components/{index.vue => cesiumMap.vue}   |   0
 .../map/components/{ => charts}/BarChart.vue  |   0
 .../map/components/charts/BarChartMinute.vue  | 182 +++++++++
 .../map/components/{ => charts}/LineChart.vue |  17 +-
 .../map/components/{ => charts}/PieChart.vue  |   0
 public/map/components/index.html              | 240 -----------
 public/map/index.vue                          | 385 +++---------------
 13 files changed, 799 insertions(+), 572 deletions(-)
 create mode 100644 public/map/components/CompanyShorePower.vue
 create mode 100644 public/map/components/PortOverview.vue
 create mode 100644 public/map/components/ShipShorePower.vue
 create mode 100644 public/map/components/ShorePowerUsage.vue
 rename public/map/components/{_index.vue => bk/components_index.vue} (100%)
 rename public/map/{_index.vue => components/bk/map_index.vue} (100%)
 rename public/map/components/{index.vue => cesiumMap.vue} (100%)
 rename public/map/components/{ => charts}/BarChart.vue (100%)
 create mode 100644 public/map/components/charts/BarChartMinute.vue
 rename public/map/components/{ => charts}/LineChart.vue (93%)
 rename public/map/components/{ => charts}/PieChart.vue (100%)
 delete mode 100644 public/map/components/index.html

diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
new file mode 100644
index 0000000..ee82048
--- /dev/null
+++ b/public/map/components/CompanyShorePower.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="company-shore-power">
+    <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" />
+        </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;" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BarChart from './charts/BarChart.vue'
+import PieChart from './charts/PieChart.vue'
+
+// 定义组件属性
+interface ChartDataItem {
+  name: string;
+  value: number;
+}
+
+interface Props {
+  companyComparisonData: ChartDataItem[];
+}
+
+const props = defineProps<Props>()
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'company-change', company: string): void;
+}>()
+
+// 组件内部状态
+const selectedCompany = ref<string>(props.companyComparisonData[0]?.name || '')
+
+// 模拟的饼图数据
+const pieChartData = computed(() => {
+  // 根据选中的公司生成模拟的子项数据
+  return [
+    { name: '码头1', value: Math.floor(Math.random() * 100) + 50 },
+    { name: '码头2', value: Math.floor(Math.random() * 100) + 50 },
+    { name: '码头3', value: Math.floor(Math.random() * 100) + 50 },
+    { name: '码头4', value: Math.floor(Math.random() * 100) + 50 },
+  ]
+})
+
+// 处理公司选择变化
+const handleCompanyChange = (company: string) => {
+  emit('company-change', company)
+}
+</script>
+
+<style scoped>
+.company-shore-power {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+
+.company-selector {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
new file mode 100644
index 0000000..6740ac2
--- /dev/null
+++ b/public/map/components/PortOverview.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="port-overview">
+    <div class="left" style="width: 500px;">
+      <div class="card digital-twin-card--deep-blue ">
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">船舶状态</span>
+          </div>
+          <input class="search-container" type="text" placeholder="搜索船舶" />
+        </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 class="status-tag" :class="getStatusClass('空闲')">
+                    空闲
+                  </div>
+                  <div class="status-tag" :class="getStatusClass('故障')">
+                    故障
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right" style="width: 1000px;">
+      <div v-if="selectedShip" 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">{{ selectedShip.shipBasicInfo.name }}</span>
+        </div>
+        <div class="card-content">
+          <div class="overview-grid">
+            <div class="overview-item">
+              <div class="overview-value">{{ selectedShip.shorePowerAndShip?.powerUsage || 0 }}</div>
+              <div class="overview-label">功率（kW）</div>
+            </div>
+            <div class="overview-item">
+              <div class="overview-value">{{ shorePowerStatusMap[selectedShip.shorePowerAndShip?.status || ''] }}</div>
+              <div class="overview-label">岸电状态</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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// 定义组件属性
+interface ShipItem {
+  id: string;
+  shipBasicInfo: {
+    name: string;
+  };
+  shorePowerAndShip?: {
+    status?: string;
+    powerUsage?: number;
+  };
+  modelInstance?: any;
+}
+
+interface Props {
+  shipStatusData: ShipItem[];
+  selectedShip: ShipItem | null;
+}
+
+const props = defineProps<Props>()
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'switch-ship', ship: ShipItem): void;
+}>()
+
+// 处理船舶选择
+const handleSwitch = (ship: ShipItem) => {
+  emit('switch-ship', ship)
+}
+
+// 状态样式映射
+const shorePowerStatusMap = {
+  'on': '使用中',
+  'off': '未使用',
+  'fault': '故障',
+  '': '未知'
+}
+
+// 获取状态样式类
+const getStatusClass = (status: string) => {
+  return `status-${status === '使用中' ? 'shorepower' : status === '故障' ? 'fault' : 'default'}`
+}
+</script>
+
+<style scoped>
+.port-overview {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+
+.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);
+}
+</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..4e3f936
--- /dev/null
+++ b/public/map/components/ShipShorePower.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="ship-shore-power">
+    <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 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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+
+// 定义组件属性
+interface ShipDataItem {
+  name: string;
+  wharf: string;
+  berth: string;
+  status: string;
+  statusClass: string;
+}
+
+interface Props {
+  berthingShips: number;
+  shorePowerShips: number;
+  noShorePowerShips: number;
+  shipData: ShipDataItem[];
+}
+
+const props = defineProps<Props>()
+
+// 滚动容器引用
+const scrollContainerRef = ref<HTMLElement | null>(null)
+
+// 滚动相关变量
+let scrollInterval: NodeJS.Timeout | null = null
+const scrollSpeed = ref<number>(20) // 滚动速度，越小越快
+
+// 开始滚动
+const startScroll = () => {
+  if (!scrollContainerRef.value) return
+
+  const container = scrollContainerRef.value
+  const content = container.querySelector('.ship-data-table')
+  if (!content) return
+
+  // 计算滚动距离
+  const scrollDistance = content.offsetHeight - container.clientHeight
+  if (scrollDistance <= 0) return // 内容高度小于容器高度，不需要滚动
+
+  let currentScroll = 0
+  let direction = 1 // 1 向下滚动，-1 向上滚动
+
+  // 清除可能存在的旧定时器
+  if (scrollInterval) {
+    clearInterval(scrollInterval)
+  }
+
+  // 创建新的滚动定时器
+  scrollInterval = setInterval(() => {
+    if (!scrollContainerRef.value) return
+
+    currentScroll += direction * scrollSpeed.value
+
+    // 检查是否到达边界
+    if (currentScroll >= scrollDistance) {
+      currentScroll = scrollDistance
+      direction = -1
+    } else if (currentScroll <= 0) {
+      currentScroll = 0
+      direction = 1
+    }
+
+    // 应用滚动
+    scrollContainerRef.value.scrollTop = currentScroll
+  }, 100)
+}
+
+// 停止滚动
+const stopScroll = () => {
+  if (scrollInterval) {
+    clearInterval(scrollInterval)
+    scrollInterval = null
+  }
+}
+
+// 监听activeHeadGroup变化
+watch(
+  () => props.shipData,
+  () => {
+    // 数据变化时重新开始滚动
+    stopScroll()
+    startScroll()
+  },
+  { deep: true }
+)
+
+// 组件挂载时开始滚动
+onMounted(() => {
+  // 延迟启动滚动，确保DOM已经渲染完成
+  setTimeout(() => {
+    startScroll()
+  }, 500)
+})
+
+// 组件销毁前停止滚动
+onBeforeUnmount(() => {
+  stopScroll()
+})
+</script>
+
+<style scoped>
+.ship-shore-power {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+
+.ship-data-table-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.ship-data-table {
+  width: 100%;
+}
+
+.ship-data-row {
+  display: flex;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.ship-data-cell {
+  flex: 1;
+  padding: 10px;
+  color: #fff;
+}
+
+.shore-power-status {
+  font-weight: bold;
+}
+
+.shore-power-status.status-on {
+  color: #4CAF50;
+}
+
+.shore-power-status.status-off {
+  color: #F44336;
+}
+</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..d745c4d
--- /dev/null
+++ b/public/map/components/ShorePowerUsage.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="shore-power-usage">
+    <div class="left" style="width: 40%;">
+      <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>
+
+      <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" />
+        </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">减少CO₂排放（千克）</span>
+        </div>
+        <div class="card-content">
+          <LineChart :chart-data="co2ReductionData" title="减少CO₂排放趋势" color="#F44336" />
+        </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">减少PM2.5排放（千克）</span>
+        </div>
+        <div class="card-content">
+          <LineChart :chart-data="pm25ReductionData" title="减少PM2.5排放趋势" color="#FF9800" />
+        </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">减少NOₓ排放（千克）</span>
+        </div>
+        <div class="card-content">
+          <LineChart :chart-data="noxReductionData" title="减少NOₓ排放趋势" color="#9C27B0" />
+        </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">减少SO₂排放（千克）</span>
+        </div>
+        <div class="card-content">
+          <LineChart :chart-data="so2ReductionData" title="减少SO₂排放趋势" color="#00BCD4" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LineChart from './charts/LineChart.vue'
+
+// 定义组件属性
+interface ChartDataItem {
+  name: string;
+  value: number;
+}
+
+interface Props {
+  totalPower: number;
+  fuelReduction: number;
+  co2Reduction: number;
+  pm25Reduction: number;
+  noxReduction: number;
+  so2Reduction: number;
+  fuelReductionData: ChartDataItem[];
+  co2ReductionData: ChartDataItem[];
+  pm25ReductionData: ChartDataItem[];
+  noxReductionData: ChartDataItem[];
+  so2ReductionData: ChartDataItem[];
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+.shore-power-usage {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+</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 100%
rename from public/map/_index.vue
rename to public/map/components/bk/map_index.vue
diff --git a/public/map/components/index.vue b/public/map/components/cesiumMap.vue
similarity index 100%
rename from public/map/components/index.vue
rename to public/map/components/cesiumMap.vue
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..5ecd646
--- /dev/null
+++ b/public/map/components/charts/BarChartMinute.vue
@@ -0,0 +1,182 @@
+<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: '#1296db'
+})
+
+// 图表容器引用和实例
+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: '10%',
+      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: props.color
+              },
+              {
+                offset: 1,
+                color: props.color + '80'
+              }
+            ]
+          },
+          borderRadius: [1, 1, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: props.color
+          }
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+// 监听数据变化
+watch(
+  () => props.chartData,
+  () => {
+    updateChart()
+  },
+  { deep: true }
+)
+
+// 窗口大小改变时重绘图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  initChart()
+  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 93%
rename from public/map/components/LineChart.vue
rename to public/map/components/charts/LineChart.vue
index 1f3b849..925d538 100644
--- a/public/map/components/LineChart.vue
+++ b/public/map/components/charts/LineChart.vue
@@ -37,7 +37,7 @@ const updateChart = () => {
 
   const option = {
     title: {
-      text: props.title,
+      // text: props.title,
       textStyle: {
         color: '#fff',
         fontSize: 14
@@ -113,10 +113,10 @@ const updateChart = () => {
       }
     ],
     grid: {
-      left: '5%',
-      right: '5%',
-      top: '15%',
-      bottom: '10%',
+      left: '1%',
+      right: '1%',
+      top: '6%',
+      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/PieChart.vue b/public/map/components/charts/PieChart.vue
similarity index 100%
rename from public/map/components/PieChart.vue
rename to public/map/components/charts/PieChart.vue
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/index.vue b/public/map/index.vue
index 87d8ce3..da435de 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -1,8 +1,6 @@
 <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" />
     <div class="head">
       <div class="head-title">
         <span>曹妃甸港区船舶岸电监管平台</span>
@@ -21,324 +19,29 @@
 
     <!-- 港区概览 -->
     <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" :selected-ship="selectedShip" @select-ship="handleSwitch"
+        :get-status-class="getStatusClass" :get-shore-power-status-text="getShorePowerStatusText" />
     </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>
-
-        <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>
-
-        <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>
+      <ShorePowerUsage :total-power="totalPower" :fuel-reduction="fuelReduction" :co2-reduction="co2Reduction"
+        :pm25-reduction="pm25Reduction" :nox-reduction="noxReduction" :so2-reduction="so2Reduction"
+        :fuel-reduction-data="fuelReductionData" :co2-reduction-data="co2ReductionData"
+        :pm25-reduction-data="pm25ReductionData" :nox-reduction-data="noxReductionData"
+        :so2-reduction-data="so2ReductionData" />
     </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;" />
-            </div>
-          </div>
-        </div>
-      </div>
+      <CompanyShorePower :company-comparison-data="companyComparisonData" :selected-company="selectedCompany"
+        :pie-chart-data="pieChartData" @update:selected-company="selectedCompany = $event" />
     </template>
 
     <!-- 船舶岸电使用情况 -->
     <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 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>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- <div class="right" style="width: 600px;">
-    </div> -->
+      <ShipShorePower :berthing-ships="berthingShips" :shore-power-ships="shorePowerShips"
+        :no-shore-power-ships="noShorePowerShips" :ship-data="shipData" />
     </template>
 
 
@@ -347,10 +50,11 @@
 
 <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";
@@ -862,14 +566,18 @@ const getStatusClass = (status: string) => {
   switch (status) {
     case '正常':
       return 'status-normal'
+    case '空闲':
+      return 'status-idle'
+    case '故障':
+      return 'status-fault'
     case '异常':
       return 'status-abnormal'
     case '维修中':
       return 'status-maintenance'
     case '岸电使用中':
       return 'status-shorepower'
-    case '岸电故障':
-      return 'status-fault'
+    // case '岸电故障':
+    //   return 'status-fault'
     default:
       return 'status-default'
   }
@@ -947,6 +655,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;
@@ -969,7 +687,7 @@ const getStatusClass = (status: string) => {
     }
 
     .title-text {
-      font-size: 16px;
+      font-size: 18px;
       color: #FFF;
       font-weight: 500;
     }
@@ -978,6 +696,8 @@ const getStatusClass = (status: string) => {
   .card-content {
     flex: 1;
     min-height: 0;
+    width: 100%;
+    // padding: 10px;
   }
 
   .overview-grid {
@@ -1012,7 +732,7 @@ const getStatusClass = (status: string) => {
 }
 
 /* 船舶数据表格样式 */
-.card-content {
+.ship-data-table-container .card-content {
   height: 100%;
   padding: 10px;
 }
@@ -1166,7 +886,7 @@ const getStatusClass = (status: string) => {
   left: 0px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 8px;
   overflow-y: auto;
 }
 
@@ -1179,7 +899,7 @@ const getStatusClass = (status: string) => {
   right: 0px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 8px;
   overflow-y: auto;
 }
 
@@ -1206,6 +926,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 +961,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 +973,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 +1007,7 @@ const getStatusClass = (status: string) => {
 }
 
 .ship-name-text {
-  font-size: 14px;
+  font-size: 18px;
   color: #e6f2ff;
   white-space: nowrap;
   overflow: hidden;
@@ -1303,7 +1024,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 +1035,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 +1064,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;