From 37e7d38469d2b0558426dddcf78c8771a66cf6fc Mon Sep 17 00:00:00 2001
From: jiangAB <jiangjin514@foxmail.com>
Date: Wed, 17 Dec 2025 11:20:45 +0800
Subject: [PATCH] update

---
 public/img/未连接.png                 | Bin 0 -> 1164 bytes
 public/map/components/PortOverview.vue   |  90 ++++---
 public/map/components/ShipShorePower.vue | 306 ++++++++++++-----------
 public/map/components/cesiumMap.vue      |  43 +++-
 public/map/components/dictionaryTable.ts |  37 +++
 public/map/components/utils.ts           |   6 +-
 public/map/index.vue                     | 142 +++++++----
 src/types/shorepower.d.ts                |   5 +
 8 files changed, 386 insertions(+), 243 deletions(-)
 create mode 100644 public/img/未连接.png

diff --git a/public/img/未连接.png b/public/img/未连接.png
new file mode 100644
index 0000000000000000000000000000000000000000..04a47de8ee3fc5e3a7258ff9568c8bfa0d8e04e7
GIT binary patch
literal 1164
zcmV;71atd|P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000C*Nkl<Zcmd>_
z?QWYe6owDEm)=JrZTqq9dbU)G)KrSpF4r^l$2O_mb@X29`GGkBW5C83oD}KQ80_Qs
zePRe7=}O+w@_qOCOw=vE8vqzrB5Q(m1L0i&z%a&*Y1Y|BJ$nG#-NTyrwtLtknqb`o
z`!LcKw8yZ$pKa{R761kj_$I|OAyV8Snqb`o`@ZcS745}Z=wG$BcGRlb0l)}`<iBC@
zUWz;V(Vs5E=GFa=!*-Jm0H!jcMH`o>r2^6a$*cS0;dak3SpdL1Q@LL>a^qtqYGcfk
zZE*lhS<E9QWfUSWn14LnzSPGF2Jrgf>)J#;(U^72OZ1c%uZ82?Hc!VO0IwgvJWKI*
z3hKZhQE1F*9&H?Ely-Onc>VNQpET6EnLyVykWdJ7n@6+im}y=BN`p%7NaTzF2uqkp
zv(lHrly-Olusb>H9uSr?Z}hqjgXsV;N)Lpk%_C1a4g)U$H-CP<h!i?xcyU0;!MqV}
zmtFwMPO7*sOP@au2tM6Xw^5GsfH#107O2(6TVxGFb>*e}0eTM--_RQXLtP_;AOP10
zAsE25K^O(#QXv%jh6wHT7!80Vmv&B2qW+@09#H^DbZHRKT#sk~B)b#{)z>kK&k+rv
zy2=yDAA)jTheQD|&+sk*g6q>~9*hQn`SYbE4<aA-B+PRrxIcaLjsnm$PZ}au2<r3%
z7?pMe18|!+X>)_nZywb_0Q$|7j>rYVuzA#a1Mo9XN@8gUXY;7(3oig+=FM<RLGU+^
z(m?>@%#)g!8$y_Q6!rq(`~Cb?NAoc;7ld&0xakCdd2u{Mlu=7+2;<CS#R*_q^9)0z
zf-v4Zs+<7WktU{vz{}3AOI%<5EdXgg{koj#Ah=$3)<^PLZvpV>6yIhV2=O{Z8~}>$
zcYsrjc*>Cnga!cDyR(ztBrD59XaIO~yg5nYyODHR2n_%YU9(n}gOCXTXfFdHBLK@l
zXaLX^zgOUBO&0Uc1noJQlZeFQA@C!v@+Uo>qc;Fdab@K>ZcwwB2dzT`H2~1KaJ)Zb
z`@GS<!AS+d0igR4@;ngQ=FPY%AhZCO!Imkz%^N-85LEA_eG5Q!9#~=)44WSZL0LcU
zG+C;$1%S=5_t@kJ3xD$_Z}3bo9j(#{fCr&gyM)zn^G3`R5Ly5*uV%X`8gJekLLtt#
z!lr)%z?|l%c${TSFcWTmKNVt|RjbX-ucz{*t!ZnQCjfJqFZ6W==BtyfEhnyy*%AcC
zH4wlIWh?;<nMd^Tu+>HEw?p-hN-50Ojrtfj?N>hL`ELt491pkqV;~4kP2XT~tZ$2>
z?oXbaqMQL;f)H=a*V|y^s6jB5MVJ*;(4Jr$`w03UGc<1etPog<Hk+!FZS1RR?!QcB
z%$cA)L7jbsyJtRI%Nc-Z3>#Ujv(416xhw%-5W^TJSZCWMM6AYt00030|FHp^WdHyG
e21!IgR09CKs6Ha12+R!t0000<MNUMnLSTZ@DG*!$

literal 0
HcmV?d00001

diff --git a/public/map/components/PortOverview.vue b/public/map/components/PortOverview.vue
index 65eda0d..94c9ea2 100644
--- a/public/map/components/PortOverview.vue
+++ b/public/map/components/PortOverview.vue
@@ -28,8 +28,8 @@
                     <span class="ship-name-text">{{ shorepower.name }}</span>
                   </div>
                   <div class="ship-table-column ship-status">
-                    <div class="status-tag" :class="getStatusClass(StatusText(shorepower.status))">
-                      {{ StatusText(shorepower.status) }}
+                    <div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)">
+                      {{ shorepower.storePowerStatus }}
                     </div>
                     <!-- <div class="status-tag" :class="getStatusClass('空闲')">
                       空闲
@@ -72,8 +72,8 @@
                     <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
                   </div>
                   <div class="ship-table-column ship-status">
-                    <div class="status-tag" :class="getStatusClass('正常')">
-                      正常
+                    <div class="status-tag" :class="getStatusClass(ship.shipStatus)">
+                      {{ ship.shipStatus }}
                     </div>
                     <!-- <div class="status-tag" :class="getStatusClass('空闲')">
                       空闲
@@ -92,8 +92,7 @@
         </div>
       </div>
     </div>
-    <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right"
-      :style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
+    <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right" style="width: 20%">
       <div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row">
         <div class="card digital-twin-card--deep-blue">
           <div class="card-title">
@@ -159,8 +158,33 @@
                   }}</span>
               </div>
               <div class="detail-item">
-                <span class="label">停泊时间:</span>
-                <span class="value">{{ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualDepartureTime) }}</span>
+                <span class="label">靠泊时间:</span>
+                <span class="value">{{ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualBerthTime) }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="label">当前状态:</span>
+                <span class="value">{{ shipSelectedItem.shipStatus }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
+                <span class="label">岸电使用时长:</span>
+                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useTime }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
+                <span class="label">岸电使用用量:</span>
+                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useValue }}</span>
+              </div>
+              <div v-if="shipSelectedItem.applyInfo.reason != 0" class="detail-item">
+                <span class="label">未使用岸电原因:</span>
+                <span class="value">{{ getOperationTypeLabel(shipSelectedItem?.applyInfo?.reason,
+                  UNUSED_SHORE_POWER_REASON) }}</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>
@@ -185,7 +209,7 @@
             </div>
           </div>
         </div>
