From a05f704884624ad513a852586abe27416292eee7 Mon Sep 17 00:00:00 2001
From: jiangAB <jiangjin514@foxmail.com>
Date: Tue, 16 Dec 2025 19:37:35 +0800
Subject: [PATCH] update

---
 public/map/components/CompanyShorePower.vue   |   92 +-
 public/map/components/PortOverview.vue        |  236 +---
 public/map/components/ShipHistoryDialog.vue   |  284 ++--
 public/map/components/ShipShorePower.vue      |   10 +-
 .../components/ShorePowerHistoryDialog.vue    |    4 +-
 public/map/components/ShorePowerUsage.vue     |  874 +++++++++---
 public/map/components/cesiumMap.vue           | 1242 +++++++++++------
 .../map/components/charts/WaveLineChart.vue   |   13 +
 public/map/components/dictionaryTable.ts      |    9 +
 public/map/components/utils.ts                |   48 +
 public/map/index.vue                          |  309 +++-
 11 files changed, 2148 insertions(+), 973 deletions(-)

diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue
index 3fff534..bceaaba 100644
--- a/public/map/components/CompanyShorePower.vue
+++ b/public/map/components/CompanyShorePower.vue
@@ -9,10 +9,10 @@
             <img src="@/assets/svgs/data.svg" class="title-icon" />
             <span class="title-text">码头与泊位信息</span>
           </div>
-          <div>
+          <!-- <div>
             <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
               format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
-          </div>
+          </div> -->
 
         </div>
 
@@ -20,11 +20,13 @@
           <div v-for="company in companyComparisonData" :key="company.name" class="company-section">
             <div class="company-header">
               <div class="company-name">{{ company.name }}</div>
-              <div class="company-total">总量: {{ company.value }}</div>
+              <div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
             </div>
             <div class="overview-grid">
-              <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item">
-                <div class="overview-value">{{ berth.value }}</div>
+              <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
+                @click="showShorePowerHistory(berth)">
+                <div class="overview-value">{{ berth.measureValue?.toFixed(2)
+                  || 0 }}</div>
 
                 <div class="overview-label">{{ berth.name }}</div>
 
@@ -34,24 +36,97 @@
         </div>
       </div>
     </div>
+    <ship-history-dialog v-model="historyVisible.visible" :ship-param="historyVisible.searchParams"
+      :realtime-device-data="realtimeDeviceData" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-
+import { MapApi } from "@/api/shorepower/map";
+import ShipHistoryDialog from './ShipHistoryDialog.vue';
+import { RealtimeDeviceData } from '@/types/shorepower';
 // 定义组件属性
 interface ChartDataItem {
   name: string;
-  value: number;
+  value?: number;
+  measureValue?: number;
   children?: ChartDataItem[];
 }
 
+const historyVisible = ref({
+  visible: false,
+  searchParams: {
+    shipId: 0 as number | null,
+    ids: [] as number[] | null,
+    type: 1 as number
+  }
+})
+
+// 计算总量的函数
+const calculateTotal = (children?: ChartDataItem[]) => {
+  if (!children || children.length === 0) return 0;
+  return children.reduce((total, item) => {
+    return total + (item.measureValue || 0);
+  }, 0);
+};
+
+// 显示岸电箱历史记录
+const showShorePowerHistory = (berth: ChartDataItem) => {
+  console.log(berth)
+  // console.log('shorepower', shorepower)
+  // currentShorePower.value = shorepower
+  /* shorePowerHistoryVisible.value = {
+    visible: true,
+    shorePowerId: shorepower.id || 0
+  } */
+  historyVisible.value = {
+    visible: true,
+    searchParams: {
+      shipId: null,
+      ids: [berth.id],
+      type: 4,
+    }
+  }
+}
+
 interface Props {
-  companyComparisonData: ChartDataItem[];
+  companyComparisonData?: ChartDataItem[];
+  realtimeDeviceData: RealtimeDeviceData[];
 }
 
 const props = defineProps<Props>()
+const companyComparisonData = ref<ChartDataItem[]>([])
+const handleGetBuildData = async () => {
+  const dockList = await MapApi.getDockIdAndNameList()
+  const berthList = await MapApi.getBerthIdAndNameList()
+  const buildData = dockList.map(dock => ({
+    ...dock,
+    children: berthList.filter(berth => berth.dockId === dock.id).map(berth => ({
+      ...berth,
+      ...props.realtimeDeviceData.find(item => (item.id === berth.id) && (item.deviceCode.includes('Kwh')))
+    }))
+  }))
+  console.log('buildData', buildData)
+  console.log('props.realtimeDeviceData', props.realtimeDeviceData)
+  companyComparisonData.value = buildData
+  /* MapApi.getBerthIdAndNameList().then(res => {
+    console.log(res)
+    const buildData = res.map(item => ({
+      ...item,
+      children: props.realtimeDeviceData.filter(item => item.id === item.id)
+    }))
+
+  }) */
+}
+watch(() => props.realtimeDeviceData, (newVal) => {
+  handleGetBuildData()
+})
+onMounted(() => {
+  // console.log(props.realtimeDeviceData)
+  handleGetBuildData()
+
+})
 </script>
 
 <style scoped>
