diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
index dad9138..af461ab 100644
--- a/public/map/components/CompanyShorePower.vue
+++ b/public/map/components/CompanyShorePower.vue
@@ -2,6 +2,50 @@
   <div class="company-shore-power">
     <div class="left" style="width: 800px;" :style="{ width: selectedShorePowerItem ? '800px' : '420px' }">
       <div style="display: flex; gap: 12px; height: 100%;">
+        <div class="card digital-twin-card--deep-blue ">
+          <div style="display: flex; align-items: center; justify-content: space-between;">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">岸电箱状态</span>
+            </div>
+            <input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword"
+              @input="handlStoreSearch" />
+          </div>
+
+          <div class=" card-content">
+            <div class="ship-table">
+              <div class="ship-table-header">
+                <div class="ship-table-column ship-name-header">岸电箱名称</div>
+                <div class="ship-table-column ship-status-header">状态</div>
+                <div class="ship-table-column ship-status-header">历史</div>
+              </div>
+              <div class="ship-table-body">
+                <div v-for="shorepower in filteredShorePowerList" :key="shorepower.id" class="ship-table-row"
+                  @click="handleSelectShorePower(shorepower)">
+                  <div class="ship-table-column ship-name">
+                    <div class="ship-icon">⚡</div>
+                    <span class="ship-name-text">{{ shorepower.name }}</span>
+                  </div>
+                  <div class="ship-table-column ship-status">
+                    <div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)">
+                      {{ shorepower.storePowerStatus }}
+                    </div>
+                    <!-- <div class="status-tag" :class="getStatusClass('空闲')">
+                        空闲
+                      </div>
+                      <div class="status-tag" :class="getStatusClass('故障')">
+                        故障
+                      </div> -->
+                  </div>
+                  <div class="ship-table-column ship-status-header">
+                    <el-button type="primary" link @click.stop="showShorePowerHistory(shorepower)">查看</el-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div v-if="selectedShorePowerItem" class="card digital-twin-card--deep-blue">
           <div style="display: flex; align-items: center; justify-content: space-between;">
             <div class="card-title">
@@ -65,50 +109,7 @@
             </div>
           </div>
         </div>
-        <div class="card digital-twin-card--deep-blue ">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div class="card-title">
-              <div class="vertical-line"></div>
-              <img src="@/assets/svgs/data.svg" class="title-icon" />
-              <span class="title-text">岸电箱状态</span>
-            </div>
-            <input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword"
-              @input="handlStoreSearch" />
-          </div>
 
-          <div class=" card-content">
-            <div class="ship-table">
-              <div class="ship-table-header">
-                <div class="ship-table-column ship-name-header">岸电箱名称</div>
-                <div class="ship-table-column ship-status-header">状态</div>
-                <div class="ship-table-column ship-status-header">历史</div>
-              </div>
-              <div class="ship-table-body">
-                <div v-for="shorepower in filteredShorePowerList" :key="shorepower.id" class="ship-table-row"
-                  @click="handleSelectShorePower(shorepower)">
-                  <div class="ship-table-column ship-name">
-                    <div class="ship-icon">⚡</div>
-                    <span class="ship-name-text">{{ shorepower.name }}</span>
-                  </div>
-                  <div class="ship-table-column ship-status">
-                    <div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)">
-                      {{ shorepower.storePowerStatus }}
-                    </div>
-                    <!-- <div class="status-tag" :class="getStatusClass('空闲')">
-                        空闲
-                      </div>
-                      <div class="status-tag" :class="getStatusClass('故障')">
-                        故障
-                      </div> -->
-                  </div>
-                  <div class="ship-table-column ship-status-header">
-                    <el-button type="primary" link @click.stop="showShorePowerHistory(shorepower)">查看</el-button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="right" style="width: 1000px;">
@@ -137,7 +138,7 @@
             <div class="company-header">
               <div class="company-info">
                 <div class="company-name">{{ company.name }}</div>
-                <div class="company-berth-count">泊位数: {{ company.children?.length || 0 }}</div>
+                <div class="company-berth-count">泊位数: {{ company.shorePowerCount || 0 }}</div>
               </div>
               <div class="time-range-container">
                 <button v-for="option in timeRangeOptions" :key="option.value"
@@ -145,19 +146,27 @@
                   @click.stop="() => handleTimeRangeChange(company.id, option.value)">
                   {{ option.label }}
                 </button>
-                <div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
+                <div class="company-total">总量: {{ handGetDeviceData(company.shorePowerIds) }}</div>
               </div>
 
             </div>
-            <div class="overview-grid">
-              <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
-                @click="handleClickBerthItem(berth)">
-                <div class="overview-value">{{ berth.measureValue?.toFixed(2)
-                  || 0 }}</div>
+            <div class="shorepower-container">
+              <div class="diste-box" v-for="(disteItem, index) in (company.distributionList || [])" :key="index">
+                <div class="diste-name">{{ disteItem.name }}</div>
 
-                <div class="overview-label">{{ berth.name }}</div>
+                <div class="shorepower-box">
+                  <div class="shorepower-item" v-for="(shorePower, shorePowerIndex) in (disteItem.shorePowerList || [])"
+                    :key="shorePowerIndex">
+                    <div class="shorepower-value" @click="handleClickhorePowerValue(shorePower)">{{
+                      handGetDeviceData(shorePower.totalPowerDeviceId) || 0 }}</div>
+
+                    <div class="shorepower-label" @click="handleClickShorePowerName(shorePower)">{{ shorePower.name }}
+                    </div>
+                  </div>
+                </div>
 
               </div>
+
             </div>
           </div>
         </div>
@@ -169,18 +178,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { MapApi } from "@/api/shorepower/map";
 import ShipHistoryDialog from './ShipHistoryDialog.vue';
 import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower';
 import { getValueById } from './utils';
 // 定义组件属性
