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

update

dev
jiangAB 2 months ago
parent
56f42a1c17
commit
a05f704884
11 changed files with 2148 additions and 973 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. 92
      public/map/components/CompanyShorePower.vue
  2. 236
      public/map/components/PortOverview.vue
  3. 284
      public/map/components/ShipHistoryDialog.vue
  4. 10
      public/map/components/ShipShorePower.vue
  5. 4
      public/map/components/ShorePowerHistoryDialog.vue
  6. 874
      public/map/components/ShorePowerUsage.vue
  7. 1242
      public/map/components/cesiumMap.vue
  8. 13
      public/map/components/charts/WaveLineChart.vue
  9. 9
      public/map/components/dictionaryTable.ts
  10. 48
      public/map/components/utils.ts
  11. 309
      public/map/index.vue

92
public/map/components/CompanyShorePower.vue
View File

@ -9,10 +9,10 @@
<img src="@/assets/svgs/data.svg" class="title-icon" /> <img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">码头与泊位信息</span> <span class="title-text">码头与泊位信息</span>
</div> </div>
<div> <!-- <div>
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" /> format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" />
</div> </div> -->
</div> </div>
@ -20,11 +20,13 @@
<div v-for="company in companyComparisonData" :key="company.name" class="company-section"> <div v-for="company in companyComparisonData" :key="company.name" class="company-section">
<div class="company-header"> <div class="company-header">
<div class="company-name">{{ company.name }}</div> <div class="company-name">{{ company.name }}</div>
<div class="company-total">总量: {{ company.value }}</div> <div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div>
</div> </div>
<div class="overview-grid"> <div class="overview-grid">
<div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"> <div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item"
<div class="overview-value">{{ berth.value }}</div> @click="showShorePowerHistory(berth)">
<div class="overview-value">{{ berth.measureValue?.toFixed(2)
|| 0 }}</div>
<div class="overview-label">{{ berth.name }}</div> <div class="overview-label">{{ berth.name }}</div>
@ -34,24 +36,97 @@
</div> </div>
</div> </div>
</div> </div>
<ship-history-dialog v-model="historyVisible.visible" :ship-param="historyVisible.searchParams"
:realtime-device-data="realtimeDeviceData" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { MapApi } from "@/api/shorepower/map";
import ShipHistoryDialog from './ShipHistoryDialog.vue';
import { RealtimeDeviceData } from '@/types/shorepower';
// 定义组件属性 // 定义组件属性
interface ChartDataItem { interface ChartDataItem {
name: string; name: string;
value: number; value?: number;
measureValue?: number;
children?: ChartDataItem[]; children?: ChartDataItem[];
} }
const historyVisible = ref({
visible: false,
searchParams: {
shipId: 0 as number | null,
ids: [] as number[] | null,
type: 1 as number
}
})
// 计算总量的函数
const calculateTotal = (children?: ChartDataItem[]) => {
if (!children || children.length === 0) return 0;
return children.reduce((total, item) => {
return total + (item.measureValue || 0);
}, 0);
};
// 显示岸电箱历史记录
const showShorePowerHistory = (berth: ChartDataItem) => {
console.log(berth)
// console.log('shorepower', shorepower)
// currentShorePower.value = shorepower
/* shorePowerHistoryVisible.value = {
visible: true,
shorePowerId: shorepower.id || 0
} */
historyVisible.value = {
visible: true,
searchParams: {
shipId: null,
ids: [berth.id],
type: 4,
}
}
}
interface Props { interface Props {
companyComparisonData: ChartDataItem[]; companyComparisonData?: ChartDataItem[];
realtimeDeviceData: RealtimeDeviceData[];
} }
const props = defineProps<Props>() const props = defineProps<Props>()
const companyComparisonData = ref<ChartDataItem[]>([])
const handleGetBuildData = async () => {
const dockList = await MapApi.getDockIdAndNameList()
const berthList = await MapApi.getBerthIdAndNameList()
const buildData = dockList.map(dock => ({
...dock,
children: berthList.filter(berth => berth.dockId === dock.id).map(berth => ({
...berth,
...props.realtimeDeviceData.find(item => (item.id === berth.id) && (item.deviceCode.includes('Kwh')))
}))
}))
console.log('buildData', buildData)
console.log('props.realtimeDeviceData', props.realtimeDeviceData)
companyComparisonData.value = buildData
/* MapApi.getBerthIdAndNameList().then(res => {
console.log(res)
const buildData = res.map(item => ({
...item,
children: props.realtimeDeviceData.filter(item => item.id === item.id)
}))
}) */
}
watch(() => props.realtimeDeviceData, (newVal) => {
handleGetBuildData()
})
onMounted(() => {
// console.log(props.realtimeDeviceData)
handleGetBuildData()
})
</script> </script>
<style scoped> <style scoped>
@ -92,6 +167,7 @@ const props = defineProps<Props>()
} }
.overview-item { .overview-item {
cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

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

@ -10,7 +10,7 @@
<span class="title-text">岸电箱状态</span> <span class="title-text">岸电箱状态</span>
</div> </div>
<input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword" <input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword"
@input="handleSearch" /> @input="handlStoreSearch" />
</div> </div>
<div class=" card-content"> <div class=" card-content">
@ -21,7 +21,7 @@
<div class="ship-table-column ship-status-header">历史</div> <div class="ship-table-column ship-status-header">历史</div>
</div> </div>
<div class="ship-table-body"> <div class="ship-table-body">
<div v-for="shorepower in ShorePowerList" :key="shorepower.id" class="ship-table-row" <div v-for="shorepower in filteredShorePowerList" :key="shorepower.id" class="ship-table-row"
@click="handleSelectShorePower(shorepower)"> @click="handleSelectShorePower(shorepower)">
<div class="ship-table-column ship-name"> <div class="ship-table-column ship-name">
<div class="ship-icon">⚡</div> <div class="ship-icon">⚡</div>
@ -66,7 +66,7 @@
</div> </div>
<div class="ship-table-body"> <div class="ship-table-body">
<div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row" <div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
@click="handleSwitch(ship, 'ship')"> @click="handleSelectItem(ship)">
<div class="ship-table-column ship-name"> <div class="ship-table-column ship-name">
<div class="ship-icon">🚢</div> <div class="ship-icon">🚢</div>
<span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span> <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
@ -92,7 +92,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right" :style="`width: ${show_type === 'ship' ? '45%' : '20%'}`"> <div v-if="shipSelectedItem || shorepowerSelectedItem" class="right"
:style="`width: ${show_type === 'ship' ? '45%' : '20%'}`">
<div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row"> <div 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">
@ -263,27 +264,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="card digital-twin-card--deep-blue">
<div class="card-title">
<div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">岸电信息</span>
</div>
<div class="card-content">
<div class="ship-detail">
<div class="detail-item">
<span class="label">停泊状态:</span>
<span class="value">{{ selectedItem.shorePowerAndShip.type === 'left' ? '左舷停泊' :
selectedItem.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedItem.shorePowerAndShip.type
}}</span>
</div>
<div class="detail-item">
<span class="label">靠泊状态:</span>
<span class="value">{{ getShorePowerStatusText(selectedItem.shorePowerAndShip.status) }}</span>
</div>
</div>
</div>
</div> -->
</div> </div>
<!-- <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;"> <!-- <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;">
@ -297,28 +277,17 @@
</div> </div>
</div> --> </div> -->
</div> </div>
<ShipHistoryDialog v-model="shipHistoryVisible.visible" :ship-param="shipHistoryVisible.searchParams"
<!-- 岸电箱历史记录弹窗 -->
<ShorePowerHistoryDialog v-model="shorePowerHistoryVisible.visible" :data="shorePowerHistoryData"
:ship-connection-data="shorePowerConnectionData" @search="handleShorePowerHistorySearch"
@ship-connection-search="handleShorePowerConnectionSearch"
:shore-power-id="shorePowerHistoryVisible.shorePowerId" />
<!-- 船舶历史记录弹窗 -->
<ShipHistoryDialog v-model="shipHistoryVisible.visible" :berthing-data="shipHistoryData"
:shore-power-connection-data="shipShorePowerConnectionData" @berthing-search="handleShipHistorySearch"
@shore-power-connection-search="handleShipShorePowerConnectionSearch" :ship-id="shipHistoryVisible.shipId"
:realtime-device-data="realtimeDeviceData" /> :realtime-device-data="realtimeDeviceData" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import ShorePowerHistoryDialog from './ShorePowerHistoryDialog.vue'
import ShipHistoryDialog from './ShipHistoryDialog.vue' import ShipHistoryDialog from './ShipHistoryDialog.vue'
import { MapApi } from "@/api/shorepower/map"; import { MapApi } from "@/api/shorepower/map";
import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'; import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower';
import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable'; import { BERTH_TYPE, getOperationTypeLabel, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable';
import { formatDuration, formatTimestamp, getValueById, showStatus } from './utils'; import { formatDuration, formatTimestamp, getValueById, showStatus } from './utils';
// 定义组件属性 // 定义组件属性
type ShipItem = ShipRespVo & { id: string; modelInstance?: any; }; type ShipItem = ShipRespVo & { id: string; modelInstance?: any; };
@ -327,6 +296,8 @@ interface Props {
shipStatusData: ShipItem[]; shipStatusData: ShipItem[];
shorePowerStatusData: ShipItem[]; shorePowerStatusData: ShipItem[];
realtimeDeviceData: RealtimeDeviceData[]; realtimeDeviceData: RealtimeDeviceData[];
shorePowerList: (ShorePowerBerth & { position: string; })[];
shipDataList: ShipRespVo[];
// selectedItem: ShipItem | null; // selectedItem: ShipItem | null;
} }
@ -339,77 +310,41 @@ const show_type = ref('ship')
const shipSelectedItem = ref<ShipItem | null>(null) const shipSelectedItem = ref<ShipItem | null>(null)
const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null) const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null)
// 历史记录弹窗相关
const shorePowerHistoryVisible = ref({
visible: false,
shorePowerId: 0
})
const shipHistoryVisible = ref({ const shipHistoryVisible = ref({
visible: false, visible: false,
shipId: 0 searchParams: {
shipId: 0 as number | null,
ids: [] as number[] | null,
type: 1 as number
}
}) })
const currentShorePower = ref<ShorePowerBerth | null>(null) const currentShorePower = ref<ShorePowerBerth | null>(null)
const currentShip = ref<ShipItem | null>(null) const currentShip = ref<ShipItem | null>(null)
const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([]) // const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
// 过滤后的船舶数据 // 过滤后的船舶数据
const filteredShipStatusData = computed(() => { const filteredShipStatusData = computed(() => {
if (!searchKeyword.value) { if (!searchKeyword.value) {
return props.shipStatusData return props.shipDataList
} }
return props.shipStatusData.filter(ship => return props.shipDataList.filter(ship =>
ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
) )
}) })
// 模拟岸电箱历史数据 // 过滤后的岸电箱数据
const shorePowerHistoryData = ref<any[]>([ const filteredShorePowerList = computed(() => {
{ id: 1, time: '2023-05-01 08:30:00', operation: '连接', voltage: '380', current: '120', power: '45.6', energy: '12.5' }, if (!storeSearchKeyword.value) {
{ id: 2, time: '2023-05-01 12:15:00', operation: '运行', voltage: '382', current: '118', power: '45.1', energy: '35.2' }, return props.shorePowerList
{ id: 3, time: '2023-05-01 16:45:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' }, }
{ id: 4, time: '2023-05-02 09:20:00', operation: '连接', voltage: '379', current: '122', power: '46.3', energy: '8.7' }, return props.shorePowerList.filter(shorepower =>
{ id: 5, time: '2023-05-02 14:30:00', operation: '运行', voltage: '381', current: '119', power: '45.4', energy: '28.9' }, shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
{ id: 6, time: '2023-05-02 18:50:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' }, )
{ id: 7, time: '2023-05-03 07:45:00', operation: '连接', voltage: '380', current: '121', power: '45.9', energy: '15.3' }, })
{ id: 8, time: '2023-05-03 13:20:00', operation: '运行', voltage: '382', current: '120', power: '45.8', energy: '42.1' },
{ id: 9, time: '2023-05-03 17:30:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
{ id: 10, time: '2023-05-04 10:15:00', operation: '连接', voltage: '378', current: '123', power: '46.5', energy: '9.8' }
])
// 模拟船舶靠泊历史数据
const shipHistoryData = ref<any[]>([
{ id: 1, time: '2023-04-15 09:30:00', operation: '靠泊', berthPosition: '1号泊位', duration: '12.5', powerConsumption: '125.6' },
{ id: 2, time: '2023-04-16 14:20:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
{ id: 3, time: '2023-04-20 08:45:00', operation: '靠泊', berthPosition: '3号泊位', duration: '8.2', powerConsumption: '89.3' },
{ id: 4, time: '2023-04-21 16:30:00', operation: '离泊', berthPosition: '3号泊位', duration: '0', powerConsumption: '0' },
{ id: 5, time: '2023-04-25 11:15:00', operation: '靠泊', berthPosition: '2号泊位', duration: '15.7', powerConsumption: '156.8' },
{ id: 6, time: '2023-04-26 18:40:00', operation: '离泊', berthPosition: '2号泊位', duration: '0', powerConsumption: '0' },
{ id: 7, time: '2023-05-01 07:20:00', operation: '靠泊', berthPosition: '1号泊位', duration: '18.3', powerConsumption: '189.2' },
{ id: 8, time: '2023-05-02 15:50:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
{ id: 9, time: '2023-05-05 09:10:00', operation: '靠泊', berthPosition: '4号泊位', duration: '6.4', powerConsumption: '67.5' },
{ id: 10, time: '2023-05-06 13:45:00', operation: '离泊', berthPosition: '4号泊位', duration: '0', powerConsumption: '0' }
])
// 模拟岸电箱连接船舶数据
const shorePowerConnectionData = ref<any[]>([
{ id: 1, shipName: '远航号', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
{ id: 2, shipName: '海鹰号', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
{ id: 3, shipName: '巨轮号', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
{ id: 4, shipName: '远洋号', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
{ id: 5, shipName: '海豚号', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
])
// 模拟船舶连接岸电箱数据
const shipShorePowerConnectionData = ref<any[]>([
{ id: 1, shorePowerName: '1号岸电箱', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
{ id: 2, shorePowerName: '2号岸电箱', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
{ id: 3, shorePowerName: '1号岸电箱', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
{ id: 4, shorePowerName: '3号岸电箱', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
{ id: 5, shorePowerName: '2号岸电箱', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
])
const handleSelectItem = async (item: ShipItem) => { const handleSelectItem = async (item: ShipRespVo) => {
const deviceId = item.shorePower?.totalPowerDeviceId; const 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,29 +355,37 @@ const handleSelectItem = async (item: ShipItem) => {
'measureValue': res[0].measureValue || 'N/A', 'measureValue': res[0].measureValue || 'N/A',
} }
} }
emit('item-click', {
type: 'ship',
item: item
})
} }
const filteredShorePowerStatusData = computed(() => {
if (!storeSearchKeyword.value) {
return props.shipStatusData
}
return props.shipStatusData.filter(ship =>
ship.shorePowerEquipment.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
)
})
// 处理搜索输入 // 处理搜索输入
const handleSearch = () => { const handleSearch = () => {
// 输入处理逻辑（如果需要额外处理可以在这里添加） // 输入处理逻辑（如果需要额外处理可以在这里添加）
} }
// 处理岸电箱搜索输入
const handlStoreSearch = () => {
// 输入处理逻辑（如果需要额外处理可以在这里添加）
}
// 显示岸电箱历史记录 // 显示岸电箱历史记录
const showShorePowerHistory = (shorepower: ShorePowerBerth) => { const showShorePowerHistory = (shorepower: ShorePowerBerth) => {
console.log('shorepower', shorepower) console.log('shorepower', shorepower)
currentShorePower.value = shorepower currentShorePower.value = shorepower
shorePowerHistoryVisible.value = { /* shorePowerHistoryVisible.value = {
visible: true, visible: true,
shorePowerId: shorepower.id || 0 shorePowerId: shorepower.id || 0
} */
shipHistoryVisible.value = {
visible: true,
searchParams: {
shipId: null,
ids: [shorepower.id],
type: 5,
}
} }
} }
@ -452,53 +395,18 @@ const showShipHistory = (ship: ShipItem) => {
currentShip.value = ship currentShip.value = ship
shipHistoryVisible.value = { shipHistoryVisible.value = {
visible: true, visible: true,
shipId: ship.shipBasicInfo.id searchParams: {
shipId: ship.shipBasicInfo.id,
ids: null,
type: 1,
}
} }
} }
// 处理岸电箱历史记录搜索
const handleShorePowerHistorySearch = (params: any) => {
console.log('岸电箱历史记录搜索参数:', params)
// 实际项目中这里会调用接口获取数据
// 模拟延迟
setTimeout(() => {
console.log('岸电箱历史记录搜索完成')
}, 500)
}
// 处理船舶历史记录搜索
const handleShipHistorySearch = (params: any) => {
console.log('船舶历史记录搜索参数:', params)
// 实际项目中这里会调用接口获取数据
// 模拟延迟
setTimeout(() => {
console.log('船舶历史记录搜索完成')
}, 500)
}
// 处理岸电箱连接船舶记录搜索
const handleShorePowerConnectionSearch = (params: any) => {
console.log('岸电箱连接船舶记录搜索参数:', params)
// 实际项目中这里会调用接口获取数据
// 模拟延迟
setTimeout(() => {
console.log('岸电箱连接船舶记录搜索完成')
}, 500)
}
// 处理船舶连接岸电箱记录搜索
const handleShipShorePowerConnectionSearch = (params: any) => {
console.log('船舶连接岸电箱记录搜索参数:', params)
// 实际项目中这里会调用接口获取数据
// 模拟延迟
setTimeout(() => {
console.log('船舶连接岸电箱记录搜索完成')
}, 500)
}
// 定义事件 // 定义事件
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'switch-ship', ship: ShipItem): void; (e: 'switch-ship', ship: ShipItem): void;
(e: 'item-click', item: any): void;
// handleSelectItem(ship) // handleSelectItem(ship)
}>() }>()
@ -516,21 +424,14 @@ const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position:
// selectedItem.value = shorepower // selectedItem.value = shorepower
shorepowerSelectedItem.value = shorepower shorepowerSelectedItem.value = shorepower
show_type.value = 'shorepower' show_type.value = 'shorepower'
emit('item-click', {
type: 'shorepower_box',
item: shorepower
})
// const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId }) // const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId })
// console.log('voltageDeviceId', data) // console.log('voltageDeviceId', data)
} }
const shorePowerStatusMap = {
1: '待靠泊',
2: '靠泊中',
3: '岸电接入中',
4: '用电中',
5: '岸电卸载中',
6: '岸电卸载完成',
7: '离泊',
9: '未使用岸电'
}
const StatusMap = { const StatusMap = {
1: '故障', 1: '故障',
2: '故障', 2: '故障',
@ -549,13 +450,6 @@ const StatusText = (status: number | string) => {
return StatusMap[statusNum] || status; return StatusMap[statusNum] || status;
} }
// 状态转换函数
const getShorePowerStatusText = (status: number | string) => {
const statusNum = Number(status);
// console.log(status)
return shorePowerStatusMap[statusNum] || status;
}
const getStatusClass = (status: string) => { const getStatusClass = (status: string) => {
switch (status) { switch (status) {
case '正常': case '正常':
@ -579,22 +473,8 @@ const getStatusClass = (status: string) => {
} }
} }
const handleGetStorePower = async () => { watch(() => props.shipDataList, (newVal) => {
// console.log('loading') console.log('newVal', newVal)
const harborDistrictId = 1
const harborDistrictList = await HARBOR_DISTRICT()
const dockDistrictList = await DOCK_DISTRICT()
const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
ShorePowerList.value = res.map(item => ({
...item,
position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
}))
console.log('11', res)
}
onMounted(async () => {
await handleGetStorePower()
// console.log(props.shipStatusData)
}) })
onMounted(() => { onMounted(() => {

284
public/map/components/ShipHistoryDialog.vue
View File

@ -1,44 +1,48 @@
<template> <template>
<el-dialog v-model="visible" title="船舶历史记录" width="1200px" :before-close="handleClose"> <el-dialog v-model="visible" title="历史记录" width="1200px" :before-close="handleClose">
<el-tabs v-model="activeTab"> <!-- <el-tabs v-model="activeTab"> -->
<!-- 船舶靠泊历史记录 tab --> <!-- 船舶靠泊历史记录 tab -->
<el-tab-pane label="船舶靠泊历史记录" name="shipBerthing"> <!-- <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing"> -->
<!-- 搜索和筛选区域 --> <!-- 搜索和筛选区域 -->
<div class="filter-container"> <div class="filter-container">
<el-form :model="berthingQueryParams" label-width="80px" inline> <el-form :model="berthingQueryParams" label-width="80px" inline>
<el-form-item label="关键字"> <el-form-item label="类型">
<el-select v-model="berthingQueryParams.type" style="width: 120px" placeholder="请选择类型">
<el-option v-for="item in FACILITY_TYPE" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<!-- <el-form-item label="关键字">
<el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable <el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable
@keyup.enter="handleBerthingSearch" /> @keyup.enter="handleBerthingSearch" />
</el-form-item> </el-form-item> -->
<el-form-item label="时间范围"> <el-form-item label="时间范围">
<el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期" <el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" /> end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="handleBerthingSearch">搜索</el-button> <el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button>
<el-button @click="resetBerthingQuery">重置</el-button> <el-button @click="resetBerthingQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<!-- 数据表格 -->
<el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
<el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label"
:width="column.width" :formatter="column.formatter" />
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize"
:page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" />
</div>
<!-- </el-tab-pane> -->
<!-- <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
<!-- 数据表格 -->
<el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
<el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop"
:label="column.label" :width="column.width" :formatter="column.formatter" />
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination v-model:current-page="berthingQueryParams.pageNo"
v-model:page-size="berthingQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" :total="berthingTotal"
layout="total, sizes, prev, pager, next, jumper" @size-change="handleBerthingSizeChange"
@current-change="handleBerthingCurrentChange" />
</div>
</el-tab-pane>
<!-- 船舶连接岸电箱历史记录 tab -->
<el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
<!-- 搜索和筛选区域 -->
<div class="filter-container"> <div class="filter-container">
<el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline> <el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline>
<el-form-item label="关键字"> <el-form-item label="关键字">
@ -57,23 +61,23 @@
</el-form> </el-form>
</div> </div>
<!-- 数据表格 -->
<el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%" <el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%"
v-loading="shorePowerConnectionLoading"> v-loading="shorePowerConnectionLoading">
<el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop" <el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop"
:label="column.label" :width="column.width" :formatter="column.formatter" /> :label="column.label" :width="column.width" :formatter="column.formatter" />
</el-table> </el-table>
<!-- 分页 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo" <el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo"
v-model:page-size="shorePowerConnectionQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" v-model:page-size="shorePowerConnectionQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]"
:total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper" :total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleShorePowerConnectionSizeChange" @size-change="handleShorePowerConnectionSizeChange"
@current-change="handleShorePowerConnectionCurrentChange" /> @current-change="handleShorePowerConnectionCurrentChange" />
</div> </div> -->
</el-tab-pane> <!-- </el-tab-pane> -->
</el-tabs> <!-- </el-tabs> -->
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
@ -99,7 +103,7 @@ import {
ElTableColumn, ElTableColumn,
ElPagination ElPagination
} from 'element-plus' } from 'element-plus'
import { CARGO_CATEGORY, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable'; import { CARGO_CATEGORY, FACILITY_TYPE, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable';
import { formatDuration, formatTimestamp, showStatus } from './utils'; import { formatDuration, formatTimestamp, showStatus } from './utils';
import { RealtimeDeviceData } from '@/types/shorepower'; import { RealtimeDeviceData } from '@/types/shorepower';
@ -107,7 +111,7 @@ import { RealtimeDeviceData } from '@/types/shorepower';
interface Props { interface Props {
modelValue: boolean modelValue: boolean
berthingData?: any[] berthingData?: any[]
shipId?: number shipParam?: { type: number, ids: number[] | null, shipId: number | null }
shorePowerConnectionData?: any[] shorePowerConnectionData?: any[]
realtimeDeviceData: RealtimeDeviceData[]; realtimeDeviceData: RealtimeDeviceData[];
} }
@ -133,13 +137,14 @@ const visible = computed({
set: (val) => emit('update:modelValue', val) set: (val) => emit('update:modelValue', val)
}) })
const activeTab = ref('shipBerthing')
// 船舶靠泊历史记录相关数据 // 船舶靠泊历史记录相关数据
const berthingQueryParams = ref({ const berthingQueryParams = ref({
keyword: '', // keyword: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
ids: null as number[] | null,
shipId: null as number | null,
type: 1 as number | null,
pageNo: 1, pageNo: 1,
pageSize: 10 pageSize: 10
}) })
@ -225,41 +230,25 @@ const berthingColumns = ref([
]) ])
// 船舶连接岸电箱历史记录相关数据
const shorePowerConnectionQueryParams = ref({
keyword: '',
startTime: '',
endTime: '',
pageNo: 1,
pageSize: 10
})
const shorePowerConnectionDateRange = ref<[string, string]>(['', ''])
const shorePowerConnectionLoading = ref(false)
const shorePowerConnectionTotal = ref(0) const shorePowerConnectionTotal = ref(0)
// 船舶连接岸电箱历史记录表格数据 // 处理日期变化
const shorePowerConnectionTableData = computed(() => { const handleBerthingDateChange = (val: [string, string]) => {
// 在实际应用中，这里应该是从服务器获取的数据 if (val && val.length === 2) {
// 当前为了演示，我们使用传入的模拟数据 berthingQueryParams.value.startTime = val[0] + ' 00:00:00'
return props.shorePowerConnectionData?.slice( berthingQueryParams.value.endTime = val[1] + ' 23:59:59'
(shorePowerConnectionQueryParams.value.pageNo - 1) * shorePowerConnectionQueryParams.value.pageSize, } else {
shorePowerConnectionQueryParams.value.pageNo * shorePowerConnectionQueryParams.value.pageSize berthingQueryParams.value.startTime = ''
) || [] berthingQueryParams.value.endTime = ''
}) }
handleShorePowerConnectionSearch()
// 船舶连接岸电箱历史记录表格列 }
const shorePowerConnectionColumns = ref([
{ prop: 'name', label: 'name', width: 80 },
/* { prop: 'shorePowerName', label: '岸电箱名称', width: 150 },
{ prop: 'time', label: '连接时间', width: 180 },
{ prop: 'duration', label: '连接时长(小时)', width: 120 },
{ prop: 'powerConsumption', label: '用电量(kWh)', width: 120 },
{ prop: 'status', label: '状态', width: 100 } */
])
// 处理关闭 // 处理关闭
const handleClose = () => { const handleClose = () => {
berthingQueryParams.value.ids = null
berthingQueryParams.value.shipId = null
berthingQueryParams.value.type = 1
visible.value = false visible.value = false
} }
@ -270,69 +259,41 @@ const handleBerthingSearch = () => {
} }
const resetBerthingQuery = () => { const resetBerthingQuery = () => {
berthingQueryParams.value.keyword = '' // berthingQueryParams.value.keyword = ''
berthingQueryParams.value.startTime = '' berthingQueryParams.value.startTime = ''
berthingQueryParams.value.endTime = '' berthingQueryParams.value.endTime = ''
berthingDateRange.value = ['', ''] berthingDateRange.value = ['', '']
berthingQueryParams.value.pageNo = 1 berthingQueryParams.value.pageNo = 1
handleBerthingSearch() handleShorePowerConnectionSearch()
} }
const handleBerthingDateChange = (val: [string, string] | null) => {
if (val && val[0] && val[1]) {
berthingQueryParams.value.startTime = val[0]
berthingQueryParams.value.endTime = val[1]
} else {
berthingQueryParams.value.startTime = ''
berthingQueryParams.value.endTime = ''
}
}
const handleBerthingSizeChange = (val: number) => { const handleBerthingSizeChange = (val: number) => {
berthingQueryParams.value.pageSize = val berthingQueryParams.value.pageSize = val
berthingQueryParams.value.pageNo = 1 berthingQueryParams.value.pageNo = 1
handleBerthingSearch() handleShorePowerConnectionSearch()
} }
const handleBerthingCurrentChange = (val: number) => { const handleBerthingCurrentChange = (val: number) => {
berthingQueryParams.value.pageNo = val berthingQueryParams.value.pageNo = val
handleBerthingSearch() handleShorePowerConnectionSearch()
} }
// 船舶连接岸电箱历史记录相关方法 // 船舶连接岸电箱历史记录相关方法
const handleShorePowerConnectionSearch = () => { const handleShorePowerConnectionSearch = () => {
// 发送搜索事件给父组件 // const
emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value }) const params = {
} // shipId: berthingQueryParams.value.shipId,
// ids: berthingQueryParams.value.ids,
const resetShorePowerConnectionQuery = () => { ...(berthingQueryParams.value.ids ? { ids: berthingQueryParams.value.ids } : {}),
shorePowerConnectionQueryParams.value.keyword = '' ...(berthingQueryParams.value.shipId ? { shipId: berthingQueryParams.value.shipId } : {}),
shorePowerConnectionQueryParams.value.startTime = '' type: berthingQueryParams.value.type,
shorePowerConnectionQueryParams.value.endTime = '' pageNo: 1,
shorePowerConnectionDateRange.value = ['', ''] pageSize: 9999 // 请求足够多的数据，以便在前端进行筛选和分页
shorePowerConnectionQueryParams.value.pageNo = 1
handleShorePowerConnectionSearch()
}
const handleShorePowerConnectionDateChange = (val: [string, string] | null) => {
if (val && val[0] && val[1]) {
shorePowerConnectionQueryParams.value.startTime = val[0]
shorePowerConnectionQueryParams.value.endTime = val[1]
} else {
shorePowerConnectionQueryParams.value.startTime = ''
shorePowerConnectionQueryParams.value.endTime = ''
} }
} handleGetShipHistortyList(params)
// 发送搜索事件给父组件
const handleShorePowerConnectionSizeChange = (val: number) => { // emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
shorePowerConnectionQueryParams.value.pageSize = val
shorePowerConnectionQueryParams.value.pageNo = 1
handleShorePowerConnectionSearch()
}
const handleShorePowerConnectionCurrentChange = (val: number) => {
shorePowerConnectionQueryParams.value.pageNo = val
handleShorePowerConnectionSearch()
} }
// 监听数据变化并更新总数 // 监听数据变化并更新总数
@ -353,36 +314,95 @@ watch(
) )
watch( watch(
() => props.shipId, () => props.shipParam,
(newShipId) => { (newShipParam) => {
if (newShipId) { if (newShipParam) {
// 当船舶ID变化时，触发搜索 // 当船舶ID变化时，触发搜索
berthingTableData.value = [] berthingTableData.value = []
handleGetShipHistortyList(newShipId) if (newShipParam.shipId) {
berthingQueryParams.value.shipId = newShipParam.shipId
} else {
berthingQueryParams.value.shipId = null
}
if (newShipParam.ids && newShipParam.ids.length > 0) {
berthingQueryParams.value.ids = newShipParam.ids
} else {
berthingQueryParams.value.ids = null
}
berthingQueryParams.value.type = newShipParam.type
// handleGetShipHistortyList()
handleShorePowerConnectionSearch()
} }
} }
) )
const handleGetShipHistortyList = async (id) => { const handleGetShipHistortyList = async (param) => {
console.log('handleGetShipHistortyList', id) console.log('handleGetShipHistortyList', param)
if (!id) return; if (!param) return;
// try { // try {
const res = await MapApi.getShipHistoryPage({ const res = await MapApi.getShipHistoryPage({
shipId: parseInt(id, 10), // 将字符串转换为数字 /* shipId: param.id, // 将字符串转换为数字
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
type: 4, type: param.type, */
// ids: [parseInt(id, 10)] // ids: [parseInt(id, 10)]
...param
}) })
console.log(res); console.log(res);
const buildData = await Promise.all(res.list.map(async item => ({
// 本地日期筛选逻辑
let filteredList = [...res.list];
if (berthingQueryParams.value.startTime || berthingQueryParams.value.endTime) {
filteredList = filteredList.filter(item => {
const berthTime = item.usageRecordInfo?.actualBerthTime;
if (!berthTime) return false;
const berthTimestamp = new Date(berthTime).getTime();
const startTime = berthingQueryParams.value.startTime ? new Date(berthingQueryParams.value.startTime).getTime() : 0;
const endTime = berthingQueryParams.value.endTime ? new Date(berthingQueryParams.value.endTime).getTime() : Infinity;
// 检查靠泊时间是否在筛选范围内
if (berthTimestamp >= startTime && berthTimestamp <= endTime) {
return true;
}
// 如果有离泊时间，也检查离泊时间是否在筛选范围内
if (item.usageRecordInfo?.actualDepartureTime) {
const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
if (departureTimestamp >= startTime && departureTimestamp <= endTime) {
return true;
}
}
// 检查筛选范围是否与靠泊-离泊时间段有重叠
if (item.usageRecordInfo?.actualDepartureTime) {
const departureTimestamp = new Date(item.usageRecordInfo.actualDepartureTime).getTime();
if (berthTimestamp <= endTime && departureTimestamp >= startTime) {
return true;
}
}
return false;
});
}
// 前端分页逻辑
const totalFiltered = filteredList.length;
const pageNo = berthingQueryParams.value.pageNo;
const pageSize = berthingQueryParams.value.pageSize;
const startIndex = (pageNo - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedList = filteredList.slice(startIndex, endIndex);
const buildData = await Promise.all(paginatedList.map(async item => ({
...item, ...item,
}))) })))
berthingTableData.value = buildData berthingTableData.value = buildData
berthingTotal.value = totalFiltered
} }
onMounted(() => { onMounted(() => {
console.log('页面加载了！') console.log('页面加载了！')
console.log('props.shipId', props.shipId) // console.log('props.shipId', props.shipId)
}) })
</script> </script>

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

@ -713,7 +713,7 @@ interface ShipDataItem {
} }
interface Props { interface Props {
shipData: ShipDataItem[]; shipData: ShipRespVo[];
} }
const props = defineProps<Props>() const props = defineProps<Props>()
@ -864,7 +864,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.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) { if (applyInfo && 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 +931,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.reason != 0) { } else if (applyInfo && 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' },
@ -984,7 +984,7 @@ const buildData = async (ship: ShipDataItem) => {
applyInfo: ship.applyInfo, applyInfo: ship.applyInfo,
usageRecordInfo: ship.usageRecordInfo, usageRecordInfo: ship.usageRecordInfo,
shipBasicInfo: ship.shipBasicInfo, shipBasicInfo: ship.shipBasicInfo,
name: ship.shipBasicInfo.name, name: ship?.shipBasicInfo?.name,
wharf: findNameById(ship.applyInfo?.arrivalDock.toString(), dockIdAndNameList.value), wharf: findNameById(ship.applyInfo?.arrivalDock.toString(), dockIdAndNameList.value),
berth: findNameById(ship.applyInfo?.arrivalBerth.toString(), berthIdAndNameList.value), berth: findNameById(ship.applyInfo?.arrivalBerth.toString(), berthIdAndNameList.value),
beginTime: ship.usageRecordInfo?.beginTime, beginTime: ship.usageRecordInfo?.beginTime,
@ -1007,7 +1007,7 @@ onMounted(async () => {
berthIdAndNameList.value = await MapApi.getBerthIdAndNameList() berthIdAndNameList.value = await MapApi.getBerthIdAndNameList()
dockIdAndNameList.value = await MapApi.getDockIdAndNameList() dockIdAndNameList.value = await MapApi.getDockIdAndNameList()
harborDistrictIdAndNameList.value = await MapApi.getHarborDistrictIdAndNameList() harborDistrictIdAndNameList.value = await MapApi.getHarborDistrictIdAndNameList()
console.log('props.shipData', props.shipData)
// 构建本地数据，使用Promise.all等待所有异步操作完成 // 构建本地数据，使用Promise.all等待所有异步操作完成
localShipData.value = await Promise.all(props.shipData.map(ship => buildData(ship))); localShipData.value = await Promise.all(props.shipData.map(ship => buildData(ship)));
}) })

4
public/map/components/ShorePowerHistoryDialog.vue
View File

@ -305,11 +305,11 @@ const handleGetShorePowerHistoryList = async (id) => {
if (!id) return; if (!id) return;
// try { // try {
const res = await MapApi.getShipHistoryPage({ const res = await MapApi.getShipHistoryPage({
shipId: parseInt(id, 10), // 将字符串转换为数字 // shipId: parseInt(id, 10), // 将字符串转换为数字
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
type: 5, type: 5,
// ids: [parseInt(id, 10)] ids: [parseInt(id, 10)]
}) })
console.log(res); console.log(res);
const buildData = await Promise.all(res.list.map(async item => ({ const buildData = await Promise.all(res.list.map(async item => ({

874
public/map/components/ShorePowerUsage.vue
View File

File diff suppressed because it is too large

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

File diff suppressed because it is too large

13
public/map/components/charts/WaveLineChart.vue
View File

@ -62,6 +62,15 @@ const updateChart = () => {
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: props.magnifyMode ? 20 : 12 fontSize: props.magnifyMode ? 20 : 12
},
formatter: (params: any) => {
// params是一个数组，包含当前鼠标位置的所有系列数据
if (params && params.length > 0) {
const time = params[0].name; // 获取时间
const value = params[0].value; // 获取数据值
return `时间: ${time}<br/>数值: ${value}`;
}
return '';
} }
}, },
xAxis: { xAxis: {
@ -179,6 +188,10 @@ const updateChart = () => {
width: props.magnifyMode ? 2 : 1, width: props.magnifyMode ? 2 : 1,
type: 'dashed' type: 'dashed'
}, },
// 辅助系列不显示在tooltip中
tooltip: {
show: false
},
// 辅助系列不显示数据标签以避免重叠 // 辅助系列不显示数据标签以避免重叠
label: { label: {
show: false show: false

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

@ -72,3 +72,12 @@ export const BERTH_TYPE = [
{ label: '左舷停舶', value: 'left' }, { label: '左舷停舶', value: 'left' },
{ label: '右舷停舶', value: 'right' }, { label: '右舷停舶', value: 'right' },
] ]
// 设施类型
export const FACILITY_TYPE = [
{ label: '港区', value: 1 },
{ label: '码头', value: 2 },
{ label: '岸电设施', value: 3 },
{ label: '泊位', value: 4 },
{ label: '用电接口', value: 5 },
]

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

@ -191,4 +191,52 @@ export function getValueById<T extends { id: number | string }, K extends keyof
// 否则返回原始值 // 否则返回原始值
return value as any; return value as any;
}
export function parseRangeToTimestamp(range: string[], granularity: 'year' | 'month' | 'week' | 'day'): [number, number] | null {
if (!range || range.length !== 2) return null;
const [startStr, endStr] = range;
let startDate: Date;
let endDate: Date;
switch (granularity) {
case 'year':
// '2023' → 2023-01-01 00:00:00 ~ 2023-12-31 23:59:59
startDate = new Date(`${startStr}-01-01T00:00:00`);
endDate = new Date(`${endStr}-12-31T23:59:59`);
break;
case 'month':
// '2023-05' → 2023-05-01 00:00:00 ~ 2023-05-31 23:59:59
startDate = new Date(`${startStr}-01T00:00:00`);
// 获取该月最后一天
const yearMonth = startStr.split('-');
const nextMonth = new Date(+yearMonth[0], +yearMonth[1], 0); // 本月最后一天
endDate = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), nextMonth.getDate(), 23, 59, 59);
// 同样处理 endStr
const endYearMonth = endStr.split('-');
const endNextMonth = new Date(+endYearMonth[0], +endYearMonth[1], 0);
endDate = new Date(endNextMonth.getFullYear(), endNextMonth.getMonth(), endNextMonth.getDate(), 23, 59, 59);
break;
case 'week':
case 'day':
default:
// '2023-05-01' → 2023-05-01 00:00:00 ~ 2023-05-01 23:59:59（week 实际也是日期）
startDate = new Date(`${startStr}T00:00:00`);
endDate = new Date(`${endStr}T23:59:59`);
break;
}
const start = startDate.getTime();
const end = endDate.getTime();
if (isNaN(start) || isNaN(end)) {
console.error('日期解析失败:', range, granularity);
return null;
}
return [start, end];
} }

309
public/map/index.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<div> <div>
<PublicMapComponents ref="mapComponentRef" class="map-base" /> <PublicMapComponents ref="mapComponentRef" class="map-base" :shore-power-list="ShorePowerList"
:ship-data-list="shipDataList" v-if="dataLoad" :on-instance-click="handleElectricalBoxClick" />
<div v-else class="loading">
<div style="margin: 0 auto">
loading
</div>
</div>
<div class="head"> <div class="head">
<div class="head-title"> <div class="head-title">
<span>曹妃甸港区船舶岸电监管平台</span> <span>曹妃甸港区船舶岸电监管平台</span>
@ -20,7 +26,8 @@
<!-- 港区概览 --> <!-- 港区概览 -->
<template v-if="activeHeadGroup === 0"> <template v-if="activeHeadGroup === 0">
<PortOverview :ship-status-data="shipStatusData" :shore-power-status-data="shorePowerStatusData" <PortOverview :ship-status-data="shipStatusData" :shore-power-status-data="shorePowerStatusData"
@item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" /> @item-click="handleSwitch" :realtime-device-data="realtimeDeviceData" :shore-power-list="ShorePowerList"
:ship-data-list="shipDataList" />
</template> </template>
<!-- 港口岸电使用情况 --> <!-- 港口岸电使用情况 -->
@ -31,64 +38,197 @@
<!-- 港口企业岸电使用 --> <!-- 港口企业岸电使用 -->
<template v-if="activeHeadGroup === 2"> <template v-if="activeHeadGroup === 2">
<CompanyShorePower :companyComparisonData="companyComparisonData" /> <CompanyShorePower :companyComparisonData="companyComparisonData" :realtime-device-data="realtimeDeviceData" />
</template> </template>
<!-- 船舶岸电使用情况 --> <!-- 船舶岸电使用情况 -->
<template v-if="activeHeadGroup === 3"> <template v-if="activeHeadGroup === 3">
<ShipShorePower :ship-data="shipStatusData" :selected-ship="selectedShip" @item-click="handleSwitch" /> <ShipShorePower :ship-data="shipDataList" :selected-ship="selectedShip" @item-click="handleSwitch" />
</template> </template>
<template v-if="activeHeadGroup === 4"> <template v-if="activeHeadGroup === 4">
<div class="right" style="width: 500px;"> <div v-if="selectedElectricalBox.type" class="right"
<div class="card digital-twin-card--deep-blue"> :style="`width: ${selectedElectricalBox.type === 'ship' ? '45%' : '20%'}`">
<div class="card-title"> <div v-if="selectedElectricalBox.type === 'ship'" class="right-two-row">
<div class="vertical-line"></div> <div class="card digital-twin-card--deep-blue">
<img src="@/assets/svgs/data.svg" class="title-icon" /> <div class="card-title">
<span class="title-text">岸电箱详情</span> <el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
<el-button class="close-btn" size="small" @click="closeElectricalBoxInfo" <div class="vertical-line"></div>
style="margin-left: auto;">×</el-button> <img src="@/assets/svgs/data.svg" class="title-icon" />
</div> <span class="title-text">船舶详情</span>
<div class="card-content"> </div>
<div class="ship-detail"> <div class="card-content">
<div class="detail-item"> <div class="ship-detail">
<span class="label">名称:</span> <div class="detail-item">
<span class="value">{{ selectedElectricalBox?.name || '无' }}</span> <span class="label">名称:</span>
<span class="value">{{ selectedElectricalBox.data.shipBasicInfo.name + '-' +
selectedElectricalBox.data.shipBasicInfo.nameEn
}}</span>
</div>
<!-- <div class="detail-item">
<span class="label">英文船名:</span>
<span class="value">{{ selectedItem.shipBasicInfo.nameEn }}</span>
</div> -->
<!-- <div class="detail-item">
<span class="label">船舶呼号:</span>
<span class="value">{{ selectedItem.shipBasicInfo.callSign }}</span>
</div> -->
<div class="detail-item">
<span class="label">长度:</span>
<span class="value">{{ selectedElectricalBox.data.shipBasicInfo.length }} 米</span>
</div>
<div class="detail-item">
<span class="label">宽度:</span>
<span class="value">{{ selectedElectricalBox.data.shipBasicInfo.width }} 米</span>
</div>
<div class="detail-item">
<span class="label">吨位:</span>
<span class="value">{{ selectedElectricalBox.data.shipBasicInfo.tonnage }} 吨</span>
</div>
<div class="detail-item">
<span class="label">满载吃水深度:</span>
<span class="value">{{ selectedElectricalBox.data.shipBasicInfo.fullLoadDraft }} 米</span>
</div>
<div class="detail-item">
<span class="label">电压:</span>
<span class="value">{{ getValueById(realtimeDeviceData,
selectedElectricalBox.data.shorePower.voltageDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">电流:</span>
<span class="value">{{ getValueById(realtimeDeviceData,
selectedElectricalBox.data.shorePower.currentDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">频率:</span>
<span class="value">{{ getValueById(realtimeDeviceData,
selectedElectricalBox.data.shorePower.frequencyDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">靠泊状态:</span>
<span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.status,
SHORE_POWER_STATUS,
) }}</span>
</div>
<div class="detail-item">
<span class="label">靠泊类型:</span>
<span class="value">{{ getOperationTypeLabel(selectedElectricalBox.data.shorePowerAndShip.type,
BERTH_TYPE)
}}</span>
</div>
<div class="detail-item">
<span class="label">停泊时间:</span>
<span class="value">{{
formatTimestamp(selectedElectricalBox.data?.usageRecordInfo?.actualDepartureTime) }}</span>
</div>
<!-- <div class="detail-item">
<span class="label">航运单位:</span>
<span class="value">{{ shipSelectedItem.shipBasicInfo.shippingCompany }}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">位置:</span> <span class="label">岸电联系人:</span>
<span class="value">{{ selectedElectricalBox?.location || '曹妃甸港区华能码头' }}</span> <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">状态:</span> <span class="label">联系方式:</span>
<span class="value">{{ selectedElectricalBox?.status || '在线' }}</span> <span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
</div> </div>
<!-- 当前使用数据 -->
<div class="section-title">当前使用数据</div>
<div class="detail-item"> <div class="detail-item">
<span class="label">当前使用功率:</span> <span class="label">船检登记号:</span>
<span class="value">{{ selectedElectricalBox?.currentPower || '120' }} kW</span> <span class="value">{{ shipSelectedItem.shipBasicInfo.inspectionNo }}</span>
</div> </div>
<div class="detail-item"> <div class="detail-item">
<span class="label">当前使用电量:</span> <span class="label">创建时间:</span>
<span class="value">{{ selectedElectricalBox?.currentEnergy || '45.5' }} kWh</span> <span class="value">{{ new Date(shipSelectedItem.shipBasicInfo.createTime).toLocaleString() }}</span>
</div> -->
</div> </div>
</div>
<!-- 累计历史数据 --> </div>
<div class="section-title">累计历史数据</div> <div class="card digital-twin-card--deep-blue">
<div class="detail-item"> <div class="card-title">
<span class="label">累计历史用电:</span> <div class="vertical-line"></div>
<span class="value">{{ selectedElectricalBox?.totalEnergy || '1250.8' }} kWh</span> <img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">续</span>
</div>
<div class="card-content">
<div class="ship-detail">
<div class="detail-item">
<span class="label">岸电使用时长:</span>
<span class="value">{{ formatDuration(selectedElectricalBox?.data?.usageRecordInfo?.beginTime,
selectedElectricalBox?.data?.usageRecordInfo?.endTime
) }}</span>
</div>
<div v-if="selectedElectricalBox?.data?.applyInfo?.reason === 0" class="detail-item">
<span class="label">岸电使用时长:</span>
<span class="value">{{ showStatus(selectedElectricalBox?.data, realtimeDeviceData)?.status }}</span>
</div>
<div v-if="selectedElectricalBox?.data?.applyInfo?.reason != 0" class="detail-item">
<span class="label">未使用岸电原因:</span>
<span class="value">{{ getOperationTypeLabel(selectedElectricalBox?.data?.applyInfo?.reason,
UNUSED_SHORE_POWER_REASON) }}</span>
</div>
</div> </div>
<div class="detail-item"> </div>
<span class="label">累计服务次数:</span> </div>
<span class="value">{{ selectedElectricalBox?.serviceCount || '86' }} 次</span> </div>
<div v-if="selectedElectricalBox.type === 'shorepower_box'" class="right-two-row">
<div class="card digital-twin-card--deep-blue">
<div class="card-title">
<el-button class="close-btn" size="small" type="text" @click="closeElectricalBoxInfo">×</el-button>
<div class="vertical-line"></div>
<img src="@/assets/svgs/data.svg" class="title-icon" />
<span class="title-text">岸电箱详情</span>
</div>
<div class="card-content">
<div class="ship-detail">
<div class="detail-item">
<span class="label">名称:</span>
<span class="value">{{ selectedElectricalBox.data?.name }}</span>
</div>
<div class="detail-item">
<span class="label">位置:</span>
<span class="value">{{ selectedElectricalBox.data?.position }}</span>
</div>
<div class="detail-item">
<span class="label">电压:</span>
<span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.voltage }}</span>
</div>
<div class="detail-item">
<span class="label">频率:</span>
<span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.frequency }} </span>
</div>
<div class="detail-item">
<span class="label">容量:</span>
<span class="value">{{ selectedElectricalBox.data?.shorePowerEquipmentInfo?.capacity }}</span>
</div>
<div class="detail-item">
<span class="label">当前电压:</span>
<span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.voltageDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">当前电流:</span>
<span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.currentDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">当前频率:</span>
<span class="value">{{ getValueById(realtimeDeviceData, selectedElectricalBox.data?.frequencyDeviceId,
'measureValue') }}</span>
</div>
<div class="detail-item">
<span class="label">当前总用量:</span>
<span class="value">{{ getValueById(realtimeDeviceData,
selectedElectricalBox.data?.totalPowerDeviceId,
'measureValue') }}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
@ -104,7 +244,9 @@ import ShipShorePower from './components/ShipShorePower.vue'
import dayjs from 'dayjs' 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 } from '@/types/shorepower' import { RealtimeDeviceData, ShipBasicInfoRespVO, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'
import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, SHORE_POWER_STATUS } from './components/dictionaryTable'
import { formatDuration, formatTimestamp, getValueById, showStatus } from './components/utils'
defineOptions({ name: 'PublicMap' }) defineOptions({ name: 'PublicMap' })
let getRealtimeIntervalId: NodeJS.Timeout | null = null let getRealtimeIntervalId: NodeJS.Timeout | null = null
const headGroupList = ref<{ value: number, label: string }[]>([ const headGroupList = ref<{ value: number, label: string }[]>([
@ -133,8 +275,8 @@ const selectHeadGroup = async (value: number) => {
} }
activeHeadGroup.value = value activeHeadGroup.value = value
if (value === 1) { if (value === 1) {
const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value) // const deviceStatus = await MapApi.getDeviceStatusByIds(totalPowerDeviceId.value)
console.log('deviceStatus', deviceStatus) // console.log('deviceStatus', deviceStatus)
} }
} }
@ -145,6 +287,11 @@ const currentTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
// 实时设备采集值 // 实时设备采集值
const realtimeDeviceData = ref<RealtimeDeviceData[]>([]) const realtimeDeviceData = ref<RealtimeDeviceData[]>([])
const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([])
const shipDataList = ref<ShipRespVo[]>([])
const dataLoad = ref<boolean>(false)
// 自动滚动相关变量 // 自动滚动相关变量
const scrollContainerRef = ref<HTMLElement | null>(null) const scrollContainerRef = ref<HTMLElement | null>(null)
@ -159,7 +306,10 @@ const updateTime = () => {
} }
const selectedShip = ref(null) const selectedShip = ref(null)
const selectedElectricalBox = ref(null) const selectedElectricalBox = ref({
type: '',
data: null
})
/* 回到初始视角 */ /* 回到初始视角 */
const handleOverviewClick = () => { const handleOverviewClick = () => {
@ -170,22 +320,33 @@ const handleOverviewClick = () => {
const handleSwitch = (item) => { const handleSwitch = (item) => {
console.log(item) console.log(item)
// selectedShip.value = item // selectedShip.value = item
mapComponentRef.value?.switchModelView(item.modelInstance) mapComponentRef.value?.switchModelView(item)
} }
/* const handleFlyToitem = (item) => {
mapComponentRef.value?.switchModelView(item)
} */
// 处理岸电箱点击事件 // 处理岸电箱点击事件
const handleElectricalBoxClick = (data) => { const handleElectricalBoxClick = (data) => {
activeHeadGroup.value = 4 activeHeadGroup.value = 4
console.log('岸电箱被点击:', data); console.log('岸电箱被点击:', data);
// 设置选中的岸电箱数据 // 设置选中的岸电箱数据
selectedElectricalBox.value = data; // selectedElectricalBox.value = data;
selectedElectricalBox.value = {
type: data.type,
data: data.data
}
// 这里可以添加更多的处理逻辑，比如切换到特定的视图等 // 这里可以添加更多的处理逻辑，比如切换到特定的视图等
}; };
// 关闭岸电箱详情面板 // 关闭岸电箱详情面板
const closeElectricalBoxInfo = () => { const closeElectricalBoxInfo = () => {
activeHeadGroup.value = -1; activeHeadGroup.value = -1;
selectedElectricalBox.value = null; selectedElectricalBox.value = {
type: '',
data: null
};
}; };
// 启动定时器更新时间 // 启动定时器更新时间
@ -195,6 +356,7 @@ onMounted(() => {
// 设置岸电箱点击回调 // 设置岸电箱点击回调
if (mapComponentRef.value) { if (mapComponentRef.value) {
console.log('mapComponentRef.value', mapComponentRef.value)
mapComponentRef.value.setElectricalBoxClickCallback(handleElectricalBoxClick); mapComponentRef.value.setElectricalBoxClickCallback(handleElectricalBoxClick);
} }
}) })
@ -341,10 +503,33 @@ const handleGetRealtimeAllData = async () => {
} }
const handleGetStorePower = async () => {
// console.log('loading')
const harborDistrictId = 1
const harborDistrictList = await HARBOR_DISTRICT()
const dockDistrictList = await DOCK_DISTRICT()
const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
ShorePowerList.value = res.map(item => ({
...item,
position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
}))
// console.log('11', res)
}
const handleGetShipData = async () => {
const shipData = await MapApi.getShipInfo({
harborDistrictId: 1
})
shipDataList.value = shipData
}
// 监听组件挂载 // 监听组件挂载
onMounted(() => { onMounted(async () => {
// 延迟启动滚动，确保DOM已渲染 // 延迟启动滚动，确保DOM已渲染
handleGetRealtimeAllData() await handleGetRealtimeAllData()
await handleGetStorePower()
await handleGetShipData()
dataLoad.value = true
getRealtimeIntervalId = setInterval(() => { getRealtimeIntervalId = setInterval(() => {
handleGetRealtimeAllData() handleGetRealtimeAllData()
}, 5000) }, 5000)
@ -620,6 +805,27 @@ const shipStatusData = computed(() => {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
position: relative;
.close-btn {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: #FFF;
font-size: 20px;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
color: #ff4d4f;
background-color: rgba(255, 77, 79, 0.1);
}
}
.vertical-line { .vertical-line {
width: 2px; width: 2px;
@ -707,6 +913,13 @@ const shipStatusData = computed(() => {
white-space: nowrap; white-space: nowrap;
} }
.right-two-row {
display: flex;
gap: 10px;
height: 100%;
}
.ship-name { .ship-name {
width: 20%; width: 20%;
} }

Write Preview
Loading…
Cancel
Save