-        <div class="card digital-twin-card--deep-blue">
+        <!-- <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" />
@@ -193,24 +217,10 @@
           </div>
           <div class="card-content">
             <div class="ship-detail">
-              <div class="detail-item">
-                <span class="label">岸电使用时长:</span>
-                <span class="value">{{ formatDuration(shipSelectedItem?.usageRecordInfo?.beginTime,
-                  shipSelectedItem?.usageRecordInfo?.endTime
-                ) }}</span>
-              </div>
-              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
-                <span class="label">岸电使用时长:</span>
-                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.status }}</span>
-              </div>
-              <div v-if="shipSelectedItem.applyInfo.reason != 0" class="detail-item">
-                <span class="label">未使用岸电原因:</span>
-                <span class="value">{{ getOperationTypeLabel(shipSelectedItem?.applyInfo?.reason,
-                  UNUSED_SHORE_POWER_REASON) }}</span>
-              </div>
+
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
       <div v-if="shorepowerSelectedItem && show_type === 'shorepower'" class="right-two-row">
         <div class="card digital-twin-card--deep-blue">
@@ -261,6 +271,10 @@
                 <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.totalPowerDeviceId,
                   'measureValue') }}</span>
               </div>
+              <div class="detail-item">
+                <span class="label">当前状态:</span>
+                <span class="value">{{ shorepowerSelectedItem.storePowerStatus }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -345,6 +359,7 @@ const filteredShorePowerList = computed(() => {
 })
 
 const handleSelectItem = async (item: ShipRespVo) => {
+  show_type.value = 'ship'
   const deviceId = item.shorePower?.totalPowerDeviceId;
   const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId })
   console.log(res)
