update

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 v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
-                <div class="overview-value">{{ berth.value }}</div>
+                @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;

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>
-
+    <ShipHistoryDialog v-model="shipHistoryVisible.visible" :ship-param="shipHistoryVisible.searchParams"
-    <!-- 岸电箱历史记录弹窗 -->
-    <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"
       :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[]>([
+const filteredShorePowerList = computed(() => {
-  { id: 1, time: '2023-05-01 08:30:00', operation: '连接', voltage: '380', current: '120', power: '45.6', energy: '12.5' },
+  if (!storeSearchKeyword.value) {
-  { id: 2, time: '2023-05-01 12:15:00', operation: '运行', voltage: '382', current: '118', power: '45.1', energy: '35.2' },
+    return props.shorePowerList
-  { 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' },
+  return props.shorePowerList.filter(shorepower =>
-  { id: 5, time: '2023-05-02 14:30:00', operation: '运行', voltage: '381', current: '119', power: '45.4', energy: '28.9' },
+    shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
-  { 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 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',
-const filteredShorePowerStatusData = computed(() => {
+    item: item
-  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 () => {
+watch(() => props.shipDataList, (newVal) => {
-  // console.log('loading')
+  console.log('newVal', newVal)
-  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)
 })
 
 onMounted(() => {

public/map/components/ShipHistoryDialog.vue

@@ -1,21 +1,26 @@
 <template>
-  <el-dialog v-model="visible" title="船舶历史记录" width="1200px" :before-close="handleClose">
+  <el-dialog v-model="visible" title="历史记录" width="1200px" :before-close="handleClose">
-    <el-tabs v-model="activeTab">
+    <!-- <el-tabs v-model="activeTab"> -->
     <!-- 船舶靠泊历史记录 tab -->
-      <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing">
+    <!-- <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing"> -->
     <!-- 搜索和筛选区域 -->
     <div class="filter-container">
       <el-form :model="berthingQueryParams" label-width="80px" inline>
-            <el-form-item label="关键字">
+        <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> -->
         <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 type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button>
           <el-button @click="resetBerthingQuery">重置</el-button>
         </el-form-item>
       </el-form>
@@ -23,22 +28,21 @@
 
     <!-- 数据表格 -->
     <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"
+      <el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label"
-            :label="column.label" :width="column.width" :formatter="column.formatter" />
+        :width="column.width" :formatter="column.formatter" />
     </el-table>
 
     <!-- 分页 -->
     <div class="pagination-container">
-          <el-pagination v-model:current-page="berthingQueryParams.pageNo"
+      <el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize"
-            v-model:page-size="berthingQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" :total="berthingTotal"
+        :page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper"
-            layout="total, sizes, prev, pager, next, jumper" @size-change="handleBerthingSizeChange"
+        @size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" />
-            @current-change="handleBerthingCurrentChange" />
     </div>
-      </el-tab-pane>
+    <!-- </el-tab-pane> -->
+
+
+    <!-- <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
 
-      <!-- 船舶连接岸电箱历史记录 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>
+        </div> -->
-      </el-tab-pane>
+    <!-- </el-tab-pane> -->
-    </el-tabs>
+    <!-- </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(() => {
+const handleBerthingDateChange = (val: [string, string]) => {
-  // 在实际应用中，这里应该是从服务器获取的数据
+  if (val && val.length === 2) {
-  // 当前为了演示，我们使用传入的模拟数据
+    berthingQueryParams.value.startTime = val[0] + ' 00:00:00'
-  return props.shorePowerConnectionData?.slice(
+    berthingQueryParams.value.endTime = val[1] + ' 23:59:59'
-    (shorePowerConnectionQueryParams.value.pageNo - 1) * shorePowerConnectionQueryParams.value.pageSize,
+  } else {
-    shorePowerConnectionQueryParams.value.pageNo * shorePowerConnectionQueryParams.value.pageSize
+    berthingQueryParams.value.startTime = ''
-  ) || []
+    berthingQueryParams.value.endTime = ''
-})
+  }
-
+  handleShorePowerConnectionSearch()
-// 船舶连接岸电箱历史记录表格列
+}
-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 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 = () => {
-  // 发送搜索事件给父组件
+  // const 
-  emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
+  const params = {
-}
+    // shipId: berthingQueryParams.value.shipId,
-
+    // ids: berthingQueryParams.value.ids,
-const resetShorePowerConnectionQuery = () => {
+    ...(berthingQueryParams.value.ids ? { ids: berthingQueryParams.value.ids } : {}),
-  shorePowerConnectionQueryParams.value.keyword = ''
+    ...(berthingQueryParams.value.shipId ? { shipId: berthingQueryParams.value.shipId } : {}),
-  shorePowerConnectionQueryParams.value.startTime = ''
+    type: berthingQueryParams.value.type,
-  shorePowerConnectionQueryParams.value.endTime = ''
+    pageNo: 1,
-  shorePowerConnectionDateRange.value = ['', '']
+    pageSize: 9999 // 请求足够多的数据，以便在前端进行筛选和分页
-  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 handleShorePowerConnectionSizeChange = (val: number) => {
-  shorePowerConnectionQueryParams.value.pageSize = val
-  shorePowerConnectionQueryParams.value.pageNo = 1
-  handleShorePowerConnectionSearch()
   }
-
+  handleGetShipHistortyList(params)
-const handleShorePowerConnectionCurrentChange = (val: number) => {
+  // 发送搜索事件给父组件
-  shorePowerConnectionQueryParams.value.pageNo = val
+  // emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
-  handleShorePowerConnectionSearch()
 }
 
 // 监听数据变化并更新总数
@@ -353,36 +314,95 @@ watch(
 )
 
 watch(
-  () => props.shipId,
+  () => props.shipParam,
-  (newShipId) => {
+  (newShipParam) => {
-    if (newShipId) {
+    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) => {
+const handleGetShipHistortyList = async (param) => {
-  console.log('handleGetShipHistortyList', id)
+  console.log('handleGetShipHistortyList', param)
-  if (!id) return;
+  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>
 

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)));
 })

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 => ({

public/map/components/ShorePowerUsage.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="shore-power-usage">
+    <template v-if="pageType === 'realtime'">
       <!-- Average Mode -->
       <template v-if="displayMode === 'average'">
         <div class="left average" style="width: 40%;">
@@ -12,17 +13,27 @@
                 <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="结束日期"
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
-                format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
-              <button v-for="option in timeRangeOptions" :key="option.value"
+                  class="date-range-picker" @click.stop />
-                :class="['time-range-btn', { active: timeRange === option.value }]"
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
-                @click.stop="handleTimeRangeChange(option.value)">
+                  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>
+                  ''}}量:</span>
                 <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
               </div>
             </div>
@@ -67,17 +78,28 @@
                 <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="结束日期"
+                <el-date-picker v-if="historyTimeGranularity === 'year'" type="yearrange" range-separator="至"
-                format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
+                  start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
-              <button v-for="option in timeRangeOptions" :key="option.value"
+                  class="date-range-picker" @click.stop />
-                :class="['time-range-btn', { active: timeRange === option.value }]"
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" type="monthrange" range-separator="至"
-                @click.stop="handleTimeRangeChange(option.value)">
+                  start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM" value-format="YYYY-MM"
+                  class="date-range-picker" @click.stop />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" type="weekrange" range-separator="至"
+                  start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                  class="date-range-picker" @click.stop /> -->
+                <el-date-picker v-else type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @click.stop />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
                   {{ option.label }}
                 </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-button>
               </div>
               <div v-if="card.type === 'chart'" class="show-value">
                 <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
-                ''}}总量:</span>
+                  ''}}量:</span>
                 <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
               </div>
             </div>
@@ -126,8 +148,7 @@
                 <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="结束日期"
+                <el-button type="primary" @click.stop="pageType = 'history'">历史查询</el-button>
-                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)">
@@ -136,7 +157,7 @@
               </div>
               <div v-if="card.type === 'chart'" class="show-value">
                 <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
-                ''}}总量:</span>
+                  ''}}量:</span>
                 <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
               </div>
             </div>
@@ -190,7 +211,7 @@
               </div>
               <div v-if="card.type === 'chart'" class="show-value">
                 <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
-                ''}}总量:</span>
+                  ''}}量:</span>
                 <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
               </div>
             </div>
@@ -226,6 +247,251 @@
           </div>
         </div>
       </div>
+    </template>
+    <template v-if="pageType === 'history'">
+      <!-- Average Mode -->
+      <template v-if="displayMode === 'average'">
+        <div class="left average" style="width: 40%;">
+          <div v-for="card in cards.slice(0, 3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="handleDateRangeConfirm">选择并确认</el-button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].fuel }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].nox }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ chartData[timeRange].so2 }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+        <div class="right average" style="width: 40%;">
+          <div v-for="card in cards.slice(3)" :key="card.id" class="card digital-twin-card--deep-blue"
+            @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                  format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" @click.stop />
+                <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button>
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ totalPower }}</div>
+                  <div class="overview-label">累计用电（千瓦时）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ fuelReduction }}</div>
+                  <div class="overview-label">减少燃油（吨）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ co2Reduction }}</div>
+                  <div class="overview-label">减少二氧化碳排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ pm25Reduction }}</div>
+                  <div class="overview-label">减少PM2.5排放（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ noxReduction }}</div>
+                  <div class="overview-label">减少氮氧化物（千克）</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ so2Reduction }}</div>
+                  <div class="overview-label">减少二氧化硫（千克）</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getChartData(card.id)" :title="card.title" :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Magnify Mode -->
+      <div v-if="displayMode === 'magnify'" class="magnify">
+        <div class="big">
+          <div v-for="card in cards.filter(c => c.id === selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <el-date-picker v-if="historyTimeGranularity === 'year'" v-model="dateRange" type="yearrange"
+                  range-separator="至" start-placeholder="开始年" end-placeholder="结束年" format="YYYY" value-format="YYYY"
+                  class="date-range-picker" @change="handleSelectDate" />
+                <el-date-picker v-else-if="historyTimeGranularity === 'month'" v-model="dateRange" type="monthrange"
+                  range-separator="至" start-placeholder="开始月" end-placeholder="结束月" format="YYYY-MM"
+                  value-format="YYYY-MM" class="date-range-picker" @change="handleSelectDate" />
+                <!-- <el-date-picker v-else-if="historyTimeGranularity === 'week'" v-model="dateRange" type="week"
+                  range-separator="至" start-placeholder="开始周" end-placeholder="结束周" format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD" class="date-range-picker" @change="handleSelectDate" /> -->
+                <el-date-picker v-else v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日"
+                  end-placeholder="结束日" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker"
+                  @change="handleSelectDate" />
+                <button v-for="option in historyTimeGranularityOptions" :key="option.value"
+                  :class="['time-range-btn', { active: historyTimeGranularity === option.value }]"
+                  @click.stop="handleHistoryTimeGranularityChange(option.value as 'year' | 'month' | 'week' | 'day')">
+                  {{ option.label }}
+                </button>
+                <el-button type="primary" @click.stop="pageType = 'realtime'">实时显示</el-button>
+                <!-- <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button> -->
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(card.id)" :title="card.title" :color="card.color"
+                :magnify-mode="true" />
+            </div>
+          </div>
+        </div>
+        <div class="one-row">
+          <div v-for="card in cards.filter(c => c.id !== selectedCard)" :key="card.id"
+            class="card digital-twin-card--deep-blue" @click="handleSelectCard(card.id)">
+            <div style="display: flex; align-items: center; justify-content: space-between;">
+              <div class="card-title">
+                <div class="vertical-line"></div>
+                <img src="@/assets/svgs/data.svg" class="title-icon" />
+                <span class="title-text">{{ card.title }}</span>
+              </div>
+              <div v-if="card.type === 'overview'" class="time-range-selector">
+                <!-- <button v-for="option in timeRangeOptions" :key="option.value"
+                  :class="['time-range-btn', { active: timeRange === option.value }]"
+                  @click.stop="handleTimeRangeChange(option.value)">
+                  {{ option.label }}
+                </button> -->
+              </div>
+              <div v-if="card.type === 'chart'" class="show-value">
+                <span class="show-value-label">{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
+                  ''}}量:</span>
+                <div class="show-value-value">{{ chartData[timeRange][card.value] }}</div>
+              </div>
+            </div>
+            <div class="card-content">
+              <div v-if="card.type === 'overview'" class="overview-grid">
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.totalPower }}</div>
+                  <div class="overview-label">区间用电(千瓦时)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.fuel }}</div>
+                  <div class="overview-label">减少燃油(吨)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.co2 }}</div>
+                  <div class="overview-label">减少二氧化碳排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.pm25 }}</div>
+                  <div class="overview-label">减少PM2.5排放(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.nox }}</div>
+                  <div class="overview-label">减少氮氧化物(千克)</div>
+                </div>
+                <div class="overview-item">
+                  <div class="overview-value">{{ historyData.so2 }}</div>
+                  <div class="overview-label">减少二氧化硫(千克)</div>
+                </div>
+              </div>
+              <WaveLineChart v-else :chart-data="getHistoryChartData(card.id)" :title="card.title"
+                :color="card.color" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -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: 'realtime', label: '总' },
-  { value: 'day', label: '日' },
+  { value: 'day', label: '本日' },
-  { value: 'week', label: '周' },
+  { value: 'week', label: '本周' },
-  { value: 'month', 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);
+    let yearDataRes: RealtimeDeviceData[] = []
-    const weekDataRes: RealtimeDeviceData[] = await MapApi.getWeekDataByIdList(params);
+    let weekDataRes: RealtimeDeviceData[] = []
-    const monthDataRes: RealtimeDeviceData[] = await MapApi.getMonthDataByIdList(params);
+    let monthDataRes: RealtimeDeviceData[] = []
-    const dayDataRes: RealtimeDeviceData[] = await MapApi.getDayDataByIdList(params);
+    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)
 })
 

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

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 },
+]

