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/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
index ee82048..633cddc 100644
--- a/public/map/components/CompanyShorePower.vue
+++ b/public/map/components/CompanyShorePower.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="company-shore-power">
-    <div class="left">
-      <div class="card digital-twin-card--deep-blue ">
+    <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" />
@@ -10,7 +10,7 @@
         <div class="card-content">
           <BarChart :chart-data="companyComparisonData" title="企业岸电使用对比" color="#4CAF50" />
         </div>
-      </div>
+      </div> -->
       <div class="card digital-twin-card--deep-blue ">
         <div class="card-title">
           <div class="vertical-line"></div>
@@ -25,7 +25,7 @@
               <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;" />
+            <PieChart :chart-data="pieChartData" :title="`${selectedCompany}子项占比`" />
           </div>
         </div>
       </div>
@@ -35,13 +35,13 @@
 
 <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;
+  children?: ChartDataItem[];
 }
 
 interface Props {
@@ -50,28 +50,19 @@ interface Props {
 
 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 selectedCompanyData = props.companyComparisonData.find(item => item.name === selectedCompany.value)
+  return selectedCompanyData?.children || []
 })
 
 // 处理公司选择变化
 const handleCompanyChange = (company: string) => {
-  emit('company-change', company)
+  selectedCompany.value = company
 }
 </script>
 
@@ -82,7 +73,28 @@ const handleCompanyChange = (company: string) => {
   gap: 10px;
 }
 