@@ -420,10 +435,9 @@ const handleSwitch = (ship: ShipItem, type: string) => {
 }
 
 const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => {
-  console.log('shorepower', shorepower)
+  show_type.value = 'shorepower'
   // selectedItem.value = shorepower
   shorepowerSelectedItem.value = shorepower
-  show_type.value = 'shorepower'
   emit('item-click', {
     type: 'shorepower_box',
     item: shorepower
@@ -432,25 +446,7 @@ const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position:
   // console.log('voltageDeviceId', data)
 }
 
-const StatusMap = {
-  1: '故障',
-  2: '故障',
-  3: '在线',
-  4: '在线',
-  5: '离线',
-  6: '在线',
-  8: '故障',
-  9: '离线',
-}
-
-// 状态转换函数
-const StatusText = (status: number | string) => {
-  const statusNum = Number(status);
-  // console.log(status)
-  return StatusMap[statusNum] || status;
-}
-
-const getStatusClass = (status: string) => {
+const getStatusClass = (status: string | undefined) => {
   switch (status) {
     case '正常':
       return 'status-normal'
@@ -460,6 +456,8 @@ const getStatusClass = (status: string) => {
       return 'status-idle'
     case '故障':
       return 'status-fault'
+    case '超容':
+      return 'status-fault'
     case '异常':
       return 'status-abnormal'
     case '维修中':
diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue
index 6acf71a..9d767a3 100644
--- a/public/map/components/ShipShorePower.vue
+++ b/public/map/components/ShipShorePower.vue
@@ -83,6 +83,8 @@
       <el-tabs v-if="selectedShip" v-model="activeTab">
         <el-tab-pane label="用电申请信息" name="applyInfo">
           <el-form :model="selectedShip.applyInfo" label-width="200px">
+            <!-- 船舶代理信息 -->
+            <h3>船舶代理信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="船方代理单位:">
@@ -96,15 +98,18 @@
               </el-col>
             </el-row>
 
+            <!-- 航行计划信息 -->
+            <h3>航行计划信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="是否申请使用岸电:">
-                  <span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span>
+                <el-form-item label="起运港:">
+                  <span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="到达泊位:">
-                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
+                <el-form-item label="到达港:">
+                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalHarborDistrict, harborDistrictIdAndNameList)
+                    }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -116,125 +121,121 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="到达港:">
-                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalHarborDistrict, harborDistrictIdAndNameList)
-                    }}</span>
+                <el-form-item label="到达泊位:">
+                  <span>{{ findNameById(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="起运港:">
-                  <span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span>
+                <el-form-item label="计划靠泊时间:">
+                  <span>{{ selectedShip.applyInfo?.plannedBerthTime ? new
+                    Date(selectedShip.applyInfo.plannedBerthTime).toLocaleString() : '-' }}</span>
                 </el-form-item>
               </el-col>
-              <!-- <el-col :span="12">
-                <el-form-item label="编号:">
-                  <span>{{ selectedShip.applyInfo?.id || '-' }}</span>
+              <el-col :span="12">
+                <el-form-item label="计划离泊时间:">
+                  <span>{{ selectedShip.applyInfo?.plannedDepartureTime ? new
+                    Date(selectedShip.applyInfo.plannedDepartureTime).toLocaleString() : '-' }}</span>
                 </el-form-item>
-              </el-col> -->
+              </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="货物类型（装货）:">
-                  <span>{{ selectedShip.applyInfo?.loadingCargoCategory || '-' }}</span>
+                <el-form-item label="航次:">
+                  <span>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
                 </el-form-item>
               </el-col>
+            </el-row>
+
+            <!-- 货物信息 -->
+            <h3>货物信息</h3>
+            <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="货物名称（装货）:">
-                  <span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span>
+                <el-form-item label="装货/卸货:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.operationType, OPERATION_TYPE) || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="货物吨数（装货）:">
-                  <span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span>
+                <el-form-item label="货物类型（装货）:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.loadingCargoCategory, CARGO_CATEGORY) || '-'
+                    }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="装货/卸货:">
-                  <span>{{ selectedShip.applyInfo?.operationType || '-' }}</span>
+                <el-form-item label="货物名称（装货）:">
+                  <span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="计划靠泊时间:">
-                  <span>{{ selectedShip.applyInfo?.plannedBerthTime ? new
-                    Date(selectedShip.applyInfo.plannedBerthTime).toLocaleString() : '-' }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="计划离泊时间:">
-                  <span>{{ selectedShip.applyInfo?.plannedDepartureTime ? new
-                    Date(selectedShip.applyInfo.plannedDepartureTime).toLocaleString() : '-' }}</span>
+                <el-form-item label="货物吨数（装货）:">
+                  <span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="未使用岸电原因:">
-                  <span>{{ getReasonText(selectedShip.applyInfo?.reason) }}</span>
+                <el-form-item label="货物类型(卸货):">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.unloadingCargoCategory, CARGO_CATEGORY) || '-'
+                    }}</span>
                 </el-form-item>
               </el-col>
-              <!-- <el-col :span="12">
-                <el-form-item label="备注:">
-                  <span>{{ selectedShip.applyInfo?.remark || '-' }}</span>
+              <el-col :span="12">
+                <el-form-item label="货物名称(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
                 </el-form-item>
-              </el-col> -->
+              </el-col>
             </el-row>
 
             <el-row :gutter="20">
-              <!-- <el-col :span="12">
-                <el-form-item label="船舶编号:">
-                  <span>{{ selectedShip.applyInfo?.shipId || '-' }}</span>
-                </el-form-item>
-              </el-col> -->
               <el-col :span="12">
-                <el-form-item label="申请状态:">
-                  <span>{{ selectedShip.applyInfo?.status || '-' }}</span>
+                <el-form-item label="货物吨数(卸货):">
+                  <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
+            <!-- 岸电申请状态 -->
+            <h3>岸电申请状态</h3>
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="内贸/外贸:">
-                  <span>{{ selectedShip.applyInfo?.tradeType || '-' }}</span>
+                <el-form-item label="是否申请使用岸电:">
+                  <span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span>
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
-                <el-form-item label="货物类型(卸货):">
-                  <span>{{ selectedShip.applyInfo?.unloadingCargoCategory || '-' }}</span>
+              <el-col :span="12" v-if="selectedShip.applyInfo?.reason !== 0">
+                <el-form-item label="未使用岸电原因:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.reason, UNUSED_SHORE_POWER_REASON) || '-'
+                  }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="货物名称(卸货):">
-                  <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
+                <el-form-item label="申请状态:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.status, APPLY_STATUS) || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="货物吨数(卸货):">
-                  <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
+                <el-form-item label="内贸/外贸:">
+                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.tradeType, TRADE_TYPE) || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
+            <!-- 其他信息 -->
+            <h3>其他信息</h3>
             <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="航次:">