public/map/components/utils.ts

@@ -192,3 +192,51 @@ 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];
+}

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 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">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">联系方式:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">船检登记号:</span>
+                <span class="value">{{ shipSelectedItem.shipBasicInfo.inspectionNo }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">创建时间:</span>
+                <span class="value">{{ new Date(shipSelectedItem.shipBasicInfo.createTime).toLocaleString() }}</span>
+              </div> -->
+              </div>
+            </div>
+          </div>
+          <div class="card digital-twin-card--deep-blue">
+            <div class="card-title">
+              <div class="vertical-line"></div>
+              <img src="@/assets/svgs/data.svg" class="title-icon" />
+              <span class="title-text">续</span>
+            </div>
+            <div class="card-content">
+              <div class="ship-detail">
+                <div 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>
+          </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>
-            <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>
+                  <span class="value">{{ selectedElectricalBox.data?.name }}</span>
                 </div>
                 <div class="detail-item">
                   <span class="label">位置:</span>
-                <span class="value">{{ selectedElectricalBox?.location || '曹妃甸港区华能码头' }}</span>
+                  <span class="value">{{ selectedElectricalBox.data?.position }}</span>
                 </div>
                 <div class="detail-item">
-                <span class="label">状态:</span>
+                  <span class="label">电压:</span>
-                <span class="value">{{ selectedElectricalBox?.status || '在线' }}</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.voltage }}</span>
                 </div>