+.left {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card-content {
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+}
+
 .company-selector {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 </style>
\ No newline at end of file
diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
index 6740ac2..c4aacc6 100644
--- a/public/map/components/PortOverview.vue
+++ b/public/map/components/PortOverview.vue
@@ -8,7 +8,8 @@
             <img src="@/assets/svgs/data.svg" class="title-icon" />
             <span class="title-text">船舶状态</span>
           </div>
-          <input class="search-container" type="text" placeholder="搜索船舶" />
+          <input class="search-container" type="text" placeholder="搜索船舶" v-model="searchKeyword"
+            @input="handleSearch" />
         </div>
 
         <div class=" card-content">
@@ -18,7 +19,8 @@
               <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 v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
+                @click="handleSwitch(ship)">
                 <div class="ship-table-column ship-name">
                   <div class="ship-icon">🚢</div>
                   <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
@@ -41,25 +43,89 @@
       </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 v-if="selectedShip" 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">{{ 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 class="overview-item">
-              <div class="overview-value">{{ shorePowerStatusMap[selectedShip.shorePowerAndShip?.status || ''] }}</div>
-              <div class="overview-label">岸电状态</div>
+          </div>
+        </div>
+        <div class="card digital-twin-card--deep-blue">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">岸电信息</span>
+          </div>
+          <div class="card-content">
+            <div class="ship-detail">
+              <div class="detail-item">
+                <span class="label">停泊状态:</span>
+                <span class="value">{{ 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>
+
       <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;">
         <div class="card-title">
           <div class="vertical-line"></div>
@@ -75,7 +141,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 
 // 定义组件属性
 interface ShipItem {
@@ -97,27 +163,74 @@ interface Props {
 
 const props = defineProps<Props>()
 
+// 搜索关键字
+const searchKeyword = ref('')
+
+// 过滤后的船舶数据
+const filteredShipStatusData = computed(() => {
+  if (!searchKeyword.value) {
+    return props.shipStatusData
+  }
+  return props.shipStatusData.filter(ship =>
+    ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
+  )
+})
+
+// 处理搜索输入
+const handleSearch = () => {
+  // 输入处理逻辑（如果需要额外处理可以在这里添加）
+}
+
 // 定义事件
 const emit = defineEmits<{
   (e: 'switch-ship', ship: ShipItem): void;
+  (e: 'item-click', ship: ShipItem): void;
 }>()
 
 // 处理船舶选择
 const handleSwitch = (ship: ShipItem) => {
+  // console.log(ship)
   emit('switch-ship', ship)
+  emit('item-click', ship)
 }
 
-// 状态样式映射
 const shorePowerStatusMap = {
-  'on': '使用中',
-  'off': '未使用',
-  'fault': '故障',
-  '': '未知'
+  1: '待靠泊',
+  2: '靠泊中',
+  3: '岸电接入中',
+  4: '用电中',
+  5: '岸电卸载中',
+  6: '岸电卸载完成',
+  7: '离泊',
+  9: '未使用岸电'
+}
+
+// 状态转换函数
+const getShorePowerStatusText = (status: number | string) => {
+  const statusNum = Number(status);
+  console.log(status)
+  return shorePowerStatusMap[statusNum] || status;
 }
 
-// 获取状态样式类
 const getStatusClass = (status: string) => {
-  return `status-${status === '使用中' ? 'shorepower' : status === '故障' ? 'fault' : 'default'}`
+  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'
+    default:
+      return 'status-default'
+  }
 }
 </script>
 
@@ -128,11 +241,18 @@ const getStatusClass = (status: string) => {
   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);
diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue
index 4e3f936..5e0d3bc 100644
--- a/public/map/components/ShipShorePower.vue
+++ b/public/map/components/ShipShorePower.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ship-shore-power">
-    <div class="left" style="width: 800px;">
+    <div class="left" style="width: 50%;">
       <div class="card digital-twin-card--deep-blue " style="flex: 1;">
         <div class="card-title">
           <div class="vertical-line"></div>
@@ -31,13 +31,13 @@
           <span class="title-text">数据</span>
         </div>
         <div class="card-content">
-          <div class="ship-data-table-container" ref="scrollContainerRef">
+          <div class="ship-data-table-container">
             <div class="ship-data-table">
               <div v-for="(ship, index) in shipData" :key="index" class="ship-data-row">
                 <div class="ship-data-cell ship-name">{{ ship.name }}</div>
                 <div class="ship-data-cell wharf-name">{{ ship.wharf }}</div>
                 <div class="ship-data-cell berth-number">{{ ship.berth }}</div>
-                <div class="ship-data-cell shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
+                <div class="ship-data-cell content shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
               </div>
             </div>
           </div>
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+// import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 
 // 定义组件属性
 interface ShipDataItem {
@@ -67,85 +67,6 @@ interface Props {
 }
 
 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>
@@ -171,8 +92,13 @@ onBeforeUnmount(() => {
 
 .ship-data-cell {
   flex: 1;
-  padding: 10px;
-  color: #fff;
+  padding: 1px;
+  font-size: 16px;
+  /* color: #fff; */
+}
+
+.ship-data-cell.content {
+  flex: 2;
 }
 
 .shore-power-status {
@@ -186,4 +112,15 @@ onBeforeUnmount(() => {
 .shore-power-status.status-off {
   color: #F44336;
 }
+
+.overview-value {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.overview-label {
+  font-size: 18px;
+  font-weight: 700;
+
+}
 </style>
\ No newline at end of file
diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue
index d745c4d..eacfc9f 100644
--- a/public/map/components/ShorePowerUsage.vue
+++ b/public/map/components/ShorePowerUsage.vue
@@ -1,94 +1,165 @@
 <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>
+    <!-- Average Mode -->
+    <template v-if="displayMode === 'average'">
+      <div class="left" style="width: 40%;">
+        <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
+          @click="handleSelectCard(card.id)">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">{{ card.title }}</span>
+          </div>
+          <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>
+            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
           </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 class="right" style="width: 40%;">
+        <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
+          @click="handleSelectCard(card.id)">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">{{ card.title }}</span>
+          </div>
+          <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>
+            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+          </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">减少NOₓ排放（千克）</span>
-        </div>
-        <div class="card-content">
-          <LineChart :chart-data="noxReductionData" title="减少NOₓ排放趋势" color="#9C27B0" />
+    <!-- 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" @click="handleSelectCard(card.id)">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">{{ card.title }}</span>
+          </div>
+          <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>
+            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+          </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">减少SO₂排放（千克）</span>
-        </div>
-        <div class="card-content">
-          <LineChart :chart-data="so2ReductionData" title="减少SO₂排放趋势" color="#00BCD4" />
+      <div class="one-row">
+        <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
+          class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
+          <div class="card-title">
+            <div class="vertical-line"></div>
+            <img src="@/assets/svgs/data.svg" class="title-icon" />
+            <span class="title-text">{{ card.title }}</span>
+          </div>
+          <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>
+            <BarChartMinute v-else :chart-data="commonChartData" :title="card.title" :color="card.color" />
+          </div>
         </div>
       </div>
     </div>
@@ -96,7 +167,8 @@
 </template>
 
 <script setup lang="ts">
-import LineChart from './charts/LineChart.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import BarChartMinute from './charts/BarChartMinute.vue'
 
 // 定义组件属性
 interface ChartDataItem {
@@ -104,6 +176,14 @@ interface ChartDataItem {
   value: number;
 }
 
+interface CardInfo {
+  id: string;
+  title: string;
+  type: 'overview' | 'chart';
+  unit?: string;
+  color?: string;
+}
+
 interface Props {
   totalPower: number;
   fuelReduction: number;
@@ -111,20 +191,164 @@ interface Props {
   pm25Reduction: number;
   noxReduction: number;
   so2Reduction: number;
-  fuelReductionData: ChartDataItem[];
-  co2ReductionData: ChartDataItem[];
-  pm25ReductionData: ChartDataItem[];
-  noxReductionData: ChartDataItem[];
-  so2ReductionData: ChartDataItem[];
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const displayMode = ref<'average' | 'magnify'>('average')
+const selectedCard = ref<string>('overview')
+// 创建统一的模拟数据源
+const commonChartData = ref<ChartDataItem[]>([])
+
+// 定义卡片信息
+const cards = ref<CardInfo[]>([
+  {
+    id: 'overview',
+    title: '总览',
+    type: 'overview'
+  },
+  {
+    id: 'fuel',
+    title: '减少燃油（吨）',
+    type: 'chart',
+    unit: '吨',
+    color: '#4CAF50' // 绿色 - 代表节能、清洁能源
+  },
+  {
+    id: 'co2',
+    title: '减少CO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#2E7D32' // 深绿色/蓝绿 - 温室气体（国际常用低碳绿色系）
+  },
+  {
+    id: 'pm25',
+    title: '减少PM2.5排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#9E9E9E' // 灰色 - 颗粒物（国际通用）
+  },
+  {
+    id: 'nox',
+    title: '减少NOₓ排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FF9800' // 橙色 - 氮氧化物（国际通用）
+  },
+  {
+    id: 'so2',
+    title: '减少SO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FFEB3B' // 黄色 - 二氧化硫（国际通用）
+  }
+])
+
+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: number | null = null
+
+// 追加新数据
+const appendNewData = () => {
+  const now = new Date()
+  commonChartData.value.push({
+    name: now.toLocaleTimeString(),
+    value: Math.floor(Math.random() * 100) + 10
+  })
+}
+
+// 组件挂载时初始化数据和定时器
+onMounted(() => {
+  commonChartData.value = generateInitialData()
+  timer = window.setInterval(appendNewData, 1000)
+})
+
+// 组件销毁前清除定时器
+onBeforeUnmount(() => {
+  if (timer) {
+    window.clearInterval(timer)
+  }
+})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .shore-power-usage {
   display: flex;
   height: 100%;
   gap: 10px;
 }
+
+.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: 32px;
+    }
+
+    .overview-label {
+      font-size: 24px;
+    }
+  }
+
+  .one-row {
+    height: 30%;
+    display: flex;
+    gap: 8px;
+
+    .card {
+      flex: 1;
+    }
+  }
+}
+
+.card {
+  padding: 6px;
+  cursor: pointer;
+}
+
+.right {
+  /* gap: 0 */
+}
 </style>
\ No newline at end of file
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
index e3c5aba..f2ce4d1 100644
--- a/public/map/components/cesiumMap.vue
+++ b/public/map/components/cesiumMap.vue
@@ -3,7 +3,7 @@
     <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> -->
+        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')"
@@ -40,6 +40,14 @@ const presetViews = {
   }
 };
 
+// 岸电箱点击回调函数
+let onElectricalBoxClick = null;
+
+// 设置岸电箱点击回调函数的方法
+const setElectricalBoxClickCallback = (callback) => {
+  onElectricalBoxClick = callback;
+};
+
 const createView = (obj) => {
   return {
     destination: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude, obj.height),
@@ -62,7 +70,7 @@ onMounted(async () => {
     viewer = new Cesium.Viewer(cesiumContainerRef.value, {
       // **核心设置：禁用所有默认影像，我们将手动添加高德地图**
       imageryProvider: false,
-
+      // infoBox: true,
       // **使用平坦地形，避免依赖 Cesium Ion**
       terrainProvider: new Cesium.EllipsoidTerrainProvider(),
       // sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
@@ -104,7 +112,21 @@ onMounted(async () => {
     // 启用时钟动画，确保模型能够根据时间更新
     viewer.clock.shouldAnimate = true;
 
-    viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200;
+    // 相机控制设置
+    const controller = viewer.scene.screenSpaceCameraController;
+    // 设置最大缩放距离（相机到地球中心的最大距离）
+    // 500,000.0 米 = 500 公里
+    const MAX_DISTANCE = 500000.0;
+
+    // 启用缩放，然后设置其最大限制
+    controller.enableZoom = true;
+    controller.maximumZoomDistance = MAX_DISTANCE;
+
+    // （可选）同时限制最小缩放距离，防止滚轮进入模型内部
+    // 例如，限制最小距离为 1000.0 米
+    controller.minimumZoomDistance = 1000;
+
+    // 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}",
@@ -195,8 +217,8 @@ onMounted(async () => {
             dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
             return;
           }
-
-          if (dataObj.icon === 'ship_green') {
+          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)
             const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
             const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
@@ -233,8 +255,8 @@ onMounted(async () => {
               position: labelPosition, // 船上方约10米
               label: {
                 text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
-                font: '12px sans-serif',
-                fillColor: Cesium.Color.WHITE,
+                font: '16px sans-serif',
+                fillColor: Cesium.Color.LIME,
                 outlineColor: Cesium.Color.BLACK,
                 outlineWidth: 2,
                 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
@@ -242,6 +264,7 @@ onMounted(async () => {
                 disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
               }
             });
+            // if (dataObj.icon === 'ship_red') {
             const overlayBillboard = viewer.entities.add({
               position: statusPosition,
               billboard: {
@@ -252,11 +275,13 @@ onMounted(async () => {
                 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)
+                  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);
@@ -264,7 +289,7 @@ onMounted(async () => {
               position: labelPosition, // 船上方约10米
               label: {
                 text: dataObj.name || `Marker-${item.id || index}`,
-                font: '20px sans-serif',
+                font: '12px sans-serif',
                 fillColor: Cesium.Color.WHITE,
                 outlineColor: Cesium.Color.BLACK,
                 outlineWidth: 2,
@@ -279,8 +304,13 @@ onMounted(async () => {
             const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
             // 投放岸电箱模型
             const electricalBoxModel = viewer.entities.add({
-              name: 'Electrical Box Model',
+              name: '岸电箱',
               position: position,
+              // 添加唯一标识用于识别点击事件
+              properties: {
+                modelType: 'electrical_box',
+                data: itemWithModel
+              },
               orientation: Cesium.Transforms.headingPitchRollQuaternion(
                 position,
                 new Cesium.HeadingPitchRoll(
@@ -291,13 +321,13 @@ onMounted(async () => {
               ),
               model: {
                 uri: '/model/electrical_box.glb',
-                scale: 1, // 调整模型大小
+                scale: 1.5, // 调整模型大小
                 // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
                 // 启用深度测试，使模型能够被地形遮挡
                 enableDepthTest: true,
                 // 启用背光剔除，提高渲染性能
                 backFaceCulling: true
-              }
+              },
             });
 
             // 保存模型实例到数据项
@@ -305,7 +335,12 @@ onMounted(async () => {
             itemWithModel.modelType = 'electrical_box';
 
             viewer.entities.add({
+              // pickable: false,
               position: labelPosition, // 船上方约10米
+              properties: {
+                modelType: 'electrical_box',
+                data: itemWithModel
+              },
               label: {
                 text: '岸电箱' || `Marker-${item.id || index}`,
                 font: '10px sans-serif',
@@ -317,6 +352,27 @@ onMounted(async () => {
                 disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
               }
             });
+
+            const overlayBillboard = viewer.entities.add({
+              position: position,
+              // pickable: false,
+              properties: {
+                modelType: 'electrical_box',
+                data: itemWithModel
+              },
+              billboard: {
+                image: '/img/故障.png',
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                scale: new Cesium.CallbackProperty(function (time, result) {
+                  // t 会随着时间不断变化
+                  const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+                  const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                  return pulse;
+                }, false)
+              }
+            });
           }
 
           // 创建红点标记
@@ -401,6 +457,28 @@ onMounted(async () => {
     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() === 'electrical_box') {
+          // 触发岸电箱点击回调
+          const electricalBoxData = properties.data.getValue();
+          console.log('岸电箱模型被点击:', electricalBoxData);
+
+          // 如果定义了回调函数，则调用它
+          if (typeof onElectricalBoxClick === 'function') {
+            onElectricalBoxClick(electricalBoxData);
+          }
+
+          // 阻止进一步处理
+          return;
+        }
+      }
+
+      // 如果不是点击模型，则处理地面点击
       // 尝试多种方式获取点击位置
       const ray = viewer.camera.getPickRay(movement.position);
 
@@ -461,12 +539,58 @@ const switchView = (viewName) => {
   }
 };
 
-// 视角切换方法
-const switchModelView = (view) => {
-  const modelInstance = toRaw(view);
-  console.log(modelInstance)
-  if (viewer && view) {
-    viewer.flyTo(modelInstance);
+/**
+ * 切换到指定模型视图，并允许设置自定义的飞离距离。
+ * @param {Cesium.Entity} view - 要飞向的 Entity 实例。
+ * @param {number} [extraDistance=15000.0] - 额外的飞离距离 (米)。
+ * @param {number} [estimatedRadius=500.0] - 用于计算视角范围的估计模型半径 (米)。
+ */
+const switchModelView = (view, extraDistance = 1000, estimatedRadius = 500.0) => {
+  const entityInstance = toRaw(view);
+  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 或模型实例无效。");
   }
 };
 
@@ -497,7 +621,8 @@ const getCurrentViewInfo = () => {
 defineExpose({
   switchView,
   dataWithModels,
-  switchModelView
+  switchModelView,
+  setElectricalBoxClickCallback
 });
 
 onBeforeUnmount(() => {
diff --git a/public/map/components/charts/BarChartMinute.vue b/public/map/components/charts/BarChartMinute.vue
index 5ecd646..091598c 100644
--- a/public/map/components/charts/BarChartMinute.vue
+++ b/public/map/components/charts/BarChartMinute.vue
@@ -16,7 +16,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   chartData: () => [],
   title: '',
-  color: '#1296db'
+  color: '#1296DB' // 默认使用蓝色
 })
 
 // 图表容器引用和实例
@@ -37,7 +37,7 @@ const updateChart = () => {
 
   const option = {
     title: {
-      text: props.title,
+      // text: props.title,
       textStyle: {
         color: '#fff',
         fontSize: 14
@@ -59,7 +59,7 @@ const updateChart = () => {
     grid: {
       left: '1%',
       right: '1%',
-      top: '10%',
+      top: '5%',
       bottom: '1%',
       containLabel: true
     },
@@ -119,11 +119,11 @@ const updateChart = () => {
             colorStops: [
               {
                 offset: 0,
-                color: props.color
+                color: props.color // 使用传入的颜色
               },
               {
                 offset: 1,
-                color: props.color + '80'
+                color: props.color + '80' // 传入的颜色带透明度
               }
             ]
           },
@@ -131,7 +131,7 @@ const updateChart = () => {
         },
         emphasis: {
           itemStyle: {
-            color: props.color
+            color: props.color // 使用传入的颜色高亮
           }
         }
       }
@@ -159,7 +159,9 @@ const handleResize = () => {
 
 // 组件挂载时初始化图表
 onMounted(() => {
-  initChart()
+  setTimeout(() => {
+    initChart()
+  }, 200)
   window.addEventListener('resize', handleResize)
 })
 
@@ -177,6 +179,6 @@ onBeforeUnmount(() => {
 .bar-chart-minute-container {
   width: 100%;
   height: 100%;
-  min-height: 200px;
+  /* min-height: 200px; */
 }
 </style>
\ No newline at end of file
diff --git a/public/map/components/charts/LineChart.vue b/public/map/components/charts/LineChart.vue
index 925d538..3b3cd79 100644
--- a/public/map/components/charts/LineChart.vue
+++ b/public/map/components/charts/LineChart.vue
@@ -42,7 +42,7 @@ const updateChart = () => {
         color: '#fff',
         fontSize: 14
       },
-      left: 'center'
+      // left: 'center'
     },
     tooltip: {
       trigger: 'axis',
@@ -115,7 +115,7 @@ const updateChart = () => {
     grid: {
       left: '1%',
       right: '1%',
-      top: '6%',
+      top: '5%',
       bottom: '1%',
       containLabel: true
     }
diff --git a/public/map/components/charts/PieChart.vue b/public/map/components/charts/PieChart.vue
index e26879c..dc0a908 100644
--- a/public/map/components/charts/PieChart.vue
+++ b/public/map/components/charts/PieChart.vue
@@ -28,10 +28,19 @@ const initChart = () => {
   }
 }
 
+// 计算数据总和
+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,
@@ -45,10 +54,10 @@ const updateChart = () => {
     },
     legend: {
       show: true,
-      type: 'scroll',       // 👈 开启可滚动图例
-      orient: 'vertical',   // 👈 垂直排列
-      right: 10,
-      top: 'center',
+      // type: 'scroll',       // 👈 开启可滚动图例
+      orient: 'horizontal', // 👈 水平排列
+      top: 10,              // 👈 放在顶部
+      left: 'center',       // 👈 居中对齐
       textStyle: {
         color: '#FFF'
       }
@@ -57,30 +66,78 @@ const updateChart = () => {
       {
         name: props.title,
         type: 'pie',
-        radius: ['30%', '50%'],
-        center: ['35%', '50%'], // 👈 左移饼图避免与图例重叠
+        radius: ['35%', '55%'], // 调整内外半径，增加厚度
+        center: ['50%', '40%'], // 👈 调整饼图位置，因为图例已移到顶部
+        padAngle: 5, // 添加间隙角度
         avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 0,
-          borderColor: '#fff',
-          borderWidth: 1
+          borderColor: 'transparent', // 取消边框
+          borderWidth: 0 // 边框宽度设为0
         },
         label: {
           show: true,
-          formatter: '{b}\n{d}%',
-          fontSize: 10
+          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'
+            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)' // 透明色
+            }
+          }
+        ]
       }
     ]
   }
diff --git a/public/map/index.vue b/public/map/index.vue
index da435de..541eddb 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -5,7 +5,7 @@
       <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">
@@ -19,23 +19,18 @@
 
     <!-- 港区概览 -->
     <template v-if="activeHeadGroup === 0">
-      <PortOverview :ship-status-data="shipStatusData" :selected-ship="selectedShip" @select-ship="handleSwitch"
-        :get-status-class="getStatusClass" :get-shore-power-status-text="getShorePowerStatusText" />
+      <PortOverview :ship-status-data="shipStatusData" :selected-ship="selectedShip" @item-click="handleSwitch" />
     </template>
 
     <!-- 港口岸电使用情况 -->
     <template v-if="activeHeadGroup === 1">
       <ShorePowerUsage :total-power="totalPower" :fuel-reduction="fuelReduction" :co2-reduction="co2Reduction"
-        :pm25-reduction="pm25Reduction" :nox-reduction="noxReduction" :so2-reduction="so2Reduction"
-        :fuel-reduction-data="fuelReductionData" :co2-reduction-data="co2ReductionData"
-        :pm25-reduction-data="pm25ReductionData" :nox-reduction-data="noxReductionData"
-        :so2-reduction-data="so2ReductionData" />
+        :pm25-reduction="pm25Reduction" :nox-reduction="noxReduction" :so2-reduction="so2Reduction" />
     </template>
 
     <!-- 港口企业岸电使用 -->
     <template v-if="activeHeadGroup === 2">
-      <CompanyShorePower :company-comparison-data="companyComparisonData" :selected-company="selectedCompany"
-        :pie-chart-data="pieChartData" @update:selected-company="selectedCompany = $event" />
+      <CompanyShorePower :companyComparisonData="companyComparisonData" />
     </template>
 
     <!-- 船舶岸电使用情况 -->
@@ -44,7 +39,58 @@
         :no-shore-power-ships="noShorePowerShips" :ship-data="shipData" />
     </template>
 
+    <template v-if="activeHeadGroup === 4">
+      <div class="right" style="width: 500px;">
+        <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>
+            <el-button class="close-btn" size="small" @click="closeElectricalBoxInfo"
+              style="margin-left: auto;">×</el-button>
+          </div>
+          <div class="card-content">
+            <div class="ship-detail">
+              <div class="detail-item">
+                <span class="label">名称:</span>
+                <span class="value">{{ selectedElectricalBox?.name || '无' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">位置:</span>
+                <span class="value">{{ selectedElectricalBox?.location || '曹妃甸港区华能码头' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">状态:</span>
+                <span class="value">{{ selectedElectricalBox?.status || '在线' }}</span>
+              </div>
+
+              <!-- 当前使用数据 -->
+              <div class="section-title">当前使用数据</div>
+              <div class="detail-item">
+                <span class="label">当前使用功率:</span>
+                <span class="value">{{ selectedElectricalBox?.currentPower || '120' }} kW</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前使用电量:</span>
+                <span class="value">{{ selectedElectricalBox?.currentEnergy || '45.5' }} kWh</span>
+              </div>
+
+              <!-- 累计历史数据 -->
+              <div class="section-title">累计历史数据</div>
+              <div class="detail-item">
+                <span class="label">累计历史用电:</span>
+                <span class="value">{{ selectedElectricalBox?.totalEnergy || '1250.8' }} kWh</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">累计服务次数:</span>
+                <span class="value">{{ selectedElectricalBox?.serviceCount || '86' }} 次</span>
+              </div>
+            </div>
+          </div>
+        </div>
 
+      </div>
+    </template>
   </div>
 </template>
 
@@ -73,7 +119,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)
@@ -94,17 +141,17 @@ const selectHeadGroup = async (value: number) => {
 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 totalPower = ref<number>(857525.45)
+const fuelReduction = ref<number>(108.04)
+const co2Reduction = ref<number>(574542.06)
+const pm25Reduction = ref<number>(1251.99)
+const noxReduction = ref<number>(15521.21)
+const so2Reduction = ref<number>(9004.03)
 
 // 船舶岸电使用情况数据
-const berthingShips = ref<string>('13')
-const shorePowerShips = ref<string>('3')
-const noShorePowerShips = ref<string>('10')
+const berthingShips = ref<number>(13)
+const shorePowerShips = ref<number>(3)
+const noShorePowerShips = ref<number>(10)
 
 // 船舶数据列表
 const shipData = ref([
@@ -152,35 +199,44 @@ const updateTime = () => {
 }
 
 const selectedShip = ref(null)
+const selectedElectricalBox = ref(null)
 
+/* 回到初始视角 */
+const handleOverviewClick = () => {
+  mapComponentRef.value?.switchView('overview')
+}
+
+/* 切换至模型视角 */
 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 handleElectricalBoxClick = (data) => {
+  activeHeadGroup.value = 4
+  console.log('岸电箱被点击:', data);
+  // 设置选中的岸电箱数据
+  selectedElectricalBox.value = data;
+  // 这里可以添加更多的处理逻辑，比如切换到特定的视图等
+};
 
-// 状态转换函数
-const getShorePowerStatusText = (status: number | string) => {
-  const statusNum = Number(status);
-  console.log(status)
-  return shorePowerStatusMap[statusNum] || status;
-}
+// 关闭岸电箱详情面板
+const closeElectricalBoxInfo = () => {
+  activeHeadGroup.value = -1;
+  selectedElectricalBox.value = null;
+};
 
 // 启动定时器更新时间
 let timer: NodeJS.Timeout
 onMounted(() => {
   timer = setInterval(updateTime, 1000)
+
+  // 设置岸电箱点击回调
+  if (mapComponentRef.value) {
+    mapComponentRef.value.setElectricalBoxClickCallback(handleElectricalBoxClick);
+  }
 })
 
 // 组件卸载时清除所有资源
@@ -348,102 +404,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([
   {
@@ -493,16 +453,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 () => {
   // 默认选中华能码头的数据
@@ -561,29 +511,6 @@ const shipStatusData = computed(() => {
     })
 })
 
-// 获取状态对应的样式类
-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'
-    default:
-      return 'status-default'
-  }
-}
-
-
 </script>
 <style lang="scss">
 .cesium-viewer-bottom {
@@ -699,36 +626,6 @@ const getStatusClass = (status: string) => {
     width: 100%;
     // padding: 10px;
   }
-
-  .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;
-  }
 }
 
 /* 船舶数据表格样式 */
@@ -805,23 +702,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;
@@ -1111,4 +991,83 @@ const getStatusClass = (status: string) => {
   opacity: 0;
   transform: translateX(20px);
 }
+
+.overview-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  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: 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;
+}
+
+/* 状态样式 */
+.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>