-                  <span>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
-                </el-form-item>
-              </el-col>
               <el-col :span="12">
                 <el-form-item label="创建时间:">
                   <span>{{ selectedShip.applyInfo?.createTime ? new
@@ -247,6 +248,8 @@
         </el-tab-pane>
         <el-tab-pane label="船舶用电信息" name="usageRecordInfo">
           <el-form :model="selectedShip.usageRecordInfo" label-width="200px">
+            <!-- 用电时间信息 -->
+            <h3>用电时间信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="实际靠泊时间:">
@@ -260,105 +263,108 @@
               </el-col>
             </el-row>
 
-            <!-- <el-row :gutter="20">
+            <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="用电申请编号:">
-                  <span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span>
+                <el-form-item label="用电开始时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="用电开始时供电方操作人:">
-                  <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
+                <el-form-item label="用电结束时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span>
                 </el-form-item>
               </el-col>
-            </el-row> -->
+            </el-row>
 
+            <!-- 电量读数信息 -->
+            <h3>电量读数信息</h3>
             <el-row :gutter="20">
-              <!-- <el-col :span="12">
-                <el-form-item label="用电开始时用电方操作人:">
-                  <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
+              <el-col :span="12">
+                <el-form-item label="用电开始时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
                 </el-form-item>
-              </el-col> -->
+              </el-col>
               <el-col :span="12">
-                <el-form-item label="用电开始时间:">
-                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span>
+                <el-form-item label="用电开始时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
-              <!-- <el-col :span="12">
-                <el-form-item label="创建时间:">
-                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span>
+              <el-col :span="12">
+                <el-form-item label="用电结束时间人工读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
                 </el-form-item>
-              </el-col> -->
+              </el-col>
               <el-col :span="12">
-                <el-form-item label="用电结束时间:">
-                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span>
+                <el-form-item label="用电结束时间系统读数:">
+                  <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
+                    selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <!-- <el-row :gutter="20">
+            <!-- 操作人员信息 -->
+            <h3>操作人员信息</h3>
+            <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="编号:">
-                  <span>{{ selectedShip.usageRecordInfo?.id || '-' }}</span>
+                <el-form-item label="用电开始时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="用电结束时供电方操作人:">
-                  <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
+                <el-form-item label="用电开始时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
-            </el-row> -->
+            </el-row>
 
-            <!--  <el-row :gutter="20">
+            <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="用电结束时用电方操作人:">
-                  <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
+                <el-form-item label="用电结束时供电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="用电结束时间人工读数:">
-                  <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
-                    selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
+                <el-form-item label="用电结束时用电方操作人:">
+                  <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
                 </el-form-item>
               </el-col>
-            </el-row> -->
+            </el-row>
 
+            <!-- 状态信息 -->
+            <h3>状态信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="用电结束时间系统读数:">
-                  <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
-                    selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="用电开始时间人工读数:">
-                  <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
-                    selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
+                <el-form-item label="作业单状态:">
+                  <span>{{ getOperationTypeLabel(selectedShip.usageRecordInfo?.status, WORK_STATUS) || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <el-row :gutter="20">
+            <!-- 关联信息 -->
+            <h3>其他信息</h3>
+            <!-- <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="用电开始时间系统读数:">
-                  <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
-                    selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
+                <el-form-item label="用电申请编号:">
+                  <span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span>
                 </el-form-item>
               </el-col>
-              <!-- <el-col :span="12">
+              <el-col :span="12">
                 <el-form-item label="船舶编号:">
                   <span>{{ selectedShip.usageRecordInfo?.shipId || '-' }}</span>
                 </el-form-item>
-              </el-col> -->
-            </el-row>
+              </el-col>
+            </el-row> -->
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="作业单状态:">
-                  <span>{{ selectedShip.usageRecordInfo?.status || '-' }}</span>
+                <el-form-item label="创建时间:">
+                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
@@ -366,98 +372,102 @@
         </el-tab-pane>
         <el-tab-pane label="船舶基础信息" name="shipBasicInfo">
           <el-form :model="selectedShip.shipBasicInfo" label-width="200px">
+            <!-- 船舶识别信息 -->
+            <h3>船舶识别信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="船舶呼号:">
-                  <span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span>
+                <el-form-item label="船名:">
+                  <span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="创建时间:">
-                  <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
+                <el-form-item label="英文船名:">
+                  <span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="满载吃水深度:">
-                  <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
-                    selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
+                <el-form-item label="船舶呼号:">
+                  <span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span>
                 </el-form-item>
               </el-col>
-              <!-- <el-col :span="12">
-                <el-form-item label="编号:">
-                  <span>{{ selectedShip.shipBasicInfo?.id || '-' }}</span>
-                </el-form-item>
-              </el-col> -->
-            </el-row>
-
-            <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="船检登记号:">
                   <span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span>
                 </el-form-item>
               </el-col>
+            </el-row>
+
+            <!-- 船舶技术参数 -->
+            <h3>船舶技术参数</h3>
+            <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="船舶长度:">
                   <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
-                    }}</span>
+                  }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="船舶宽度:">
+                  <span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-'
+                  }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="船名:">
-                  <span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span>
+                <el-form-item label="船舶吨位:">
+                  <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
+                  }}</span>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="英文船名:">
-                  <span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span>
+                <el-form-item label="满载吃水深度:">
+                  <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
+                    selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
-            <!-- <el-row :gutter="20">
-              <el-col :span="12">
-                <el-form-item label="航运单位名称:">
-                  <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
-                </el-form-item>
-              </el-col>
+            <!-- 联系信息 -->
+            <h3>联系信息</h3>
+            <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="岸电负责人:">
                   <span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span>
                 </el-form-item>
               </el-col>
