jjx
/
g-cesium-map
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

dev
jiangAB 4 weeks ago
parent
e6ce3aecc5
commit
37e7d38469
8 changed files with 386 additions and 243 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/未连接.png
  2. 90
      public/map/components/PortOverview.vue
  3. 304
      public/map/components/ShipShorePower.vue
  4. 43
      public/map/components/cesiumMap.vue
  5. 37
      public/map/components/dictionaryTable.ts
  6. 6
      public/map/components/utils.ts
  7. 128
      public/map/index.vue
  8. 5
      src/types/shorepower.d.ts

BIN
public/img/未连接.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

90
public/map/components/PortOverview.vue
View File

@ -28,8 +28,8 @@
<span class="ship-name-text">{{ shorepower.name }}</span> <span class="ship-name-text">{{ shorepower.name }}</span>
</div> </div>
<div class="ship-table-column ship-status"> <div class="ship-table-column ship-status">
<div class="status-tag" :class="getStatusClass(StatusText(shorepower.status))"> <div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)">
{{ StatusText(shorepower.status) }} {{ shorepower.storePowerStatus }}
</div> </div>
<!-- <div class="status-tag" :class="getStatusClass('空闲')"> <!-- <div class="status-tag" :class="getStatusClass('空闲')">
空闲 空闲
@ -72,8 +72,8 @@
<span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span> <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
</div> </div>
<div class="ship-table-column ship-status"> <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>
<!-- <div class="status-tag" :class="getStatusClass('空闲')"> <!-- <div class="status-tag" :class="getStatusClass('空闲')">
空闲 空闲
@ -92,8 +92,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="shipSelectedItem || shorepowerSelectedItem" class="right" <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right" style="width: 20%">
:style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
<div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row"> <div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row">
<div class="card digital-twin-card--deep-blue"> <div class="card digital-twin-card--deep-blue">
<div class="card-title"> <div class="card-title">
@ -159,8 +158,33 @@
}}</span> }}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">停泊时间:</span> <span class="label">靠泊时间:</span>
<span class="value">{{ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualDepartureTime) }}</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>
<!-- <div class="detail-item"> <!-- <div class="detail-item">
<span class="label">航运单位:</span> <span class="label">航运单位:</span>
@ -185,7 +209,7 @@
</div> </div>
</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="card-title">
<div class="vertical-line"></div> <div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" /> <img src="@/assets/svgs/data.svg" class="title-icon" />
@ -193,24 +217,10 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="ship-detail"> <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> -->
</div> </div>
<div v-if="shorepowerSelectedItem && show_type === 'shorepower'" class="right-two-row"> <div v-if="shorepowerSelectedItem && show_type === 'shorepower'" class="right-two-row">
<div class="card digital-twin-card--deep-blue"> <div class="card digital-twin-card--deep-blue">
@ -261,6 +271,10 @@
<span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.totalPowerDeviceId, <span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.totalPowerDeviceId,
'measureValue') }}</span> 'measureValue') }}</span>
</div> </div>
<div class="detail-item">
<span class="label">当前状态:</span>
<span class="value">{{ shorepowerSelectedItem.storePowerStatus }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -345,6 +359,7 @@ const filteredShorePowerList = computed(() => {
}) })
const handleSelectItem = async (item: ShipRespVo) => { const handleSelectItem = async (item: ShipRespVo) => {
show_type.value = 'ship'
const deviceId = item.shorePower?.totalPowerDeviceId; const deviceId = item.shorePower?.totalPowerDeviceId;
const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId }) const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId })
console.log(res) console.log(res)
@ -420,10 +435,9 @@ const handleSwitch = (ship: ShipItem, type: string) => {
} }
const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => { const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => {
console.log('shorepower', shorepower) show_type.value = 'shorepower'
// selectedItem.value = shorepower // selectedItem.value = shorepower
shorepowerSelectedItem.value = shorepower shorepowerSelectedItem.value = shorepower
show_type.value = 'shorepower'
emit('item-click', { emit('item-click', {
type: 'shorepower_box', type: 'shorepower_box',
item: shorepower item: shorepower
@ -432,25 +446,7 @@ const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position:
// console.log('voltageDeviceId', data) // console.log('voltageDeviceId', data)
} }
const StatusMap = { const getStatusClass = (status: string | undefined) => {
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) => {
switch (status) { switch (status) {
case '正常': case '正常':
return 'status-normal' return 'status-normal'
@ -460,6 +456,8 @@ const getStatusClass = (status: string) => {
return 'status-idle' return 'status-idle'
case '故障': case '故障':
return 'status-fault' return 'status-fault'
case '超容':
return 'status-fault'
case '异常': case '异常':
return 'status-abnormal' return 'status-abnormal'
case '维修中': case '维修中':

304
public/map/components/ShipShorePower.vue
View File

@ -83,6 +83,8 @@
<el-tabs v-if="selectedShip" v-model="activeTab"> <el-tabs v-if="selectedShip" v-model="activeTab">
<el-tab-pane label="用电申请信息" name="applyInfo"> <el-tab-pane label="用电申请信息" name="applyInfo">
<el-form :model="selectedShip.applyInfo" label-width="200px"> <el-form :model="selectedShip.applyInfo" label-width="200px">
<!-- 船舶代理信息 -->
<h3>船舶代理信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船方代理单位:"> <el-form-item label="船方代理单位:">
@ -96,15 +98,18 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- 航行计划信息 -->
<h3>航行计划信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="是否申请使用岸电:"> <el-form-item label="起运港:">
<span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span> <span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="到达泊位:"> <el-form-item label="到达港:">
<span>{{ findNameById(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span> <span>{{ findNameById(selectedShip.applyInfo?.arrivalHarborDistrict, harborDistrictIdAndNameList)
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -116,125 +121,121 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="到达港:"> <el-form-item label="到达泊位:">
<span>{{ findNameById(selectedShip.applyInfo?.arrivalHarborDistrict, harborDistrictIdAndNameList) <span>{{ findNameById(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="起运港:"> <el-form-item label="计划靠泊时间:">
<span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span> <span>{{ selectedShip.applyInfo?.plannedBerthTime ? new
Date(selectedShip.applyInfo.plannedBerthTime).toLocaleString() : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item label="编号:"> <el-form-item label="计划离泊时间:">
<span>{{ selectedShip.applyInfo?.id || '-' }}</span> <span>{{ selectedShip.applyInfo?.plannedDepartureTime ? new
Date(selectedShip.applyInfo.plannedDepartureTime).toLocaleString() : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="货物类型（装货）:"> <el-form-item label="航次:">
<span>{{ selectedShip.applyInfo?.loadingCargoCategory || '-' }}</span> <span>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<!-- 货物信息 -->
<h3>货物信息</h3>
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="货物名称（装货）:"> <el-form-item label="装货/卸货:">
<span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.operationType, OPERATION_TYPE) || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="货物吨数（装货）:"> <el-form-item label="货物类型（装货）:">
<span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.loadingCargoCategory, CARGO_CATEGORY) || '-'
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="装货/卸货:"> <el-form-item label="货物名称（装货）:">
<span>{{ selectedShip.applyInfo?.operationType || '-' }}</span> <span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="计划靠泊时间:"> <el-form-item label="货物吨数（装货）:">
<span>{{ selectedShip.applyInfo?.plannedBerthTime ? new <span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span>
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> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="未使用岸电原因:"> <el-form-item label="货物类型(卸货):">
<span>{{ getReasonText(selectedShip.applyInfo?.reason) }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.unloadingCargoCategory, CARGO_CATEGORY) || '-'
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item label="备注:"> <el-form-item label="货物名称(卸货):">
<span>{{ selectedShip.applyInfo?.remark || '-' }}</span> <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <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-col :span="12">
<el-form-item label="申请状态:"> <el-form-item label="货物吨数(卸货):">
<span>{{ selectedShip.applyInfo?.status || '-' }}</span> <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 岸电申请状态 -->
<h3>岸电申请状态</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="内贸/外贸:"> <el-form-item label="是否申请使用岸电:">
<span>{{ selectedShip.applyInfo?.tradeType || '-' }}</span> <span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12" v-if="selectedShip.applyInfo?.reason !== 0">
<el-form-item label="货物类型(卸货):"> <el-form-item label="未使用岸电原因:">
<span>{{ selectedShip.applyInfo?.unloadingCargoCategory || '-' }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.reason, UNUSED_SHORE_POWER_REASON) || '-'
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="货物名称(卸货):"> <el-form-item label="申请状态:">
<span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.status, APPLY_STATUS) || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="货物吨数(卸货):"> <el-form-item label="内贸/外贸:">
<span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span> <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.tradeType, TRADE_TYPE) || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 其他信息 -->
<h3>其他信息</h3>
<el-row :gutter="20"> <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-col :span="12">
<el-form-item label="创建时间:"> <el-form-item label="创建时间:">
<span>{{ selectedShip.applyInfo?.createTime ? new <span>{{ selectedShip.applyInfo?.createTime ? new
@ -247,6 +248,8 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="船舶用电信息" name="usageRecordInfo"> <el-tab-pane label="船舶用电信息" name="usageRecordInfo">
<el-form :model="selectedShip.usageRecordInfo" label-width="200px"> <el-form :model="selectedShip.usageRecordInfo" label-width="200px">
<!-- 用电时间信息 -->
<h3>用电时间信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="实际靠泊时间:"> <el-form-item label="实际靠泊时间:">
@ -260,105 +263,108 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- <el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电申请编号:"> <el-form-item label="用电开始时间:">
<span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span> <span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电开始时供电方操作人:"> <el-form-item label="用电结束时间:">
<span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span> <span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> --> </el-row>
<!-- 电量读数信息 -->
<h3>电量读数信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item label="用电开始时用电方操作人:"> <el-form-item label="用电开始时间人工读数:">
<span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span> <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电开始时间:"> <el-form-item label="用电开始时间系统读数:">
<span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span> <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item label="创建时间:"> <el-form-item label="用电结束时间人工读数:">
<span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span> <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电结束时间:"> <el-form-item label="用电结束时间系统读数:">
<span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span> <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- <el-row :gutter="20"> <!-- 操作人员信息 -->
<h3>操作人员信息</h3>
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="编号:"> <el-form-item label="用电开始时供电方操作人:">
<span>{{ selectedShip.usageRecordInfo?.id || '-' }}</span> <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电结束时供电方操作人:"> <el-form-item label="用电开始时用电方操作人:">
<span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span> <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> --> </el-row>
<!-- <el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电结束时用电方操作人:"> <el-form-item label="用电结束时供电方操作人:">
<span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span> <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电结束时间人工读数:"> <el-form-item label="用电结束时用电方操作人:">
<span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ? <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> --> </el-row>
<!-- 状态信息 -->
<h3>状态信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电结束时间系统读数:"> <el-form-item label="作业单状态:">
<span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ? <span>{{ getOperationTypeLabel(selectedShip.usageRecordInfo?.status, WORK_STATUS) || '-' }}</span>
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> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <!-- 关联信息 -->
<h3>其他信息</h3>
<!-- <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用电开始时间系统读数:"> <el-form-item label="用电申请编号:">
<span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ? <span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span>
selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <el-col :span="12"> <el-col :span="12">
<el-form-item label="船舶编号:"> <el-form-item label="船舶编号:">
<span>{{ selectedShip.usageRecordInfo?.shipId || '-' }}</span> <span>{{ selectedShip.usageRecordInfo?.shipId || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
</el-row> </el-row> -->
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="作业单状态:"> <el-form-item label="创建时间:">
<span>{{ selectedShip.usageRecordInfo?.status || '-' }}</span> <span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -366,98 +372,102 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="船舶基础信息" name="shipBasicInfo"> <el-tab-pane label="船舶基础信息" name="shipBasicInfo">
<el-form :model="selectedShip.shipBasicInfo" label-width="200px"> <el-form :model="selectedShip.shipBasicInfo" label-width="200px">
<!-- 船舶识别信息 -->
<h3>船舶识别信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船舶呼号:"> <el-form-item label="船名:">
<span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="创建时间:"> <el-form-item label="英文船名:">
<span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span> <span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="满载吃水深度:"> <el-form-item label="船舶呼号:">
<span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ? <span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span>
selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </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-col :span="12">
<el-form-item label="船检登记号:"> <el-form-item label="船检登记号:">
<span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<!-- 船舶技术参数 -->
<h3>船舶技术参数</h3>
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船舶长度:"> <el-form-item label="船舶长度:">
<span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-' <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
}}</span> }}</span>
</el-form-item> </el-form-item>
</el-col> </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>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船名:"> <el-form-item label="船舶吨位:">
<span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="英文船名:"> <el-form-item label="满载吃水深度:">
<span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- <el-row :gutter="20"> <!-- 联系信息 -->
<el-col :span="12"> <h3>联系信息</h3>
<el-form-item label="航运单位名称:"> <el-row :gutter="20">
<span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
</el-form-item>
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="岸电负责人:"> <el-form-item label="岸电负责人:">
<span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> -->
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="联系方式:"> <el-form-item label="联系方式:">
<span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span> <span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row>
<!-- 运营信息 -->
<h3>运营信息</h3>
<el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船舶吨位:"> <el-form-item label="航运单位名称:">
<span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-' <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<!-- 系统信息 -->
<h3>系统信息</h3>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="船舶宽度:"> <el-form-item label="创建时间:">
<span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-' <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
}}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<!-- 可以在这里添加更多的tab页 -->
</el-tabs> </el-tabs>
<template #footer> <template #footer>
@ -473,6 +483,8 @@
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
import dayjs from 'dayjs'; 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 { interface ShipDataItem {
name: string; name: string;
@ -482,6 +494,8 @@ interface ShipDataItem {
statusClass: string; statusClass: string;
departureHarborDistrict: string; departureHarborDistrict: string;
arrivalHarborDistrict: string; arrivalHarborDistrict: string;
beginTime?: Date;
endTime?: Date;
shipBasicInfo?: { shipBasicInfo?: {
/** /**
* 船舶呼号 * 船舶呼号
@ -864,7 +878,7 @@ const formatDateTime = (timestamp: string | number | Date | undefined) => {
const showStatus = async (ship: ShipDataItem) => { const showStatus = async (ship: ShipDataItem) => {
const { usageRecordInfo, applyInfo } = ship; 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 start = new Date(usageRecordInfo.beginTime);
const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date(); const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date();
@ -931,7 +945,7 @@ const showStatus = async (ship: ShipDataItem) => {
statusClass: 'status-using', statusClass: 'status-using',
status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH` 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 }> = { const statusMap: Record<string, { text: string; colorType: string }> = {
'1': { text: '岸电用电接口不匹配', colorType: 'default' }, '1': { text: '岸电用电接口不匹配', colorType: 'default' },
@ -945,8 +959,8 @@ const showStatus = async (ship: ShipDataItem) => {
'9': { text: '其他', colorType: 'danger' } '9': { text: '其他', colorType: 'danger' }
} }
const reasonKey = applyInfo.reason.toString() const reasonKey = applyInfo.reason!.toString()
const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason, colorType: 'default' } const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason!, colorType: 'default' }
// 根据颜色类型设置对应的状态类 // 根据颜色类型设置对应的状态类
let statusClass = 'status-cable' let statusClass = 'status-cable'

43
public/map/components/cesiumMap.vue
View File

@ -690,7 +690,7 @@ onMounted(async () => {
if (['国投-209泊位-高压', '国投-210泊位-高压'].includes(item.name)) { if (['国投-209泊位-高压', '国投-210泊位-高压'].includes(item.name)) {
arr.arr2.push(xelectricalBoxModel) arr.arr2.push(xelectricalBoxModel)
} }
if (['国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) { if (['国投-203泊位-高压', '国投-204泊位-高压', '国投-205泊位-高压'].includes(item.name)) {
arr.arr3.push(xelectricalBoxModel) arr.arr3.push(xelectricalBoxModel)
} }
if (['华电-806泊位-高压', '华电-807泊位-高压'].includes(item.name)) { if (['华电-806泊位-高压', '华电-807泊位-高压'].includes(item.name)) {
@ -720,6 +720,10 @@ onMounted(async () => {
const xelectricalBoxLabel = viewer.entities.add({ const xelectricalBoxLabel = viewer.entities.add({
// 使用 3D 空间计算出的新位置 // 使用 3D 空间计算出的新位置
position: labelPosition, position: labelPosition,
properties: {
modelType: 'shorepower_box',
data: item
},
name: '岸电箱 Label', name: '岸电箱 Label',
label: { label: {
text: '岸电箱', text: '岸电箱',
@ -835,6 +839,10 @@ onMounted(async () => {
// 使用 3D 空间计算出的新位置 // 使用 3D 空间计算出的新位置
position: labelPosition, position: labelPosition,
name: '船', name: '船',
properties: {
modelType: 'ship',
data: item
},
label: { label: {
text: item.shipBasicInfo.name, text: item.shipBasicInfo.name,
font: '28px sans-serif', font: '28px sans-serif',
@ -848,6 +856,37 @@ onMounted(async () => {
}); });
labelInstance.push(xelectricalBoxLabel) 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) { /* if (!itemShipInfo) {
return; return;
} */ } */
@ -905,7 +944,7 @@ onMounted(async () => {
position: labelPosition, // 船上方约10米 position: labelPosition, // 船上方约10米
label: { label: {
text: dataObj.name || `Marker-${item.id || index}`, text: dataObj.name || `Marker-${item.id || index}`,
font: '16px sans-serif', font: `${dataObj?.fontSize || 16}px sans-serif`,
fillColor: Cesium.Color.WHITE, fillColor: Cesium.Color.WHITE,
outlineColor: Cesium.Color.BLACK, outlineColor: Cesium.Color.BLACK,
outlineWidth: 2, outlineWidth: 2,

37
public/map/components/dictionaryTable.ts
View File

@ -1,8 +1,13 @@
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
export const getOperationTypeLabel = (value: string | number | undefined | null, options: { label: string, value: string | number }[]) => { export const getOperationTypeLabel = (value: string | number | undefined | null, options: { label: string, value: string | number }[]) => {
try {
const item = options.find(opt => opt.value === value); const item = options.find(opt => opt.value === value);
return item ? item.label : ''; return item ? item.label : '';
} catch (error) {
return ''
}
}; };
// 装货/卸货 // 装货/卸货
@ -81,3 +86,35 @@ export const FACILITY_TYPE = [
{ label: '泊位', value: 4 }, { label: '泊位', value: 4 },
{ label: '用电接口', value: 5 }, { 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 },
]

6
public/map/components/utils.ts
View File

@ -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; const { usageRecordInfo, applyInfo } = ship;
if (!applyInfo || !usageRecordInfo || !usageRecordInfo.beginTime) { if (!applyInfo || !usageRecordInfo || !usageRecordInfo.beginTime) {
return null; return null;
@ -113,7 +113,9 @@ export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDevice
return { return {
statusClass: 'status-using', 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) { } else if (applyInfo.reason != 0) {
// 状态码映射表 - 包含状态文本和颜色类型 // 状态码映射表 - 包含状态文本和颜色类型

128
public/map/index.vue
View File

@ -47,8 +47,7 @@
</template> </template>
<template v-if="activeHeadGroup === 4"> <template v-if="activeHeadGroup === 4">
<div v-if="selectedElectricalBox.type" class="right" <div v-if="selectedElectricalBox.type" class="right" style="width: 20%">
:style="`width: ${selectedElectricalBox.type === 'ship' ? '45%' : '20%'}`">
<div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row"> <div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row">
<div class="card digital-twin-card--deep-blue"> <div class="card digital-twin-card--deep-blue">
<div class="card-title"> <div class="card-title">
@ -120,34 +119,41 @@
}}</span> }}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">停泊时间:</span> <span class="label">靠泊时间:</span>
<span class="value">{{ <span class="value">{{
formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualDepartureTime) }}</span> formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualBerthTime) }}</span>
</div> </div>
<!-- <div class="detail-item"> <div class="detail-item">
<span class="label">航运单位:</span> <span class="label">当前状态:</span>
<span class="value">{{ shipSelectedItem.shipBasicInfo.shippingCompany }}</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>
<div class="detail-item"> <div class="detail-item">
<span class="label">岸电联系人:</span> <span class="label">岸电联系人:</span>
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span> <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContact
}}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">联系方式:</span> <span class="label">联系方式:</span>
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span> <span class="value">{{ selectedElectricalBox.data?.shipBasicInfo?.shorePowerContactPhone
}}</span>
</div> </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>
</div> </div>
<div class="card digital-twin-card--deep-blue"> <!-- <div class="card digital-twin-card--deep-blue">
<div class="card-title"> <div class="card-title">
<div class="vertical-line"></div> <div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" /> <img src="@/assets/svgs/data.svg" class="title-icon" />
@ -155,24 +161,10 @@
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="ship-detail"> <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> -->
</div> </div>
<div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row"> <div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row">
<div class="card digital-twin-card--deep-blue"> <div class="card digital-twin-card--deep-blue">
@ -225,6 +217,10 @@
selectedElectricalBox.data?.totalPowerDeviceId, selectedElectricalBox.data?.totalPowerDeviceId,
'measureValue') }}</span> 'measureValue') }}</span>
</div> </div>
<div class="detail-item">
<span class="label">当前状态:</span>
<span class="value">{{ selectedElectricalBox.data?.storePowerStatus }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -245,7 +241,7 @@ import dayjs from 'dayjs'
import { onMounted, onUnmounted, ref, computed, watch } from 'vue' import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
import { RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } 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 { 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' import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
defineOptions({ name: 'PublicMap' }) defineOptions({ name: 'PublicMap' })
let getRealtimeIntervalId: NodeJS.Timeout | null = null 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 () => { const handleGetStorePower = async () => {
// console.log('loading') // console.log('loading')
const harborDistrictId = 1 const harborDistrictId = 1
@ -511,16 +525,44 @@ const handleGetStorePower = async () => {
const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId) const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
ShorePowerList.value = res.map(item => ({ ShorePowerList.value = res.map(item => ({
...item, ...item,
storePowerStatus: StatusText(item.status),
position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `, position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
})) }))
// console.log('11', res) // 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 handleGetShipData = async () => {
const shipData = await MapApi.getShipInfo({ const shipData = await MapApi.getShipInfo({
harborDistrictId: 1 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; min-height: 0;
width: 100%; width: 100%;
// padding: 10px; // 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; 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); 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); background: rgba(30, 120, 255, 0.5);
border-radius: 3px; 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); background: rgba(30, 120, 255, 0.7);
} }

5
src/types/shorepower.d.ts
View File

@ -10,6 +10,7 @@ interface ShorePowerBerth {
status: number status: number
createTime: number // Unix timestamp in milliseconds createTime: number // Unix timestamp in milliseconds
shorePowerEquipmentInfo: ShorePowerEquipmentInfo shorePowerEquipmentInfo: ShorePowerEquipmentInfo
storePowerStatus?: string
} }
interface ShorePowerEquipmentInfo { interface ShorePowerEquipmentInfo {
@ -75,6 +76,10 @@ interface PageResultShipRespVo<T> {
* ShipRespVo，管理后台 - 船舶岸电使用情况 Response VO * ShipRespVo，管理后台 - 船舶岸电使用情况 Response VO
*/ */
export interface ShipRespVo { export interface ShipRespVo {
/**
* 船舶状态
*/
shipStatus?: string
/** /**
* 用电申请信息 * 用电申请信息
*/ */

Write Preview
Loading…
Cancel
Save