@@ -92,6 +167,7 @@ const props = defineProps<Props>()
 }
 
 .overview-item {
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
index 68078d6..65eda0d 100644
--- a/public/map/components/PortOverview.vue
+++ b/public/map/components/PortOverview.vue
@@ -10,7 +10,7 @@
               <span class="title-text">岸电箱状态</span>
             </div>
             <input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword"
-              @input="handleSearch" />
+              @input="handlStoreSearch" />
           </div>
 
           <div class=" card-content">
@@ -21,7 +21,7 @@
                 <div class="ship-table-column ship-status-header">历史</div>
               </div>
               <div class="ship-table-body">
-                <div v-for="shorepower in ShorePowerList" :key="shorepower.id" class="ship-table-row"
+                <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>
@@ -66,7 +66,7 @@
               </div>
               <div class="ship-table-body">
                 <div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
-                  @click="handleSwitch(ship, 'ship')">
+                  @click="handleSelectItem(ship)">
                   <div class="ship-table-column ship-name">
                     <div class="ship-icon">🚢</div>
                     <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
@@ -92,7 +92,8 @@
         </div>
       </div>
     </div>
-    <div class="right" :style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
+    <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right"
+      :style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
       <div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row">
         <div class="card digital-twin-card--deep-blue">
           <div class="card-title">
@@ -263,27 +264,6 @@
             </div>
           </div>
         </div>
-        <!-- <div class="card digital-twin-card--deep-blue">
-          <div class="card-title">
-            <div class="vertical-line"></div>
-            <img src="@/assets/svgs/data.svg" class="title-icon" />
-            <span class="title-text">岸电信息</span>
-          </div>
-          <div class="card-content">
-            <div class="ship-detail">
-              <div class="detail-item">
-                <span class="label">停泊状态:</span>
-                <span class="value">{{ selectedItem.shorePowerAndShip.type === 'left' ? '左舷停泊' :
-                  selectedItem.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedItem.shorePowerAndShip.type
-                }}</span>
-              </div>
-              <div class="detail-item">
-                <span class="label">靠泊状态:</span>
-                <span class="value">{{ getShorePowerStatusText(selectedItem.shorePowerAndShip.status) }}</span>
-              </div>
-            </div>
-          </div>
-        </div> -->
       </div>
 
       <!-- <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;">
@@ -297,28 +277,17 @@
         </div>
       </div> -->
     </div>
-
-    <!-- 岸电箱历史记录弹窗 -->
-    <ShorePowerHistoryDialog v-model="shorePowerHistoryVisible.visible" :data="shorePowerHistoryData"
-      :ship-connection-data="shorePowerConnectionData" @search="handleShorePowerHistorySearch"
-      @ship-connection-search="handleShorePowerConnectionSearch"
-      :shore-power-id="shorePowerHistoryVisible.shorePowerId" />
-
-    <!-- 船舶历史记录弹窗 -->
-    <ShipHistoryDialog v-model="shipHistoryVisible.visible" :berthing-data="shipHistoryData"
-      :shore-power-connection-data="shipShorePowerConnectionData" @berthing-search="handleShipHistorySearch"
-      @shore-power-connection-search="handleShipShorePowerConnectionSearch" :ship-id="shipHistoryVisible.shipId"
+    <ShipHistoryDialog v-model="shipHistoryVisible.visible" :ship-param="shipHistoryVisible.searchParams"
       :realtime-device-data="realtimeDeviceData" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import ShorePowerHistoryDialog from './ShorePowerHistoryDialog.vue'
 import ShipHistoryDialog from './ShipHistoryDialog.vue'
 import { MapApi } from "@/api/shorepower/map";
 import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower';
-import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable';
+import { BERTH_TYPE, getOperationTypeLabel, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable';
 import { formatDuration, formatTimestamp, getValueById, showStatus } from './utils';
 // 定义组件属性
 type ShipItem = ShipRespVo & { id: string; modelInstance?: any; };
@@ -327,6 +296,8 @@ interface Props {
   shipStatusData: ShipItem[];
   shorePowerStatusData: ShipItem[];
   realtimeDeviceData: RealtimeDeviceData[];
+  shorePowerList: (ShorePowerBerth & { position: string; })[];
+  shipDataList: ShipRespVo[];
   // selectedItem: ShipItem | null;
 }
 
@@ -339,77 +310,41 @@ const show_type = ref('ship')
 const shipSelectedItem = ref<ShipItem | null>(null)
 const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null)
 
-// 历史记录弹窗相关
-const shorePowerHistoryVisible = ref({
-  visible: false,
-  shorePowerId: 0
-})
+
 const shipHistoryVisible = ref({
   visible: false,
-  shipId: 0
+  searchParams: {
+    shipId: 0 as number | null,
+    ids: [] as number[] | null,
+    type: 1 as number
+  }
 })
 const currentShorePower = ref<ShorePowerBerth | null>(null)
 const currentShip = ref<ShipItem | null>(null)
 
-const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
+// const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
 
 // 过滤后的船舶数据
 const filteredShipStatusData = computed(() => {
   if (!searchKeyword.value) {
-    return props.shipStatusData
+    return props.shipDataList
   }
-  return props.shipStatusData.filter(ship =>
+  return props.shipDataList.filter(ship =>
     ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
   )
 })
 
-// 模拟岸电箱历史数据
-const shorePowerHistoryData = ref<any[]>([
-  { id: 1, time: '2023-05-01 08:30:00', operation: '连接', voltage: '380', current: '120', power: '45.6', energy: '12.5' },
-  { id: 2, time: '2023-05-01 12:15:00', operation: '运行', voltage: '382', current: '118', power: '45.1', energy: '35.2' },
-  { id: 3, time: '2023-05-01 16:45:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
-  { id: 4, time: '2023-05-02 09:20:00', operation: '连接', voltage: '379', current: '122', power: '46.3', energy: '8.7' },
-  { id: 5, time: '2023-05-02 14:30:00', operation: '运行', voltage: '381', current: '119', power: '45.4', energy: '28.9' },
-  { id: 6, time: '2023-05-02 18:50:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
-  { id: 7, time: '2023-05-03 07:45:00', operation: '连接', voltage: '380', current: '121', power: '45.9', energy: '15.3' },
-  { id: 8, time: '2023-05-03 13:20:00', operation: '运行', voltage: '382', current: '120', power: '45.8', energy: '42.1' },
-  { id: 9, time: '2023-05-03 17:30:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
-  { id: 10, time: '2023-05-04 10:15:00', operation: '连接', voltage: '378', current: '123', power: '46.5', energy: '9.8' }
-])
-
-// 模拟船舶靠泊历史数据
-const shipHistoryData = ref<any[]>([
-  { id: 1, time: '2023-04-15 09:30:00', operation: '靠泊', berthPosition: '1号泊位', duration: '12.5', powerConsumption: '125.6' },
-  { id: 2, time: '2023-04-16 14:20:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
-  { id: 3, time: '2023-04-20 08:45:00', operation: '靠泊', berthPosition: '3号泊位', duration: '8.2', powerConsumption: '89.3' },
-  { id: 4, time: '2023-04-21 16:30:00', operation: '离泊', berthPosition: '3号泊位', duration: '0', powerConsumption: '0' },
-  { id: 5, time: '2023-04-25 11:15:00', operation: '靠泊', berthPosition: '2号泊位', duration: '15.7', powerConsumption: '156.8' },
-  { id: 6, time: '2023-04-26 18:40:00', operation: '离泊', berthPosition: '2号泊位', duration: '0', powerConsumption: '0' },
-  { id: 7, time: '2023-05-01 07:20:00', operation: '靠泊', berthPosition: '1号泊位', duration: '18.3', powerConsumption: '189.2' },
-  { id: 8, time: '2023-05-02 15:50:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
-  { id: 9, time: '2023-05-05 09:10:00', operation: '靠泊', berthPosition: '4号泊位', duration: '6.4', powerConsumption: '67.5' },
-  { id: 10, time: '2023-05-06 13:45:00', operation: '离泊', berthPosition: '4号泊位', duration: '0', powerConsumption: '0' }
-])
-
-// 模拟岸电箱连接船舶数据
-const shorePowerConnectionData = ref<any[]>([
-  { id: 1, shipName: '远航号', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
-  { id: 2, shipName: '海鹰号', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
-  { id: 3, shipName: '巨轮号', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
-  { id: 4, shipName: '远洋号', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
-  { id: 5, shipName: '海豚号', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
-])
-
-// 模拟船舶连接岸电箱数据
-const shipShorePowerConnectionData = ref<any[]>([
-  { id: 1, shorePowerName: '1号岸电箱', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
-  { id: 2, shorePowerName: '2号岸电箱', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
-  { id: 3, shorePowerName: '1号岸电箱', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
-  { id: 4, shorePowerName: '3号岸电箱', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
-  { id: 5, shorePowerName: '2号岸电箱', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
-])
+// 过滤后的岸电箱数据
+const filteredShorePowerList = computed(() => {
+  if (!storeSearchKeyword.value) {
+    return props.shorePowerList
+  }
+  return props.shorePowerList.filter(shorepower =>
+    shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
+  )
+})
 
-const handleSelectItem = async (item: ShipItem) => {
+const handleSelectItem = async (item: ShipRespVo) => {
   const deviceId = item.shorePower?.totalPowerDeviceId;
   const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId })
   console.log(res)
@@ -420,29 +355,37 @@ const handleSelectItem = async (item: ShipItem) => {
       'measureValue': res[0].measureValue || 'N/A',
     }
   }
+  emit('item-click', {
+    type: 'ship',
+    item: item
+  })
 }
 
-const filteredShorePowerStatusData = computed(() => {
-  if (!storeSearchKeyword.value) {
-    return props.shipStatusData
-  }
-  return props.shipStatusData.filter(ship =>
-    ship.shorePowerEquipment.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
-  )
-})
-
 // 处理搜索输入
 const handleSearch = () => {
   // 输入处理逻辑（如果需要额外处理可以在这里添加）
 }
 
+// 处理岸电箱搜索输入
+const handlStoreSearch = () => {
+  // 输入处理逻辑（如果需要额外处理可以在这里添加）
+}
+
 // 显示岸电箱历史记录
 const showShorePowerHistory = (shorepower: ShorePowerBerth) => {
   console.log('shorepower', shorepower)
   currentShorePower.value = shorepower
-  shorePowerHistoryVisible.value = {
+  /* shorePowerHistoryVisible.value = {
     visible: true,
     shorePowerId: shorepower.id || 0
+  } */
+  shipHistoryVisible.value = {
+    visible: true,
+    searchParams: {
+      shipId: null,
+      ids: [shorepower.id],
+      type: 5,
+    }
   }
 }
 
@@ -452,53 +395,18 @@ const showShipHistory = (ship: ShipItem) => {
   currentShip.value = ship
   shipHistoryVisible.value = {
     visible: true,
-    shipId: ship.shipBasicInfo.id
+    searchParams: {
+      shipId: ship.shipBasicInfo.id,
+      ids: null,
+      type: 1,
+    }
   }
 }
 
-// 处理岸电箱历史记录搜索
-const handleShorePowerHistorySearch = (params: any) => {
-  console.log('岸电箱历史记录搜索参数:', params)
-  // 实际项目中这里会调用接口获取数据
-  // 模拟延迟
-  setTimeout(() => {
-    console.log('岸电箱历史记录搜索完成')
-  }, 500)
-}
-
-// 处理船舶历史记录搜索
-const handleShipHistorySearch = (params: any) => {
-  console.log('船舶历史记录搜索参数:', params)
-  // 实际项目中这里会调用接口获取数据
-  // 模拟延迟
-  setTimeout(() => {
-    console.log('船舶历史记录搜索完成')
-  }, 500)
-}
-
-// 处理岸电箱连接船舶记录搜索
-const handleShorePowerConnectionSearch = (params: any) => {
-  console.log('岸电箱连接船舶记录搜索参数:', params)
-  // 实际项目中这里会调用接口获取数据
-  // 模拟延迟
-  setTimeout(() => {
-    console.log('岸电箱连接船舶记录搜索完成')
-  }, 500)
-}
-
-// 处理船舶连接岸电箱记录搜索
-const handleShipShorePowerConnectionSearch = (params: any) => {
-  console.log('船舶连接岸电箱记录搜索参数:', params)
-  // 实际项目中这里会调用接口获取数据
-  // 模拟延迟
-  setTimeout(() => {
-    console.log('船舶连接岸电箱记录搜索完成')
-  }, 500)
-}
-
 // 定义事件
 const emit = defineEmits<{
   (e: 'switch-ship', ship: ShipItem): void;
+  (e: 'item-click', item: any): void;
   // handleSelectItem(ship)
 
 }>()
@@ -516,21 +424,14 @@ const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position:
   // selectedItem.value = shorepower
   shorepowerSelectedItem.value = shorepower
   show_type.value = 'shorepower'
+  emit('item-click', {
+    type: 'shorepower_box',
+    item: shorepower
+  })
   // const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId })
   // console.log('voltageDeviceId', data)
 }
 
-const shorePowerStatusMap = {
-  1: '待靠泊',
-  2: '靠泊中',
-  3: '岸电接入中',
-  4: '用电中',
-  5: '岸电卸载中',
-  6: '岸电卸载完成',
-  7: '离泊',
-  9: '未使用岸电'
-}
-
 const StatusMap = {
   1: '故障',
   2: '故障',
@@ -549,13 +450,6 @@ const StatusText = (status: number | string) => {
   return StatusMap[statusNum] || status;
 }
 
-// 状态转换函数
-const getShorePowerStatusText = (status: number | string) => {
-  const statusNum = Number(status);
-  // console.log(status)
-  return shorePowerStatusMap[statusNum] || status;
-}
-
 const getStatusClass = (status: string) => {
   switch (status) {
     case '正常':
@@ -579,22 +473,8 @@ const getStatusClass = (status: string) => {
   }
 }
 
-const handleGetStorePower = async () => {
-  // console.log('loading')
-  const harborDistrictId = 1
-  const harborDistrictList = await HARBOR_DISTRICT()
-  const dockDistrictList = await DOCK_DISTRICT()
-  const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
-  ShorePowerList.value = res.map(item => ({
-    ...item,
-    position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
-  }))
-  console.log('11', res)
-}
-
-onMounted(async () => {
-  await handleGetStorePower()
-  // console.log(props.shipStatusData)
+watch(() => props.shipDataList, (newVal) => {
+  console.log('newVal', newVal)
 })
 
 onMounted(() => {
diff --git a/public/map/components/ShipHistoryDialog.vue b/public/map/components/ShipHistoryDialog.vue
index 22e2652..0154c3a 100644
--- a/public/map/components/ShipHistoryDialog.vue
+++ b/public/map/components/ShipHistoryDialog.vue
@@ -1,44 +1,48 @@
 <template>
-  <el-dialog v-model="visible" title="船舶历史记录" width="1200px" :before-close="handleClose">
-    <el-tabs v-model="activeTab">
-      <!-- 船舶靠泊历史记录 tab -->
-      <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing">
-        <!-- 搜索和筛选区域 -->
-        <div class="filter-container">
-          <el-form :model="berthingQueryParams" label-width="80px" inline>
-            <el-form-item label="关键字">
+  <el-dialog v-model="visible" title="历史记录" width="1200px" :before-close="handleClose">
+    <!-- <el-tabs v-model="activeTab"> -->
+    <!-- 船舶靠泊历史记录 tab -->
+    <!-- <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing"> -->
+    <!-- 搜索和筛选区域 -->
+    <div class="filter-container">
+      <el-form :model="berthingQueryParams" label-width="80px" inline>
+        <el-form-item label="类型">
+          <el-select v-model="berthingQueryParams.type" style="width: 120px" placeholder="请选择类型">
+            <el-option v-for="item in FACILITY_TYPE" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <!-- <el-form-item label="关键字">
               <el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable
                 @keyup.enter="handleBerthingSearch" />
-            </el-form-item>
-            <el-form-item label="时间范围">
-              <el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleBerthingSearch">搜索</el-button>
-              <el-button @click="resetBerthingQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
+            </el-form-item> -->
+        <el-form-item label="时间范围">
+          <el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button>
+          <el-button @click="resetBerthingQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
+      <el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label"
+        :width="column.width" :formatter="column.formatter" />
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize"
+        :page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" />
+    </div>
+    <!-- </el-tab-pane> -->
+
+
+    <!-- <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
 
-        <!-- 数据表格 -->
-        <el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
-          <el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop"
-            :label="column.label" :width="column.width" :formatter="column.formatter" />
-        </el-table>
-
-        <!-- 分页 -->
-        <div class="pagination-container">
-          <el-pagination v-model:current-page="berthingQueryParams.pageNo"
-            v-model:page-size="berthingQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" :total="berthingTotal"
-            layout="total, sizes, prev, pager, next, jumper" @size-change="handleBerthingSizeChange"
-            @current-change="handleBerthingCurrentChange" />
-        </div>
-      </el-tab-pane>
-
-      <!-- 船舶连接岸电箱历史记录 tab -->
-      <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
-        <!-- 搜索和筛选区域 -->
         <div class="filter-container">
           <el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline>
             <el-form-item label="关键字">
@@ -57,23 +61,23 @@
           </el-form>
         </div>
 
-        <!-- 数据表格 -->
+
         <el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%"
           v-loading="shorePowerConnectionLoading">
           <el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop"
             :label="column.label" :width="column.width" :formatter="column.formatter" />
         </el-table>
 
-        <!-- 分页 -->
+
         <div class="pagination-container">
           <el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo"
             v-model:page-size="shorePowerConnectionQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
             :total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper"
             @size-change="handleShorePowerConnectionSizeChange"
             @current-change="handleShorePowerConnectionCurrentChange" />
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+        </div> -->
+    <!-- </el-tab-pane> -->
+    <!-- </el-tabs> -->
 
     <template #footer>
       <span class="dialog-footer">
@@ -99,7 +103,7 @@ import {
   ElTableColumn,
   ElPagination
 } from 'element-plus'
-import { CARGO_CATEGORY, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable';
+import { CARGO_CATEGORY, FACILITY_TYPE, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable';
 import { formatDuration, formatTimestamp, showStatus } from './utils';
 import { RealtimeDeviceData } from '@/types/shorepower';
 
@@ -107,7 +111,7 @@ import { RealtimeDeviceData } from '@/types/shorepower';
 interface Props {
   modelValue: boolean
   berthingData?: any[]
-  shipId?: number
+  shipParam?: { type: number, ids: number[] | null, shipId: number | null }
   shorePowerConnectionData?: any[]
   realtimeDeviceData: RealtimeDeviceData[];
 }
@@ -133,13 +137,14 @@ const visible = computed({
   set: (val) => emit('update:modelValue', val)
 })
 
-const activeTab = ref('shipBerthing')
-
 // 船舶靠泊历史记录相关数据
 const berthingQueryParams = ref({
-  keyword: '',
+  // keyword: '',
   startTime: '',
   endTime: '',
+  ids: null as number[] | null,
+  shipId: null as number | null,
+  type: 1 as number | null,
   pageNo: 1,
   pageSize: 10
 })
@@ -225,41 +230,25 @@ const berthingColumns = ref([
 
 ])
 
-// 船舶连接岸电箱历史记录相关数据
-const shorePowerConnectionQueryParams = ref({
-  keyword: '',
-  startTime: '',
-  endTime: '',
-  pageNo: 1,
-  pageSize: 10
-})
-
-const shorePowerConnectionDateRange = ref<[string, string]>(['', ''])
-const shorePowerConnectionLoading = ref(false)
 const shorePowerConnectionTotal = ref(0)
 
-// 船舶连接岸电箱历史记录表格数据
-const shorePowerConnectionTableData = computed(() => {
-  // 在实际应用中，这里应该是从服务器获取的数据
-  // 当前为了演示，我们使用传入的模拟数据
-  return props.shorePowerConnectionData?.slice(
-    (shorePowerConnectionQueryParams.value.pageNo - 1) * shorePowerConnectionQueryParams.value.pageSize,
-    shorePowerConnectionQueryParams.value.pageNo * shorePowerConnectionQueryParams.value.pageSize
-  ) || []
-})
-
-// 船舶连接岸电箱历史记录表格列
-const shorePowerConnectionColumns = ref([
-  { prop: 'name', label: 'name', width: 80 },
-  /* { prop: 'shorePowerName', label: '岸电箱名称', width: 150 },
-  { prop: 'time', label: '连接时间', width: 180 },
-  { prop: 'duration', label: '连接时长(小时)', width: 120 },
-  { prop: 'powerConsumption', label: '用电量(kWh)', width: 120 },
-  { prop: 'status', label: '状态', width: 100 } */
-])
+// 处理日期变化
+const handleBerthingDateChange = (val: [string, string]) => {
+  if (val && val.length === 2) {
+    berthingQueryParams.value.startTime = val[0] + ' 00:00:00'
+    berthingQueryParams.value.endTime = val[1] + ' 23:59:59'
+  } else {
+    berthingQueryParams.value.startTime = ''
+    berthingQueryParams.value.endTime = ''
+  }
+  handleShorePowerConnectionSearch()
+}
 
 // 处理关闭
 const handleClose = () => {
+  berthingQueryParams.value.ids = null
+  berthingQueryParams.value.shipId = null
+  berthingQueryParams.value.type = 1
   visible.value = false
 }
 
@@ -270,69 +259,41 @@ const handleBerthingSearch = () => {
 }
 
 const resetBerthingQuery = () => {
-  berthingQueryParams.value.keyword = ''
+  // berthingQueryParams.value.keyword = ''
   berthingQueryParams.value.startTime = ''
   berthingQueryParams.value.endTime = ''
   berthingDateRange.value = ['', '']
   berthingQueryParams.value.pageNo = 1
-  handleBerthingSearch()
+  handleShorePowerConnectionSearch()
 }
 
-const handleBerthingDateChange = (val: [string, string] | null) => {
-  if (val && val[0] && val[1]) {
-    berthingQueryParams.value.startTime = val[0]
-    berthingQueryParams.value.endTime = val[1]
-  } else {
-    berthingQueryParams.value.startTime = ''
-    berthingQueryParams.value.endTime = ''
-  }
-}
 
 const handleBerthingSizeChange = (val: number) => {
   berthingQueryParams.value.pageSize = val
   berthingQueryParams.value.pageNo = 1
-  handleBerthingSearch()
+  handleShorePowerConnectionSearch()
 }
 
 const handleBerthingCurrentChange = (val: number) => {
   berthingQueryParams.value.pageNo = val
-  handleBerthingSearch()
+  handleShorePowerConnectionSearch()
 }
 
 // 船舶连接岸电箱历史记录相关方法
 const handleShorePowerConnectionSearch = () => {
-  // 发送搜索事件给父组件
-  emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
-}
-
-const resetShorePowerConnectionQuery = () => {
-  shorePowerConnectionQueryParams.value.keyword = ''
-  shorePowerConnectionQueryParams.value.startTime = ''
-  shorePowerConnectionQueryParams.value.endTime = ''
-  shorePowerConnectionDateRange.value = ['', '']
-  shorePowerConnectionQueryParams.value.pageNo = 1
-  handleShorePowerConnectionSearch()
-}
-
-const handleShorePowerConnectionDateChange = (val: [string, string] | null) => {
-  if (val && val[0] && val[1]) {
-    shorePowerConnectionQueryParams.value.startTime = val[0]
-    shorePowerConnectionQueryParams.value.endTime = val[1]
-  } else {
-    shorePowerConnectionQueryParams.value.startTime = ''
-    shorePowerConnectionQueryParams.value.endTime = ''
+  // const 
+  const params = {
+    // shipId: berthingQueryParams.value.shipId,
+    // ids: berthingQueryParams.value.ids,
+    ...(berthingQueryParams.value.ids ? { ids: berthingQueryParams.value.ids } : {}),
+    ...(berthingQueryParams.value.shipId ? { shipId: berthingQueryParams.value.shipId } : {}),
+    type: berthingQueryParams.value.type,
+    pageNo: 1,
+    pageSize: 9999 // 请求足够多的数据，以便在前端进行筛选和分页
   }
-}
-
-const handleShorePowerConnectionSizeChange = (val: number) => {
-  shorePowerConnectionQueryParams.value.pageSize = val
-  shorePowerConnectionQueryParams.value.pageNo = 1
-  handleShorePowerConnectionSearch()
-}
-
-const handleShorePowerConnectionCurrentChange = (val: number) => {
-  shorePowerConnectionQueryParams.value.pageNo = val
-  handleShorePowerConnectionSearch()
+  handleGetShipHistortyList(params)
+  // 发送搜索事件给父组件
+  // emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
 }
 
 // 监听数据变化并更新总数
@@ -353,36 +314,95 @@ watch(
 )
 
 watch(
-  () => props.shipId,
-  (newShipId) => {
-    if (newShipId) {
+  () => props.shipParam,
+  (newShipParam) => {
+    if (newShipParam) {
       // 当船舶ID变化时，触发搜索
       berthingTableData.value = []
-      handleGetShipHistortyList(newShipId)
+      if (newShipParam.shipId) {
+        berthingQueryParams.value.shipId = newShipParam.shipId
+      } else {
+        berthingQueryParams.value.shipId = null
+      }
+      if (newShipParam.ids && newShipParam.ids.length > 0) {
+        berthingQueryParams.value.ids = newShipParam.ids
+      } else {
+        berthingQueryParams.value.ids = null
+      }
+      berthingQueryParams.value.type = newShipParam.type
+      // handleGetShipHistortyList()
+      handleShorePowerConnectionSearch()
     }
   }
 )
-const handleGetShipHistortyList = async (id) => {
-  console.log('handleGetShipHistortyList', id)
-  if (!id) return;
+const handleGetShipHistortyList = async (param) => {
+  console.log('handleGetShipHistortyList', param)
+  if (!param) return;
   // try {
   const res = await MapApi.getShipHistoryPage({
-    shipId: parseInt(id, 10), // 将字符串转换为数字
+    /* shipId: param.id, // 将字符串转换为数字
     pageNo: 1,
     pageSize: 10,
-    type: 4,
+    type: param.type, */
     // ids: [parseInt(id, 10)]
+    ...param
   })
   console.log(res);
-  const buildData = await Promise.all(res.list.map(async item => ({
+
+  // 本地日期筛选逻辑
+  let filteredList = [...res.list];
+  if (berthingQueryParams.value.startTime || berthingQueryParams.value.endTime) {
+    filteredList = filteredList.filter(item => {
+      const berthTime = item.usageRecordInfo?.actualBerthTime;
+      if (!berthTime) return false;
+
+      const berthTimestamp = new Date(berthTime).getTime();
+      const startTime = berthingQueryParams.value.startTime ? new Date(berthingQueryParams.value.startTime).getTime() : 0;
+      const endTime = berthingQueryParams.value.endTime ? new Date(berthingQueryParams.value.endTime).getTime() : Infinity;
+
+      // 检查靠泊时间是否在筛选范围内
+      if (berthTimestamp >= startTime && berthTimestamp <= endTime) {
+        return true;
+      }
+
+      // 如果有离泊时间，也检查离泊时间是否在筛选范围内
+      if (item.usageRecordInfo?.actualDepartureTime) {
+        const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
+        if (departureTimestamp >= startTime && departureTimestamp <= endTime) {
+          return true;
+        }
+      }
+
+      // 检查筛选范围是否与靠泊-离泊时间段有重叠
+      if (item.usageRecordInfo?.actualDepartureTime) {
+        const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
+        if (berthTimestamp <= endTime && departureTimestamp >= startTime) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }
+
+  // 前端分页逻辑
+  const totalFiltered = filteredList.length;
+  const pageNo = berthingQueryParams.value.pageNo;
+  const pageSize = berthingQueryParams.value.pageSize;
+  const startIndex = (pageNo - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedList = filteredList.slice(startIndex, endIndex);
+
+  const buildData = await Promise.all(paginatedList.map(async item => ({
     ...item,
   })))
   berthingTableData.value = buildData
+  berthingTotal.value = totalFiltered
 }
 
 onMounted(() => {
   console.log('页面加载了！')
-  console.log('props.shipId', props.shipId)
+  // console.log('props.shipId', props.shipId)
 })
 </script>
 
diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue
index 2e2849f..6acf71a 100644
--- a/public/map/components/ShipShorePower.vue
+++ b/public/map/components/ShipShorePower.vue
@@ -713,7 +713,7 @@ interface ShipDataItem {
 }
 
 interface Props {
-  shipData: ShipDataItem[];
+  shipData: ShipRespVo[];
 }
 
 const props = defineProps<Props>()
@@ -864,7 +864,7 @@ const formatDateTime = (timestamp: string | number | Date | undefined) => {
 
 const showStatus = async (ship: ShipDataItem) => {
   const { usageRecordInfo, applyInfo } = ship;
-  if (applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) {
+  if (applyInfo && applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) {
 
     const start = new Date(usageRecordInfo.beginTime);
     const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date();
@@ -931,7 +931,7 @@ const showStatus = async (ship: ShipDataItem) => {
       statusClass: 'status-using',
       status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`
     }
-  } else if (applyInfo.reason != 0) {
+  } else if (applyInfo && applyInfo.reason != 0) {
     // 状态码映射表 - 包含状态文本和颜色类型
     const statusMap: Record<string, { text: string; colorType: string }> = {
       '1': { text: '岸电用电接口不匹配', colorType: 'default' },
@@ -984,7 +984,7 @@ const buildData = async (ship: ShipDataItem) => {
     applyInfo: ship.applyInfo,
     usageRecordInfo: ship.usageRecordInfo,
     shipBasicInfo: ship.shipBasicInfo,
-    name: ship.shipBasicInfo.name,
+    name: ship?.shipBasicInfo?.name,
     wharf: findNameById(ship.applyInfo?.arrivalDock.toString(), dockIdAndNameList.value),
     berth: findNameById(ship.applyInfo?.arrivalBerth.toString(), berthIdAndNameList.value),
     beginTime: ship.usageRecordInfo?.beginTime,
@@ -1007,7 +1007,7 @@ onMounted(async () => {
   berthIdAndNameList.value = await MapApi.getBerthIdAndNameList()
   dockIdAndNameList.value = await MapApi.getDockIdAndNameList()
   harborDistrictIdAndNameList.value = await MapApi.getHarborDistrictIdAndNameList()
-
+  console.log('props.shipData', props.shipData)
   // 构建本地数据，使用Promise.all等待所有异步操作完成
   localShipData.value = await Promise.all(props.shipData.map(ship => buildData(ship)));
 })
diff --git a/public/map/components/ShorePowerHistoryDialog.vue b/public/map/components/ShorePowerHistoryDialog.vue
index 87f8d6d..edcdbdc 100644
--- a/public/map/components/ShorePowerHistoryDialog.vue
+++ b/public/map/components/ShorePowerHistoryDialog.vue
@@ -305,11 +305,11 @@ const handleGetShorePowerHistoryList = async (id) => {
   if (!id) return;
   // try {
   const res = await MapApi.getShipHistoryPage({
-    shipId: parseInt(id, 10), // 将字符串转换为数字
+    // shipId: parseInt(id, 10), // 将字符串转换为数字
     pageNo: 1,
     pageSize: 10,
     type: 5,
-    // ids: [parseInt(id, 10)]
+    ids: [parseInt(id, 10)]
   })
   console.log(res);
   const buildData = await Promise.all(res.list.map(async item => ({
diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue
index 60b90f5..2f5e209 100644
--- a/public/map/components/ShorePowerUsage.vue
+++ b/public/map/components/ShorePowerUsage.vue
@@ -1,231 +1,497 @@
 <template>
   <div class="shore-power-usage">
-    <!-- Average Mode -->
-    <template v-if="displayMode === 'average'">
-      <div class="left average" style="width: 40%;">
-        <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
-          @click="handleSelectCard(card.id)">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div class="card-title">
-              <div class="vertical-line"></div>
-              <img src="@/assets/svgs/data.svg" class="title-icon" />
-              <span class="title-text">{{ card.title }}</span>
-            </div>
-            <div v-if="card.type === 'overview'" class="time-range-selector">
-              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
-              <button v-for="option in timeRangeOptions" :key="option.value"
-                :class="['time-range-btn', { active: timeRange === option.value }]"
-                @click.stop="handleTimeRangeChange(option.value)">
-                {{ option.label }}
-              </button>
+    <template v-if="pageType === 'realtime'">
+      <!-- Average Mode -->
+      <template v-if="displayMode === 'average'">
+        <div class="left average" style="width: 40%;">
+          <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @click.stop />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
+                  start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM" value-format="YYYY-MM"
+                  class="date-range-picker" @click.stop />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" type="weekrange" range-separator="至"
+                  start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                  class="date-range-picker" @click.stop /> -->
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
             </div>
-            <div 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 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 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="right average" style="width: 40%;">
+          <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
               </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
-                <div class="overview-label">减少PM2.5排放（千克）</div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @click.stop />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
+                  start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM" value-format="YYYY-MM"
+                  class="date-range-picker" @click.stop />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" type="weekrange" range-separator="至"
+                  start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                  class="date-range-picker" @click.stop /> -->
+                <el-date-picker v-else type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @click.stop />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-button>
               </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
-                <div class="overview-label">减少氮氧化物（千克）</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 class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
-                <div class="overview-label">减少二氧化硫（千克）</div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ fuelReduction }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ co2Reduction }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ pm25Reduction }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ noxReduction }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ so2Reduction }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
               </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
             </div>
-            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
-      </div>
-      <div class="right average" style="width: 40%;">
-        <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
-          @click="handleSelectCard(card.id)">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div class="card-title">
-              <div class="vertical-line"></div>
-              <img src="@/assets/svgs/data.svg" class="title-icon" />
-              <span class="title-text">{{ card.title }}</span>
-            </div>
-            <div v-if="card.type === 'overview'" class="time-range-selector">
-              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
-              <button v-for="option in timeRangeOptions" :key="option.value"
-                :class="['time-range-btn', { active: timeRange === option.value }]"
-                @click.stop="handleTimeRangeChange(option.value)">
-                {{ option.label }}
-              </button>
+      </template>
+
+      <!-- Magnify Mode -->
+      <div v-if="displayMode === 'magnify'" class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-button type="primary" @click.stop="pageType = 'history'">历史查询</el-button>
+                <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
             </div>
-            <div 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 class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color"
+                :magnify-mode="true" />
             </div>
           </div>
-          <div 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="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 class="overview-item">
-                <div class="overview-value">{{ pm25Reduction }}</div>
-                <div class="overview-label">减少PM2.5排放（千克）</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 class="overview-item">
-                <div class="overview-value">{{ noxReduction }}</div>
-                <div class="overview-label">减少氮氧化物（千克）</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 class="overview-item">
-                <div class="overview-value">{{ so2Reduction }}</div>
-                <div class="overview-label">减少二氧化硫（千克）</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>
-            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
       </div>
     </template>
-
-    <!-- Magnify Mode -->
-    <div v-if="displayMode === 'magnify'" class="magnify">
-      <div class="big">
-        <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
-          class="card digital-twin-card--deep-blue">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div class="card-title">
-              <div class="vertical-line"></div>
-              <img src="@/assets/svgs/data.svg" class="title-icon" />
-              <span class="title-text">{{ card.title }}</span>
-            </div>
-            <div v-if="card.type === 'overview'" class="time-range-selector">
-              <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
-              <button v-for="option in timeRangeOptions" :key="option.value"
-                :class="['time-range-btn', { active: timeRange === option.value }]"
-                @click.stop="handleTimeRangeChange(option.value)">
-                {{ option.label }}
-              </button>
+    <template v-if="pageType === 'history'">
+      <!-- Average Mode -->
+      <template v-if="displayMode === 'average'">
+        <div class="left average" style="width: 40%;">
+          <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
             </div>
-            <div 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 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 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="right average" style="width: 40%;">
+          <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
               </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
-                <div class="overview-label">减少PM2.5排放(千克)</div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                  format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
+                <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button>
               </div>
-              <div class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
-                <div class="overview-label">减少氮氧化物(千克)</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 class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
-                <div class="overview-label">减少二氧化硫(千克)</div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ fuelReduction }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ co2Reduction }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ pm25Reduction }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ noxReduction }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ so2Reduction }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
               </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
             </div>
-            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color"
-              :magnify-mode="true" />
           </div>
         </div>
-      </div>
-      <div class="one-row">
-        <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
-          class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
-          <div style="display: flex; align-items: center; justify-content: space-between;">
-            <div class="card-title">
-              <div class="vertical-line"></div>
-              <img src="@/assets/svgs/data.svg" class="title-icon" />
-              <span class="title-text">{{ card.title }}</span>
-            </div>
-            <div v-if="card.type === 'overview'" class="time-range-selector">
-              <button v-for="option in timeRangeOptions" :key="option.value"
-                :class="['time-range-btn', { active: timeRange === option.value }]"
-                @click.stop="handleTimeRangeChange(option.value)">
-                {{ option.label }}
-              </button>
+      </template>
+
+      <!-- Magnify Mode -->
+      <div v-if="displayMode === 'magnify'" class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" v-model="dateRange" type="yearrange"
+                  range-separator="至" start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @change="handleSelectDate" />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" v-model="dateRange" type="monthrange"
+                  range-separator="至" start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM"
+                  value-format="YYYY-MM" class="date-range-picker" @change="handleSelectDate" />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" v-model="dateRange" type="week"
+                  range-separator="至" start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" class="date-range-picker" @change="handleSelectDate" /> -->
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @change="handleSelectDate" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="pageType = 'realtime'">实时显示</el-button>
+                <!-- <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button> -->
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
             </div>
-            <div 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 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 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="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 class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
-                <div class="overview-label">减少PM2.5排放(千克)</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 class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].nox }}</div>
-                <div class="overview-label">减少氮氧化物(千克)</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 class="overview-item">
-                <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
-                <div class="overview-label">减少二氧化硫(千克)</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>
-            <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
           </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 
@@ -235,6 +501,7 @@ 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 {
@@ -316,6 +583,8 @@ export interface deviceData {
 
 // 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')
@@ -336,6 +605,20 @@ 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,
@@ -388,6 +671,144 @@ const chartData = ref({
 
 })
 
+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) {
@@ -407,18 +828,37 @@ const getChartData = (cardId: string): ChartDataItem[] => {
       return commonChartData.value
   }
 }
+// 获取对应卡片的图表数据
+const getHistoryChartData = (cardId: string): ChartDataItem[] => {
+  switch (cardId) {
+    case 'overview':
+      return totalPowerChartData.value
+    case 'fuel':
+      return h_fuelReductionChartData.value
+    case 'co2':
+      return h_co2ReductionChartData.value
+    case 'pm25':
+      return h_pm25ReductionChartData.value
+    case 'nox':
+      return h_noxReductionChartData.value
+    case 'so2':
+      return h_so2ReductionChartData.value
+    default:
+      return commonChartData.value
+  }
+}
 
 // 时间范围选项
 const timeRange = ref<'realtime' | 'day' | 'week' | 'month' | 'quarter' | 'year'>('realtime')
 
 // 时间范围选项定义
 const timeRangeOptions = [
-  { value: 'realtime', label: '实时' },
-  { value: 'day', label: '日' },
-  { value: 'week', label: '周' },
-  { value: 'month', label: '月' },
+  { value: 'realtime', label: '总' },
+  { value: 'day', label: '本日' },
+  { value: 'week', label: '本周' },
+  { value: 'month', label: '本月' },
   // { value: 'quarter', label: '季' },
-  { value: 'year', label: '年' }
+  { value: 'year', label: '本年' }
 ]
 
 // 处理时间范围选择
@@ -427,6 +867,30 @@ const handleTimeRangeChange = (range: 'realtime' | 'day' | 'week' | 'month' | 'q
   // 这里可以添加根据时间范围切换数据源的逻辑
 }
 
+// 历史模式时间颗粒度选项
+const historyTimeGranularity = ref<'year' | 'month' | 'week' | 'day'>('day')
+
+// 历史模式时间颗粒度选项定义
+const historyTimeGranularityOptions = [
+  { value: 'year', label: '年' },
+  { value: 'month', label: '月' },
+  // { value: 'week', label: '周' },
+  { value: 'day', label: '日' }
+]
+
+// 处理历史模式时间颗粒度选择
+const handleHistoryTimeGranularityChange = (granularity: 'year' | 'month' | 'week' | 'day') => {
+  historyTimeGranularity.value = granularity
+  // 这里可以添加根据时间颗粒度切换数据源的逻辑
+}
+
+// 处理日期范围确认
+const handleDateRangeConfirm = () => {
+  // 这里可以添加处理日期范围确认的逻辑
+  console.log('日期范围已确认，当前颗粒度：', historyTimeGranularity.value)
+  // 可以调用API获取选中日期范围内的数据
+}
+
 // 定义卡片信息
 const cards = ref<CardInfo[]>([
   {
@@ -524,10 +988,20 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
       ids: ids.join(','),
       // year: new Date().getFullYear()
     }
-    const yearDataRes: RealtimeDeviceData[] = await MapApi.getYearDataByIdList(params);
-    const weekDataRes: RealtimeDeviceData[] = await MapApi.getWeekDataByIdList(params);
-    const monthDataRes: RealtimeDeviceData[] = await MapApi.getMonthDataByIdList(params);
-    const dayDataRes: RealtimeDeviceData[] = await MapApi.getDayDataByIdList(params);
+    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);
@@ -544,7 +1018,7 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
     // pm25Reduction.value = (realTimeSum * 1.46 / 1000000).toFixed(2) // 克转化为吨
     // fuelReduction.value = (realTimeSum * 0.22 / 1000).toFixed(2) // 转化为吨
 
-    const incrementRealTimeSum = Object.values(res).reduce((acc, item) => acc + item.incrementValue, 0);
+    const incrementRealTimeSum = Object.values(res).reduce((acc, item) => acc + item.measureValue, 0);
 
 
     chartData.value.realtime = {
@@ -629,26 +1103,20 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[]
   }
 }
 
-const handleGetAllDeviceDataByTimeRange = async () => {
+/* const handleGetAllDeviceDataByTimeRange = async () => {
   try {
     // 当前时间的时间戳（毫秒）
     const nowTimestamp = dayjs().valueOf().toString();
 
     // 两天前的时间戳（毫秒）
     const twoDaysAgoTimestamp = dayjs().subtract(2, 'day').valueOf().toString();
-    const params = {
-      start: twoDaysAgoTimestamp,
-      end: nowTimestamp,
-      timeType: '3'
-    }
-    const res = await MapApi.getByStartAndEndTimeAndTimeType(params)
-    console.log(res)
+
 
 
   } catch (error) {
     console.error(error)
   }
-}
+} */
 
 watch(() => props.realtimeDeviceData, (newValue) => {
   handleGetRealTimeAllData(newValue)
@@ -656,7 +1124,7 @@ watch(() => props.realtimeDeviceData, (newValue) => {
 
 // 组件挂载时初始化数据和定时器
 onMounted(() => {
-  handleGetAllDeviceDataByTimeRange()
+  // handleGetAllDeviceDataByTimeRange()
   handleGetRealTimeAllData(props.realtimeDeviceData)
 })
 
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
index 250d8e4..d13b9ce 100644
--- a/public/map/components/cesiumMap.vue
+++ b/public/map/components/cesiumMap.vue
@@ -16,13 +16,46 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeUnmount, ref } from 'vue';
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue';
 import coordtransform from 'coordtransform';
 import { MapApi } from "@/api/shorepower/map";
 import { toRaw } from 'vue'
 // ⚠️ 注意：通过 window 访问全局 Cesium 对象
 const Cesium = window.Cesium;
 
+const props = defineProps({
+  shorePowerList: {
+    type: Array,
+    required: true,
+    // 可选：添加自定义 validator（更严格）
+    validator(value) {
+      return Array.isArray(value) && value.every(item =>
+        typeof item === 'object' &&
+        item !== null &&
+        typeof item.position === 'string'
+        // 注意：无法验证是否符合 ShorePowerBerth 结构（因为 JS 没有接口）
+      );
+    }
+  },
+  shipDataList: {
+    type: Array,
+    required: true,
+    // 可选：添加自定义 validator（更严格）
+    validator(value) {
+      return Array.isArray(value) && value.every(item =>
+        typeof item === 'object' &&
+        item !== null &&
+        typeof item.shipName === 'string'
+        // 注意：无法验证是否符合 ShipRespVo 结构（因为 JS 没有接口）
+      );
+    }
+  },
+  onInstanceClick: {
+    type: Function,
+    default: (data) => { }
+  }
+})
+
 // 自定义流动线材质类
 class PolylineFlowMaterialProperty {
   constructor(options) {
@@ -146,7 +179,7 @@ const presetViews = {
 
 // 岸电箱点击回调函数
 let onElectricalBoxClick = null;
-
+let globalModelInstance = null
 // 设置岸电箱点击回调函数的方法
 const setElectricalBoxClickCallback = (callback) => {
   onElectricalBoxClick = callback;
@@ -261,431 +294,768 @@ onMounted(async () => {
       maximumLevel: 16
     });
     const dataInfo = history.value ? history.value : await MapApi.getAllData()
-    const shipData = await MapApi.getShipInfo({
-      harborDistrictId: 1
-    })
+    const shipData = props.shipDataList
     console.log('shipData', shipData)
+    const shorePowerList = props.shorePowerList
 
     // const unitedData = 
 
     // 通用添加函数，遍历dataInfo并创建标记
-    let arr = []
-    const addMarkersFromDataInfo = (dataInfo) => {
-      // 更严格的数组检查
-      if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) {
-        console.log('No valid dataInfo array provided');
-        return [];
-      }
+    let arr = {
+      arr1: [],
+      arr2: [],
+      arr3: [],
+      arr4: [],
+      arr5: []
+    }
+    // const addMarkersFromDataInfo = (dataInfo) => {
+    //   // 更严格的数组检查
+    //   if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) {
+    //     console.log('No valid dataInfo array provided');
+    //     return [];
+    //   }
+
+    //   // 创建新数组存储带有模型实例的数据
+    //   const dataWithModelsArray = [];
+
+    //   console.log(`Processing ${dataInfo.length} items`);
+
+    //   dataInfo.forEach((item, index) => {
+    //     // 检查基本数据结构
+    //     if (!item) {
+    //       console.warn(`Item at index ${index} is null or undefined`);
+    //       return;
+    //     }
+
+    //     try {
+    //       // 创建包含模型实例的数据项副本
+    //       let itemWithModel = { ...item };
+
+    //       // 解析data字段为JSON对象
+    //       let dataObj;
+    //       if (typeof item.data === 'string') {
+    //         try {
+    //           dataObj = JSON.parse(item.data);
+    //         } catch (parseError) {
+    //           console.warn(`Failed to parse data for item ${item.id || index}:`, parseError);
+    //           dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项
+    //           return;
+    //         }
+    //       } else {
+    //         dataObj = item.data;
+    //       }
+
+    //       // 检查dataObj是否有效
+    //       if (!dataObj) {
+    //         console.warn(`No data object found for item ${item.id || index}`);
+    //         dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项
+    //         return;
+    //       }
+
+    //       // 获取坐标信息 - 更严格的验证
+    //       let longitude, latitude;
+    //       let wgsLon, wgsLat;
+    //       if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) {
+    //         const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+    //         wgsLon = wgsCoords[0];
+    //         wgsLat = wgsCoords[1];
+    //         // 确保坐标是有效数字
+    //         latitude = wgsLat;
+    //         longitude = wgsLon;
+    //         // 检查坐标是否为有效数字
+    //         if (isNaN(latitude) || isNaN(longitude)) {
+    //           console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy);
+    //           dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项
+    //           return;
+    //         }
+
+    //         // 检查坐标范围（简单验证）
+    //         if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) {
+    //           console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]);
+    //           dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项
+    //           return;
+    //         }
+    //       } else {
+    //         console.warn('无效的坐标信息:', item);
+    //         dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
+    //         return;
+    //       }
+    //       console.log('dataObj.icon', dataObj.icon)
+    //       if (dataObj.icon === 'ship_green' || dataObj.icon === 'ship_red') {
+    //         const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
+    //         if (!itemShipInfo) {
+    //           return;
+    //         }
+    //         const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
+    //         const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
+    //         const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
+    //         // 投放船模型
+    //         const shipModel = viewer.entities.add({
+    //           name: 'Cargo Ship Model',
+    //           position: position,
+    //           orientation: Cesium.Transforms.headingPitchRollQuaternion(
+    //             position,
+    //             new Cesium.HeadingPitchRoll(
+    //               Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+    //               Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+    //               Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+    //             )
+    //           ),
+    //           model: {
+    //             uri: '/model/cargo_ship_07.glb',
+    //             scale: 1.5, // 调整模型大小
+    //             // minimumPixelSize: 100, // 确保模型至少显示为50像素大小
+    //             // 启用深度测试，使模型能够被地形遮挡
+    //             enableDepthTest: true,
+    //             // 启用背光剔除，提高渲染性能
+    //             backFaceCulling: true
+    //           }
+    //         });
+
+    //         // 保存模型实例到数据项
+    //         itemWithModel.modelInstance = shipModel;
+    //         itemWithModel.modelType = 'ship';
+    //         itemWithModel = { ...itemWithModel, ...itemShipInfo };
+
+    //         viewer.entities.add({
+    //           position: labelPosition, // 船上方约10米
+    //           label: {
+    //             text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
+    //             font: '20px sans-serif',
+    //             fillColor: Cesium.Color.LIME,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+    //         // 根据概率分布决定是否显示状态图标
+    //         // 50%概率不显示，25%显示故障，25%显示离线
+    //         const rand = Math.random();
+    //         let statusImage = null;
+    //         if (rand < 1) {
+    //           // 50%概率：不显示状态图标
+    //           statusImage = null;
+    //         } else if (rand < 0.9) {
+    //           // 25%概率：显示故障图标
+    //           statusImage = '/img/故障.png';
+    //         } else {
+    //           // 25%概率：显示离线图标
+    //           statusImage = '/img/离线.png';
+    //         }
+
+    //         // 只有当需要显示状态图标时才添加实体
+    //         if (statusImage) {
+    //           const overlayBillboard = viewer.entities.add({
+    //             position: statusPosition,
+    //             billboard: {
+    //               image: statusImage,
+    //               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+    //               verticalOrigin: Cesium.VerticalOrigin.CENTER,
+    //               disableDepthTestDistance: Number.POSITIVE_INFINITY,
+    //               scale: new Cesium.CallbackProperty(function (time, result) {
+    //                 // t 会随着时间不断变化
+    //                 const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+    //                 const pulse = 0.4 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+    //                 return pulse;
+    //               }, false)
+    //             }
+    //           });
+    //         }
+
+    //       }
+    //       if (dataObj.type === 'text') {
+    //         const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
+    //         viewer.entities.add({
+    //           position: labelPosition, // 船上方约10米
+    //           label: {
+    //             text: dataObj.name || `Marker-${item.id || index}`,
+    //             font: '20px sans-serif',
+    //             fillColor: Cesium.Color.WHITE,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+    //       }
+    //       if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) {
+    //         const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
+    //         const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
+    //         const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
+    //         // 投放岸电箱模型
+    //         const electricalBoxModel = viewer.entities.add({
+    //           name: '岸电箱',
+    //           position: position,
+    //           // 添加唯一标识用于识别点击事件
+    //           properties: {
+    //             modelType: 'electrical_box',
+    //             data: itemWithModel
+    //           },
+    //           orientation: Cesium.Transforms.headingPitchRollQuaternion(
+    //             position,
+    //             new Cesium.HeadingPitchRoll(
+    //               Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+    //               Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+    //               Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+    //             )
+    //           ),
+    //           model: {
+    //             uri: '/model/electrical_box.glb',
+    //             scale: 1.5, // 调整模型大小
+    //             // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
+    //             // 启用深度测试，使模型能够被地形遮挡
+    //             enableDepthTest: true,
+    //             // 启用背光剔除，提高渲染性能
+    //             backFaceCulling: true
+    //           },
+    //         });
+    //         console.log(item)
+    //         if (item.name.includes('国投-206泊位-插座箱') || item.name.includes('国投-207泊位-插座箱')) {
+    //           arr.push(electricalBoxModel)
+    //         }
+
+    //         // 保存模型实例到数据项
+    //         itemWithModel.modelInstance = electricalBoxModel;
+    //         itemWithModel.modelType = 'electrical_box';
+    //         itemWithModel = { ...itemWithModel, ...itemShipInfo };
+
+    //         viewer.entities.add({
+    //           // pickable: false,
+    //           position: labelPosition, // 船上方约10米
+    //           properties: {
+    //             modelType: 'electrical_box',
+    //             data: itemWithModel
+    //           },
+    //           label: {
+    //             text: '岸电箱' || `Marker-${item.id || index}`,
+    //             font: '16px sans-serif',
+    //             fillColor: Cesium.Color.WHITE,
+    //             outlineColor: Cesium.Color.BLACK,
+    //             outlineWidth: 2,
+    //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //             pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+    //             disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+    //           }
+    //         });
+
+    //         // 根据概率分布决定是否显示状态图标
+    //         // 50%概率不显示，25%显示故障，25%显示离线
+    //         console.log(shorePowerList, itemShipInfo)
+    //         const x = itemShipInfo.shorePower.id;
+    //         const itemObj = shorePowerList.find(obj => obj.id === x);
+    //         const rand = Math.random();
+    //         let statusImage = null;
+    //         if ([3, 4, 6].includes(itemObj.status)) {
+    //           // 50%概率：不显示状态图标
+    //           statusImage = null;
+    //         } else if ([1, 2, 8].includes(itemObj.status)) {
+    //           // 25%概率：显示故障图标
+    //           statusImage = '/img/故障.png';
+    //         } else {
+    //           // 25%概率：显示离线图标
+    //           statusImage = '/img/离线.png';
+    //         }
+    //         // 只有当需要显示状态图标时才添加实体
+    //         if (statusImage) {
+    //           const overlayBillboard = viewer.entities.add({
+    //             position: position,
+    //             // pickable: false,
+    //             properties: {
+    //               modelType: 'electrical_box',
+    //               data: itemWithModel
+    //             },
+    //             billboard: {
+    //               image: statusImage,
+    //               horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+    //               verticalOrigin: Cesium.VerticalOrigin.CENTER,
+    //               disableDepthTestDistance: Number.POSITIVE_INFINITY,
+    //               scale: new Cesium.CallbackProperty(function (time, result) {
+    //                 // t 会随着时间不断变化
+    //                 const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+    //                 const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+    //                 return pulse;
+    //               }, false)
+    //             }
+    //           });
+    //         }
+    //       }
+
+    //       // 创建红点标记
+    //       /* const entity = viewer.entities.add({
+    //         name: item.name || `Marker-${item.id || index}`,
+    //         position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1),
+    //         point: {
+    //           pixelSize: 10,
+    //           color: Cesium.Color.RED,
+    //           outlineColor: Cesium.Color.WHITE,
+    //           outlineWidth: 2
+    //         },
+    //         // 可以添加标签显示名称
+    //         label: {
+    //           text: item.name || `Marker-${item.id || index}`,
+    //           font: '14px sans-serif',
+    //           fillColor: Cesium.Color.WHITE,
+    //           outlineColor: Cesium.Color.BLACK,
+    //           outlineWidth: 2,
+    //           style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+    //           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+    //           pixelOffset: new Cesium.Cartesian2(0, -15)
+    //         }
+    //       }); 
+    //       // 保存点标记实例到数据项
+    //       itemWithModel.modelInstance = entity;
+    //       itemWithModel.modelType = 'point';
+    //       */
+
+    //       // 将处理后的数据项添加到新数组
+    //       dataWithModelsArray.push(itemWithModel);
+    //     } catch (error) {
+    //       console.error('Error processing item:', item, error);
+    //       // 创建一个基本的数据项副本并添加到数组
+    //       dataWithModelsArray.push({ ...item });
+    //     }
+    //   });
+
+
+    //   return dataWithModelsArray;
+    // };
 
-      // 创建新数组存储带有模型实例的数据
-      const dataWithModelsArray = [];
 
-      console.log(`Processing ${dataInfo.length} items`);
 
-      dataInfo.forEach((item, index) => {
-        // 检查基本数据结构
-        if (!item) {
-          console.warn(`Item at index ${index} is null or undefined`);
-          return;
-        }
+    // 步骤 3: 将图层添加到 Viewer 中
+    viewer.imageryLayers.addImageryProvider(gaodeImage);
+
+    // const addStoreP
 
-        try {
-          // 创建包含模型实例的数据项副本
-          let itemWithModel = { ...item };
 
-          // 解析data字段为JSON对象
-          let dataObj;
-          if (typeof item.data === 'string') {
+    // 调用通用函数创建标记并获取带有模型实例的数据
+    // dataWithModels.value = addMarkersFromDataInfo(dataInfo);
+    const createMarker = () => {
+      const modelInstance = []
+      const labelInstance = []
+      const oneTitleInstance = []
+      const twoTitleInstance = []
+      shorePowerList.forEach((item) => {
+        const itemShipInfo = dataInfo.filter(mapitem => (item.id === mapitem.parentId) && mapitem.type === 5)
+        const result = itemShipInfo
+          .filter(item => {
             try {
-              dataObj = JSON.parse(item.data);
-            } catch (parseError) {
-              console.warn(`Failed to parse data for item ${item.id || index}:`, parseError);
-              dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项
-              return;
+              const data = JSON.parse(item.data);
+              return data.type === 'icon' && data.icon.includes('interface');
+            } catch (e) {
+              return false; // 忽略无法解析的 data
             }
-          } else {
-            dataObj = item.data;
-          }
+          })
+          .map(item => JSON.parse(item.data));
+        if (!result || result.length === 0) return
+        const dataObj = result[0]
+        let longitude, latitude;
+        let wgsLon, wgsLat;
+        const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+        wgsLon = wgsCoords[0];
+        wgsLat = wgsCoords[1];
+        latitude = wgsLat;
+        longitude = wgsLon;
+        const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1);
+        const xelectricalBoxModel = viewer.entities.add({
+          name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'shorepower_box',
+            data: item
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/electrical_box.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        console.log(item.name)
+        if (['国投-206泊位-高压', '国投-207泊位-高压', '国投-208泊位-高压'].includes(item.name)) {
+          arr.arr1.push(xelectricalBoxModel)
+        }
+        if (['国投-209泊位-高压', '国投-210泊位-高压'].includes(item.name)) {
+          arr.arr2.push(xelectricalBoxModel)
+        }
+        if (['国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) {
+          arr.arr3.push(xelectricalBoxModel)
+        }
+        if (['华电-806泊位-高压', '华电-807泊位-高压'].includes(item.name)) {
+          arr.arr4.push(xelectricalBoxModel)
+        }
+        if (['华电-808泊位-高压', '华电-809泊位-高压', '华电-810泊位-高压'].includes(item.name)) {
+          arr.arr5.push(xelectricalBoxModel)
+        }
 
-          // 检查dataObj是否有效
-          if (!dataObj) {
-            console.warn(`No data object found for item ${item.id || index}`);
-            dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项
-            return;
-          }
 
-          // 获取坐标信息 - 更严格的验证
-          let longitude, latitude;
-          let wgsLon, wgsLat;
-          if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) {
-            const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
-            wgsLon = wgsCoords[0];
-            wgsLat = wgsCoords[1];
-            // 确保坐标是有效数字
-            latitude = wgsLat;
-            longitude = wgsLon;
-            // 检查坐标是否为有效数字
-            if (isNaN(latitude) || isNaN(longitude)) {
-              console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy);
-              dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项
-              return;
-            }
 
-            // 检查坐标范围（简单验证）
-            if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) {
-              console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]);
-              dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项
-              return;
-            }
-          } else {
-            console.warn('无效的坐标信息:', item);
-            dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项
-            return;
-          }
-          console.log('dataObj.icon', dataObj.icon)
-          if (dataObj.icon === 'ship_green' || dataObj.icon === 'ship_red') {
-            const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
-            if (!itemShipInfo) {
-              return;
-            }
-            const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15);
-            const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
-            // 投放船模型
-            const shipModel = viewer.entities.add({
-              name: 'Cargo Ship Model',
-              position: position,
-              orientation: Cesium.Transforms.headingPitchRollQuaternion(
-                position,
-                new Cesium.HeadingPitchRoll(
-                  Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
-                  Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
-                  Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
-                )
-              ),
-              model: {
-                uri: '/model/cargo_ship_07.glb',
-                scale: 1.5, // 调整模型大小
-                // minimumPixelSize: 100, // 确保模型至少显示为50像素大小
-                // 启用深度测试，使模型能够被地形遮挡
-                enableDepthTest: true,
-                // 启用背光剔除，提高渲染性能
-                backFaceCulling: true
-              }
-            });
 
-            // 保存模型实例到数据项
-            itemWithModel.modelInstance = shipModel;
-            itemWithModel.modelType = 'ship';
-            itemWithModel = { ...itemWithModel, ...itemShipInfo };
-
-            viewer.entities.add({
-              position: labelPosition, // 船上方约10米
-              label: {
-                text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`,
-                font: '20px sans-serif',
-                fillColor: Cesium.Color.LIME,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
-            // 根据概率分布决定是否显示状态图标
-            // 50%概率不显示，25%显示故障，25%显示离线
-            const rand = Math.random();
-            let statusImage = null;
-            if (rand < 0.8) {
-              // 50%概率：不显示状态图标
-              statusImage = null;
-            } else if (rand < 0.9) {
-              // 25%概率：显示故障图标
-              statusImage = '/img/故障.png';
-            } else {
-              // 25%概率：显示离线图标
-              statusImage = '/img/离线.png';
-            }
-
-            // 只有当需要显示状态图标时才添加实体
-            if (statusImage) {
-              const overlayBillboard = viewer.entities.add({
-                position: statusPosition,
-                billboard: {
-                  image: statusImage,
-                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                  verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
-                  scale: new Cesium.CallbackProperty(function (time, result) {
-                    // t 会随着时间不断变化
-                    const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
-                    const pulse = 0.4 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
-                    return pulse;
-                  }, false)
-                }
-              });
-            }
-
-          }
-          if (dataObj.type === 'text') {
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35);
-            viewer.entities.add({
-              position: labelPosition, // 船上方约10米
-              label: {
-                text: dataObj.name || `Marker-${item.id || index}`,
-                font: '20px sans-serif',
-                fillColor: Cesium.Color.WHITE,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
+        modelInstance.push({
+          model: xelectricalBoxModel,
+          type: 'shorepower_box',
+          data: item
+        })
+
+        const MODEL_HEIGHT_METERS = 80;
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+        const xelectricalBoxLabel = viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          name: '岸电箱 Label',
+          label: {
+            text: '岸电箱',
+            font: '24px sans-serif',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            disableDepthTest: true,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
           }
-          if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) {
-            const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
-            const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1);
-            const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5);
-            // 投放岸电箱模型
-            const electricalBoxModel = viewer.entities.add({
-              name: '岸电箱',
-              position: position,
-              // 添加唯一标识用于识别点击事件
-              properties: {
-                modelType: 'electrical_box',
-                data: itemWithModel
-              },
-              orientation: Cesium.Transforms.headingPitchRollQuaternion(
-                position,
-                new Cesium.HeadingPitchRoll(
-                  Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
-                  Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
-                  Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
-                )
-              ),
-              model: {
-                uri: '/model/electrical_box.glb',
-                scale: 1.5, // 调整模型大小
-                // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
-                // 启用深度测试，使模型能够被地形遮挡
-                enableDepthTest: true,
-                // 启用背光剔除，提高渲染性能
-                backFaceCulling: true
-              },
-            });
-            console.log(item)
-            if (item.name.includes('国投-206泊位-插座箱') || item.name.includes('国投-207泊位-插座箱')) {
-              arr.push(electricalBoxModel)
-            }
-
-            // 保存模型实例到数据项
-            itemWithModel.modelInstance = electricalBoxModel;
-            itemWithModel.modelType = 'electrical_box';
-            itemWithModel = { ...itemWithModel, ...itemShipInfo };
-
-            viewer.entities.add({
-              // pickable: false,
-              position: labelPosition, // 船上方约10米
-              properties: {
-                modelType: 'electrical_box',
-                data: itemWithModel
-              },
-              label: {
-                text: '岸电箱' || `Marker-${item.id || index}`,
-                font: '16px sans-serif',
-                fillColor: Cesium.Color.WHITE,
-                outlineColor: Cesium.Color.BLACK,
-                outlineWidth: 2,
-                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-                disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
-              }
-            });
-
-            // 根据概率分布决定是否显示状态图标
-            // 50%概率不显示，25%显示故障，25%显示离线
-            const rand = Math.random();
-            let statusImage = null;
-            if (rand < 0.5) {
-              // 50%概率：不显示状态图标
-              statusImage = null;
-            } else if (rand < 0.75) {
-              // 25%概率：显示故障图标
-              statusImage = '/img/故障.png';
-            } else {
-              // 25%概率：显示离线图标
-              statusImage = '/img/离线.png';
+        });
+
+        let statusImage = null;
+        if ([3, 4, 6].includes(item.status)) {
+          // 50%概率：不显示状态图标
+          statusImage = null;
+        } else if ([1, 2, 8].includes(item.status)) {
+          // 25%概率：显示故障图标
+          statusImage = '/img/故障.png';
+        } else {
+          // 25%概率：显示离线图标
+          statusImage = '/img/离线.png';
+        }
+        // 只有当需要显示状态图标时才添加实体
+        if (statusImage) {
+          const overlayBillboard = viewer.entities.add({
+            position: xposition,
+            properties: {
+              modelType: 'shorepower_box',
+              data: item
+            },
+            billboard: {
+              image: statusImage,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+              verticalOrigin: Cesium.VerticalOrigin.CENTER,
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+              scale: new Cesium.CallbackProperty(function (time, result) {
+                // t 会随着时间不断变化
+                const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
+                const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                return pulse;
+              }, false)
             }
-
-            // 只有当需要显示状态图标时才添加实体
-            if (statusImage) {
-              const overlayBillboard = viewer.entities.add({
-                position: position,
-                // pickable: false,
-                properties: {
-                  modelType: 'electrical_box',
-                  data: itemWithModel
-                },
-                billboard: {
-                  image: statusImage,
-                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                  verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                  disableDepthTestDistance: Number.POSITIVE_INFINITY,
-                  scale: new Cesium.CallbackProperty(function (time, result) {
-                    // t 会随着时间不断变化
-                    const t = Cesium.JulianDate.toDate(time).getTime() / 1000;
-                    const pulse = 0.2 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
-                    return pulse;
-                  }, false)
-                }
-              });
+          });
+        }
+        labelInstance.push(xelectricalBoxLabel)
+      })
+      shipData.forEach(item => {
+        // console.log(dataInfo)
+
+        const itemShipInfo = dataInfo.filter(shipItem => (item.shorePower.id === shipItem.parentId) && shipItem.type === 5)
+        // console.log(itemShipInfo)
+        const result = itemShipInfo
+          .filter(item => {
+            try {
+              const data = JSON.parse(item.data);
+              return data.type === 'icon' && data.icon.includes('ship_green');
+            } catch (e) {
+              return false; // 忽略无法解析的 data
             }
+          })
+          .map(item => JSON.parse(item.data));
+        if (!result || result.length === 0) return
+        const dataObj = result[0]
+        console.log(dataObj)
+        let longitude, latitude;
+        let wgsLon, wgsLat;
+        const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+        wgsLon = wgsCoords[0];
+        wgsLat = wgsCoords[1];
+        latitude = wgsLat;
+        longitude = wgsLon;
+        const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 15);
+        const xelectricalBoxModel = viewer.entities.add({
+          // name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'ship',
+            data: item
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(dataObj.rotationAngle),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/cargo_ship_07.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        modelInstance.push({
+          model: xelectricalBoxModel,
+          type: 'ship',
+          data: item
+        })
+
+        const MODEL_HEIGHT_METERS = 80;
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+        const xelectricalBoxLabel = viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          name: '船',
+          label: {
+            text: item.shipBasicInfo.name,
+            font: '28px sans-serif',
+            fillColor: Cesium.Color.LIME,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            disableDepthTest: true,
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
           }
+        });
+        labelInstance.push(xelectricalBoxLabel)
 
-          // 创建红点标记
-          /* const entity = viewer.entities.add({
-            name: item.name || `Marker-${item.id || index}`,
-            position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1),
-            point: {
-              pixelSize: 10,
-              color: Cesium.Color.RED,
-              outlineColor: Cesium.Color.WHITE,
-              outlineWidth: 2
-            },
-            // 可以添加标签显示名称
+        /* if (!itemShipInfo) {
+          return;
+        } */
+        /* if (!itemShipInfo || itemShipInfo.length === 0) return
+        const itemShipInfoObj = itemShipInfo[0]
+
+        console.log('itemShipInfoObj', itemShipInfoObj)
+        console.log('dataInfo', dataInfo)
+        console.log('item', item) */
+      })
+
+      // 其他信息
+      dataInfo.forEach(item => {
+        // console.log(item)
+        if (['华能曹妃甸码头名字', '华电储运码头名字', '国投曹妃甸码头名字'].includes(item.name)) {
+          const dataObj = JSON.parse(item.data)
+          let longitude, latitude;
+          let wgsLon, wgsLat;
+          const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+          wgsLon = wgsCoords[0];
+          wgsLat = wgsCoords[1];
+          // latitude = wgsLat;
+          // longitude = wgsLon;
+          const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 0);
+          const label = viewer.entities.add({
+            position: labelPosition, // 船上方约10米
             label: {
-              text: item.name || `Marker-${item.id || index}`,
-              font: '14px sans-serif',
+              text: dataObj.name || `Marker-${item.id || index}`,
+              font: '16px sans-serif',
               fillColor: Cesium.Color.WHITE,
               outlineColor: Cesium.Color.BLACK,
               outlineWidth: 2,
               style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-              pixelOffset: new Cesium.Cartesian2(0, -15)
+              pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+              disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
             }
-          }); 
-          // 保存点标记实例到数据项
-          itemWithModel.modelInstance = entity;
-          itemWithModel.modelType = 'point';
-          */
-
-          // 将处理后的数据项添加到新数组
-          dataWithModelsArray.push(itemWithModel);
-        } catch (error) {
-          console.error('Error processing item:', item, error);
-          // 创建一个基本的数据项副本并添加到数组
-          dataWithModelsArray.push({ ...item });
-        }
-      });
-
-
-      return dataWithModelsArray;
-    };
-
-
-
-    // 步骤 3: 将图层添加到 Viewer 中
-    viewer.imageryLayers.addImageryProvider(gaodeImage);
-
-    // 调用通用函数创建标记并获取带有模型实例的数据
-    dataWithModels.value = addMarkersFromDataInfo(dataInfo);
+          });
+          twoTitleInstance.push(label)
 
-    // const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
-    console.log('111arr', arr)
-    const wgsCoords = coordtransform.wgs84togcj02(118.452068408873, 38.94922323975237);
-    const xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1);
-    const xlabelPosition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 5);
-    // 投放岸电箱模型
-    const xelectricalBoxModel = viewer.entities.add({
-      name: '岸电箱',
-      position: xposition,
-      // 添加唯一标识用于识别点击事件
-      properties: {
-        modelType: 'electrical_box',
-        // data: itemWithModel
-      },
-      orientation: Cesium.Transforms.headingPitchRollQuaternion(
-        xposition,
-        new Cesium.HeadingPitchRoll(
-          Cesium.Math.toRadians(150),  // 航向角 (绕Z轴旋转)
-          Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
-          Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
-        )
-      ),
-      model: {
-        uri: '/model/electrical_box.glb',
-        scale: 1.5, // 调整模型大小
-        // minimumPixelSize: 10, // 确保模型至少显示为50像素大小
-        // 启用深度测试，使模型能够被地形遮挡
-        enableDepthTest: true,
-        // 启用背光剔除，提高渲染性能
-        backFaceCulling: true
-      },
-    });
+        }
+      })
+      dataInfo.forEach(item => {
+        // console.log(item)
+        if (['港区'].includes(item.name)) {
+          const dataObj = JSON.parse(item.data)
+          let longitude, latitude;
+          let wgsLon, wgsLat;
+          const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]);
+          wgsLon = wgsCoords[0];
+          wgsLat = wgsCoords[1];
+          // latitude = wgsLat;
+          // longitude = wgsLon;
+          const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 0);
+          const label = viewer.entities.add({
+            position: labelPosition, // 船上方约10米
+            label: {
+              text: dataObj.name || `Marker-${item.id || index}`,
+              font: '16px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
+              disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+            }
+          });
+          oneTitleInstance.push(label)
 
-    viewer.entities.add({
-      // pickable: false,
-      position: xlabelPosition, // 船上方约10米
-      properties: {
-        modelType: 'electrical_box',
-        // data: itemWithModel
-      },
-      label: {
-        text: '岸电箱',
-        font: '16px sans-serif',
-        fillColor: Cesium.Color.WHITE,
-        outlineColor: Cesium.Color.BLACK,
-        outlineWidth: 2,
-        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-        pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠
-        disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见
+        }
+      })
+      return {
+        modelInstance,
+        labelInstance,
+        oneTitleInstance,
+        twoTitleInstance
       }
-    });
+    }
+    const { modelInstance, labelInstance, oneTitleInstance, twoTitleInstance } = createMarker()
+    globalModelInstance = modelInstance
+    // const xitemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5)
+    const tempExe = [
+      { lat: 38.95011597126687, lon: 118.45831747850713 },
+      { lat: 38.94718179373664, lon: 118.46547582577227 },
+      { lat: 38.95400625667645, lon: 118.45959803541668 },
+      { lat: 38.97994932460509, lon: 118.45949374251144 },
+      { lat: 38.99238637115607, lon: 118.45970382914341 },
+    ]
 
     // 创建流动线材质
     function createFlowMaterial() {
       return new PolylineFlowMaterialProperty({
         color: Cesium.Color.YELLOW,
-        duration: 2000, // 动画持续时间(毫秒)
-        percent: 0.1,   // 流动部分占整个线条的比例
-        gradient: 0.1   // 流动部分的渐变
+        duration: 5000, // 动画持续时间(毫秒)
+        percent: 0.6,   // 流动部分占整个线条的比例
+        gradient: 0.3   // 流动部分的渐变
       });
     }
+    function tempCreate(item) {
+      tempExe.forEach((exeItem, index) => {
+        const wgsCoords = coordtransform.wgs84togcj02(exeItem.lon, exeItem.lat);
+        const xposition = Cesium.Cartesian3.fromDegrees(exeItem.lon, exeItem.lat, 1);
+        const xelectricalBoxModel = viewer.entities.add({
+          name: '岸电箱',
+          position: xposition,
+          // 添加唯一标识用于识别点击事件
+          properties: {
+            modelType: 'electrical_box',
+            // data: itemWithModel
+          },
+          orientation: Cesium.Transforms.headingPitchRollQuaternion(
+            xposition,
+            new Cesium.HeadingPitchRoll(
+              Cesium.Math.toRadians(150),  // 航向角 (绕Z轴旋转)
+              Cesium.Math.toRadians(0),   // 俯仰角 (绕Y轴旋转)
+              Cesium.Math.toRadians(0)    // 翻滚角 (绕X轴旋转)
+            )
+          ),
+          model: {
+            uri: '/model/electrical_box.glb',
+            scale: 1.5,
+            enableDepthTest: true,
+            backFaceCulling: true
+          },
+        });
+        const MODEL_HEIGHT_METERS = 80;
+
+        // 1. 获取模型的世界坐标 (xposition)
+        // xposition = Cesium.Cartesian3.fromDegrees(wgsCoords[0], wgsCoords[1], 1); 
+
+        // 2. 将标签的位置计算为：模型位置 + 高度偏移
+        // 我们需要沿着地球的法线方向（即向上）偏移。
+
+        // 获取模型位置的地理坐标 (经度, 纬度, 高度)
+        const cartographic = Cesium.Cartographic.fromCartesian(xposition);
+
+        // 增加高度，将标签放置在模型顶部上方
+        const labelAltitude = cartographic.height + MODEL_HEIGHT_METERS;
+
+        // 将新的地理坐标转换回世界坐标作为标签的位置
+        const labelPosition = Cesium.Cartesian3.fromRadians(
+          cartographic.longitude,
+          cartographic.latitude,
+          labelAltitude
+        );
+
+        // 添加 Label 实体
+        viewer.entities.add({
+          // 使用 3D 空间计算出的新位置
+          position: labelPosition,
+          name: '岸电箱 Label',
+          label: {
+            text: '岸电箱 A-001',
+            font: '24px sans-serif',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+
+            // *** 关键设置 1：禁用深度测试，确保标签显示在模型上方 ***
+            // 确保它不会被模型或地球遮挡。
+            disableDepthTest: true,
+
+            // 关键设置 2：移除 pixelOffset（因为我们使用了 3D 位置偏移）
+            // pixelOffset: new Cesium.Cartesian2(0, 0), 
+
+            // 关键设置 3：控制文字大小随距离缩放 (实现“真实大小”效果)
+            // 使用 near/far scalar 控制，避免缩放地图时文字过大
+            scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 50000, 0.1)
+            // ⚠️ 请根据您的场景调整这四个参数
+          }
+        });
+        // 创建连接线：将xelectricalBoxModel与arr中的每个实体连接
+        arr[`arr${index + 1}`].forEach((entity, idx) => {
+          // 创建唯一的线实体ID
+          const lineEntity = viewer.entities.add({
+            name: `connection_line_${idx}`,
+            polyline: {
+              positions: new Cesium.CallbackProperty(() => {
+                // 获取主岸电箱的位置
+                const mainPosition = xelectricalBoxModel.position.getValue(viewer.clock.currentTime);
+                // 获取目标实体的位置
+                const targetPosition = entity.position.getValue(viewer.clock.currentTime);
+
+                // 返回包含两个点的数组（起点和终点）
+                return [mainPosition, targetPosition];
+              }, false),
+              width: 3,
+              material: createFlowMaterial(),
+              // 启用深度测试，使线条能够被地形遮挡
+              enableDepthTest: true
+            }
+          });
+          console.log('lineEntity', lineEntity)
+        });
 
-    // 创建连接线：将xelectricalBoxModel与arr中的每个实体连接
-    arr.forEach((entity, index) => {
-      // 创建唯一的线实体ID
-      const lineEntity = viewer.entities.add({
-        name: `connection_line_${index}`,
-        polyline: {
-          positions: new Cesium.CallbackProperty(() => {
-            // 获取主岸电箱的位置
-            const mainPosition = xelectricalBoxModel.position.getValue(viewer.clock.currentTime);
-            // 获取目标实体的位置
-            const targetPosition = entity.position.getValue(viewer.clock.currentTime);
-
-            // 返回包含两个点的数组（起点和终点）
-            return [mainPosition, targetPosition];
-          }, false),
-          width: 3,
-          material: createFlowMaterial(),
-          // 启用深度测试，使线条能够被地形遮挡
-          enableDepthTest: true
-        }
-      });
-      console.log('lineEntity', lineEntity)
-    });
+      })
+    }
+    tempCreate()
 
     // 设置初始视角
     viewer.camera.flyTo(createView(presetViews.overview));
     // 设置显示高度阈值
     const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息
     // const targets = [];       // 把需要控制的 entities push 进来
-    const targets = dataWithModels.value
+    /* const targets = titleInstance
       .filter(item => item.modelInstance)
-      .map(item => toRaw(item.modelInstance));
-    console.log('targets', targets)
+      .map(item => toRaw(item.modelInstance)); */
+    // console.log('targets', targets)
     viewer.camera.changed.addEventListener(() => {
       // 这个函数会在相机的任何属性发生变化后立即被调用。
       const height = viewer.camera.positionCartographic.height;
@@ -693,11 +1063,16 @@ onMounted(async () => {
 
       // 控制模型显示/隐藏
       const visible = height <= SHOW_HEIGHT; // 1000m内才显示模型等信息
-      targets.forEach(entity => {
+      twoTitleInstance.forEach(entity => {
         if (entity.show !== visible) {
           entity.show = visible;
         }
       });
+      oneTitleInstance.forEach(entity => {
+        if (entity.show === visible) {
+          entity.show = !visible;
+        }
+      });
 
       // 其他缩放级别逻辑
       if (height < 100000) {
@@ -710,51 +1085,51 @@ onMounted(async () => {
     });
 
     // 添加地图点击事件
-    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    /* const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
     handler.setInputAction(function (movement) {
       console.log('地图点击事件触发');
-
+    
       // 首先检查是否点击到了模型
       const pickedObject = viewer.scene.pick(movement.position);
-
+    
       if (pickedObject && pickedObject.id && pickedObject.id.properties) {
         // 检查是否是岸电箱模型
         const properties = pickedObject.id.properties;
-        if (properties.modelType && properties.modelType.getValue() === 'electrical_box') {
+        if (properties.modelType && properties.modelType.getValue() === 'shorepower_box') {
           // 触发岸电箱点击回调
           const electricalBoxData = properties.data.getValue();
           console.log('岸电箱模型被点击:', electricalBoxData);
-
+    
           // 如果定义了回调函数，则调用它
           if (typeof onElectricalBoxClick === 'function') {
             onElectricalBoxClick(electricalBoxData);
           }
-
+    
           // 阻止进一步处理
           return;
         }
       }
-
+    
       // 如果不是点击模型，则处理地面点击
       // 尝试多种方式获取点击位置
       const ray = viewer.camera.getPickRay(movement.position);
-
+    
       // 方法1: 从地球表面拾取
       let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-
+    
       // 如果从地球表面拾取失败，尝试从场景中拾取
       if (!cartesian) {
         cartesian = viewer.scene.pickPosition(movement.position);
         console.log('使用场景拾取方法');
       }
-
+    
       // 如果仍然失败，尝试使用相机计算位置
       if (!cartesian) {
         // 获取屏幕中心点作为替代方案（仅用于调试）
         console.log('无法从点击位置获取精确坐标');
         return;
       }
-
+    
       if (cartesian) {
         const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
         if (cartographic) {
@@ -771,8 +1146,44 @@ onMounted(async () => {
       } else {
         console.log('未能获取到地球表面的点击位置');
       }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK); */
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+    handler.setInputAction(function (movement) {
+      const pickedObject = viewer.scene.pick(movement.position);
 
+      // 获取点击位置的经纬度
+      const cartesian = viewer.scene.pickPosition(movement.position);
+      if (Cesium.defined(cartesian)) {
+        const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+        const longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        const latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        console.log(`当前点击位置的经纬度: 经度 ${longitude}°, 纬度 ${latitude}°`);
+      }
+
+      if (Cesium.defined(pickedObject)) {
+        const entity = pickedObject.id; // 获取实体对象
+
+        if (entity && entity.properties) {
+          // 从 properties 中读取自定义数据
+          const type = entity.properties.modelType.getValue();
+
+          console.log(`点击了一个实体。类型是: ${type}`);
+          if (type === 'shorepower_box' || type === 'ship') {
+            console.log(entity.properties.data.getValue())
+            // onElectricalBoxClick(entity.properties.data.getValue())
+            // 触发自定义点击事件
+            props.onInstanceClick({
+              type,
+              data: entity.properties.data.getValue()
+            });
+          }
+          // 如果您存储了 data: itemWithModel (一个复杂对象)
+          // const fullData = entity.properties.data.getValue(); 
+
+          // ... 接着执行您的业务逻辑，如弹出信息窗口等 ...
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     // 确保启用场景的鼠标事件
     viewer.scene.screenSpaceCameraController.enableInputs = true;
 
@@ -785,6 +1196,21 @@ onMounted(async () => {
   }
 });
 
+// 监听shorePowerList的变化
+watch(
+  () => props.shorePowerList,
+  (newList, oldList) => {
+    console.log('ShorePowerList updated:', newList);
+    if (newList && newList.length > 0) {
+      // 当shorePowerList更新时，可以在这里添加相应的处理逻辑
+      // 例如：更新地图上的岸电箱标记、刷新连接线等
+      console.log('处理shorePowerList数据:', newList);
+      // 这里可以调用相关的更新函数来处理新数据
+    }
+  },
+  { deep: true } // 深度监听数组和对象的变化
+);
+
 // 视角切换方法
 const switchView = (viewName) => {
   const viewParams = presetViews[viewName];
@@ -802,8 +1228,30 @@ const switchView = (viewName) => {
  * @param {number} [extraDistance=15000.0] - 额外的飞离距离 (米)。
  * @param {number} [estimatedRadius=500.0] - 用于计算视角范围的估计模型半径 (米)。
  */
-const switchModelView = (view, extraDistance = 1000, estimatedRadius = 500.0) => {
-  const entityInstance = toRaw(view);
+const switchModelView = (item, extraDistance = 1000, estimatedRadius = 1000.0) => {
+  const clickItem = toRaw(item)
+  console.log(item)
+  let entityInstance = null
+  if (clickItem.type === 'shorepower_box') {
+    console.log(clickItem.item)
+    const instance = globalModelInstance.filter((item) => item.type === 'shorepower_box').find(twoItem => twoItem.data
+      .id === clickItem.item.id)
+    console.log(instance)
+    if (instance.model) {
+      entityInstance = instance.model
+    }
+  } else if (clickItem.type === 'ship') {
+    console.log(clickItem.item)
+    console.log(globalModelInstance)
+    const instance = globalModelInstance.filter((item) => item.type === 'ship').find(twoItem => twoItem.data.shipBasicInfo
+      .id === clickItem.item.shipBasicInfo.id)
+    console.log(instance)
+    if (instance.model) {
+      entityInstance = instance.model
+    }
+    // 处理船舶点击
+  }
+  // return
   console.log('目标模型实体:', entityInstance);
 
   if (viewer && entityInstance && entityInstance.position) {
diff --git a/public/map/components/charts/WaveLineChart.vue b/public/map/components/charts/WaveLineChart.vue
index 3970d47..b241d3b 100644
--- a/public/map/components/charts/WaveLineChart.vue
+++ b/public/map/components/charts/WaveLineChart.vue
@@ -62,6 +62,15 @@ const updateChart = () => {
       textStyle: {
         color: '#fff',
         fontSize: props.magnifyMode ? 20 : 12
+      },
+      formatter: (params: any) => {
+        // params是一个数组，包含当前鼠标位置的所有系列数据
+        if (params && params.length > 0) {
+          const time = params[0].name; // 获取时间
+          const value = params[0].value; // 获取数据值
+          return `时间: ${time}<br/>数值: ${value}`;
+        }
+        return '';
       }
     },
     xAxis: {
@@ -179,6 +188,10 @@ const updateChart = () => {
           width: props.magnifyMode ? 2 : 1,
           type: 'dashed'
         },
+        // 辅助系列不显示在tooltip中
+        tooltip: {
+          show: false
+        },
         // 辅助系列不显示数据标签以避免重叠
         label: {
           show: false
diff --git a/public/map/components/dictionaryTable.ts b/public/map/components/dictionaryTable.ts
index 389a90b..8d15738 100644
--- a/public/map/components/dictionaryTable.ts
+++ b/public/map/components/dictionaryTable.ts
@@ -72,3 +72,12 @@ export const BERTH_TYPE = [
   { label: '左舷停舶', value: 'left' },
   { label: '右舷停舶', value: 'right' },
 ]
+
+// 设施类型
+export const FACILITY_TYPE = [
+  { label: '港区', value: 1 },
+  { label: '码头', value: 2 },
+  { label: '岸电设施', value: 3 },
+  { label: '泊位', value: 4 },
+  { label: '用电接口', value: 5 },
+]
diff --git a/public/map/components/utils.ts b/public/map/components/utils.ts
index d8aa1bc..9adbfce 100644
--- a/public/map/components/utils.ts
+++ b/public/map/components/utils.ts
@@ -191,4 +191,52 @@ export function getValueById<T extends { id: number | string }, K extends keyof
   
   // 否则返回原始值
   return value as any;
+}
+
+export function parseRangeToTimestamp(range: string[], granularity: 'year' | 'month' | 'week' | 'day'): [number, number] | null {
+  if (!range || range.length !== 2) return null;
+
+  const [startStr, endStr] = range;
+
+  let startDate: Date;
+  let endDate: Date;
+
+  switch (granularity) {
+    case 'year':
+      // '2023' → 2023-01-01 00:00:00  ~ 2023-12-31 23:59:59
+      startDate = new Date(`${startStr}-01-01T00:00:00`);
+      endDate = new Date(`${endStr}-12-31T23:59:59`);
+      break;
+
+    case 'month':
+      // '2023-05' → 2023-05-01 00:00:00  ~ 2023-05-31 23:59:59
+      startDate = new Date(`${startStr}-01T00:00:00`);
+      // 获取该月最后一天
+      const yearMonth = startStr.split('-');
+      const nextMonth = new Date(+yearMonth[0], +yearMonth[1], 0); // 本月最后一天
+      endDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), nextMonth.getDate(), 23, 59, 59);
+      // 同样处理 endStr
+      const endYearMonth = endStr.split('-');
+      const endNextMonth = new Date(+endYearMonth[0], +endYearMonth[1], 0);
+      endDate = new Date(endNextMonth.getFullYear(), endNextMonth.getMonth(), endNextMonth.getDate(), 23, 59, 59);
+      break;
+
+    case 'week':
+    case 'day':
+    default:
+      // '2023-05-01' → 2023-05-01 00:00:00 ~ 2023-05-01 23:59:59（week 实际也是日期）
+      startDate = new Date(`${startStr}T00:00:00`);
+      endDate = new Date(`${endStr}T23:59:59`);
+      break;
+  }
+
+  const start = startDate.getTime();
+  const end = endDate.getTime();
+
+  if (isNaN(start) || isNaN(end)) {
+    console.error('日期解析失败:', range, granularity);
+    return null;
+  }
+
+  return [start, end];
 }
\ No newline at end of file
diff --git a/public/map/index.vue b/public/map/index.vue
index 9672306..900aa5e 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <PublicMapComponents ref="mapComponentRef" class="map-base" />
+    <PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
+      :ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick" />
+    <div v-else class="loading">
+      <div style="margin: 0 auto">
+        loading
+      </div>
+    </div>
     <div class="head">
       <div class="head-title">
         <span>曹妃甸港区船舶岸电监管平台</span>
@@ -20,7 +26,8 @@
     <!-- 港区概览 -->
     <template v-if="activeHeadGroup === 0">
       <PortOverview :ship-status-data="shipStatusData" :shore-power-status-data="shorePowerStatusData"
-        @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" />
+        @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList"
+        :ship-data-list="shipDataList" />
     </template>
 
     <!-- 港口岸电使用情况 -->
@@ -31,64 +38,197 @@
 
     <!-- 港口企业岸电使用 -->
     <template v-if="activeHeadGroup === 2">
-      <CompanyShorePower :companyComparisonData="companyComparisonData" />
+      <CompanyShorePower :companyComparisonData="companyComparisonData" :realtime-device-data="realtimeDeviceData" />
     </template>
 
     <!-- 船舶岸电使用情况 -->
     <template v-if="activeHeadGroup === 3">
-      <ShipShorePower :ship-data="shipStatusData" :selected-ship="selectedShip" @item-click="handleSwitch" />
+      <ShipShorePower :ship-data="shipDataList" :selected-ship="selectedShip" @item-click="handleSwitch" />
     </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 v-if="selectedElectricalBox.type" class="right"
+        :style="`width: ${selectedElectricalBox.type === 'ship' ? '45%' : '20%'}`">
+        <div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row">
+          <div class="card digital-twin-card--deep-blue">
+            <div class="card-title">
+              <el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">船舶详情</span>
+            </div>
+            <div class="card-content">
+              <div class="ship-detail">
+                <div class="detail-item">
+                  <span class="label">名称:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.name + '-' +
+                    selectedElectricalBox.data.shipBasicInfo.nameEn
+                  }}</span>
+                </div>
+                <!-- <div class="detail-item">
+                <span class="label">英文船名:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.nameEn }}</span>
+              </div> -->
+                <!-- <div class="detail-item">
+                <span class="label">船舶呼号:</span>
+                <span class="value">{{ selectedItem.shipBasicInfo.callSign }}</span>
+              </div> -->
+                <div class="detail-item">
+                  <span class="label">长度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.length }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">宽度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.width }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">吨位:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.tonnage }} 吨</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">满载吃水深度:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipBasicInfo.fullLoadDraft }} 米</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电压:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.voltageDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电流:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.currentDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">频率:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data.shorePower.frequencyDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">靠泊状态:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.status,
+                    SHORE_POWER_STATUS,
+                  ) }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">靠泊类型:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.type,
+                    BERTH_TYPE)
+                  }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">停泊时间:</span>
+                  <span class="value">{{
+                    formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualDepartureTime) }}</span>
+                </div>
+                <!-- <div class="detail-item">
+                <span class="label">航运单位:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shippingCompany }}</span>
               </div>
               <div class="detail-item">
-                <span class="label">位置:</span>
-                <span class="value">{{ selectedElectricalBox?.location || '曹妃甸港区华能码头' }}</span>
+                <span class="label">岸电联系人:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span>
               </div>
               <div class="detail-item">
-                <span class="label">状态:</span>
-                <span class="value">{{ selectedElectricalBox?.status || '在线' }}</span>
+                <span class="label">联系方式:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
               </div>
-
-              <!-- 当前使用数据 -->
-              <div class="section-title">当前使用数据</div>
               <div class="detail-item">
-                <span class="label">当前使用功率:</span>
-                <span class="value">{{ selectedElectricalBox?.currentPower || '120' }} kW</span>
+                <span class="label">船检登记号:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.inspectionNo }}</span>
               </div>
               <div class="detail-item">
-                <span class="label">当前使用电量:</span>
-                <span class="value">{{ selectedElectricalBox?.currentEnergy || '45.5' }} kWh</span>
+                <span class="label">创建时间:</span>
+                <span class="value">{{ new Date(shipSelectedItem.shipBasicInfo.createTime).toLocaleString() }}</span>
+              </div> -->
               </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>
+          <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">{{ formatDuration(selectedElectricalBox?.data?.usageRecordInfo?.beginTime,
+                    selectedElectricalBox?.data?.usageRecordInfo?.endTime
+                  ) }}</span>
+                </div>
+                <div v-if="selectedElectricalBox?.data?.applyInfo?.reason === 0" class="detail-item">
+                  <span class="label">岸电使用时长:</span>
+                  <span class="value">{{ showStatus(selectedElectricalBox?.data, realtimeDeviceData)?.status }}</span>
+                </div>
+                <div v-if="selectedElectricalBox?.data?.applyInfo?.reason != 0" class="detail-item">
+                  <span class="label">未使用岸电原因:</span>
+                  <span class="value">{{ getOperationTypeLabel(selectedElectricalBox?.data?.applyInfo?.reason,
+                    UNUSED_SHORE_POWER_REASON) }}</span>
+                </div>
               </div>
-              <div class="detail-item">
-                <span class="label">累计服务次数:</span>
-                <span class="value">{{ selectedElectricalBox?.serviceCount || '86' }} 次</span>
+            </div>
+          </div>
+        </div>
+        <div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row">
+          <div class="card digital-twin-card--deep-blue">
+            <div class="card-title">
+              <el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">岸电箱详情</span>
+            </div>
+            <div class="card-content">
+              <div class="ship-detail">
+                <div class="detail-item">
+                  <span class="label">名称:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.name }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">位置:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.position }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">电压:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.voltage }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">频率:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.frequency }} </span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">容量:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.capacity }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前电压:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.voltageDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前电流:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.currentDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前频率:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.frequencyDeviceId,
+                    'measureValue') }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前总用量:</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData,
+                    selectedElectricalBox.data?.totalPowerDeviceId,
+                    'measureValue') }}</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
-
       </div>
     </template>
   </div>
@@ -104,7 +244,9 @@ import ShipShorePower from './components/ShipShorePower.vue'
 import dayjs from 'dayjs'
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import { MapApi } from "@/api/shorepower/map";
-import { RealtimeDeviceData } from '@/types/shorepower'
+import { RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'
+import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS } from './components/dictionaryTable'
+import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
 defineOptions({ name: 'PublicMap' })
 let getRealtimeIntervalId: NodeJS.Timeout | null = null
 const headGroupList = ref<{ value: number, label: string }[]>([
@@ -133,8 +275,8 @@ const selectHeadGroup = async (value: number) => {
   }
   activeHeadGroup.value = value
   if (value === 1) {
-    const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
-    console.log('deviceStatus', deviceStatus)
+    // const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
+    // console.log('deviceStatus', deviceStatus)
   }
 }
 
@@ -145,6 +287,11 @@ const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 
 // 实时设备采集值
 const realtimeDeviceData = ref<RealtimeDeviceData[]>([])
+const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
+const shipDataList = ref<ShipRespVo[]>([])
+const dataLoad = ref<boolean>(false)
+
+
 
 // 自动滚动相关变量
 const scrollContainerRef = ref<HTMLElement | null>(null)
@@ -159,7 +306,10 @@ const updateTime = () => {
 }
 
 const selectedShip = ref(null)
-const selectedElectricalBox = ref(null)
+const selectedElectricalBox = ref({
+  type: '',
+  data: null
+})
 
 /* 回到初始视角 */
 const handleOverviewClick = () => {
@@ -170,22 +320,33 @@ const handleOverviewClick = () => {
 const handleSwitch = (item) => {
   console.log(item)
   // selectedShip.value = item
-  mapComponentRef.value?.switchModelView(item.modelInstance)
+  mapComponentRef.value?.switchModelView(item)
 }
 
+/* const handleFlyToitem = (item) => {
+  mapComponentRef.value?.switchModelView(item)
+} */
+
 // 处理岸电箱点击事件
 const handleElectricalBoxClick = (data) => {
   activeHeadGroup.value = 4
   console.log('岸电箱被点击:', data);
   // 设置选中的岸电箱数据
-  selectedElectricalBox.value = data;
+  // selectedElectricalBox.value = data;
+  selectedElectricalBox.value = {
+    type: data.type,
+    data: data.data
+  }
   // 这里可以添加更多的处理逻辑，比如切换到特定的视图等
 };
 
 // 关闭岸电箱详情面板
 const closeElectricalBoxInfo = () => {
   activeHeadGroup.value = -1;
-  selectedElectricalBox.value = null;
+  selectedElectricalBox.value = {
+    type: '',
+    data: null
+  };
 };
 
 // 启动定时器更新时间
@@ -195,6 +356,7 @@ onMounted(() => {
 
   // 设置岸电箱点击回调
   if (mapComponentRef.value) {
+    console.log('mapComponentRef.value', mapComponentRef.value)
     mapComponentRef.value.setElectricalBoxClickCallback(handleElectricalBoxClick);
   }
 })
@@ -341,10 +503,33 @@ const handleGetRealtimeAllData = async () => {
 
 }
 
+const handleGetStorePower = async () => {
+  // console.log('loading')
+  const harborDistrictId = 1
+  const harborDistrictList = await HARBOR_DISTRICT()
+  const dockDistrictList = await DOCK_DISTRICT()
+  const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
+  ShorePowerList.value = res.map(item => ({
+    ...item,
+    position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
+  }))
+  // console.log('11', res)
+}
+
+const handleGetShipData = async () => {
+  const shipData = await MapApi.getShipInfo({
+    harborDistrictId: 1
+  })
+  shipDataList.value = shipData
+}
+
 // 监听组件挂载
-onMounted(() => {
+onMounted(async () => {
   // 延迟启动滚动，确保DOM已渲染
-  handleGetRealtimeAllData()
+  await handleGetRealtimeAllData()
+  await handleGetStorePower()
+  await handleGetShipData()
+  dataLoad.value = true
   getRealtimeIntervalId = setInterval(() => {
     handleGetRealtimeAllData()
   }, 5000)
@@ -620,6 +805,27 @@ const shipStatusData = computed(() => {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
+    position: relative;
+
+    .close-btn {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #FFF;
+      font-size: 20px;
+      padding: 0;
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: #ff4d4f;
+        background-color: rgba(255, 77, 79, 0.1);
+      }
+    }
 
     .vertical-line {
       width: 2px;
@@ -707,6 +913,13 @@ const shipStatusData = computed(() => {
   white-space: nowrap;
 }
 
+.right-two-row {
+  display: flex;
+  gap: 10px;
+  height: 100%;
+}
+
+
 .ship-name {
   width: 20%;
 }