-
-              <!-- 当前使用数据 -->
-              <div class="section-title">当前使用数据</div>
                 <div class="detail-item">
-                <span class="label">当前使用功率:</span>
+                  <span class="label">频率:</span>
-                <span class="value">{{ selectedElectricalBox?.currentPower || '120' }} kW</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.frequency }} </span>
                 </div>
                 <div class="detail-item">
-                <span class="label">当前使用电量:</span>
+                  <span class="label">容量:</span>
-                <span class="value">{{ selectedElectricalBox?.currentEnergy || '45.5' }} kWh</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.capacity }}</span>
                 </div>
-
-              <!-- 累计历史数据 -->
-              <div class="section-title">累计历史数据</div>
                 <div class="detail-item">
-                <span class="label">累计历史用电:</span>
+                  <span class="label">当前电压:</span>
-                <span class="value">{{ selectedElectricalBox?.totalEnergy || '1250.8' }} kWh</span>
+                  <span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.voltageDeviceId,
+                    'measureValue') }}</span>
                 </div>
                 <div class="detail-item">
-                <span class="label">累计服务次数:</span>
+                  <span class="label">当前电流:</span>
-                <span class="value">{{ selectedElectricalBox?.serviceCount || '86' }} 次</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)
+    // const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
-    console.log('deviceStatus', deviceStatus)
+    // 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%;
 }