-            </el-row> -->
-
-            <el-row :gutter="20">
               <el-col :span="12">
                 <el-form-item label="联系方式:">
                   <span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span>
                 </el-form-item>
               </el-col>
+            </el-row>
+
+            <!-- 运营信息 -->
+            <h3>运营信息</h3>
+            <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="船舶吨位:">
-                  <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
-                    }}</span>
+                <el-form-item label="航运单位名称:">
+                  <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
 
+            <!-- 系统信息 -->
+            <h3>系统信息</h3>
             <el-row :gutter="20">
               <el-col :span="12">
-                <el-form-item label="船舶宽度:">
-                  <span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-'
-                    }}</span>
+                <el-form-item label="创建时间:">
+                  <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </el-tab-pane>
-        <!-- 可以在这里添加更多的tab页 -->
       </el-tabs>
 
       <template #footer>
@@ -473,6 +483,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { MapApi } from "@/api/shorepower/map";
 import dayjs from 'dayjs';
+import { ShipRespVo } from '@/types/shorepower';
+import { APPLY_STATUS, CARGO_CATEGORY, getOperationTypeLabel, OPERATION_TYPE, TRADE_TYPE, UNUSED_SHORE_POWER_REASON, WORK_STATUS } from './dictionaryTable';
 // 定义组件属性
 interface ShipDataItem {
   name: string;
@@ -482,6 +494,8 @@ interface ShipDataItem {
   statusClass: string;
   departureHarborDistrict: string;
   arrivalHarborDistrict: string;
+  beginTime?: Date;
+  endTime?: Date;
   shipBasicInfo?: {
     /**
      * 船舶呼号
@@ -864,7 +878,7 @@ const formatDateTime = (timestamp: string | number | Date | undefined) => {
 
 const showStatus = async (ship: ShipDataItem) => {
   const { usageRecordInfo, applyInfo } = ship;
-  if (applyInfo && applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) {
+  if (applyInfo && applyInfo.reason !== undefined && applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) {
 
     const start = new Date(usageRecordInfo.beginTime);
     const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date();
@@ -931,7 +945,7 @@ const showStatus = async (ship: ShipDataItem) => {
       statusClass: 'status-using',
       status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`
     }
-  } else if (applyInfo && applyInfo.reason != 0) {
+  } else if (applyInfo && applyInfo.reason !== undefined && applyInfo.reason != 0) {
     // 状态码映射表 - 包含状态文本和颜色类型
     const statusMap: Record<string, { text: string; colorType: string }> = {
       '1': { text: '岸电用电接口不匹配', colorType: 'default' },
@@ -945,8 +959,8 @@ const showStatus = async (ship: ShipDataItem) => {
       '9': { text: '其他', colorType: 'danger' }
     }
 
-    const reasonKey = applyInfo.reason.toString()
-    const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason, colorType: 'default' }
+    const reasonKey = applyInfo.reason!.toString()
+    const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason!, colorType: 'default' }
 
     // 根据颜色类型设置对应的状态类
     let statusClass = 'status-cable'
diff --git a/public/map/components/cesiumMap.vue b/public/map/components/cesiumMap.vue
index a7f900a..8201328 100644
--- a/public/map/components/cesiumMap.vue
+++ b/public/map/components/cesiumMap.vue
@@ -690,7 +690,7 @@ onMounted(async () => {
         if (['国投-209泊位-高压', '国投-210泊位-高压'].includes(item.name)) {
           arr.arr2.push(xelectricalBoxModel)
         }
-        if (['国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) {
+        if (['国投-203泊位-高压', '国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) {
           arr.arr3.push(xelectricalBoxModel)
         }
         if (['华电-806泊位-高压', '华电-807泊位-高压'].includes(item.name)) {
@@ -720,6 +720,10 @@ onMounted(async () => {
         const xelectricalBoxLabel = viewer.entities.add({
           // 使用 3D 空间计算出的新位置
           position: labelPosition,
+          properties: {
+            modelType: 'shorepower_box',
+            data: item
+          },
           name: '岸电箱 Label',
           label: {
             text: '岸电箱',
@@ -835,6 +839,10 @@ onMounted(async () => {
           // 使用 3D 空间计算出的新位置
           position: labelPosition,
           name: '船',
+          properties: {
+            modelType: 'ship',
+            data: item
+          },
           label: {
             text: item.shipBasicInfo.name,
             font: '28px sans-serif',
@@ -848,6 +856,37 @@ onMounted(async () => {
         });
         labelInstance.push(xelectricalBoxLabel)
 
+        let statusImage = null;
+        if (item.shipStatus === '正常') {
+          // statusImage = null;
+        } else if (item.shipStatus === '故障') {
+          statusImage = '/img/故障.png';
+        } else {
+          statusImage = '/img/未连接.png';
+        }
+        // 只有当需要显示状态图标时才添加实体
+        if (statusImage) {
+          const overlayBillboard = viewer.entities.add({
+            position: xposition,
+            properties: {
+              modelType: 'ship',
+              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.3 + Math.sin(t * 4) * 0.1;  // (基准0.6, 幅度±0.2)
+                return pulse;
+              }, false)
+            }
+          });
+        }
+
         /* if (!itemShipInfo) {
           return;
         } */
@@ -905,7 +944,7 @@ onMounted(async () => {
             position: labelPosition, // 船上方约10米
             label: {
               text: dataObj.name || `Marker-${item.id || index}`,
-              font: '16px sans-serif',
+              font: `${dataObj?.fontSize || 16}px sans-serif`,
               fillColor: Cesium.Color.WHITE,
               outlineColor: Cesium.Color.BLACK,
               outlineWidth: 2,
diff --git a/public/map/components/dictionaryTable.ts b/public/map/components/dictionaryTable.ts
index 8d15738..8e8ec49 100644
--- a/public/map/components/dictionaryTable.ts
+++ b/public/map/components/dictionaryTable.ts
@@ -1,8 +1,13 @@
 import { MapApi } from "@/api/shorepower/map";
 
 export const getOperationTypeLabel = (value: string | number | undefined | null, options: { label: string, value: string | number }[]) => {
+  try {
     const item = options.find(opt => opt.value === value);
   return item ? item.label : '';
+  } catch (error) {
+    return ''
+  }
+
 };
 
 // 装货/卸货
@@ -81,3 +86,35 @@ export const FACILITY_TYPE = [
   { label: '泊位', value: 4 },
   { label: '用电接口', value: 5 },
 ]
+
+// 贸易类型
+export const TRADE_TYPE = [
+  { label: '内贸', value: 1 },
+  { label: '外贸', value: 2 },
+]
+
+// 作业状态
+export const WORK_STATUS = [
+  { label: '待作业', value: 1 },
+  { label: '前往作业中', value: 2 },
+  { label: '接电中', value: 3 },
+  { label: '待拆除岸电', value: 4 },
+  { label: '岸电卸载中', value: 5 },
+  { label: '待上报数据', value: 6 },
+  { label: '作业完成', value: 7 },
+  { label: '未成功接入', value: 9 },
+]
+
+// 申请状态
+export const APPLY_STATUS = [
+  { label: '待签合同', value: 2 },
+  { label: '待付款', value: 3 },
+  { label: '待确认收款', value: 4 },
+  { label: '待送电', value: 5 },
+  { label: '用电中', value: 6 },
+  { label: '信息收集中', value: 7 },
+  { label: '待退款', value: 8 },
+  { label: '用电完成', value: 9 },
+  { label: '申请完成', value: 10 },
+  { label: '已取消', value: 11 },
+]
\ No newline at end of file
diff --git a/public/map/components/utils.ts b/public/map/components/utils.ts
index 9adbfce..1c0c147 100644
--- a/public/map/components/utils.ts
+++ b/public/map/components/utils.ts
@@ -42,7 +42,7 @@ export function formatDuration(startTime?: number, endTime?: number): string {
 }
 
 // 岸电使用文本构建
-export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDeviceData[]): { statusClass: string, status: string } | null {
+export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDeviceData[]): { statusClass: string, status: string, useTime: string, useValue: string } | null {
   const { usageRecordInfo, applyInfo } = ship;
   if (!applyInfo || !usageRecordInfo || !usageRecordInfo.beginTime) {
     return null;
@@ -113,7 +113,9 @@ export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDevice
 
     return {
       statusClass: 'status-using',
-      status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`
+      status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`,
+      useTime: `${hours}小时${minutes}分钟${seconds}秒`,
+      useValue: useValue.toFixed(2) + 'kWH'
     }
   } else if (applyInfo.reason != 0) {
     // 状态码映射表 - 包含状态文本和颜色类型
diff --git a/public/map/index.vue b/public/map/index.vue
index 900aa5e..0702977 100644
--- a/public/map/index.vue
+++ b/public/map/index.vue
@@ -47,8 +47,7 @@
     </template>
 
     <template v-if="activeHeadGroup === 4">
-      <div v-if="selectedElectricalBox.type" class="right"
-        :style="`width: ${selectedElectricalBox.type === 'ship' ? '45%' : '20%'}`">
+      <div v-if="selectedElectricalBox.type" class="right" style="width: 20%">
         <div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row">
           <div class="card digital-twin-card--deep-blue">
             <div class="card-title">
@@ -120,34 +119,41 @@
                   }}</span>
                 </div>
                 <div class="detail-item">
-                  <span class="label">停泊时间:</span>
+                  <span class="label">靠泊时间:</span>
                   <span class="value">{{
-                    formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualDepartureTime) }}</span>
+                    formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualBerthTime) }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">当前状态:</span>
+                  <span class="value">{{ selectedElectricalBox.data.shipStatus }}</span>
+                </div>
+                <div v-if="selectedElectricalBox.data.applyInfo.reason === 0" class="detail-item">
+                  <span class="label">岸电使用时长</span>
+                  <span class="value">{{ showStatus(selectedElectricalBox.data, realtimeDeviceData)?.useTime }}</span>
+                </div>
+                <div v-if="selectedElectricalBox.data.applyInfo.reason === 0" class="detail-item">
+                  <span class="label">岸电使用用量:</span>
+                  <span class="value">{{ showStatus(selectedElectricalBox.data, realtimeDeviceData)?.useValue }}</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 class="detail-item">
+                  <span class="label">岸电联系人:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContact
+                  }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="label">联系方式:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContactPhone
+                  }}</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 digital-twin-card--deep-blue">
             <div class="card-title">
               <div class="vertical-line"></div>
               <img src="@/assets/svgs/data.svg" class="title-icon" />