-interface ChartDataItem {
+interface companyData {
   id: number;
-  name: string;
-  value?: number;
-  measureValue?: number;
-  children?: ChartDataItem[];
+  harborDistrictId: number;
+  name?: string;
+  shorePowerCount: number; // 岸电箱总数
+  shorePowerIds: number[]; // 岸电箱ID列表
+  distributionList: {
+    id: number;
+    name: string;
+    shorePowerList: any[];
+  }[];
 }
 
 const historyVisible = ref({
@@ -329,39 +343,24 @@ const handleTimeRangeChange = (companyId: number, range: 'realtime' | 'day' | 'm
   // 这里可以添加根据时间范围切换数据源的逻辑
 }
 
-
-// 计算总量的函数
-const calculateTotal = (children?: ChartDataItem[]) => {
-  if (!children || children.length === 0) return 0;
-  return children.reduce((total, item) => {
-    return total + (item.measureValue || 0);
-  }, 0);
-};
-
 /* 点击泊位box */
-const handleClickBerthItem = (berth: ChartDataItem) => {
-  console.log(props.shorePowerList)
-  console.log(berth)
-  const shorePower = props.shorePowerList.find(item => item.id === berth.id)
+const handleClickShorePowerName = (data: companyData) => {
+  const shorePower = props.shorePowerList.find(item => item.id === data.id)
   selectedShorePowerItem.value = shorePower
   console.log(shorePower)
 }
 
-const handleOpenHistory = () => {
-  if (selectedShorePowerItem.value) {
-    showShorePowerHistory(selectedShorePowerItem.value)
+const handleClickhorePowerValue = (data: companyData) => {
+  const shorePower = props.shorePowerList.find(item => item.id === data.id)
+  if (!shorePower) {
+    return
   }
+  showShorePowerHistory(shorePower)
+  /* selectedShorePowerItem.value = shorePower
+  console.log(shorePower) */
 }
 
-// 显示岸电箱历史记录
-const showShorePowerHistory = (berth: ChartDataItem) => {
-  console.log(berth)
-  // console.log('shorepower', shorepower)
-  // currentShorePower.value = shorepower
-  /* shorePowerHistoryVisible.value = {
-    visible: true,
-    shorePowerId: shorepower.id || 0
-  } */
+const showShorePowerHistory = (berth: ShorePowerBerth) => {
   historyVisible.value = {
     visible: true,
     searchParams: {
@@ -371,197 +370,80 @@ const showShorePowerHistory = (berth: ChartDataItem) => {
     }
   }
 }
-const companyComparisonData = ref<ChartDataItem[]>([])
+const companyComparisonData = ref<companyData[]>([])
+
+// 创建一个响应式的设备数据映射，以提高查找效率并确保响应性
+const deviceDataMap = computed(() => {
+  const map = new Map<number, RealtimeDeviceData>();
+  props.realtimeDeviceData.forEach(item => {
+    map.set(item.deviceId, item);
+  });
+  return map;
+});
+
+const handGetDeviceData = (deviceId: number | number[]) => {
+  let totalValue = 0;
+
+  if (Array.isArray(deviceId)) {
+    // If deviceId is an array, sum all the measure values
+    deviceId.forEach(id => {
+      const deviceData = deviceDataMap.value.get(id);
+      if (deviceData?.measureValue) {
+        totalValue += deviceData.measureValue;
+      }
+    });
+  } else {
+    // If deviceId is a single number, get its measure value
+    const deviceData = deviceDataMap.value.get(deviceId);
+    if (deviceData?.measureValue) {
+      totalValue = deviceData.measureValue;
+    }
+  }
+
+  return totalValue.toFixed(2);
+}
+
 const handleGetBuildData = async () => {
   const dockList = await MapApi.getDockIdAndNameList()
-  const berthList = await MapApi.getBerthIdAndNameList()
-  const buildData = dockList.map(dock => ({
-    ...dock,
-    children: berthList.filter(berth => berth.dockId === dock.id).map(berth => ({
-      ...berth,
-      ...props.realtimeDeviceData.find(item => (item.id === berth.id) && (item.deviceCode.includes('Kwh')))
-    }))
-  }))
-  companyComparisonData.value = buildData
-  companyComparisonData.value.push(
-    {
-      "id": 4,
-      "harborDistrictId": 1,
-      "name": "模拟码头公司4",
-      "children": [
-        {
-          "id": 6,
-          "dockId": 3,
-          "districtId": 1,
-          "name": "模拟-201#泊位",
-          "deviceId": 6,
-          "deviceName": "模拟-1号岸电-201泊位",
-          "deviceCode": "CFD_GT_201_0.4KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 3344627.0265,
-          "incrementValue": 17.846733086563358,
-          "incrementCost": 17.846733086563358,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 7,
-          "dockId": 3,
-          "districtId": 1,
-          "name": "模拟-202#泊位",
-          "deviceId": 7,
-          "deviceName": "模拟-1号岸电-202泊位",
-          "deviceCode": "CFD_GT_202_0.4KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 5338783.7211,
-          "incrementValue": 20.846911166236122,
-          "incrementCost": 20.846911166236122,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 8,
-          "dockId": 3,
-          "districtId": 1,
-          "name": "模拟-203#泊位",
-          "deviceId": 8,
-          "deviceName": "模拟-2号岸电-203泊位",
-          "deviceCode": "CFD_GT_203_6/6.6KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 10921413.801,
-          "incrementValue": 19.737663764627705,
-          "incrementCost": 19.737663764627705,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 9,
-          "dockId": 3,
-          "districtId": 2,
-          "name": "模拟-204#泊位",
-          "deviceId": 9,
-          "deviceName": "模拟-2号岸电-204泊位",
-          "deviceCode": "CFD_GT_204_6/6.6KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 2680281.7026,
-          "incrementValue": 21.264192979883447,
-          "incrementCost": 21.264192979883447,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 10,
-          "dockId": 3,
-          "districtId": 2,
-          "name": "模拟-205#泊位",
-          "deviceId": 10,
-          "deviceName": "模拟-2号岸电-205泊位",
-          "deviceCode": "CFD_GT_205_6/6.6KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 4975354.5181,
-          "incrementValue": 21.75554591307556,
-          "incrementCost": 21.75554591307556,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 11,
-          "dockId": 3,
-          "districtId": null,
-          "name": "模拟-206#泊位",
-          "deviceId": 11,
-          "deviceName": "模拟-3号岸电-206泊位",
-          "deviceCode": "CFD_GT_206_6/6.6KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 4900877.9997,
-          "incrementValue": 17.841940952939577,
-          "incrementCost": 17.841940952939577,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 12,
-          "dockId": 3,
-          "districtId": null,
-          "name": "国投-207#泊位",
-          "deviceId": 12,
-          "deviceName": "模拟-3号岸电-207泊位",
-          "deviceCode": "CFD_GT_207_6/6.6KV.Kwh",
-          "deviceStatus": 3,
-          "measureValue": 5093718.3972,
-          "incrementValue": 21.524539074803123,
-          "incrementCost": 21.524539074803123,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 13,
-          "dockId": 3,
-          "districtId": null,
-          "name": "模拟-208#泊位",
-          "deviceId": 13,
-          "deviceName": "模拟-3号岸电-208泊位",
-          "deviceCode": "CFD_GT_208_6/6.6KV.Kwh",
-          "deviceStatus": 4,
-          "measureValue": 7700103.7496,
-          "incrementValue": 0,
-          "incrementCost": 0,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 14,
-          "dockId": 3,
-          "districtId": null,
-          "name": "模拟-209#泊位",
-          "deviceId": 14,
-          "deviceName": "模拟-4号岸电-209泊位",
-          "deviceCode": "CFD_GT_209_6/6.6KV.Kwh",
-          "deviceStatus": 4,
-          "measureValue": 3845558.9787,
-          "incrementValue": 0,
-          "incrementCost": 0,
-          "measureTime": 1766479519223,
-          "createTime": null
-        },
-        {
-          "id": 15,
-          "dockId": 3,
-          "districtId": null,
-          "name": "模拟-210#泊位",
-          "deviceId": 15,
-          "deviceName": "模拟-4号岸电-210泊位",
-          "deviceCode": "CFD_GT_210_6/6.6KV.Kwh",
-          "deviceStatus": 4,
-          "measureValue": 3649994.7502,
-          "incrementValue": 0,
-          "incrementCost": 0,
-          "measureTime": 1766479519223,
-          "createTime": null
-        }
-      ]
+  // const berthList = await MapApi.getBerthIdAndNameList()
+  const distributionList = groupByShorePowerEquipmentId(props.shorePowerList)
+  const buildData = dockList.map(dock => {
+    const filterData = distributionList.filter(item => item.dockId === dock.id)
+    const shorePowerCount = filterData.reduce((total, item) => {
+      return total + item.shorePowerList.length
+    }, 0)
+    return {
+      ...dock,
+      shorePowerCount: shorePowerCount, // 岸电箱总数
+      shorePowerIds: filterData.map(item => item.shorePowerList.map(shorePower => shorePower.id)).flat(),
+      distributionList: filterData
     }
-  )
-  /* MapApi.getBerthIdAndNameList().then(res => {
-    console.log(res)
-    const buildData = res.map(item => ({
-      ...item,
-      children: props.realtimeDeviceData.filter(item => item.id === item.id)
-    }))
+  })
+  companyComparisonData.value = buildData
 
-  }) */
+  /* 转换函数 */
+  function groupByShorePowerEquipmentId(data) {
+    const map = new Map();
+    for (const item of data) {
+      const { shorePowerEquipmentInfo, ...rest } = item;
+      const id = shorePowerEquipmentInfo.id;
+      if (!map.has(id)) {
+        map.set(id, {
+          ...shorePowerEquipmentInfo,
+          shorePowerList: []
+        });
+      }
+      map.get(id).shorePowerList.push(rest);
+    }
+    return Array.from(map.values());
+  }
 }
-watch(() => props.realtimeDeviceData, (newVal) => {
-  handleGetBuildData()
-})
 onMounted(() => {
-  // console.log(props.realtimeDeviceData)
   handleGetBuildData()
-
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .company-shore-power {
   display: flex;
   height: 100%;
@@ -590,47 +472,88 @@ onMounted(() => {
 }
 
 /* 总览网格样式 */
-.overview-grid {
+/* .overview-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 8px;
   padding: 4px;
   height: 100%;
-}
-
-.overview-item {
-  width: 224px;
-  cursor: pointer;
+} */
+.shorepower-container {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-}
+  gap: 8px;
+  flex-wrap: wrap;
+
+  .diste-box {
+    flex-shrink: 0;
+    display: inline-block;
+    margin-bottom: 8px;
+
+    .diste-name {
+      height: 28px;
+      background-color: rgba(0, 112, 192, 0.579);
+      border-radius: 6px 6px 0 0;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: bold;
+      color: #fff;
+      padding: 4px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    }
+  }
 
-.overview-label {
-  text-align: center;
-  font-size: 24px;
-  color: #ccc;
-  margin-bottom: 2px;
-}
+  .shorepower-box {
+    display: flex;
+    gap: 8px;
+    // flex-wrap: wrap;
+  }
 
-.overview-value {
-  font-size: 36px;
-  font-weight: bold;
-  color: #1296db;
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-  margin-bottom: 2px;
-}
+  .shorepower-item {
+    display: inline-flex;
+    width: 224px;
+    // display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background-color: rgba(30, 120, 255, 0.15);
+    border-radius: 0 0 8px 8px;
+  }
+
+  .shorepower-label {
+    text-align: center;
+    font-size: 24px;
+    color: #ccc;
+    margin-bottom: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      // 上浮
+      transform: translateY(-2px);
+    }
+  }
 
-.overview-text {
-  font-size: 10px;
-  color: #999;
-  text-align: center;
+  .shorepower-value {
+    font-size: 36px;
+    font-weight: bold;
+    color: #1296db;
+    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    margin-bottom: 2px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      // 上浮
+      transform: translateY(-2px);
+    }
+  }
 }
 
+
 /* 企业区块样式 */
 .company-section {
   margin-bottom: 16px;
diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue
index cf65d36..e9b3608 100644
--- a/public/map/components/ShipShorePower.vue
+++ b/public/map/components/ShipShorePower.vue
@@ -18,15 +18,19 @@
           <div class="overview-grid">
             <div class="overview-item">
               <div class="overview-value">{{ shipTotalData.berthingShips }}</div>
-              <div class="overview-label">在港船舶数量</div>
+              <div class="overview-label">在港船舶</div>
+            </div>
+            <div class="overview-item">
+              <div class="overview-value">{{ shipTotalData.berthingShips }}</div>
+              <div class="overview-label">在泊船舶</div>
             </div>
             <div class="overview-item">
               <div class="overview-value">{{ shipTotalData.shorePowerShips }}</div>
-              <div class="overview-label">使用岸电船舶数量</div>
+              <div class="overview-label">使用岸电船舶</div>
             </div>
             <div class="overview-item">
               <div class="overview-value">{{ shipTotalData.noShorePowerShips }}</div>
-              <div class="overview-label">未使用岸电船舶数量</div>
+              <div class="overview-label">未使用岸电船舶</div>
             </div>
           </div>
         </div>
@@ -84,9 +88,9 @@
               <el-table-column prop="status" label="岸电状态" width="400">
                 <template #default="scope">
                   <span v-if="scope.row.applyInfo?.reason === 0"
-                    :class="['shore-power-status', showStatus(scope.row, realtimeDeviceData)?.statusClass]">时长{{
+                    :class="['shore-power-status', showStatus(scope.row, realtimeDeviceData)?.statusClass]">用时{{
                       showStatus(scope.row,
-                        realtimeDeviceData)?.useTime }},用量{{
+                        realtimeDeviceData)?.useTime }},电量{{
                       showStatus(scope.row, realtimeDeviceData)?.useValue }}
                   </span>
                   <span v-if="scope.row.applyInfo?.reason != 0" class="shore-power-status status-off">{{
@@ -123,7 +127,7 @@
             <div class="detail-item">
               <span class="label">名称:</span>
               <span class="value">{{ selectedShip.shipBasicInfo.name + '-' + selectedShip.shipBasicInfo.nameEn
-              }}</span>
+                }}</span>
             </div>
             <div class="detail-item">
               <span class="label">长度:</span>
@@ -165,7 +169,7 @@
             <div class="detail-item">
               <span class="label">靠泊类型:</span>
               <span class="value">{{ getOperationTypeLabel(selectedShip.shorePowerAndShip.type, BERTH_TYPE)
-              }}</span>
+                }}</span>
             </div>
             <div class="detail-item">
               <span class="label">靠泊时间:</span>
@@ -201,7 +205,7 @@
       </div>
     </div>
     <!-- 船舶详情对话框 -->
-    <el-dialog v-if="detailDialogVisible" v-model="detailDialogVisible" title="更多信息" width="1000px"
+    <el-dialog v-if="detailDialogVisible" v-model="detailDialogVisible" title="备案信息" width="1000px"
       class="ship-detail-dialog">
       <el-tabs v-if="selectedShip" v-model="activeTab">
         <el-tab-pane label="用电申请信息" name="applyInfo">
@@ -233,7 +237,7 @@
                 <el-form-item label="到达港:">
                   <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.arrivalHarborDistrict,
                     harborDistrictIdAndNameList)
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -288,7 +292,7 @@
               <el-col :span="12">
                 <el-form-item label="货物类型（装货）:">
                   <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.loadingCargoCategory, CARGO_CATEGORY) || '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -310,7 +314,7 @@
               <el-col :span="12">
                 <el-form-item label="货物类型(卸货):">
                   <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.unloadingCargoCategory, CARGO_CATEGORY) || '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -339,7 +343,7 @@
               <el-col :span="12" v-if="selectedShip.applyInfo?.reason !== 0">
                 <el-form-item label="未使用岸电原因:">
                   <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.reason, UNUSED_SHORE_POWER_REASON) || '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -450,12 +454,12 @@
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="用电开始时用电方操作人:">
+                <el-form-item label="用电开始时船方操作人:">
                   <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="用电结束时用电方操作人:">
+                <el-form-item label="用电结束时船方操作人:">
                   <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
@@ -531,13 +535,13 @@
               <el-col :span="12">
                 <el-form-item label="船舶长度:">
                   <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="船舶宽度:">
                   <span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -546,7 +550,7 @@
               <el-col :span="12">
                 <el-form-item label="船舶吨位:">
                   <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
-                  }}</span>
+                    }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue
index 50f5fe1..ded637d 100644
--- a/public/map/components/ShorePowerUsage.vue
+++ b/public/map/components/ShorePowerUsage.vue
@@ -804,7 +804,6 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
   try {
     const res: RealtimeDeviceData[] = realtimeDeviceData.filter(item => item.deviceCode.includes('Kwh'));
     const ids = res.map(item => item.id);
-    console.log(ids);
     const params = {
       ids: ids.join(','),
       // year: new Date().getFullYear()
diff --git a/public/map/components/ShorePowerUsageSingleData.vue b/public/map/components/ShorePowerUsageSingleData.vue
new file mode 100644
index 0000000..d46d1dd
--- /dev/null
+++ b/public/map/components/ShorePowerUsageSingleData.vue
@@ -0,0 +1,1110 @@
+<template>
+  <div class="shore-power-usage">
+    <template v-if="pageType === 'realtime'">
+      <div class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div class="show-value">
+                <div class="time-range-item">起始时间: {{ startTimeDisplay }}</div>
+                <div class="time-range-item">更新时间: {{ realtimeDeviceDataTime }}</div>
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+                <el-button type="primary" @click.stop="handleGoBack()">返回</el-button>
+
+              </div>
+
+            </div>
+            <div class="card-content">
+              <WaveLineChart :chart-data="getChartData(card.id)" :title="card.title" :color="card.color"
+                :magnify-mode="true" />
+            </div>
+          </div>
+        </div>
+        <div class="right-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">
+              <ComparisonBarChart :chartData="yearlyData" title="年度用电量对比" yAxisName="用电量(kWh)" currentColor="#36A2EB"
+                previousColor="#FF6384" />
+            </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">
+              <ComparisonBarChart :chartData="monthlyData" title="月度用电量对比" yAxisName="用电量(kWh)" currentColor="#36A2EB"
+                previousColor="#FF6384" />
+            </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">
+              <ComparisonBarChart :chartData="dailyData" title="日对比" yAxisName="用电量(kWh)" currentColor="#36A2EB"
+                previousColor="#FF6384" />
+            </div>
+          </div>
+        </div>
+        <!-- <div class="one-row">
+          <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div> -->
+      </div>
+    </template>
+    <template v-if="pageType === 'history'">
+      <div class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" v-model="dateRange" type="yearrange"
+                  range-separator="至" start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @change="handleSelectDate" />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" v-model="dateRange" type="monthrange"
+                  range-separator="至" start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM"
+                  value-format="YYYY-MM" class="date-range-picker" @change="handleSelectDate" />
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @change="handleSelectDate" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="pageType = 'realtime'">实时显示</el-button>
+                <!-- <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button> -->
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <div class="time-range-item">记录时间范围: {{ selectedDateRangeDisplay }}</div>
+                <!-- <div class="time-range-item">{{ realtimeDeviceDataTime }}</div> -->
+                <!-- <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span> -->
+                <!-- <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div> -->
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(card.id)" :title="card.title" :color="card.color"
+                :magnify-mode="true" />
+            </div>
+          </div>
+        </div>
+        <!-- <div class="one-row">
+          <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(card.id)" :title="card.title"
+                :color="card.color" />
+            </div>
+          </div>
+        </div> -->
+      </div>
+    </template>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
+import WaveLineChart from './charts/WaveLineChart.vue'
+import { MapApi } from "@/api/shorepower/map";
+import dayjs from 'dayjs';
+import { RealtimeDeviceData } from '@/types/shorepower';
+import { formatTimestamp, parseRangeToTimestamp } from './utils';
+
+
+interface Props {
+  realtimeDeviceData: RealtimeDeviceData[];
+  activeHeadGroup?: number;
+  handleGoBack: () => void;
+  realtimeDeviceDataTime: string;
+}
+
+const props = defineProps<Props>()
+// 定义组件属性
+interface ChartDataItem {
+  name: string;
+  value: number;
+}
+
+interface CardInfo {
+  id: string;
+  title: string;
+  type: 'overview' | 'chart';
+  unit?: string;
+  color?: string;
+  value: string;
+}
+
+interface ShorePowerUsageData {
+  totalPower: number; // 累计用电（千瓦时）
+  fuelReduction: number; // 减少燃油（吨）
+  co2Reduction: number; // 减少二氧化碳排放（千克）
+  pm25Reduction: number; // 减少PM2.5排放（千克）
+  noxReduction: number; // 减少氮氧化物（千克）
+  so2Reduction: number; // 减少二氧化硫（千克）
+}
+
+export interface MeasureDataRealtimeRespVO {
+  /**
+   * 创建时间
+   */
+  createTime: Date;
+  /**
+   * 设备编号code
+   */
+  deviceCode: string;
+  /**
+   * 设备编号
+   */
+  deviceId: number;
+  /**
+   * 设备名称
+   */
+  deviceName: string;
+  /**
+   * 设备状态
+   */
+  deviceStatus: number;
+  /**
+   * 编号
+   */
+  id: number;
+  /**
+   * 增量费用
+   */
+  incrementCost?: number;
+  /**
+   * 增量值
+   */
+  incrementValue: number;
+  /**
+   * 采集时间
+   */
+  measureTime: Date;
+  /**
+   * 采集值
+   */
+  measureValue: number;
+}
+
+export interface deviceData {
+  [key: string]: MeasureDataRealtimeRespVO
+}
+
+// const props = defineProps<Props>()
+
+const pageType = ref<'realtime' | 'history'>('realtime')
+const dateRange = ref<string[]>([])
+const totalPower = ref<string>('0')
+const fuelReduction = ref<string>('0')
+const co2Reduction = ref<string>('0')
+const pm25Reduction = ref<string>('0')
+const noxReduction = ref<string>('0')
+const so2Reduction = ref<string>('0')
+
+// 年度对比数据 (今年 vs 去年)
+const yearlyData = [
+  { name: '同期上期对比', currentValue: 1200, previousValue: 1100 },
+  // { name: '2025', currentValue: 1300, previousValue: 1250 },
+]
+
+// 月度对比数据 (今月 vs 上月)
+const monthlyData = [
+  { name: '同期上期对比', currentValue: 450, previousValue: 420 },
+  // { name: '上月', currentValue: 480, previousValue: 460 },
+]
+
+// 日度对比数据 (今日 vs 昨天)
+const dailyData = [
+  { name: '同期上期对比', currentValue: 20, previousValue: 18 },
+  // { name: '昨日', currentValue: 15, previousValue: 14 },
+]
+
+// 根据时间范围计算起始时间
+const startTimeDisplay = computed(() => {
+  const now = new Date();
+  let startDate: Date;
+
+  switch (timeRange.value) {
+    case 'day':
+      // 今日的零点
+      startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+      break;
+    case 'month':
+      // 当月的第一天零点
+      startDate = new Date(now.getFullYear(), now.getMonth(), 1);
+      break;
+    case 'year':
+      // 当年的第一天零点
+      startDate = new Date(now.getFullYear(), 0, 1);
+      break;
+    case 'realtime':
+      // 总数据从2020年开始
+      startDate = new Date(2020, 0, 1);
+      break;
+    default:
+      // 默认为今日的零点
+      startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  }
+
+  // 格式化日期时间
+  const year = startDate.getFullYear();
+  const month = String(startDate.getMonth() + 1).padStart(2, '0');
+  const day = String(startDate.getDate()).padStart(2, '0');
+  const hours = String(startDate.getHours()).padStart(2, '0');
+  const minutes = String(startDate.getMinutes()).padStart(2, '0');
+  const seconds = String(startDate.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+});
+
+// 计算日期选择器选中的时间范围显示
+const selectedDateRangeDisplay = computed(() => {
+  if (!dateRange.value || dateRange.value.length !== 2) {
+    return '';
+  }
+
+  const [startDate, endDate] = dateRange.value;
+
+  // 根据不同的时间粒度格式化日期
+  switch (historyTimeGranularity.value) {
+    case 'year':
+      // 年格式: YYYY
+      return `${startDate} - ${endDate}`;
+    case 'month':
+      // 月格式: YYYY-MM
+      return `${startDate} - ${endDate}`;
+    default:
+      // 日格式: YYYY-MM-DD
+      return `${startDate} - ${endDate}`;
+  }
+});
+
+const displayMode = ref<'average' | 'magnify'>('magnify')
+const selectedCard = ref<string>('overview')
+// 创建统一的模拟数据源
+const commonChartData = ref<ChartDataItem[]>([])
+
+// 实时数据图表数组
+const totalPowerChartData = ref<ChartDataItem[]>([])
+const co2ReductionChartData = ref<ChartDataItem[]>([])
+const so2ReductionChartData = ref<ChartDataItem[]>([])
+const noxReductionChartData = ref<ChartDataItem[]>([])
+const pm25ReductionChartData = ref<ChartDataItem[]>([])
+const fuelReductionChartData = ref<ChartDataItem[]>([])
+
+const h_totalPowerChartData = ref<ChartDataItem[]>([])
+const h_co2ReductionChartData = ref<ChartDataItem[]>([])
+const h_so2ReductionChartData = ref<ChartDataItem[]>([])
+const h_noxReductionChartData = ref<ChartDataItem[]>([])
+const h_pm25ReductionChartData = ref<ChartDataItem[]>([])
+const h_fuelReductionChartData = ref<ChartDataItem[]>([])
+const historyData = ref({
+  'totalPower': 0,
+  'fuel': 0,
+  'co2': 0,
+  'pm25': 0,
+  'nox': 0,
+  'so2': 0,
+})
+const chartData = ref({
+  'realtime': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'day': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'week': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'month': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'quarter': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+  'year': {
+    'totalPower': 0,
+    'fuel': 0,
+    'co2': 0,
+    'pm25': 0,
+    'nox': 0,
+    'so2': 0,
+  },
+
+})
+
+function aggregateByIndex(data: RawItem[][]): ChartDataItem[] {
+  if (data.length === 0) return [];
+
+  // 找出最大长度（防止越界）
+  const maxLength = Math.max(...data.map(group => group.length));
+
+  const result: ChartDataItem[] = [];
+
+  for (let i = 0; i < maxLength; i++) {
+    let totalValue = 0;
+    let timeLabel = '';
+
+    for (const group of data) {
+      const item = group[i];
+      if (item) {
+        totalValue += item.measureValue;
+        // 第一次遇到有效时间就记录（假设所有 group[i].measureTime 相同）
+        if (!timeLabel) {
+          timeLabel = formatTimestamp(item.measureTime);
+        }
+      }
+    }
+
+    // 如果这一列完全没有数据，跳过（或根据需求处理）
+    if (timeLabel) {
+      result.push({
+        name: timeLabel,
+        value: totalValue
+      });
+    }
+  }
+
+  return result;
+}
+
+const calculateTotalDiff = (data) => {
+  return data.reduce((total, subArray) => {
+    if (subArray.length === 0) {
+      return total; // 空数组跳过
+    }
+    const first = subArray[0].measureValue;
+    const last = subArray[subArray.length - 1].measureValue;
+    return total + (last - first);
+  }, 0);
+}
+
+const handleSelectDate = async (range: string[] | null) => {
+  if (!range || range.length !== 2) {
+    // 清空逻辑
+    return;
+  }
+
+  const timestamps = parseRangeToTimestamp(range, historyTimeGranularity.value);
+  if (!timestamps) return;
+
+  const [start, end] = timestamps;
+  let timeTypeId = 0
+  switch (historyTimeGranularity.value) {
+    case 'day':
+      timeTypeId = 3
+      break
+    /* case 'week':
+      timeTypeId = 4
+      break */
+    case 'month':
+      timeTypeId = 4
+      break
+    case 'year':
+      timeTypeId = 5
+      break
+    default:
+      timeTypeId = 0
+      break
+  }
+  const params = {
+    start,
+    end,
+    timeType: timeTypeId // 或者映射为后端需要的 code
+  };
+  console.log(params)
+  const res = await MapApi.getByStartAndEndTimeAndTimeType(params)
+  const array = Object.values(res);
+  if (array.length === 0) {
+    historyData.value = {
+      totalPower: 0,
+      fuel: 0,
+      co2: 0,
+      pm25: 0,
+      nox: 0,
+      so2: 0,
+    }
+    h_fuelReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_co2ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_so2ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_noxReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    h_pm25ReductionChartData.value = [
+      { name: '', value: 0 }
+    ]
+    return;
+  }
+  console.log(array)
+  const totalDiff = calculateTotalDiff(array);
+  console.log(totalDiff)
+
+
+  historyData.value = {
+    totalPower: Number(totalDiff.toFixed(2)),
+    fuel: Number((totalDiff * 0.22 / 1).toFixed(2)), // 转化为千克
+    co2: Number((totalDiff * 670 / 1000).toFixed(2)), // 克转化为千克
+    pm25: Number((totalDiff * 1.46 / 1000).toFixed(2)), // 克转化为千克
+    nox: Number((totalDiff * 18.1 / 1000).toFixed(2)), // 克转化为千克
+    so2: Number((totalDiff * 10.5 / 1000).toFixed(2)), // 克转化为千克
+  }
+  const chartData = aggregateByIndex(array);
+  const fuelChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 0.22 / 1).toFixed(2)) }))
+  h_fuelReductionChartData.value = fuelChartData;
+
+  const co2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 670 / 1000).toFixed(2)) }))
+  h_co2ReductionChartData.value = co2ChartData;
+
+  const pm25ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 1.46 / 1000).toFixed(2)) }))
+  h_pm25ReductionChartData.value = pm25ChartData;
+
+  const noxChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 18.1 / 1000).toFixed(2)) }))
+  h_noxReductionChartData.value = noxChartData;
+
+  const so2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 10.5 / 1000).toFixed(2)) }))
+  h_so2ReductionChartData.value = so2ChartData;
+};
+
+// 获取对应卡片的图表数据
+const getChartData = (cardId: string): ChartDataItem[] => {
+  switch (cardId) {
+    case 'overview':
+      return totalPowerChartData.value
+    case 'fuel':
+      return fuelReductionChartData.value
+    case 'co2':
+      return co2ReductionChartData.value
+    case 'pm25':
+      return pm25ReductionChartData.value
+    case 'nox':
+      return noxReductionChartData.value
+    case 'so2':
+      return so2ReductionChartData.value
+    default:
+      return commonChartData.value
+  }
+}
+// 获取对应卡片的图表数据
+const getHistoryChartData = (cardId: string): ChartDataItem[] => {
+  switch (cardId) {
+    case 'overview':
+      return totalPowerChartData.value
+    case 'fuel':
+      return h_fuelReductionChartData.value
+    case 'co2':
+      return h_co2ReductionChartData.value
+    case 'pm25':
+      return h_pm25ReductionChartData.value
+    case 'nox':
+      return h_noxReductionChartData.value
+    case 'so2':
+      return h_so2ReductionChartData.value
+    default:
+      return commonChartData.value
+  }
+}
+
+// 时间范围选项
+const timeRange = ref<'realtime' | 'day' | 'month' | 'year'>('day')
+
+// 时间范围选项定义
+const timeRangeOptions = [
+  { value: 'day', label: '本日' },
+  { value: 'month', label: '本月' },
+  { value: 'year', label: '本年' },
+  { value: 'realtime', label: '总' },
+]
+
+// 处理时间范围选择
+const handleTimeRangeChange = (range: 'realtime' | 'day' | 'month' | 'year') => {
+  timeRange.value = range
+  // 这里可以添加根据时间范围切换数据源的逻辑
+}
+
+// 历史模式时间颗粒度选项
+const historyTimeGranularity = ref<'year' | 'month' | 'week' | 'day'>('day')
+
+// 历史模式时间颗粒度选项定义
+const historyTimeGranularityOptions = [
+  { value: 'year', label: '年' },
+  { value: 'month', label: '月' },
+  // { value: 'week', label: '周' },
+  { value: 'day', label: '日' }
+]
+
+// 处理历史模式时间颗粒度选择
+const handleHistoryTimeGranularityChange = (granularity: 'year' | 'month' | 'week' | 'day') => {
+  historyTimeGranularity.value = granularity
+  // 这里可以添加根据时间颗粒度切换数据源的逻辑
+}
+
+const yearComparisonData = {
+  xAxis: ['去年', '今年'],
+  yAxis: ['120', '160']
+}
+
+// 处理日期范围确认
+const handleDateRangeConfirm = () => {
+  // 这里可以添加处理日期范围确认的逻辑
+  console.log('日期范围已确认，当前颗粒度：', historyTimeGranularity.value)
+  // 可以调用API获取选中日期范围内的数据
+}
+
+// 定义卡片信息
+const cards = ref<CardInfo[]>([
+  {
+    id: 'fuel',
+    title: '减少燃油（吨）',
+    type: 'chart',
+    unit: '吨',
+    color: '#4CAF50', // 绿色 - 代表节能、清洁能源
+    value: 'fuel'
+  },
+  {
+    id: 'co2',
+    title: '减少CO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#2E7D32', // 深绿色/蓝绿 - 温室气体（国际常用低碳绿色系）
+    value: 'co2'
+  },
+  {
+    id: 'pm25',
+    title: '减少PM2.5排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#9E9E9E', // 灰色 - 颗粒物（国际通用）
+    value: 'pm25'
+  },
+  {
+    id: 'nox',
+    title: '减少NOₓ排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FF9800', // 橙色 - 氮氧化物（国际通用）
+    value: 'nox'
+  },
+  {
+    id: 'so2',
+    title: '减少SO₂排放（千克）',
+    type: 'chart',
+    unit: '千克',
+    color: '#FFEB3B', // 黄色 - 二氧化硫（国际通用）
+    value: 'so2'
+  }
+])
+
+const handleSelectCard = (cardId: string) => {
+  // 如果当前已经是放大模式且点击的是当前选中的大卡片，则返回平均模式
+  if (displayMode.value === 'magnify' && selectedCard.value === cardId) {
+    displayMode.value = 'average'
+  } else {
+    // 否则进入放大模式并选中指定卡片
+    displayMode.value = 'magnify'
+    selectedCard.value = cardId
+  }
+}
+// 生成初始数据
+const generateInitialData = () => {
+  const now = new Date()
+  const data: ChartDataItem[] = []
+
+  // 生成过去5分钟的数据，每10秒一条
+  for (let i = 29; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 10000)
+    data.push({
+      name: time.toLocaleTimeString(),
+      value: Math.floor(Math.random() * 100) + 10
+    })
+  }
+
+  return data
+}
+
+// 定时器引用
+let timer: ReturnType<typeof setInterval>;
+
+// 追加新数据
+const appendNewData = () => {
+  const now = new Date()
+  commonChartData.value.push({
+    name: now.toLocaleTimeString(),
+    value: Math.floor(Math.random() * 100) + 10
+  })
+}
+
+const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]) => {
+  try {
+    const res: RealtimeDeviceData[] = realtimeDeviceData.filter(item => item.deviceCode.includes('Kwh'));
+    const ids = res.map(item => item.id);
+    const params = {
+      ids: ids.join(','),
+      // year: new Date().getFullYear()
+    }
+    if (!params.ids) return;
+    let yearDataRes: RealtimeDeviceData[] = []
+    let weekDataRes: RealtimeDeviceData[] = []
+    let monthDataRes: RealtimeDeviceData[] = []
+    let dayDataRes: RealtimeDeviceData[] = []
+
+    try {
+      yearDataRes = await MapApi.getYearDataByIdList(params);
+      weekDataRes = await MapApi.getWeekDataByIdList(params);
+      monthDataRes = await MapApi.getMonthDataByIdList(params);
+      dayDataRes = await MapApi.getDayDataByIdList(params);
+    } catch (error) {
+      console.log(error);
+    }
+
+    // const quarterDataRes: deviceData = await MapApi.getQuarterDataByIdList(params);
+
+    const realTimeSum = res.reduce((acc, item) => acc + item.measureValue, 0);
+    const daySum = realTimeSum - Object.values(dayDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const weekSum = realTimeSum - Object.values(weekDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const monthSum = realTimeSum - Object.values(monthDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    // const quarterSum = Object.values(quarterDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+    const yearSum = realTimeSum - Object.values(yearDataRes).reduce((acc, item) => acc + item.measureValue, 0);
+
+    // totalPower.value = realTimeSum.toFixed(2)
+    // co2Reduction.value = (realTimeSum * 670 / 1000000).toFixed(2) // 克转化为吨
+    // so2Reduction.value = (realTimeSum * 10.5 / 1000000).toFixed(2) // 克转化为吨
+    // noxReduction.value = (realTimeSum * 18.1 / 1000000).toFixed(2) // 克转化为吨
+    // pm25Reduction.value = (realTimeSum * 1.46 / 1000000).toFixed(2) // 克转化为吨
+    // fuelReduction.value = (realTimeSum * 0.22 / 1000).toFixed(2) // 转化为吨
+
+    const incrementRealTimeSum = Object.values(res).reduce((acc, item) => acc + item.measureValue, 0);
+
+
+    chartData.value.realtime = {
+      totalPower: Number(realTimeSum.toFixed(2)),
+      fuel: Number((realTimeSum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((realTimeSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((realTimeSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((realTimeSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((realTimeSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+    chartData.value.day = {
+      totalPower: Number(daySum.toFixed(2)),
+      fuel: Number((daySum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((daySum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((daySum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((daySum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((daySum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+    chartData.value.week = {
+      totalPower: Number(weekSum.toFixed(2)),
+      fuel: Number((weekSum * 0.22 / 1).toFixed(2)), // 转化为吨
+      co2: Number((weekSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((weekSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((weekSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((weekSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+    chartData.value.month = {
+      totalPower: Number(monthSum.toFixed(2)),
+      fuel: Number((monthSum * 0.22 / 1).toFixed(2)), // 转化为吨
+      co2: Number((monthSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((monthSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((monthSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((monthSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+    chartData.value.year = {
+      totalPower: Number(yearSum.toFixed(2)),
+      fuel: Number((yearSum * 0.22 / 1).toFixed(2)), // 转化为千克
+      co2: Number((yearSum * 670 / 1000).toFixed(2)), // 克转化为千克
+      pm25: Number((yearSum * 1.46 / 1000).toFixed(2)), // 克转化为千克
+      nox: Number((yearSum * 18.1 / 1000).toFixed(2)), // 克转化为千克
+      so2: Number((yearSum * 10.5 / 1000).toFixed(2)), // 克转化为千克
+    }
+
+
+    // 记录实时数据到图表数组
+    const now = new Date()
+    const timestamp = now.toLocaleTimeString()
+
+    // 计算各指标值（转换为合适的单位）并保留两位小数
+    const totalPowerValue = Number(incrementRealTimeSum.toFixed(2))
+    const co2Value = Number((incrementRealTimeSum * 670 / 1000).toFixed(2)) // 克转化为千克
+    const so2Value = Number((incrementRealTimeSum * 10.5 / 1000).toFixed(2)) // 克转化为千克
+    const noxValue = Number((incrementRealTimeSum * 18.1 / 1000).toFixed(2)) // 克转化为千克
+    const pm25Value = Number((incrementRealTimeSum * 1.46 / 1000).toFixed(2)) // 克转化为千克
+    const fuelValue = Number((incrementRealTimeSum * 0.22 / 1).toFixed(2)) // 转化为千克
+
+    // 添加到各图表数据数组
+    totalPowerChartData.value.push({ name: timestamp, value: totalPowerValue })
+    co2ReductionChartData.value.push({ name: timestamp, value: co2Value })
+    so2ReductionChartData.value.push({ name: timestamp, value: so2Value })
+    noxReductionChartData.value.push({ name: timestamp, value: noxValue })
+    pm25ReductionChartData.value.push({ name: timestamp, value: pm25Value })
+    fuelReductionChartData.value.push({ name: timestamp, value: fuelValue })
+
+    // 保持数组最多包含20个数据点（对应约3分钟，每10秒一条）
+    const maxDataPoints = 10
+    totalPowerChartData.value = totalPowerChartData.value.slice(-maxDataPoints)
+    co2ReductionChartData.value = co2ReductionChartData.value.slice(-maxDataPoints)
+    so2ReductionChartData.value = so2ReductionChartData.value.slice(-maxDataPoints)
+    noxReductionChartData.value = noxReductionChartData.value.slice(-maxDataPoints)
+    pm25ReductionChartData.value = pm25ReductionChartData.value.slice(-maxDataPoints)
+    fuelReductionChartData.value = fuelReductionChartData.value.slice(-maxDataPoints)
+
+    // 更新通用图表数据（保持向后兼容）
+    commonChartData.value.push({ name: timestamp, value: totalPowerValue })
+    commonChartData.value = commonChartData.value.slice(-maxDataPoints)
+
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+/* const handleGetAllDeviceDataByTimeRange = async () => {
+  try {
+    // 当前时间的时间戳（毫秒）
+    const nowTimestamp = dayjs().valueOf().toString();
+
+    // 两天前的时间戳（毫秒）
+    const twoDaysAgoTimestamp = dayjs().subtract(2, 'day').valueOf().toString();
+
+
+
+  } catch (error) {
+    console.error(error)
+  }
+} */
+
+watch(() => props.realtimeDeviceData, (newValue) => {
+  handleGetRealTimeAllData(newValue)
+})
+
+// 组件挂载时初始化数据和定时器
+// 添加一个变量来保存事件处理函数的引用
+let cardSelectedHandler: any = null
+
+onMounted(() => {
+  // handleGetAllDeviceDataByTimeRange()
+  handleGetRealTimeAllData(props.realtimeDeviceData)
+
+  // 添加卡片选择事件监听器
+  cardSelectedHandler = (event: CustomEvent) => {
+    selectedCard.value = event.detail
+  }
+  window.addEventListener('cardSelected', cardSelectedHandler)
+})
+
+// 监听 activeHeadGroup 变化，当组件变为可见时触发 resize
+watch(() => props.activeHeadGroup, (newVal) => {
+  if (newVal === 1) {
+    // 延迟执行 resize，确保 DOM 已经更新
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 100)
+  }
+}, { immediate: true })
+
+// 组件销毁前清除定时器
+onBeforeUnmount(() => {
+  if (cardSelectedHandler) {
+    window.removeEventListener('cardSelected', cardSelectedHandler)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.shore-power-usage {
+  display: flex;
+  height: 100%;
+  gap: 10px;
+}
+
+.card .card-content {
+  overflow: hidden !important;
+}
+
+.average {
+
+  .overview-value {
+    font-size: 36px;
+  }
+
+  .overview-label {
+    font-size: 18px;
+  }
+}
+
+.magnify {
+  width: 100%;
+  padding: 12px;
+  height: calc(100vh - 72px);
+  position: absolute;
+  top: 72px;
+  left: 0px;
+  display: flex;
+  // flex-direction: column;
+  /* background-color: red; */
+  gap: 8px;
+  overflow-y: auto;
+
+  .big {
+    height: 100%;
+    width: calc(100% - 500px);
+
+    .card {
+      height: 100%;
+    }
+
+    .overview-value {
+      font-size: 48px;
+    }
+
+    .overview-label {
+      font-size: 28px;
+    }
+  }
+
+  .right-row {
+    width: 500px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 8px;
+    // background-color: red;
+  }
+
+  .one-row {
+    height: 30%;
+    display: flex;
+    gap: 8px;
+
+    .card .card-title .title-text {
+      font-size: 14px;
+    }
+
+    .card {
+      flex: 1;
+    }
+  }
+}
+
+.card {
+  padding: 6px;
+  cursor: pointer;
+}
+
+.time-range-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.show-value {
+  font-size: 18px;
+  font-weight: 600;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  color: #FFF;
+}
+
+.show-value-label {
+  font-size: 18px;
+  font-weight: 600;
+  font-weight: bold;
+}
+
+.show-value-value {
+  font-size: 20px;
+  font-weight: 600;
+  font-weight: bold;
+}
+
+.time-range-item {
+  font-size: 16px;
+  font-weight: 600;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+
+
+.right {
+  /* gap: 0 */
+}
+</style>
\ No newline at end of file
diff --git a/public/map/components/ShowData.vue b/public/map/components/ShowData.vue
index 19d14c1..86896b7 100644
--- a/public/map/components/ShowData.vue
+++ b/public/map/components/ShowData.vue
@@ -184,22 +184,26 @@
               </div>
             </div>
             <div class="ship-status">
-              <div class="usage-rate">
+              <div class="usage-rate shadow">
                 <div class="rate-value">{{ calculateShorePowerUsageRate() }}%</div>
                 <div class="rate-label">岸电使用率</div>
               </div>
               <div class="status-grid">
                 <div class="status-card" @click="handleShowShipList('all')">
                   <div class="status-value">{{ shipTotalData.berthingShips }}</div>
-                  <div class="status-label">在港船舶数量</div>
+                  <div class="status-label">在港船舶</div>
+                </div>
+                <div class="status-card" @click="handleShowShipList('all')">
+                  <div class="status-value">{{ shipTotalData.berthingShips }}</div>
+                  <div class="status-label">在泊船舶</div>
                 </div>
                 <div class="status-card" @click="handleShowShipList('using')">
                   <div class="status-value">{{ shipTotalData.shorePowerShips }}</div>
-                  <div class="status-label">使用岸电船舶数量</div>
+                  <div class="status-label">使用岸电船舶</div>
                 </div>
                 <div class="status-card" @click="handleShowShipList('notUsing')">
                   <div class="status-value">{{ shipTotalData.noShorePowerShips }}</div>
-                  <div class="status-label">未使用岸电船舶数量</div>
+                  <div class="status-label">未使用岸电船舶</div>
                 </div>
               </div>
               <!-- <div class="ship-list">
@@ -498,7 +502,7 @@ const switchShipPeriod = (period: string) => {
 // 处理卡片点击事件，跳转到详细页面并设置对应的卡片
 const handleCardClick = (cardType: string) => {
   // 先跳转到港口岸电使用情况模块（activeHeadGroup = 1）
-  props.handleGoToModule(1)
+  props.handleGoToModule(5)
   // 使用nextTick确保组件已经渲染后再设置selectedCard
   setTimeout(() => {
     // 发送消息到父组件或通过事件总线通知ShorePowerUsage组件切换卡片
@@ -867,6 +871,11 @@ const handleCloseShipList = () => {
   margin-bottom: 6px;
 }
 
+.usage-rate.shadow {
+  box-shadow: 0 0px 10px rgb(255, 255, 255);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
 .rate-value {
   font-size: 36px;
   font-weight: bold;
@@ -881,7 +890,7 @@ const handleCloseShipList = () => {
 
 .status-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 6px;
   margin-bottom: 6px;
 }
diff --git a/public/map/components/charts/ComparisonBarChart.vue b/public/map/components/charts/ComparisonBarChart.vue
new file mode 100644
index 0000000..43851a2
--- /dev/null
+++ b/public/map/components/charts/ComparisonBarChart.vue
@@ -0,0 +1,257 @@
+<template>
+  <div ref="chartContainer" class="comparison-bar-chart-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import * as echarts from 'echarts'
+
+// 定义组件属性
+interface Props {
+  chartData?: Array<{
+    name: string
+    currentValue: number
+    previousValue: number
+  }>
+  title?: string
+  currentColor?: string
+  previousColor?: string
+  showYAxis?: boolean
+  yAxisName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  chartData: () => [],
+  title: '',
+  currentColor: '#1296db',
+  previousColor: '#ff6b6b',
+  showYAxis: true,
+  yAxisName: '数值'
+})
+
+// 图表容器引用和实例
+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'
+      },
+      formatter: function (params: any) {
+        const currentData = params[0]
+        const previousData = params[1]
+
+        const growthRate = previousData.value > 0
+          ? ((currentData.value - previousData.value) / previousData.value * 100).toFixed(2)
+          : '∞'
+
+        return `${currentData.name}<br/>
+                ${currentData.seriesName}: ${currentData.value}<br/>
+                ${previousData.seriesName}: ${previousData.value}<br/>
+                增长率: ${growthRate}%`
+      }
+    },
+    legend: {
+      data: ['本期', '上期'],
+      textStyle: {
+        color: '#fff'
+      },
+      top: 30
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '25%',
+      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: 0,
+        margin: 15
+      }
+    },
+    yAxis: {
+      type: 'value',
+      show: props.showYAxis,
+      name: props.yAxisName,
+      nameTextStyle: {
+        color: 'rgba(255, 255, 255, 0.7)'
+      },
+      axisLine: {
+        show: props.showYAxis,
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        }
+      },
+      splitLine: {
+        show: props.showYAxis,
+        lineStyle: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        }
+      },
+      axisLabel: {
+        show: props.showYAxis,
+        color: 'rgba(255, 255, 255, 0.7)'
+      }
+    },
+    series: [
+      {
+        name: '当前期',
+        type: 'bar',
+        data: props.chartData.map(item => item.currentValue),
+        barWidth: '35%',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.currentColor
+              },
+              {
+                offset: 1,
+                color: props.currentColor + '80'
+              }
+            ]
+          },
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: props.currentColor
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff',
+          formatter: '{c}',
+          fontSize: 12
+        }
+      },
+      {
+        name: '对比期',
+        type: 'bar',
+        data: props.chartData.map(item => item.previousValue),
+        barWidth: '35%',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.previousColor
+              },
+              {
+                offset: 1,
+                color: props.previousColor + '80'
+              }
+            ]
+          },
+          borderRadius: [4, 4, 0, 0]
+        },
+        emphasis: {
+          itemStyle: {
+            color: props.previousColor
+          }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff',
+          formatter: '{c}',
+          fontSize: 12
+        }
+      }
+    ]
+  }
+
+  chartInstance.setOption(option)
+}
+
+// 监听数据变化
+watch(
+  () => props.chartData,
+  () => {
+    updateChart()
+  },
+  { deep: true }
+)
+
+// 窗口大小改变时重绘图表
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+// 组件挂载时初始化图表
+onMounted(() => {
+  setTimeout(() => {
+    initChart()
+  }, 2000)
+  window.addEventListener('resize', handleResize)
+})
+
+// 组件销毁前清理资源
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+})
+</script>
+
+<style scoped>
+.comparison-bar-chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/public/map/index.vue b/public/map/index.vue
index 240fba5..55ff435 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -37,18 +37,21 @@
       :ship-data-list="shipDataList" @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData"
       v-if="dataLoad" />
 
-    <!-- 港口岸电使用情况 -->
-    <!-- <template v-if="activeHeadGroup === 1"> -->
+    <!-- 港口岸电使用情况多数据 -->
     <ShorePowerUsage v-show="activeHeadGroup === 1" :realtime-device-data-time="realtimeDeviceDataTime"
       :realtime-device-data="realtimeDeviceData" :active-head-group="activeHeadGroup" v-if="dataLoad"
       :handleGoBack="handleGoBack" />
-    <!-- </template> -->
+
+    <!-- 港口岸电使用情况单数据 -->
+    <ShorePowerUsageSingleData v-show="activeHeadGroup === 5" :realtime-device-data-time="realtimeDeviceDataTime"
+      :realtime-device-data="realtimeDeviceData" :active-head-group="activeHeadGroup" v-if="dataLoad"
+      :handleGoBack="handleGoBack" />
 
     <!-- 港口企业岸电使用 -->
     <!-- <template v-if="activeHeadGroup === 2"> -->
     <CompanyShorePower v-show="activeHeadGroup === 2" :realtime-device-data="realtimeDeviceData"
       :shore-power-list="ShorePowerList" :handleGoBack="handleGoBack"
-      :realtime-device-data-time="realtimeDeviceDataTime" />
+      :realtime-device-data-time="realtimeDeviceDataTime" v-if="dataLoad" />
     <!-- </template> -->
 
     <!-- 船舶岸电使用情况 -->
@@ -249,6 +252,7 @@
 import PublicMapComponents from './components/cesiumMap.vue'
 // import PortOverview from './components/PortOverview.vue'
 import ShorePowerUsage from './components/ShorePowerUsage.vue'
+import ShorePowerUsageSingleData from './components/ShorePowerUsageSingleData.vue'
 import ShowData from './components/ShowData.vue'
 import CompanyShorePower from './components/CompanyShorePower.vue'
 import ShipShorePower from './components/ShipShorePower.vue'
@@ -830,7 +834,6 @@ const handleGetlRangeData = async (realtimeDeviceData: RealtimeDeviceData[]) =>
   try {
     const res: RealtimeDeviceData[] = realtimeDeviceData.filter(item => item.deviceCode.includes('Kwh'));
     const ids = res.map(item => item.id);
-    console.log(ids);
     const params = {
       ids: ids.join(','),
       // year: new Date().getFullYear()