@@ -155,24 +161,10 @@
             </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>
         <div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row">
           <div class="card digital-twin-card--deep-blue">
@@ -225,6 +217,10 @@
                     selectedElectricalBox.data?.totalPowerDeviceId,
                     'measureValue') }}</span>
                 </div>
+                <div class="detail-item">
+                  <span class="label">当前状态:</span>
+                  <span class="value">{{ selectedElectricalBox.data?.storePowerStatus }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -245,7 +241,7 @@ import dayjs from 'dayjs'
 import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import { MapApi } from "@/api/shorepower/map";
 import { RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'
-import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS } from './components/dictionaryTable'
+import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './components/dictionaryTable'
 import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
 defineOptions({ name: 'PublicMap' })
 let getRealtimeIntervalId: NodeJS.Timeout | null = null
@@ -503,6 +499,24 @@ const handleGetRealtimeAllData = async () => {
 
 }
 
+const StatusMap = {
+  1: '故障',
+  2: '故障',
+  3: '在线',
+  4: '在线',
+  5: '离线',
+  6: '在线',
+  8: '故障',
+  9: '离线',
+}
+
+// 状态转换函数
+const StatusText = (status: number | string) => {
+  const statusNum = Number(status);
+  // console.log(status)
+  return StatusMap[statusNum] || status;
+}
+
 const handleGetStorePower = async () => {
   // console.log('loading')
   const harborDistrictId = 1
@@ -511,16 +525,44 @@ const handleGetStorePower = async () => {
   const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
   ShorePowerList.value = res.map(item => ({
     ...item,
+    storePowerStatus: StatusText(item.status),
     position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
   }))
   // console.log('11', res)
 }
 
+const getShipStatus = (ship: ShipRespVo) => {
+  // console.log(props.realtimeDeviceData)
+  if (ship.applyInfo.reason !== 0) {
+    return '未使用'
+  } else if ([2, 5, 8].includes(ship.shorePowerAndShip.status)) {
+    return '故障'
+  } else {
+    const Vobj = realtimeDeviceData.value.find(item => item.deviceId === ship.shorePower.voltageDeviceld)
+    const Cobj = realtimeDeviceData.value.find(item => item.deviceId === ship.shorePower.currentDeviceld)
+    let capacity = 0
+    try {
+      capacity = Number(ship.shorePowerEquipment.capacity)
+    } catch (error) {
+      return '获取岸电容量失败'
+    }
+    const power = (Vobj?.measureValue ?? 0) * (Cobj?.measureValue ?? 0);
+    if (power > capacity) {
+      return '超容'
+    }
+    return '正常'
+  }
+}
+
 const handleGetShipData = async () => {
   const shipData = await MapApi.getShipInfo({
     harborDistrictId: 1
   })
-  shipDataList.value = shipData
+  const buildData = shipData.map(item => ({
+    ...item,
+    shipStatus: getShipStatus(item),
+  }))
+  shipDataList.value = buildData
 }
 
 // 监听组件挂载
@@ -852,6 +894,8 @@ const shipStatusData = computed(() => {
     min-height: 0;
     width: 100%;
     // padding: 10px;
+    height: 100%;
+    overflow-y: auto;
   }
 }
 
@@ -1189,20 +1233,24 @@ const shipStatusData = computed(() => {
 }
 
 /* 滚动条样式 */
-.ship-table-body::-webkit-scrollbar {
+.ship-table-body::-webkit-scrollbar,
+.card-content::-webkit-scrollbar {
   width: 6px;
 }
 
-.ship-table-body::-webkit-scrollbar-track {
+.ship-table-body::-webkit-scrollbar-track,
+.card-content::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.2);
 }
 
-.ship-table-body::-webkit-scrollbar-thumb {
+.ship-table-body::-webkit-scrollbar-thumb,
+.card-content::-webkit-scrollbar-thumb {
   background: rgba(30, 120, 255, 0.5);
   border-radius: 3px;
 }
 
-.ship-table-body::-webkit-scrollbar-thumb:hover {
+.ship-table-body::-webkit-scrollbar-thumb:hover,
+.card-content::-webkit-scrollbar-thumb:hover {
   background: rgba(30, 120, 255, 0.7);
 }
 
diff --git a/src/types/shorepower.d.ts b/src/types/shorepower.d.ts
index 443df1a..4ac7b0d 100644
--- a/src/types/shorepower.d.ts
+++ b/src/types/shorepower.d.ts
@@ -10,6 +10,7 @@ interface ShorePowerBerth {
   status: number
   createTime: number // Unix timestamp in milliseconds
   shorePowerEquipmentInfo: ShorePowerEquipmentInfo
+  storePowerStatus?: string
 }
 
 interface ShorePowerEquipmentInfo {
@@ -75,6 +76,10 @@ interface PageResultShipRespVo<T> {
  * ShipRespVo，管理后台 - 船舶岸电使用情况 Response VO
  */
 export interface ShipRespVo {
+  /**
+   * 船舶状态
+   */
+  shipStatus?: string
   /**
    * 用电申请信息
    */