33 changed files with 7875 additions and 1478 deletions
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
@ -0,0 +1,256 @@ |
|||||
|
<template> |
||||
|
<div class="company-shore-power"> |
||||
|
<div class="left" style="width: 1000px;"> |
||||
|
<!-- 码头信息卡片 --> |
||||
|
<div class="card digital-twin-card--deep-blue"> |
||||
|
<div class="card-title" style="display: flex; align-items: center; justify-content: space-between;"> |
||||
|
<div class="card-title"> |
||||
|
<div class="vertical-line"></div> |
||||
|
<img src="@/assets/svgs/data.svg" class="title-icon" /> |
||||
|
<span class="title-text">码头与泊位信息</span> |
||||
|
</div> |
||||
|
<!-- <div> |
||||
|
<el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" |
||||
|
format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="date-range-picker" /> |
||||
|
</div> --> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="card-content"> |
||||
|
<div v-for="company in companyComparisonData" :key="company.name" class="company-section"> |
||||
|
<div class="company-header"> |
||||
|
<div class="company-name">{{ company.name }}</div> |
||||
|
<div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div> |
||||
|
</div> |
||||
|
<div class="overview-grid"> |
||||
|
<div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item" |
||||
|
@click="showShorePowerHistory(berth)"> |
||||
|
<div class="overview-value">{{ berth.measureValue?.toFixed(2) |
||||
|
|| 0 }}</div> |
||||
|
|
||||
|
<div class="overview-label">{{ berth.name }}</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<ship-history-dialog v-if="historyVisible.visible" v-model="historyVisible.visible" |
||||
|
:ship-param="historyVisible.searchParams" :realtime-device-data="realtimeDeviceData" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue' |
||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
import ShipHistoryDialog from './ShipHistoryDialog.vue'; |
||||
|
import { RealtimeDeviceData } from '@/types/shorepower'; |
||||
|
// 定义组件属性 |
||||
|
interface ChartDataItem { |
||||
|
name: string; |
||||
|
value?: number; |
||||
|
measureValue?: number; |
||||
|
children?: ChartDataItem[]; |
||||
|
} |
||||
|
|
||||
|
const historyVisible = ref({ |
||||
|
visible: false, |
||||
|
searchParams: { |
||||
|
shipId: 0 as number | null, |
||||
|
ids: [] as number[] | null, |
||||
|
type: 1 as number |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 计算总量的函数 |
||||
|
const calculateTotal = (children?: ChartDataItem[]) => { |
||||
|
if (!children || children.length === 0) return 0; |
||||
|
return children.reduce((total, item) => { |
||||
|
return total + (item.measureValue || 0); |
||||
|
}, 0); |
||||
|
}; |
||||
|
|
||||
|
// 显示岸电箱历史记录 |
||||
|
const showShorePowerHistory = (berth: ChartDataItem) => { |
||||
|
console.log(berth) |
||||
|
// console.log('shorepower', shorepower) |
||||
|
// currentShorePower.value = shorepower |
||||
|
/* shorePowerHistoryVisible.value = { |
||||
|
visible: true, |
||||
|
shorePowerId: shorepower.id || 0 |
||||
|
} */ |
||||
|
historyVisible.value = { |
||||
|
visible: true, |
||||
|
searchParams: { |
||||
|
shipId: null, |
||||
|
ids: [berth.id], |
||||
|
type: 4, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
interface Props { |
||||
|
companyComparisonData?: ChartDataItem[]; |
||||
|
realtimeDeviceData: RealtimeDeviceData[]; |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<Props>() |
||||
|
const companyComparisonData = ref<ChartDataItem[]>([]) |
||||
|
const handleGetBuildData = async () => { |
||||
|
const dockList = await MapApi.getDockIdAndNameList() |
||||
|
const berthList = await MapApi.getBerthIdAndNameList() |
||||
|
const buildData = dockList.map(dock => ({ |
||||
|
...dock, |
||||
|
children: berthList.filter(berth => berth.dockId === dock.id).map(berth => ({ |
||||
|
...berth, |
||||
|
...props.realtimeDeviceData.find(item => (item.id === berth.id) && (item.deviceCode.includes('Kwh'))) |
||||
|
})) |
||||
|
})) |
||||
|
console.log('buildData', buildData) |
||||
|
console.log('props.realtimeDeviceData', props.realtimeDeviceData) |
||||
|
companyComparisonData.value = buildData |
||||
|
/* MapApi.getBerthIdAndNameList().then(res => { |
||||
|
console.log(res) |
||||
|
const buildData = res.map(item => ({ |
||||
|
...item, |
||||
|
children: props.realtimeDeviceData.filter(item => item.id === item.id) |
||||
|
})) |
||||
|
|
||||
|
}) */ |
||||
|
} |
||||
|
watch(() => props.realtimeDeviceData, (newVal) => { |
||||
|
handleGetBuildData() |
||||
|
}) |
||||
|
onMounted(() => { |
||||
|
// console.log(props.realtimeDeviceData) |
||||
|
handleGetBuildData() |
||||
|
|
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.company-shore-power { |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
/* display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
gap: 10px; */ |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
min-height: 0; |
||||
|
padding-bottom: 50px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/* 总览网格样式 */ |
||||
|
.overview-grid { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr 1fr 1fr; |
||||
|
gap: 8px; |
||||
|
padding: 4px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.overview-item { |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 4px; |
||||
|
background-color: rgba(0, 0, 0, 0.2); |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
|
||||
|
.overview-label { |
||||
|
text-align: center; |
||||
|
font-size: 24px; |
||||
|
color: #ccc; |
||||
|
margin-bottom: 2px; |
||||
|
} |
||||
|
|
||||
|
.overview-value { |
||||
|
font-size: 36px; |
||||
|
font-weight: bold; |
||||
|
color: #1296db; |
||||
|
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); |
||||
|
margin-bottom: 2px; |
||||
|
} |
||||
|
|
||||
|
.overview-text { |
||||
|
font-size: 10px; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* 企业区块样式 */ |
||||
|
.company-section { |
||||
|
margin-bottom: 16px; |
||||
|
padding-bottom: 16px; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
|
||||
|
.company-section:last-child { |
||||
|
border-bottom: none; |
||||
|
margin-bottom: 0; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
/* 企业头部样式 */ |
||||
|
.company-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 8px; |
||||
|
padding: 0 4px; |
||||
|
} |
||||
|
|
||||
|
.company-name { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.company-total { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #1296db; |
||||
|
background-color: rgba(18, 150, 219, 0.1); |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
/* 自定义滚动条样式 */ |
||||
|
.card-content::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
.card-content::-webkit-scrollbar-track { |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.card-content::-webkit-scrollbar-thumb { |
||||
|
background: rgba(17, 138, 237, 0.7); |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
.card-content::-webkit-scrollbar-thumb:hover { |
||||
|
background: rgba(17, 138, 237, 1); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,174 @@ |
|||||
|
<template> |
||||
|
<el-dialog v-model="visible" :title="title" width="1200px" :before-close="handleClose"> |
||||
|
<!-- 搜索和筛选区域 --> |
||||
|
<div class="filter-container"> |
||||
|
<el-form :model="queryParams" label-width="80px" inline> |
||||
|
<el-form-item label="关键字"> |
||||
|
<el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="时间范围"> |
||||
|
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button> |
||||
|
<el-button @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"> |
||||
|
<el-table-column v-for="column in tableColumns" :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="queryParams.pageNo" v-model:page-size="queryParams.pageSize" |
||||
|
:page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
||||
|
</div> |
||||
|
|
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="handleClose">关闭</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, watch } from 'vue' |
||||
|
import { ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus' |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
modelValue: boolean |
||||
|
title?: string |
||||
|
columns: Array<{ |
||||
|
prop: string |
||||
|
label: string |
||||
|
width?: string | number |
||||
|
formatter?: (row: any, column: any, cellValue: any) => string |
||||
|
}> |
||||
|
data: any[] |
||||
|
} |
||||
|
|
||||
|
// 定义事件 |
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: boolean): void |
||||
|
(e: 'search', params: any): void |
||||
|
}>() |
||||
|
|
||||
|
// 属性定义 |
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
modelValue: false, |
||||
|
title: '历史记录', |
||||
|
columns: () => [], |
||||
|
data: () => [] |
||||
|
}) |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const visible = computed({ |
||||
|
get: () => props.modelValue, |
||||
|
set: (val) => emit('update:modelValue', val) |
||||
|
}) |
||||
|
|
||||
|
const queryParams = ref({ |
||||
|
keyword: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
pageNo: 1, |
||||
|
pageSize: 10 |
||||
|
}) |
||||
|
|
||||
|
const dateRange = ref<[string, string]>(['', '']) |
||||
|
const loading = ref(false) |
||||
|
const total = ref(0) |
||||
|
|
||||
|
// 表格数据计算属性 |
||||
|
const tableData = computed(() => { |
||||
|
// 在实际应用中，这里应该是从服务器获取的数据 |
||||
|
// 当前为了演示，我们使用传入的模拟数据 |
||||
|
return props.data.slice( |
||||
|
(queryParams.value.pageNo - 1) * queryParams.value.pageSize, |
||||
|
queryParams.value.pageNo * queryParams.value.pageSize |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
// 表格列 |
||||
|
const tableColumns = computed(() => props.columns) |
||||
|
|
||||
|
// 处理关闭 |
||||
|
const handleClose = () => { |
||||
|
visible.value = false |
||||
|
} |
||||
|
|
||||
|
// 处理搜索 |
||||
|
const handleSearch = () => { |
||||
|
// 发送搜索事件给父组件 |
||||
|
emit('search', { ...queryParams.value }) |
||||
|
} |
||||
|
|
||||
|
// 重置查询条件 |
||||
|
const resetQuery = () => { |
||||
|
queryParams.value.keyword = '' |
||||
|
queryParams.value.startTime = '' |
||||
|
queryParams.value.endTime = '' |
||||
|
dateRange.value = ['', ''] |
||||
|
queryParams.value.pageNo = 1 |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
// 处理日期变化 |
||||
|
const handleDateChange = (val: [string, string] | null) => { |
||||
|
if (val && val[0] && val[1]) { |
||||
|
queryParams.value.startTime = val[0] |
||||
|
queryParams.value.endTime = val[1] |
||||
|
} else { |
||||
|
queryParams.value.startTime = '' |
||||
|
queryParams.value.endTime = '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 处理分页大小变化 |
||||
|
const handleSizeChange = (val: number) => { |
||||
|
queryParams.value.pageSize = val |
||||
|
queryParams.value.pageNo = 1 |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
// 处理当前页变化 |
||||
|
const handleCurrentChange = (val: number) => { |
||||
|
queryParams.value.pageNo = val |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化并更新总数 |
||||
|
watch( |
||||
|
() => props.data, |
||||
|
(newData) => { |
||||
|
total.value = newData.length |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.filter-container { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.pagination-container { |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -1,126 +0,0 @@ |
|||||
<template> |
|
||||
<div ref="chartContainer" class="pie-chart-container"></div> |
|
||||
</template> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
|
||||
import * as echarts from 'echarts' |
|
||||
|
|
||||
// 定义组件props |
|
||||
interface Props { |
|
||||
chartData?: Array<{ name: string; value: number }> |
|
||||
title?: string |
|
||||
} |
|
||||
|
|
||||
const props = withDefaults(defineProps<Props>(), { |
|
||||
chartData: () => [], |
|
||||
title: '' |
|
||||
}) |
|
||||
|
|
||||
const chartContainer = ref<HTMLDivElement | null>(null) |
|
||||
let chartInstance: echarts.ECharts | null = null |
|
||||
|
|
||||
// 初始化图表 |
|
||||
const initChart = () => { |
|
||||
if (chartContainer.value) { |
|
||||
chartInstance = echarts.init(chartContainer.value) |
|
||||
updateChart() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 更新图表 |
|
||||
const updateChart = () => { |
|
||||
if (!chartInstance || !props.chartData) return |
|
||||
|
|
||||
const option = { |
|
||||
title: { |
|
||||
// text: props.title, |
|
||||
left: 'center', |
|
||||
textStyle: { |
|
||||
color: '#FFF' |
|
||||
} |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'item' |
|
||||
}, |
|
||||
legend: { |
|
||||
show: true, |
|
||||
type: 'scroll', // 👈 开启可滚动图例 |
|
||||
orient: 'vertical', // 👈 垂直排列 |
|
||||
right: 10, |
|
||||
top: 'center', |
|
||||
textStyle: { |
|
||||
color: '#FFF' |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: props.title, |
|
||||
type: 'pie', |
|
||||
radius: ['30%', '50%'], |
|
||||
center: ['35%', '50%'], // 👈 左移饼图避免与图例重叠 |
|
||||
avoidLabelOverlap: true, |
|
||||
itemStyle: { |
|
||||
borderRadius: 0, |
|
||||
borderColor: '#fff', |
|
||||
borderWidth: 1 |
|
||||
}, |
|
||||
label: { |
|
||||
show: true, |
|
||||
formatter: '{b}\n{d}%', |
|
||||
fontSize: 10 |
|
||||
}, |
|
||||
emphasis: { |
|
||||
label: { |
|
||||
show: true, |
|
||||
fontSize: 14, |
|
||||
fontWeight: 'bold' |
|
||||
} |
|
||||
}, |
|
||||
labelLine: { |
|
||||
show: true |
|
||||
}, |
|
||||
data: props.chartData |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
|
|
||||
chartInstance.setOption(option, true) |
|
||||
} |
|
||||
|
|
||||
// 窗口大小改变时重置图表大小 |
|
||||
const handleResize = () => { |
|
||||
if (chartInstance) { |
|
||||
chartInstance.resize() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 监听数据变化 |
|
||||
watch( |
|
||||
() => props.chartData, |
|
||||
() => { |
|
||||
updateChart() |
|
||||
}, |
|
||||
{ deep: true } |
|
||||
) |
|
||||
|
|
||||
// 初始化和销毁 |
|
||||
onMounted(() => { |
|
||||
initChart() |
|
||||
window.addEventListener('resize', handleResize) |
|
||||
}) |
|
||||
|
|
||||
onBeforeUnmount(() => { |
|
||||
if (chartInstance) { |
|
||||
chartInstance.dispose() |
|
||||
} |
|
||||
window.removeEventListener('resize', handleResize) |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.pie-chart-container { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,506 @@ |
|||||
|
<template> |
||||
|
<div class="port-overview"> |
||||
|
<div class="left" style="width:45%;"> |
||||
|
<div style="height: 100%; width: 100%; display: flex; gap: 8px; "> |
||||
|
<div class="card digital-twin-card--deep-blue "> |
||||
|
<div style="display: flex; align-items: center; justify-content: space-between;"> |
||||
|
<div class="card-title"> |
||||
|
<div class="vertical-line"></div> |
||||
|
<img src="@/assets/svgs/data.svg" class="title-icon" /> |
||||
|
<span class="title-text">岸电箱状态</span> |
||||
|
</div> |
||||
|
<input class="search-container" type="text" placeholder="搜索岸电设备" v-model="storeSearchKeyword" |
||||
|
@input="handlStoreSearch" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class=" card-content"> |
||||
|
<div class="ship-table"> |
||||
|
<div class="ship-table-header"> |
||||
|
<div class="ship-table-column ship-name-header">岸电箱名称</div> |
||||
|
<div class="ship-table-column ship-status-header">状态</div> |
||||
|
<div class="ship-table-column ship-status-header">历史</div> |
||||
|
</div> |
||||
|
<div class="ship-table-body"> |
||||
|
<div v-for="shorepower in filteredShorePowerList" :key="shorepower.id" class="ship-table-row" |
||||
|
@click="handleSelectShorePower(shorepower)"> |
||||
|
<div class="ship-table-column ship-name"> |
||||
|
<div class="ship-icon">⚡</div> |
||||
|
<span class="ship-name-text">{{ shorepower.name }}</span> |
||||
|
</div> |
||||
|
<div class="ship-table-column ship-status"> |
||||
|
<div class="status-tag" :class="getStatusClass(shorepower.storePowerStatus)"> |
||||
|
{{ shorepower.storePowerStatus }} |
||||
|
</div> |
||||
|
<!-- <div class="status-tag" :class="getStatusClass('空闲')"> |
||||
|
空闲 |
||||
|
</div> |
||||
|
<div class="status-tag" :class="getStatusClass('故障')"> |
||||
|
故障 |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<div class="ship-table-column ship-status-header"> |
||||
|
<el-button type="primary" link @click.stop="showShorePowerHistory(shorepower)">查看</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card digital-twin-card--deep-blue "> |
||||
|
<div style="display: flex; align-items: center; justify-content: space-between;"> |
||||
|
<div class="card-title"> |
||||
|
<div class="vertical-line"></div> |
||||
|
<img src="@/assets/svgs/data.svg" class="title-icon" /> |
||||
|
<span class="title-text">船舶状态</span> |
||||
|
</div> |
||||
|
<input class="search-container" type="text" placeholder="搜索船舶" v-model="searchKeyword" |
||||
|
@input="handleSearch" /> |
||||
|
</div> |
||||
|
|
||||
|
<div class=" card-content"> |
||||
|
<div class="ship-table"> |
||||
|
<div class="ship-table-header"> |
||||
|
<div class="ship-table-column ship-name-header">轮船名称</div> |
||||
|
<div class="ship-table-column ship-status-header">状态</div> |
||||
|
<div class="ship-table-column ship-status-header">历史</div> |
||||
|
</div> |
||||
|
<div class="ship-table-body"> |
||||
|
<div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row" |
||||
|
@click="handleSelectItem(ship)"> |
||||
|
<div class="ship-table-column ship-name"> |
||||
|
<div class="ship-icon">🚢</div> |
||||
|
<span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span> |
||||
|
</div> |
||||
|
<div class="ship-table-column ship-status"> |
||||
|
<div class="status-tag" :class="getStatusClass(ship.shipStatus)"> |
||||
|
{{ ship.shipStatus }} |
||||
|
</div> |
||||
|
<!-- <div class="status-tag" :class="getStatusClass('空闲')"> |
||||
|
空闲 |
||||
|
</div> |
||||
|
<div class="status-tag" :class="getStatusClass('故障')"> |
||||
|
故障 |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<div class="ship-table-column ship-status-header"> |
||||
|
<el-button type="primary" link @click.stop="showShipHistory(ship)">查看</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="shipSelectedItem || shorepowerSelectedItem" class="right" style="width: 20%"> |
||||
|
<div v-if="shipSelectedItem && show_type === 'ship'" class="right-two-row"> |
||||
|
<div class="card digital-twin-card--deep-blue"> |
||||
|
<div class="card-title"> |
||||
|
<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">{{ shipSelectedItem.shipBasicInfo.name + '-' + shipSelectedItem.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">{{ shipSelectedItem.shipBasicInfo.length }} 米</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">宽度:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.width }} 米</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">吨位:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.tonnage }} 吨</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">满载吃水深度:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.fullLoadDraft }} 米</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">电压:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.voltageDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">电流:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.currentDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">频率:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shipSelectedItem.shorePower.frequencyDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">靠泊状态:</span> |
||||
|
<span class="value">{{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.status, |
||||
|
SHORE_POWER_STATUS, |
||||
|
) }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">靠泊类型:</span> |
||||
|
<span class="value">{{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.type, BERTH_TYPE) |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">靠泊时间:</span> |
||||
|
<span class="value">{{ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualBerthTime) }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前状态:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipStatus }}</span> |
||||
|
</div> |
||||
|
<div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item"> |
||||
|
<span class="label">岸电使用时长:</span> |
||||
|
<span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useTime }}</span> |
||||
|
</div> |
||||
|
<div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item"> |
||||
|
<span class="label">岸电使用用量:</span> |
||||
|
<span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.useValue }}</span> |
||||
|
</div> |
||||
|
<div v-if="shipSelectedItem.applyInfo.reason != 0" class="detail-item"> |
||||
|
<span class="label">未使用岸电原因:</span> |
||||
|
<span class="value">{{ getOperationTypeLabel(shipSelectedItem?.applyInfo?.reason, |
||||
|
UNUSED_SHORE_POWER_REASON) }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">岸电联系人:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">联系方式:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span> |
||||
|
</div> |
||||
|
<!-- <div class="detail-item"> |
||||
|
<span class="label">航运单位:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.shippingCompany }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">岸电联系人:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContact }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">联系方式:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.shorePowerContactPhone }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">船检登记号:</span> |
||||
|
<span class="value">{{ shipSelectedItem.shipBasicInfo.inspectionNo }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">创建时间:</span> |
||||
|
<span class="value">{{ new Date(shipSelectedItem.shipBasicInfo.createTime).toLocaleString() }}</span> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="card digital-twin-card--deep-blue"> |
||||
|
<div class="card-title"> |
||||
|
<div class="vertical-line"></div> |
||||
|
<img src="@/assets/svgs/data.svg" class="title-icon" /> |
||||
|
<span class="title-text">续</span> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="ship-detail"> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<div v-if="shorepowerSelectedItem && show_type === 'shorepower'" class="right-two-row"> |
||||
|
<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">{{ shorepowerSelectedItem?.name }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">位置:</span> |
||||
|
<span class="value">{{ shorepowerSelectedItem?.position }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">电压:</span> |
||||
|
<span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.voltage }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">频率:</span> |
||||
|
<span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.frequency }} </span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">容量:</span> |
||||
|
<span class="value">{{ shorepowerSelectedItem?.shorePowerEquipmentInfo?.capacity }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前电压:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.voltageDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前电流:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.currentDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前频率:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.frequencyDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前总用量:</span> |
||||
|
<span class="value">{{ getValueById(realtimeDeviceData, shorepowerSelectedItem.totalPowerDeviceId, |
||||
|
'measureValue') }}</span> |
||||
|
</div> |
||||
|
<div class="detail-item"> |
||||
|
<span class="label">当前状态:</span> |
||||
|
<span class="value">{{ shorepowerSelectedItem.storePowerStatus }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;"> |
||||
|
<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="no-selection">请选择设备以查看详细信息</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
<ShipHistoryDialog v-model="shipHistoryVisible.visible" :ship-param="shipHistoryVisible.searchParams" |
||||
|
:realtime-device-data="realtimeDeviceData" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed } from 'vue' |
||||
|
import ShipHistoryDialog from './ShipHistoryDialog.vue' |
||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'; |
||||
|
import { BERTH_TYPE, getOperationTypeLabel, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable'; |
||||
|
import { formatDuration, formatTimestamp, getValueById, showStatus } from './utils'; |
||||
|
// 定义组件属性 |
||||
|
type ShipItem = ShipRespVo & { id: string; modelInstance?: any; }; |
||||
|
|
||||
|
interface Props { |
||||
|
shipStatusData: ShipItem[]; |
||||
|
shorePowerStatusData: ShipItem[]; |
||||
|
realtimeDeviceData: RealtimeDeviceData[]; |
||||
|
shorePowerList: (ShorePowerBerth & { position: string; })[]; |
||||
|
shipDataList: ShipRespVo[]; |
||||
|
// selectedItem: ShipItem | null; |
||||
|
} |
||||
|
|
||||
|
const props = defineProps<Props>() |
||||
|
|
||||
|
// 搜索关键字 |
||||
|
const searchKeyword = ref('') |
||||
|
const storeSearchKeyword = ref('') |
||||
|
const show_type = ref('ship') |
||||
|
const shipSelectedItem = ref<ShipItem | null>(null) |
||||
|
const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null) |
||||
|
|
||||
|
|
||||
|
const shipHistoryVisible = ref({ |
||||
|
visible: false, |
||||
|
searchParams: { |
||||
|
shipId: 0 as number | null, |
||||
|
ids: [] as number[] | null, |
||||
|
type: 1 as number |
||||
|
} |
||||
|
}) |
||||
|
const currentShorePower = ref<ShorePowerBerth | null>(null) |
||||
|
const currentShip = ref<ShipItem | null>(null) |
||||
|
|
||||
|
// const ShorePowerList = ref<(ShorePowerBerth & { position: string; })[]>([]) |
||||
|
|
||||
|
// 过滤后的船舶数据 |
||||
|
const filteredShipStatusData = computed(() => { |
||||
|
if (!searchKeyword.value) { |
||||
|
return props.shipDataList |
||||
|
} |
||||
|
return props.shipDataList.filter(ship => |
||||
|
ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
// 过滤后的岸电箱数据 |
||||
|
const filteredShorePowerList = computed(() => { |
||||
|
if (!storeSearchKeyword.value) { |
||||
|
return props.shorePowerList |
||||
|
} |
||||
|
return props.shorePowerList.filter(shorepower => |
||||
|
shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase()) |
||||
|
) |
||||
|
}) |
||||
|
|
||||
|
const handleSelectItem = async (item: ShipRespVo) => { |
||||
|
show_type.value = 'ship' |
||||
|
const deviceId = item.shorePower?.totalPowerDeviceId; |
||||
|
const res = await MapApi.getRealtimeDataByIdList({ ids: deviceId }) |
||||
|
console.log(res) |
||||
|
shipSelectedItem.value = { |
||||
|
...item, |
||||
|
shorePowerEquipment: { |
||||
|
...item.shorePowerEquipment, |
||||
|
'measureValue': res[0].measureValue || 'N/A', |
||||
|
} |
||||
|
} |
||||
|
emit('item-click', { |
||||
|
type: 'ship', |
||||
|
item: item |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 处理搜索输入 |
||||
|
const handleSearch = () => { |
||||
|
// 输入处理逻辑（如果需要额外处理可以在这里添加） |
||||
|
} |
||||
|
|
||||
|
// 处理岸电箱搜索输入 |
||||
|
const handlStoreSearch = () => { |
||||
|
// 输入处理逻辑（如果需要额外处理可以在这里添加） |
||||
|
} |
||||
|
|
||||
|
// 显示岸电箱历史记录 |
||||
|
const showShorePowerHistory = (shorepower: ShorePowerBerth) => { |
||||
|
console.log('shorepower', shorepower) |
||||
|
currentShorePower.value = shorepower |
||||
|
/* shorePowerHistoryVisible.value = { |
||||
|
visible: true, |
||||
|
shorePowerId: shorepower.id || 0 |
||||
|
} */ |
||||
|
shipHistoryVisible.value = { |
||||
|
visible: true, |
||||
|
searchParams: { |
||||
|
shipId: null, |
||||
|
ids: [shorepower.id], |
||||
|
type: 5, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 显示船舶历史记录 |
||||
|
const showShipHistory = (ship: ShipItem) => { |
||||
|
console.log('ship', ship) |
||||
|
currentShip.value = ship |
||||
|
shipHistoryVisible.value = { |
||||
|
visible: true, |
||||
|
searchParams: { |
||||
|
shipId: ship.shipBasicInfo.id, |
||||
|
ids: null, |
||||
|
type: 1, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 定义事件 |
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'switch-ship', ship: ShipItem): void; |
||||
|
(e: 'item-click', item: any): void; |
||||
|
// handleSelectItem(ship) |
||||
|
|
||||
|
}>() |
||||
|
|
||||
|
// 处理船舶选择 |
||||
|
const handleSwitch = (ship: ShipItem, type: string) => { |
||||
|
// console.log(ship) |
||||
|
show_type.value = type |
||||
|
emit('switch-ship', ship) |
||||
|
handleSelectItem(ship) |
||||
|
} |
||||
|
|
||||
|
const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => { |
||||
|
show_type.value = 'shorepower' |
||||
|
// selectedItem.value = shorepower |
||||
|
shorepowerSelectedItem.value = shorepower |
||||
|
emit('item-click', { |
||||
|
type: 'shorepower_box', |
||||
|
item: shorepower |
||||
|
}) |
||||
|
// const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId }) |
||||
|
// console.log('voltageDeviceId', data) |
||||
|
} |
||||
|
|
||||
|
const getStatusClass = (status: string | undefined) => { |
||||
|
switch (status) { |
||||
|
case '正常': |
||||
|
return 'status-normal' |
||||
|
case '在线': |
||||
|
return 'status-normal' |
||||
|
case '空闲': |
||||
|
return 'status-idle' |
||||
|
case '故障': |
||||
|
return 'status-fault' |
||||
|
case '超容': |
||||
|
return 'status-maintenance' |
||||
|
case '异常': |
||||
|
return 'status-abnormal' |
||||
|
case '维修中': |
||||
|
return 'status-maintenance' |
||||
|
case '岸电使用中': |
||||
|
return 'status-shorepower' |
||||
|
// case '岸电故障': |
||||
|
// return 'status-fault' |
||||
|
default: |
||||
|
return 'status-default' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
watch(() => props.shipDataList, (newVal) => { |
||||
|
console.log('newVal', newVal) |
||||
|
}) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// console.log(props.shorePowerStatusData) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.port-overview { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.right-two-row { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
height: 100%; |
||||
|
width: 200px; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid rgb(10, 130, 170); |
||||
|
color: #FFF; |
||||
|
padding: 0 10px; |
||||
|
margin-bottom: 8px; |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,426 @@ |
|||||
|
<template> |
||||
|
<el-dialog v-model="visible" title="历史记录" width="1200px" :before-close="handleClose"> |
||||
|
<!-- <el-tabs v-model="activeTab"> --> |
||||
|
<!-- 船舶靠泊历史记录 tab --> |
||||
|
<!-- <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing"> --> |
||||
|
<!-- 搜索和筛选区域 --> |
||||
|
<div class="filter-container"> |
||||
|
<el-form :model="berthingQueryParams" label-width="80px" inline> |
||||
|
<el-form-item label="类型"> |
||||
|
<el-select v-model="berthingQueryParams.type" style="width: 120px" placeholder="请选择类型"> |
||||
|
<el-option v-for="item in FACILITY_TYPE" :key="item.value" :label="item.label" :value="item.value" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="关键字"> |
||||
|
<el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable |
||||
|
@keyup.enter="handleBerthingSearch" /> |
||||
|
</el-form-item> --> |
||||
|
<el-form-item label="时间范围"> |
||||
|
<el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button> |
||||
|
<el-button @click="resetBerthingQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading"> |
||||
|
<el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label" |
||||
|
:width="column.width" :formatter="column.formatter" /> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div class="pagination-container"> |
||||
|
<el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize" |
||||
|
:page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" /> |
||||
|
</div> |
||||
|
<!-- </el-tab-pane> --> |
||||
|
|
||||
|
|
||||
|
<!-- <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection"> |
||||
|
|
||||
|
<div class="filter-container"> |
||||
|
<el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline> |
||||
|
<el-form-item label="关键字"> |
||||
|
<el-input v-model="shorePowerConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable |
||||
|
@keyup.enter="handleShorePowerConnectionSearch" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="时间范围"> |
||||
|
<el-date-picker v-model="shorePowerConnectionDateRange" type="daterange" range-separator="至" |
||||
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" |
||||
|
@change="handleShorePowerConnectionDateChange" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button> |
||||
|
<el-button @click="resetShorePowerConnectionQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%" |
||||
|
v-loading="shorePowerConnectionLoading"> |
||||
|
<el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop" |
||||
|
:label="column.label" :width="column.width" :formatter="column.formatter" /> |
||||
|
</el-table> |
||||
|
|
||||
|
|
||||
|
<div class="pagination-container"> |
||||
|
<el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo" |
||||
|
v-model:page-size="shorePowerConnectionQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" |
||||
|
:total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="handleShorePowerConnectionSizeChange" |
||||
|
@current-change="handleShorePowerConnectionCurrentChange" /> |
||||
|
</div> --> |
||||
|
<!-- </el-tab-pane> --> |
||||
|
<!-- </el-tabs> --> |
||||
|
|
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="handleClose">关闭</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, watch } from 'vue' |
||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
import { |
||||
|
ElDialog, |
||||
|
ElTabs, |
||||
|
ElTabPane, |
||||
|
ElForm, |
||||
|
ElFormItem, |
||||
|
ElInput, |
||||
|
ElDatePicker, |
||||
|
ElButton, |
||||
|
ElTable, |
||||
|
ElTableColumn, |
||||
|
ElPagination |
||||
|
} from 'element-plus' |
||||
|
import { CARGO_CATEGORY, FACILITY_TYPE, HARBOR_DISTRICT, getOperationTypeLabel, OPERATION_TYPE } from './dictionaryTable'; |
||||
|
import { formatDuration, formatTimestamp, showStatus } from './utils'; |
||||
|
import { RealtimeDeviceData } from '@/types/shorepower'; |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
modelValue: boolean |
||||
|
berthingData?: any[] |
||||
|
shipParam?: { type: number, ids: number[] | null, shipId: number | null } |
||||
|
shorePowerConnectionData?: any[] |
||||
|
realtimeDeviceData: RealtimeDeviceData[]; |
||||
|
} |
||||
|
|
||||
|
// 定义事件 |
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: boolean): void |
||||
|
(e: 'berthing-search', params: any): void |
||||
|
(e: 'shore-power-connection-search', params: any): void |
||||
|
}>() |
||||
|
|
||||
|
// 属性定义 |
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
modelValue: false, |
||||
|
shipId: 0, |
||||
|
berthingData: () => [], |
||||
|
shorePowerConnectionData: () => [] |
||||
|
}) |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const visible = computed({ |
||||
|
get: () => props.modelValue, |
||||
|
set: (val) => emit('update:modelValue', val) |
||||
|
}) |
||||
|
|
||||
|
// 船舶靠泊历史记录相关数据 |
||||
|
const berthingQueryParams = ref({ |
||||
|
// keyword: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
ids: null as number[] | null, |
||||
|
shipId: null as number | null, |
||||
|
type: 1 as number | null, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10 |
||||
|
}) |
||||
|
|
||||
|
const berthingDateRange = ref<[string, string]>(['', '']) |
||||
|
const berthingLoading = ref(false) |
||||
|
const berthingTotal = ref(0) |
||||
|
|
||||
|
// 船舶靠泊历史记录表格数据 |
||||
|
const berthingTableData = ref<any[]>([]) |
||||
|
|
||||
|
// 船舶靠泊历史记录表格列 |
||||
|
const berthingColumns = ref([ |
||||
|
{ |
||||
|
prop: 'shipBasicInfo', |
||||
|
label: '船舶名称-英文名称', |
||||
|
width: 200, |
||||
|
formatter: (row) => { |
||||
|
const name = row.shipBasicInfo?.name || ''; |
||||
|
const nameEn = row.shipBasicInfo?.nameEn || ''; |
||||
|
return `${name}${name && nameEn ? '-' : ''}${nameEn}`; |
||||
|
} |
||||
|
}, |
||||
|
{ prop: 'shipBasicInfo.length', label: '船长', width: 200 }, |
||||
|
{ prop: 'shipBasicInfo.width', label: '船宽', width: 150 }, |
||||
|
{ prop: 'shipBasicInfo.tonnage', label: '最大载重', width: 150 }, |
||||
|
{ prop: 'shipBasicInfo.voyage', label: '航线', width: 150 }, |
||||
|
{ prop: 'applyInfo.departureHarborDistrict', label: '起运港', width: 150 }, |
||||
|
{ prop: 'arrivalHarborDistrict', label: '到达港', width: 150 }, |
||||
|
{ prop: 'applyInfo.operationType', label: '靠泊类型', width: 150, formatter: (_row, _column, cellValue) => getOperationTypeLabel(cellValue, OPERATION_TYPE) }, |
||||
|
{ prop: '', label: '作业内容', width: 180 }, |
||||
|
/* { |
||||
|
prop: 'applyInfo.loadingCargoCategory', label: '货物类型', width: 180, |
||||
|
formatter: (row) => { |
||||
|
if (row.applyInfo.operationType === 1) { |
||||
|
return getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY); |
||||
|
} else if (row.applyInfo.operationType === 2) { |
||||
|
return row.applyInfo.unloadingCargoCategory; |
||||
|
} else if (row.applyInfo.operationType === 3) { |
||||
|
return '装' + row.applyInfo.loadingCargoCategory + '-卸' + row.applyInfo.unloadingCargoCategory |
||||
|
} |
||||
|
return ''; |
||||
|
} |
||||
|
}, */ |
||||
|
|
||||
|
{ |
||||
|
prop: 'applyInfo.loadingCargoCategory', label: '货物名称', width: 180, |
||||
|
formatter: (row) => { |
||||
|
if (row.applyInfo.operationType === 1) { |
||||
|
const label = getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY); |
||||
|
return label; |
||||
|
} else if (row.applyInfo.operationType === 2) { |
||||
|
const label = getOperationTypeLabel(row.applyInfo.unloadingCargoCategory, CARGO_CATEGORY); |
||||
|
return label; |
||||
|
} else if (row.applyInfo.operationType === 3) { |
||||
|
return '装' + getOperationTypeLabel(row.applyInfo.loadingCargoCategory, CARGO_CATEGORY) + '-卸' + getOperationTypeLabel(row.applyInfo.unloadingCargoCategory, CARGO_CATEGORY) |
||||
|
} |
||||
|
return ''; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
prop: 'applyInfo.loadingCargoCategory', label: '货物吨数', width: 180, |
||||
|
formatter: (row) => { |
||||
|
if (row.applyInfo.operationType === 1) { |
||||
|
return row.applyInfo.loadingCargoTonnage; |
||||
|
} else if (row.applyInfo.operationType === 2) { |
||||
|
return row.applyInfo.unloadingCargoTonnage; |
||||
|
} else if (row.applyInfo.operationType === 3) { |
||||
|
return '装' + row.applyInfo.loadingCargoTonnage + '-卸' + row.applyInfo.unloadingCargoTonnage |
||||
|
} |
||||
|
return ''; |
||||
|
} |
||||
|
}, |
||||
|
{ prop: 'usageRecordInfo.actualBerthTime', label: '靠泊时间', width: 180, formatter: (row) => formatTimestamp(row.usageRecordInfo.actualBerthTime) }, |
||||
|
{ prop: 'usageRecordInfo.actualDepartureTime', label: '离泊时间', width: 180, formatter: (row) => formatTimestamp(row.usageRecordInfo.actualDepartureTime) }, |
||||
|
{ |
||||
|
prop: 'useStatus.status', label: '岸电使用情况', width: 180, |
||||
|
formatter: (row) => { |
||||
|
const status = showStatus(row, props.realtimeDeviceData); |
||||
|
return status?.status || ''; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
]) |
||||
|
|
||||
|
const shorePowerConnectionTotal = ref(0) |
||||
|
|
||||
|
// 处理日期变化 |
||||
|
const handleBerthingDateChange = (val: [string, string]) => { |
||||
|
if (val && val.length === 2) { |
||||
|
berthingQueryParams.value.startTime = val[0] + ' 00:00:00' |
||||
|
berthingQueryParams.value.endTime = val[1] + ' 23:59:59' |
||||
|
} else { |
||||
|
berthingQueryParams.value.startTime = '' |
||||
|
berthingQueryParams.value.endTime = '' |
||||
|
} |
||||
|
handleShorePowerConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
// 处理关闭 |
||||
|
const handleClose = () => { |
||||
|
berthingQueryParams.value.ids = null |
||||
|
berthingQueryParams.value.shipId = null |
||||
|
berthingQueryParams.value.type = 1 |
||||
|
visible.value = false |
||||
|
} |
||||
|
|
||||
|
// 船舶靠泊历史记录相关方法 |
||||
|
const handleBerthingSearch = () => { |
||||
|
// 发送搜索事件给父组件 |
||||
|
emit('berthing-search', { ...berthingQueryParams.value }) |
||||
|
} |
||||
|
|
||||
|
const resetBerthingQuery = () => { |
||||
|
// berthingQueryParams.value.keyword = '' |
||||
|
berthingQueryParams.value.startTime = '' |
||||
|
berthingQueryParams.value.endTime = '' |
||||
|
berthingDateRange.value = ['', ''] |
||||
|
berthingQueryParams.value.pageNo = 1 |
||||
|
handleShorePowerConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const handleBerthingSizeChange = (val: number) => { |
||||
|
berthingQueryParams.value.pageSize = val |
||||
|
berthingQueryParams.value.pageNo = 1 |
||||
|
handleShorePowerConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
const handleBerthingCurrentChange = (val: number) => { |
||||
|
berthingQueryParams.value.pageNo = val |
||||
|
handleShorePowerConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
// 船舶连接岸电箱历史记录相关方法 |
||||
|
const handleShorePowerConnectionSearch = () => { |
||||
|
// const |
||||
|
const params = { |
||||
|
// shipId: berthingQueryParams.value.shipId, |
||||
|
// ids: berthingQueryParams.value.ids, |
||||
|
...(berthingQueryParams.value.ids ? { ids: berthingQueryParams.value.ids } : {}), |
||||
|
...(berthingQueryParams.value.shipId ? { shipId: berthingQueryParams.value.shipId } : {}), |
||||
|
type: berthingQueryParams.value.type, |
||||
|
pageNo: 1, |
||||
|
pageSize: 9999 // 请求足够多的数据，以便在前端进行筛选和分页 |
||||
|
} |
||||
|
handleGetShipHistortyList(params) |
||||
|
// 发送搜索事件给父组件 |
||||
|
// emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value }) |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化并更新总数 |
||||
|
watch( |
||||
|
() => props.berthingData, |
||||
|
(newData) => { |
||||
|
berthingTotal.value = newData?.length || 0 |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => props.shorePowerConnectionData, |
||||
|
(newData) => { |
||||
|
shorePowerConnectionTotal.value = newData?.length || 0 |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => props.shipParam, |
||||
|
(newShipParam) => { |
||||
|
if (newShipParam) { |
||||
|
// 当船舶ID变化时，触发搜索 |
||||
|
berthingTableData.value = [] |
||||
|
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 (param) => { |
||||
|
console.log('handleGetShipHistortyList', param) |
||||
|
if (!param) return; |
||||
|
// try { |
||||
|
const res = await MapApi.getShipHistoryPage({ |
||||
|
/* shipId: param.id, // 将字符串转换为数字 |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
type: param.type, */ |
||||
|
// ids: [parseInt(id, 10)] |
||||
|
...param |
||||
|
}) |
||||
|
console.log(res); |
||||
|
|
||||
|
// 本地日期筛选逻辑 |
||||
|
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 harborDistructList = await HARBOR_DISTRICT() |
||||
|
const buildData = await Promise.all(paginatedList.map(async item => ({ |
||||
|
...item, |
||||
|
arrivalHarborDistrict: getOperationTypeLabel(item.applyInfo.arrivalHarborDistrict, harborDistructList), |
||||
|
}))) |
||||
|
berthingTableData.value = buildData |
||||
|
berthingTotal.value = totalFiltered |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
console.log('页面加载了！') |
||||
|
// console.log('props.shipId', props.shipId) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.filter-container { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.pagination-container { |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,343 @@ |
|||||
|
<template> |
||||
|
<el-dialog v-model="visible" title="岸电箱历史记录" width="1200px" :before-close="handleClose"> |
||||
|
<el-tabs v-model="activeTab"> |
||||
|
<!-- 岸电箱历史记录 tab --> |
||||
|
<el-tab-pane label="岸电箱历史记录" name="shorePower"> |
||||
|
<!-- 搜索和筛选区域 --> |
||||
|
<div class="filter-container"> |
||||
|
<el-form :model="queryParams" label-width="80px" inline> |
||||
|
<el-form-item label="关键字"> |
||||
|
<el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="时间范围"> |
||||
|
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button> |
||||
|
<el-button @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table :data="shorePowerTableData" border stripe style="width: 100%" v-loading="loading"> |
||||
|
<el-table-column v-for="column in tableColumns" :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="queryParams.pageNo" v-model:page-size="queryParams.pageSize" |
||||
|
:page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
|
||||
|
<!-- 岸电箱连接船舶记录 tab --> |
||||
|
<el-tab-pane label="岸电箱连接船舶记录" name="shipConnection"> |
||||
|
<!-- 搜索和筛选区域 --> |
||||
|
<div class="filter-container"> |
||||
|
<el-form :model="shipConnectionQueryParams" label-width="80px" inline> |
||||
|
<el-form-item label="关键字"> |
||||
|
<el-input v-model="shipConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable |
||||
|
@keyup.enter="handleShipConnectionSearch" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="时间范围"> |
||||
|
<el-date-picker v-model="shipConnectionDateRange" type="daterange" range-separator="至" |
||||
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" |
||||
|
@change="handleShipConnectionDateChange" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleShipConnectionSearch">搜索</el-button> |
||||
|
<el-button @click="resetShipConnectionQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table :data="shipConnectionTableData" border stripe style="width: 100%" v-loading="shipConnectionLoading"> |
||||
|
<el-table-column v-for="column in shipConnectionColumns" :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="shipConnectionQueryParams.pageNo" |
||||
|
v-model:page-size="shipConnectionQueryParams.pageSize" :page-sizes="[10, 20, 50, 100]" |
||||
|
:total="shipConnectionTotal" layout="total, sizes, prev, pager, next, jumper" |
||||
|
@size-change="handleShipConnectionSizeChange" @current-change="handleShipConnectionCurrentChange" /> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
|
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="handleClose">关闭</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, watch } from 'vue' |
||||
|
import { |
||||
|
ElDialog, |
||||
|
ElTabs, |
||||
|
ElTabPane, |
||||
|
ElForm, |
||||
|
ElFormItem, |
||||
|
ElInput, |
||||
|
ElDatePicker, |
||||
|
ElButton, |
||||
|
ElTable, |
||||
|
ElTableColumn, |
||||
|
ElPagination |
||||
|
} from 'element-plus' |
||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
modelValue: boolean |
||||
|
data?: any[] |
||||
|
shipConnectionData?: any[] |
||||
|
shorePowerId: number |
||||
|
} |
||||
|
|
||||
|
// 定义事件 |
||||
|
const emit = defineEmits<{ |
||||
|
(e: 'update:modelValue', value: boolean): void |
||||
|
(e: 'search', params: any): void |
||||
|
(e: 'ship-connection-search', params: any): void |
||||
|
}>() |
||||
|
|
||||
|
// 属性定义 |
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
modelValue: false, |
||||
|
shorePowerId: 0, |
||||
|
data: () => [], |
||||
|
shipConnectionData: () => [] |
||||
|
}) |
||||
|
|
||||
|
// 响应式数据 |
||||
|
const visible = computed({ |
||||
|
get: () => props.modelValue, |
||||
|
set: (val) => emit('update:modelValue', val) |
||||
|
}) |
||||
|
|
||||
|
const shorePowerTableData = ref<any[]>([]) |
||||
|
const activeTab = ref('shorePower') |
||||
|
|
||||
|
// 岸电箱历史记录相关数据 |
||||
|
const queryParams = ref({ |
||||
|
keyword: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
pageNo: 1, |
||||
|
pageSize: 10 |
||||
|
}) |
||||
|
|
||||
|
const dateRange = ref<[string, string]>(['', '']) |
||||
|
const loading = ref(false) |
||||
|
const total = ref(0) |
||||
|
|
||||
|
// 表格数据计算属性 |
||||
|
const tableData = computed(() => { |
||||
|
// 在实际应用中，这里应该是从服务器获取的数据 |
||||
|
// 当前为了演示，我们使用传入的模拟数据 |
||||
|
return props.data?.slice( |
||||
|
(queryParams.value.pageNo - 1) * queryParams.value.pageSize, |
||||
|
queryParams.value.pageNo * queryParams.value.pageSize |
||||
|
) || [] |
||||
|
}) |
||||
|
|
||||
|
// 表格列 |
||||
|
const tableColumns = ref([ |
||||
|
{ prop: 'id', label: '记录ID', width: 80 }, |
||||
|
{ prop: 'time', label: '时间', width: 180 }, |
||||
|
{ prop: 'operation', label: '操作类型' }, |
||||
|
{ prop: 'voltage', label: '电压(V)' }, |
||||
|
{ prop: 'current', label: '电流(A)' }, |
||||
|
{ prop: 'power', label: '功率(kW)' }, |
||||
|
{ prop: 'energy', label: '用电量(kWh)' } |
||||
|
]) |
||||
|
|
||||
|
// 岸电箱连接船舶记录相关数据 |
||||
|
const shipConnectionQueryParams = ref({ |
||||
|
keyword: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
pageNo: 1, |
||||
|
pageSize: 10 |
||||
|
}) |
||||
|
|
||||
|
const shipConnectionDateRange = ref<[string, string]>(['', '']) |
||||
|
const shipConnectionLoading = ref(false) |
||||
|
const shipConnectionTotal = ref(0) |
||||
|
|
||||
|
// 岸电箱连接船舶记录表格数据 |
||||
|
const shipConnectionTableData = computed(() => { |
||||
|
// 在实际应用中，这里应该是从服务器获取的数据 |
||||
|
// 当前为了演示，我们使用传入的模拟数据 |
||||
|
return props.shipConnectionData?.slice( |
||||
|
(shipConnectionQueryParams.value.pageNo - 1) * shipConnectionQueryParams.value.pageSize, |
||||
|
shipConnectionQueryParams.value.pageNo * shipConnectionQueryParams.value.pageSize |
||||
|
) || [] |
||||
|
}) |
||||
|
|
||||
|
// 岸电箱连接船舶记录表格列 |
||||
|
const shipConnectionColumns = ref([ |
||||
|
{ prop: 'id', label: '记录ID', width: 80 }, |
||||
|
{ prop: 'shipName', 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 = () => { |
||||
|
visible.value = false |
||||
|
} |
||||
|
|
||||
|
// 岸电箱历史记录相关方法 |
||||
|
const handleSearch = () => { |
||||
|
// 发送搜索事件给父组件 |
||||
|
emit('search', { ...queryParams.value }) |
||||
|
} |
||||
|
|
||||
|
const resetQuery = () => { |
||||
|
queryParams.value.keyword = '' |
||||
|
queryParams.value.startTime = '' |
||||
|
queryParams.value.endTime = '' |
||||
|
dateRange.value = ['', ''] |
||||
|
queryParams.value.pageNo = 1 |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
const handleDateChange = (val: [string, string] | null) => { |
||||
|
if (val && val[0] && val[1]) { |
||||
|
queryParams.value.startTime = val[0] |
||||
|
queryParams.value.endTime = val[1] |
||||
|
} else { |
||||
|
queryParams.value.startTime = '' |
||||
|
queryParams.value.endTime = '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleSizeChange = (val: number) => { |
||||
|
queryParams.value.pageSize = val |
||||
|
queryParams.value.pageNo = 1 |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
const handleCurrentChange = (val: number) => { |
||||
|
queryParams.value.pageNo = val |
||||
|
handleSearch() |
||||
|
} |
||||
|
|
||||
|
// 岸电箱连接船舶记录相关方法 |
||||
|
const handleShipConnectionSearch = () => { |
||||
|
// 发送搜索事件给父组件 |
||||
|
emit('ship-connection-search', { ...shipConnectionQueryParams.value }) |
||||
|
} |
||||
|
|
||||
|
const resetShipConnectionQuery = () => { |
||||
|
shipConnectionQueryParams.value.keyword = '' |
||||
|
shipConnectionQueryParams.value.startTime = '' |
||||
|
shipConnectionQueryParams.value.endTime = '' |
||||
|
shipConnectionDateRange.value = ['', ''] |
||||
|
shipConnectionQueryParams.value.pageNo = 1 |
||||
|
handleShipConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
const handleShipConnectionDateChange = (val: [string, string] | null) => { |
||||
|
if (val && val[0] && val[1]) { |
||||
|
shipConnectionQueryParams.value.startTime = val[0] |
||||
|
shipConnectionQueryParams.value.endTime = val[1] |
||||
|
} else { |
||||
|
shipConnectionQueryParams.value.startTime = '' |
||||
|
shipConnectionQueryParams.value.endTime = '' |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handleShipConnectionSizeChange = (val: number) => { |
||||
|
shipConnectionQueryParams.value.pageSize = val |
||||
|
shipConnectionQueryParams.value.pageNo = 1 |
||||
|
handleShipConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
const handleShipConnectionCurrentChange = (val: number) => { |
||||
|
shipConnectionQueryParams.value.pageNo = val |
||||
|
handleShipConnectionSearch() |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化并更新总数 |
||||
|
watch( |
||||
|
() => props.data, |
||||
|
(newData) => { |
||||
|
total.value = newData?.length || 0 |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => props.shipConnectionData, |
||||
|
(newData) => { |
||||
|
shipConnectionTotal.value = newData?.length || 0 |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
) |
||||
|
|
||||
|
watch( |
||||
|
() => props.shorePowerId, |
||||
|
(newShorePowerId) => { |
||||
|
if (newShorePowerId) { |
||||
|
// 当岸电箱ID变化时，触发搜索 |
||||
|
shorePowerTableData.value = [] |
||||
|
handleGetShorePowerHistoryList(newShorePowerId) |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
const handleGetShorePowerHistoryList = async (id) => { |
||||
|
console.log('handleGetShorePowerHistoryList', id) |
||||
|
if (!id) return; |
||||
|
// try { |
||||
|
const res = await MapApi.getShipHistoryPage({ |
||||
|
// shipId: parseInt(id, 10), // 将字符串转换为数字 |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
type: 5, |
||||
|
ids: [parseInt(id, 10)] |
||||
|
}) |
||||
|
console.log(res); |
||||
|
const buildData = await Promise.all(res.list.map(async item => ({ |
||||
|
...item, |
||||
|
}))) |
||||
|
shorePowerTableData.value = buildData |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
console.log('页面加载了！') |
||||
|
console.log('props.shipId', props.shorePowerId) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.filter-container { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.pagination-container { |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<div ref="chartContainer" class="bar-chart-minute-container"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
||||
|
import * as echarts from 'echarts' |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
chartData?: Array<{ name: string; value: number }> |
||||
|
title?: string |
||||
|
color?: string |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
chartData: () => [], |
||||
|
title: '', |
||||
|
color: '#4CAF50' // 固定使用绿色 |
||||
|
}) |
||||
|
|
||||
|
// 图表容器引用和实例 |
||||
|
const chartContainer = ref<HTMLDivElement | null>(null) |
||||
|
let chartInstance: echarts.ECharts | null = null |
||||
|
|
||||
|
// 初始化图表 |
||||
|
const initChart = () => { |
||||
|
if (chartContainer.value) { |
||||
|
chartInstance = echarts.init(chartContainer.value) |
||||
|
updateChart() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 更新图表 |
||||
|
const updateChart = () => { |
||||
|
if (!chartInstance || !props.chartData.length) return |
||||
|
|
||||
|
const option = { |
||||
|
title: { |
||||
|
// text: props.title, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: 14 |
||||
|
}, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
|
borderColor: 'rgba(30, 120, 255, 0.4)', |
||||
|
borderWidth: 1, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '1%', |
||||
|
right: '1%', |
||||
|
top: '5%', |
||||
|
bottom: '1%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: props.chartData.map(item => item.name), |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.3)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: 'rgba(255, 255, 255, 0.7)', |
||||
|
rotate: 0, |
||||
|
interval: Math.ceil(props.chartData.length / 24), // 每小时显示一个标签 |
||||
|
formatter: (value: string) => { |
||||
|
// 只显示小时:00:00的标签 |
||||
|
if (value.endsWith(':00:00')) { |
||||
|
return value.split(':')[0] + '时' |
||||
|
} |
||||
|
return '' |
||||
|
}, |
||||
|
margin: 10 |
||||
|
}, |
||||
|
axisTick: { |
||||
|
interval: Math.ceil(props.chartData.length / 24) |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.3)' |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.1)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: 'rgba(255, 255, 255, 0.7)' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
data: props.chartData.map(item => item.value), |
||||
|
barWidth: 1, // 设置柱子宽度为1px |
||||
|
itemStyle: { |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: '#4CAF50' // 固定使用绿色 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#4CAF5080' // 绿色带透明度 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
borderRadius: [1, 1, 0, 0] |
||||
|
}, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
color: '#4CAF50' // 固定使用绿色高亮 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
chartInstance.setOption(option) |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化 |
||||
|
watch( |
||||
|
() => props.chartData, |
||||
|
() => { |
||||
|
updateChart() |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
// 窗口大小改变时重绘图表 |
||||
|
const handleResize = () => { |
||||
|
if (chartInstance) { |
||||
|
chartInstance.resize() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 组件挂载时初始化图表 |
||||
|
onMounted(() => { |
||||
|
setTimeout(() => { |
||||
|
initChart() |
||||
|
}, 200) |
||||
|
window.addEventListener('resize', handleResize) |
||||
|
}) |
||||
|
|
||||
|
// 组件销毁前清理资源 |
||||
|
onBeforeUnmount(() => { |
||||
|
window.removeEventListener('resize', handleResize) |
||||
|
if (chartInstance) { |
||||
|
chartInstance.dispose() |
||||
|
chartInstance = null |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.bar-chart-minute-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
/* min-height: 200px; */ |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,183 @@ |
|||||
|
<template> |
||||
|
<div ref="chartContainer" class="pie-chart-container"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
||||
|
import * as echarts from 'echarts' |
||||
|
|
||||
|
// 定义组件props |
||||
|
interface Props { |
||||
|
chartData?: Array<{ name: string; value: number }> |
||||
|
title?: string |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
chartData: () => [], |
||||
|
title: '' |
||||
|
}) |
||||
|
|
||||
|
const chartContainer = ref<HTMLDivElement | null>(null) |
||||
|
let chartInstance: echarts.ECharts | null = null |
||||
|
|
||||
|
// 初始化图表 |
||||
|
const initChart = () => { |
||||
|
if (chartContainer.value) { |
||||
|
chartInstance = echarts.init(chartContainer.value) |
||||
|
updateChart() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 计算数据总和 |
||||
|
const getTotalValue = () => { |
||||
|
if (!props.chartData) return 0 |
||||
|
const total = props.chartData.reduce((sum, item) => sum + item.value, 0) |
||||
|
return Math.round(total * 100) / 100 // 保留两位小数 |
||||
|
} |
||||
|
|
||||
|
// 更新图表 |
||||
|
const updateChart = () => { |
||||
|
if (!chartInstance || !props.chartData) return |
||||
|
|
||||
|
const totalValue = getTotalValue() |
||||
|
|
||||
|
const option = { |
||||
|
title: { |
||||
|
// text: props.title, |
||||
|
left: 'center', |
||||
|
textStyle: { |
||||
|
color: '#FFF' |
||||
|
} |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
// type: 'scroll', // 👈 开启可滚动图例 |
||||
|
orient: 'horizontal', // 👈 水平排列 |
||||
|
top: 10, // 👈 放在顶部 |
||||
|
left: 'center', // 👈 居中对齐 |
||||
|
textStyle: { |
||||
|
color: '#FFF' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: props.title, |
||||
|
type: 'pie', |
||||
|
radius: ['35%', '55%'], // 调整内外半径，增加厚度 |
||||
|
center: ['50%', '40%'], // 👈 调整饼图位置，因为图例已移到顶部 |
||||
|
padAngle: 5, // 添加间隙角度 |
||||
|
avoidLabelOverlap: true, |
||||
|
itemStyle: { |
||||
|
borderRadius: 0, |
||||
|
borderColor: 'transparent', // 取消边框 |
||||
|
borderWidth: 0 // 边框宽度设为0 |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: (params) => { |
||||
|
return params.name + '\n' + params.value.toFixed(2) |
||||
|
}, |
||||
|
fontSize: 16, |
||||
|
color: '#FFFFFF', // 设置文本颜色为白色 |
||||
|
textBorderColor: 'transparent', // 取消文本边缘的发光效果 |
||||
|
textBorderWidth: 0 |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
formatter: (params) => { |
||||
|
return params.name + '\n' + params.value.toFixed(2) |
||||
|
}, |
||||
|
fontSize: 14, |
||||
|
fontWeight: 'bold', |
||||
|
color: '#FFFFFF', // 设置强调时文本颜色为白色 |
||||
|
textBorderColor: 'transparent', // 取消文本边缘的发光效果 |
||||
|
textBorderWidth: 0 |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: true |
||||
|
}, |
||||
|
data: props.chartData |
||||
|
}, |
||||
|
{ |
||||
|
name: '总量', |
||||
|
type: 'pie', |
||||
|
radius: ['0%', '35%'], // 内部圆环用于显示总数，与外环内半径匹配 |
||||
|
center: ['50%', '40%'], |
||||
|
hoverAnimation: false, // 禁用悬停动画 |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'center', |
||||
|
formatter: [`{title|总数}`, `{value|${totalValue.toFixed(2)}}`].join('\n'), |
||||
|
rich: { |
||||
|
title: { |
||||
|
color: '#FFF', |
||||
|
fontSize: 14, |
||||
|
lineHeight: 20 |
||||
|
}, |
||||
|
value: { |
||||
|
color: '#FFF', |
||||
|
fontSize: 20, |
||||
|
fontWeight: 'bold', |
||||
|
lineHeight: 30 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
data: [ |
||||
|
{ |
||||
|
value: totalValue, |
||||
|
itemStyle: { |
||||
|
color: 'rgba(0, 0, 0, 0)' // 透明色 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
chartInstance.setOption(option, true) |
||||
|
} |
||||
|
|
||||
|
// 窗口大小改变时重置图表大小 |
||||
|
const handleResize = () => { |
||||
|
if (chartInstance) { |
||||
|
chartInstance.resize() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化 |
||||
|
watch( |
||||
|
() => props.chartData, |
||||
|
() => { |
||||
|
updateChart() |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
// 初始化和销毁 |
||||
|
onMounted(() => { |
||||
|
initChart() |
||||
|
window.addEventListener('resize', handleResize) |
||||
|
}) |
||||
|
|
||||
|
onBeforeUnmount(() => { |
||||
|
if (chartInstance) { |
||||
|
chartInstance.dispose() |
||||
|
} |
||||
|
window.removeEventListener('resize', handleResize) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.pie-chart-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,254 @@ |
|||||
|
<template> |
||||
|
<div ref="chartContainer" class="wave-line-chart-container"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
||||
|
import * as echarts from 'echarts' |
||||
|
|
||||
|
// 定义组件属性 |
||||
|
interface Props { |
||||
|
chartData?: Array<{ name: string; value: number }> |
||||
|
title?: string |
||||
|
color?: string |
||||
|
magnifyMode?: boolean |
||||
|
} |
||||
|
|
||||
|
const props = withDefaults(defineProps<Props>(), { |
||||
|
chartData: () => [], |
||||
|
title: '', |
||||
|
color: '#1296db', |
||||
|
magnifyMode: false |
||||
|
}) |
||||
|
|
||||
|
// 图表容器引用和实例 |
||||
|
const chartContainer = ref<HTMLDivElement | null>(null) |
||||
|
let chartInstance: echarts.ECharts | null = null |
||||
|
|
||||
|
// 初始化图表 |
||||
|
const initChart = () => { |
||||
|
if (chartContainer.value) { |
||||
|
chartInstance = echarts.init(chartContainer.value) |
||||
|
updateChart() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 更新图表 |
||||
|
const updateChart = () => { |
||||
|
if (!chartInstance || !props.chartData.length) return |
||||
|
|
||||
|
// 创建波浪效果的数据点 |
||||
|
const waveData = props.chartData.map(item => { |
||||
|
return { |
||||
|
...item, |
||||
|
value: item.value |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const option = { |
||||
|
title: { |
||||
|
// text: props.title, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: props.magnifyMode ? 24 : 14 |
||||
|
}, |
||||
|
left: 'center' |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
||||
|
borderColor: 'rgba(30, 120, 255, 0.4)', |
||||
|
borderWidth: 1, |
||||
|
textStyle: { |
||||
|
color: '#fff', |
||||
|
fontSize: props.magnifyMode ? 20 : 12 |
||||
|
}, |
||||
|
formatter: (params: any) => { |
||||
|
// params是一个数组，包含当前鼠标位置的所有系列数据 |
||||
|
if (params && params.length > 0) { |
||||
|
const time = params[0].name; // 获取时间 |
||||
|
const value = params[0].value; // 获取数据值 |
||||
|
return `时间: ${time}<br/>数值: ${value}`; |
||||
|
} |
||||
|
return ''; |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: props.chartData.map(item => item.name), |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.3)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: 'rgba(255, 255, 255, 0.7)', |
||||
|
fontSize: props.magnifyMode ? 18 : 10, |
||||
|
rotate: 0, |
||||
|
interval: Math.ceil(props.chartData.length / 12), // 减少间隔以显示更多标签 |
||||
|
formatter: (value: string) => { |
||||
|
// 更灵活的时间格式化 |
||||
|
if (value.includes(':')) { |
||||
|
const parts = value.split(':'); |
||||
|
if (parts.length >= 2) { |
||||
|
// 如果是完整的时间格式 HH:mm:ss |
||||
|
if (parts[2] && parts[2] === '00') { |
||||
|
return parts[0] + ':' + parts[1]; |
||||
|
} |
||||
|
// 如果是 HH:mm 格式 |
||||
|
return parts[0] + ':' + parts[1]; |
||||
|
} |
||||
|
} |
||||
|
return value; |
||||
|
}, |
||||
|
margin: 10 |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
// 设置 Y 轴最小值略低于数据中的最小值，以提供更好的可视化效果 |
||||
|
min: (value: any) => { |
||||
|
if (props.chartData && props.chartData.length > 0) { |
||||
|
// 查找数据中的最小值 |
||||
|
const minValue = Math.min(...props.chartData.map(item => item.value)); |
||||
|
// 计算一个合适的最小值，略低于实际最小值 |
||||
|
// const range = value.max - minValue; |
||||
|
return minValue; // 最小值不低于0 |
||||
|
} |
||||
|
return undefined; |
||||
|
}, |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.3)' |
||||
|
} |
||||
|
}, |
||||
|
splitLine: { |
||||
|
lineStyle: { |
||||
|
color: 'rgba(255, 255, 255, 0.1)' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: 'rgba(255, 255, 255, 0.7)', |
||||
|
fontSize: props.magnifyMode ? 18 : 10 |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: waveData.map(item => item.value), |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
showSymbol: true, |
||||
|
symbol: 'circle', |
||||
|
symbolSize: props.magnifyMode ? 8 : 4, |
||||
|
lineStyle: { |
||||
|
color: props.color, |
||||
|
width: props.magnifyMode ? 4 : 2 |
||||
|
}, |
||||
|
areaStyle: { |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 0, |
||||
|
y2: 1, |
||||
|
colorStops: [ |
||||
|
{ |
||||
|
offset: 0, |
||||
|
color: props.color + '80' // 添加透明度 |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: props.color + '00' // 透明 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
// 添加波浪效果的特殊配置 |
||||
|
emphasis: { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
// 显示数据点和数值 |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
color: '#fff', |
||||
|
fontSize: props.magnifyMode ? 16 : 10, |
||||
|
formatter: '{c}', |
||||
|
distance: props.magnifyMode ? 10 : 5 |
||||
|
} |
||||
|
}, |
||||
|
// 添加一个辅助系列来增强波浪视觉效果 |
||||
|
{ |
||||
|
data: props.chartData.map(item => item.value), |
||||
|
type: 'line', |
||||
|
smooth: true, |
||||
|
showSymbol: false, |
||||
|
lineStyle: { |
||||
|
color: props.color + '60', |
||||
|
width: props.magnifyMode ? 2 : 1, |
||||
|
type: 'dashed' |
||||
|
}, |
||||
|
// 辅助系列不显示在tooltip中 |
||||
|
tooltip: { |
||||
|
show: false |
||||
|
}, |
||||
|
// 辅助系列不显示数据标签以避免重叠 |
||||
|
label: { |
||||
|
show: false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
grid: { |
||||
|
left: '1%', |
||||
|
right: '1%', |
||||
|
top: props.title ? (props.magnifyMode ? '10%' : '15%') : '5%', |
||||
|
bottom: '1%', |
||||
|
containLabel: true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
chartInstance.setOption(option) |
||||
|
} |
||||
|
|
||||
|
// 监听数据变化 |
||||
|
watch( |
||||
|
() => props.chartData, |
||||
|
() => { |
||||
|
updateChart() |
||||
|
}, |
||||
|
{ deep: true } |
||||
|
) |
||||
|
|
||||
|
// 窗口大小改变时重绘图表 |
||||
|
const handleResize = () => { |
||||
|
if (chartInstance) { |
||||
|
chartInstance.resize() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 组件挂载时初始化图表 |
||||
|
onMounted(() => { |
||||
|
// 延迟初始化，确保DOM已经完全渲染 |
||||
|
setTimeout(() => { |
||||
|
initChart() |
||||
|
}, 200) |
||||
|
window.addEventListener('resize', handleResize) |
||||
|
}) |
||||
|
|
||||
|
// 组件销毁前清理资源 |
||||
|
onBeforeUnmount(() => { |
||||
|
window.removeEventListener('resize', handleResize) |
||||
|
if (chartInstance) { |
||||
|
chartInstance.dispose() |
||||
|
chartInstance = null |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.wave-line-chart-container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
min-height: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,120 @@ |
|||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
|
||||
|
export const getOperationTypeLabel = (value: string | number | undefined | null, options: { label: string, value: string | number }[]) => { |
||||
|
try { |
||||
|
const item = options.find(opt => opt.value === value); |
||||
|
return item ? item.label : ''; |
||||
|
} catch (error) { |
||||
|
return '' |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
// 装货/卸货
|
||||
|
export const OPERATION_TYPE = [ |
||||
|
{ label: '装货', value: 1 }, |
||||
|
{ label: '卸货', value: 2 }, |
||||
|
{ label: '卸货并装货', value: 2 }, |
||||
|
] |
||||
|
|
||||
|
// 获取类型
|
||||
|
export const CARGO_CATEGORY = [ |
||||
|
{ label: '空船', value: 0 }, |
||||
|
{ label: '散货', value: 1 }, |
||||
|
{ label: '集装箱', value: 2 }, |
||||
|
{ label: '液体货物', value: 3 }, |
||||
|
{ label: '件杂货', value: 4 }, |
||||
|
{ label: '危险品', value: 5 }, |
||||
|
{ label: '冷藏货物', value: 6 }, |
||||
|
] |
||||
|
|
||||
|
// 未使用岸电原因
|
||||
|
export const UNUSED_SHORE_POWER_REASON = [ |
||||
|
{ label: '岸电用电接口不匹配', value: 1 }, |
||||
|
{ label: '岸电设施电压/频率不匹配', value: 2 }, |
||||
|
{ label: '电缆长度不匹配', value: 3 }, |
||||
|
{ label: '气象因素禁止作业', value: 4 }, |
||||
|
{ label: '船电设施损坏', value: 5 }, |
||||
|
{ label: '岸电设施维护中', value: 6 }, |
||||
|
{ label: '无受电设备', value: 7 }, |
||||
|
{ label: '拒绝使用岸电', value: 8 }, |
||||
|
{ label: '其他', value: 9 }, |
||||
|
] |
||||
|
|
||||
|
// 港区map
|
||||
|
export const HARBOR_DISTRICT = async () => { |
||||
|
const res = await MapApi.getHarborDistrictIdAndNameList() |
||||
|
return res.map(item => ({ |
||||
|
...item, |
||||
|
label: item.name, |
||||
|
value: item.id |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
// doc 码头map
|
||||
|
export const DOCK_DISTRICT = async () => { |
||||
|
const res = await MapApi.getDockIdAndNameList() |
||||
|
return res.map(item => ({ |
||||
|
...item, |
||||
|
label: item.name, |
||||
|
value: item.id |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
// 岸电状态
|
||||
|
export const SHORE_POWER_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 BERTH_TYPE = [ |
||||
|
{ label: '左舷停舶', value: 'left' }, |
||||
|
{ label: '右舷停舶', value: 'right' }, |
||||
|
] |
||||
|
|
||||
|
// 设施类型
|
||||
|
export const FACILITY_TYPE = [ |
||||
|
{ label: '港区', value: 1 }, |
||||
|
{ label: '码头', value: 2 }, |
||||
|
{ label: '岸电设施', value: 3 }, |
||||
|
{ label: '泊位', value: 4 }, |
||||
|
{ label: '用电接口', value: 5 }, |
||||
|
] |
||||
|
|
||||
|
// 贸易类型
|
||||
|
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 }, |
||||
|
] |
||||
@ -1,240 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="zh-CN"> |
|
||||
<head> |
|
||||
<meta charset="UTF-8"> |
|
||||
<title>CesiumJS 天地图纯影像示例</title> |
|
||||
|
|
||||
<link href="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> |
|
||||
<script src="https://cesium.com/downloads/cesiumjs/releases/1.123/Build/Cesium/Cesium.js"></script> |
|
||||
|
|
||||
<style> |
|
||||
/* 确保 Cesium 容器占满整个浏览器窗口 */ |
|
||||
body { margin: 0; overflow: hidden; } |
|
||||
#cesiumContainer { width: 100%; height: 100vh; } |
|
||||
|
|
||||
/* 悬浮按钮样式 */ |
|
||||
.control-btn { |
|
||||
position: absolute; |
|
||||
z-index: 1000; |
|
||||
padding: 10px 15px; |
|
||||
background-color: rgba(0, 0, 0, 0.7); |
|
||||
color: white; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
cursor: pointer; |
|
||||
font-size: 14px; |
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3); |
|
||||
transition: background-color 0.3s; |
|
||||
} |
|
||||
|
|
||||
.control-btn:hover { |
|
||||
background-color: rgba(0, 0, 0, 0.9); |
|
||||
} |
|
||||
|
|
||||
#cameraInfoBtn { |
|
||||
top: 20px; |
|
||||
right: 20px; |
|
||||
} |
|
||||
|
|
||||
/* 视角切换按钮 */ |
|
||||
.view-buttons { |
|
||||
position: absolute; |
|
||||
bottom: 20px; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
display: flex; |
|
||||
gap: 10px; |
|
||||
z-index: 1000; |
|
||||
} |
|
||||
|
|
||||
.view-btn { |
|
||||
padding: 8px 16px; |
|
||||
background-color: rgba(0, 0, 0, 0.7); |
|
||||
color: white; |
|
||||
border: none; |
|
||||
border-radius: 5px; |
|
||||
cursor: pointer; |
|
||||
font-size: 14px; |
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3); |
|
||||
transition: background-color 0.3s; |
|
||||
} |
|
||||
|
|
||||
.view-btn:hover { |
|
||||
background-color: rgba(0, 0, 0, 0.9); |
|
||||
} |
|
||||
</style> |
|
||||
</head> |
|
||||
<body> |
|
||||
<div id="cesiumContainer"></div> |
|
||||
<button id="cameraInfoBtn" class="control-btn">获取当前视角参数</button> |
|
||||
|
|
||||
<!-- 视角切换按钮 --> |
|
||||
<div class="view-buttons"> |
|
||||
<button class="view-btn" data-view="overview">全局视角</button> |
|
||||
<button class="view-btn" data-view="ship1">船1视角</button> |
|
||||
<button class="view-btn" data-view="ship2">船2视角</button> |
|
||||
<button class="view-btn" data-view="ship3">船3视角</button> |
|
||||
<button class="view-btn" data-view="ship4">船4视角</button> |
|
||||
</div> |
|
||||
|
|
||||
<script type="module"> |
|
||||
// ---------------------------------------------------------------------- |
|
||||
// ** 请替换为您申请的天地图密钥 ** |
|
||||
// ---------------------------------------------------------------------- |
|
||||
const TDT_KEY = 'b19d3ad72716d1a28cf77836dfa19a71'; |
|
||||
|
|
||||
// 步骤 1: 初始化 Viewer 并配置为使用天地图影像和平坦地形 |
|
||||
const viewer = new Cesium.Viewer('cesiumContainer', { |
|
||||
// **核心设置：禁用所有默认影像，我们将手动添加天地图** |
|
||||
imageryProvider: false, |
|
||||
|
|
||||
// **使用平坦地形，避免依赖 Cesium Ion** |
|
||||
terrainProvider: new Cesium.EllipsoidTerrainProvider(), |
|
||||
|
|
||||
// 禁用所有不必要的UI控件 |
|
||||
timeline: false, |
|
||||
animation: false, |
|
||||
baseLayerPicker: false, |
|
||||
geocoder: false, |
|
||||
sceneModePicker: false, |
|
||||
navigationHelpButton: false, |
|
||||
infoBox: false, |
|
||||
fullscreenButton: false, |
|
||||
homeButton: false, |
|
||||
|
|
||||
// 启用抗锯齿和其他渲染优化 |
|
||||
contextOptions: { |
|
||||
webgl: { |
|
||||
antialias: true |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 禁用所有鼠标和键盘的相机控制操作 |
|
||||
viewer.scene.screenSpaceCameraController.enableRotate = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableTranslate = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableZoom = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableTilt = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableLook = false; |
|
||||
|
|
||||
// 渲染优化设置 |
|
||||
// 启用抗锯齿 |
|
||||
viewer.scene.postProcessStages.fxaa.enabled = true; |
|
||||
|
|
||||
// 启用深度测试，确保模型能够被地形正确遮挡 |
|
||||
viewer.scene.globe.depthTestAgainstTerrain = true; |
|
||||
|
|
||||
// 步骤 2: 添加天地图卫星影像底图 (img: 卫星图层, w: WGS84坐标系) |
|
||||
const tdtImage = new Cesium.WebMapTileServiceImageryProvider({ |
|
||||
// URL 中 LAYER=img 表示卫星影像图层 |
|
||||
url: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + TDT_KEY, |
|
||||
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], |
|
||||
layer: 'tdtImgLayer', |
|
||||
style: 'default', |
|
||||
format: 'tiles', |
|
||||
tileMatrixSetID: 'w', // 确保使用 WGS84 坐标系 |
|
||||
maximumLevel: 18 |
|
||||
}); |
|
||||
|
|
||||
// 步骤 3: 将图层添加到 Viewer 中 |
|
||||
viewer.imageryLayers.addImageryProvider(tdtImage); |
|
||||
|
|
||||
// **注意：由于您要求不添加标注层，因此这里不添加 tdtCVA 或 tdtCIA** |
|
||||
|
|
||||
// 引入我们自定义的标记和定位功能 |
|
||||
import { initMarkerAndPosition } from './src/cesium-utils.js'; |
|
||||
|
|
||||
// 初始化标记和定位 |
|
||||
initMarkerAndPosition(viewer); |
|
||||
|
|
||||
// 定义预设视角参数 |
|
||||
const presetViews = { |
|
||||
overview: { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(118.4603328835826, 38.953967794772765, 560.0105923892418), |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(231.0260194269599), |
|
||||
pitch: Cesium.Math.toRadians(-24.749471814600415), |
|
||||
roll: Cesium.Math.toRadians(0.005508519138937096) |
|
||||
} |
|
||||
}, |
|
||||
ship1: { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(118.45467237056748 + 0.005, 38.94345692673452, 150), // 在船的前方 |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32) |
|
||||
pitch: Cesium.Math.toRadians(-15), |
|
||||
roll: 0 |
|
||||
} |
|
||||
}, |
|
||||
ship2: { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(118.45183602217774 + 0.005, 38.94485094840323, 150), // 在船的前方 |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32) |
|
||||
pitch: Cesium.Math.toRadians(-15), |
|
||||
roll: 0 |
|
||||
} |
|
||||
}, |
|
||||
ship3: { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(118.4468305964142 + 0.005, 38.947237470602076, 150), // 在船的前方 |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32) |
|
||||
pitch: Cesium.Math.toRadians(-15), |
|
||||
roll: 0 |
|
||||
} |
|
||||
}, |
|
||||
ship4: { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(118.44446808752532 + 0.005, 38.94835610136433, 150), // 在船的前方 |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(212), // 朝向船的位置 (180+32) |
|
||||
pitch: Cesium.Math.toRadians(-15), |
|
||||
roll: 0 |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 设置初始视角 |
|
||||
viewer.camera.setView(presetViews.overview); |
|
||||
|
|
||||
// 添加按钮点击事件监听器 |
|
||||
document.getElementById('cameraInfoBtn').addEventListener('click', function() { |
|
||||
// 获取当前相机位置 |
|
||||
const camera = viewer.camera; |
|
||||
const position = camera.position; |
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(position); |
|
||||
|
|
||||
// 转换为度数 |
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude); |
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude); |
|
||||
const height = cartographic.height; |
|
||||
|
|
||||
// 获取相机方向 |
|
||||
const heading = Cesium.Math.toDegrees(camera.heading); |
|
||||
const pitch = Cesium.Math.toDegrees(camera.pitch); |
|
||||
const roll = Cesium.Math.toDegrees(camera.roll); |
|
||||
|
|
||||
// 输出到控制台 |
|
||||
console.log('当前相机视角参数:'); |
|
||||
console.log('位置 - 经度:', longitude, '纬度:', latitude, '高度:', height); |
|
||||
console.log('方向 - 航向角:', heading, '俯仰角:', pitch, '翻滚角:', roll); |
|
||||
|
|
||||
// 显示提示信息 |
|
||||
alert('相机参数已输出到控制台，请打开开发者工具查看。'); |
|
||||
}); |
|
||||
|
|
||||
// 添加视角切换按钮事件监听器 |
|
||||
document.querySelectorAll('.view-btn').forEach(button => { |
|
||||
button.addEventListener('click', function() { |
|
||||
const viewName = this.getAttribute('data-view'); |
|
||||
const viewParams = presetViews[viewName]; |
|
||||
|
|
||||
if (viewParams) { |
|
||||
viewer.camera.flyTo({ |
|
||||
destination: viewParams.destination, |
|
||||
orientation: viewParams.orientation, |
|
||||
duration: 2.0 // 动画持续时间（秒） |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -1,529 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<div ref="cesiumContainerRef" class="cesium-container"></div> |
|
||||
<div class="btn-group"> |
|
||||
<!-- <el-button class="get-view-btn" size="small" type="primary" @click="getCurrentViewInfo" |
|
||||
style="margin-right: 10px;">获取当前视角</el-button> --> |
|
||||
<!-- <el-button class="view-btn" size="small" type="success" @click="switchView('overview')" |
|
||||
style="margin-right: 10px;">概览视角</el-button> --> |
|
||||
<!-- <el-button class="view-btn" size="small" type="warning" @click="switchView('view1')" |
|
||||
style="margin-right: 10px;">视角1</el-button> |
|
||||
<el-button class="view-btn" size="small" type="warning" @click="switchView('view2')" |
|
||||
style="margin-right: 10px;">视角2</el-button> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</template> |
|
||||
|
|
||||
<script setup> |
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue'; |
|
||||
import coordtransform from 'coordtransform'; |
|
||||
import { MapApi } from "@/api/shorepower/map"; |
|
||||
import { toRaw } from 'vue' |
|
||||
// ⚠️ 注意：通过 window 访问全局 Cesium 对象 |
|
||||
const Cesium = window.Cesium; |
|
||||
|
|
||||
let viewer = null; |
|
||||
const cesiumContainerRef = ref(null); // 引用 DOM 元素 |
|
||||
const history = ref(null); // 历史数据 |
|
||||
const dataWithModels = ref([]); // 存储带有模型实例的数据列表 |
|
||||
|
|
||||
// 定义预设视角参数 |
|
||||
const presetViews = { |
|
||||
overview: { |
|
||||
"longitude": 118.5132903711312, |
|
||||
"latitude": 38.84648563549342, |
|
||||
"height": 12675.768680075478, |
|
||||
"heading": 353.6789759103708, |
|
||||
"pitch": -36.657258995301596, |
|
||||
"roll": 0.0343469697692715 |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const createView = (obj) => { |
|
||||
return { |
|
||||
destination: Cesium.Cartesian3.fromDegrees(obj.longitude, obj.latitude, obj.height), |
|
||||
orientation: { |
|
||||
heading: Cesium.Math.toRadians(obj.heading), |
|
||||
pitch: Cesium.Math.toRadians(obj.pitch), |
|
||||
roll: Cesium.Math.toRadians(obj.roll) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
onMounted(async () => { |
|
||||
if (!Cesium) { |
|
||||
console.error("Cesium 对象未找到，请检查 index.html 文件！"); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 步骤 1: 初始化 Viewer 并配置为使用高德地图影像和平坦地形 |
|
||||
try { |
|
||||
viewer = new Cesium.Viewer(cesiumContainerRef.value, { |
|
||||
// **核心设置：禁用所有默认影像，我们将手动添加高德地图** |
|
||||
imageryProvider: false, |
|
||||
|
|
||||
// **使用平坦地形，避免依赖 Cesium Ion** |
|
||||
terrainProvider: new Cesium.EllipsoidTerrainProvider(), |
|
||||
// sceneMode: Cesium.SceneMode.COLUMBUS_VIEW, |
|
||||
// 禁用所有不必要的UI控件 |
|
||||
timeline: false, |
|
||||
animation: false, |
|
||||
baseLayerPicker: false, |
|
||||
geocoder: false, |
|
||||
sceneModePicker: false, |
|
||||
navigationHelpButton: false, |
|
||||
infoBox: false, |
|
||||
fullscreenButton: false, |
|
||||
homeButton: false, |
|
||||
|
|
||||
// 启用抗锯齿和其他渲染优化 |
|
||||
contextOptions: { |
|
||||
webgl: { |
|
||||
antialias: true |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
|
|
||||
// 禁用所有鼠标和键盘的相机控制操作 |
|
||||
/* viewer.scene.screenSpaceCameraController.enableRotate = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableTranslate = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableZoom = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableTilt = false; |
|
||||
viewer.scene.screenSpaceCameraController.enableLook = false; */ |
|
||||
|
|
||||
// 渲染优化设置 |
|
||||
// 启用抗锯齿 |
|
||||
viewer.scene.postProcessStages.fxaa.enabled = true; |
|
||||
|
|
||||
// 启用深度测试，确保模型能够被地形正确遮挡 |
|
||||
viewer.scene.globe.depthTestAgainstTerrain = true; |
|
||||
|
|
||||
// 启用时钟动画，确保模型能够根据时间更新 |
|
||||
viewer.clock.shouldAnimate = true; |
|
||||
|
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 200; |
|
||||
// 步骤 2: 添加高德地图卫星影像底图 |
|
||||
const gaodeImage = new Cesium.UrlTemplateImageryProvider({ |
|
||||
url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", |
|
||||
subdomains: ['1', '2', '3', '4'], |
|
||||
layer: 'gaodeImgLayer', |
|
||||
style: 'default', |
|
||||
format: 'image/png', |
|
||||
maximumLevel: 16 |
|
||||
}); |
|
||||
const dataInfo = history.value ? history.value : await MapApi.getAllData() |
|
||||
const shipData = await MapApi.getShipInfo({ |
|
||||
harborDistrictId: 1 |
|
||||
}) |
|
||||
console.log('shipData', shipData) |
|
||||
|
|
||||
// const unitedData = |
|
||||
|
|
||||
// 通用添加函数，遍历dataInfo并创建标记 |
|
||||
const addMarkersFromDataInfo = (dataInfo) => { |
|
||||
// 更严格的数组检查 |
|
||||
if (!dataInfo || !Array.isArray(dataInfo) || dataInfo.length === 0) { |
|
||||
console.log('No valid dataInfo array provided'); |
|
||||
return []; |
|
||||
} |
|
||||
|
|
||||
// 创建新数组存储带有模型实例的数据 |
|
||||
const dataWithModelsArray = []; |
|
||||
|
|
||||
console.log(`Processing ${dataInfo.length} items`); |
|
||||
|
|
||||
dataInfo.forEach((item, index) => { |
|
||||
// 检查基本数据结构 |
|
||||
if (!item) { |
|
||||
console.warn(`Item at index ${index} is null or undefined`); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
try { |
|
||||
// 创建包含模型实例的数据项副本 |
|
||||
let itemWithModel = { ...item }; |
|
||||
|
|
||||
// 解析data字段为JSON对象 |
|
||||
let dataObj; |
|
||||
if (typeof item.data === 'string') { |
|
||||
try { |
|
||||
dataObj = JSON.parse(item.data); |
|
||||
} catch (parseError) { |
|
||||
console.warn(`Failed to parse data for item ${item.id || index}:`, parseError); |
|
||||
dataWithModelsArray.push(itemWithModel); // 添加未解析成功的数据项 |
|
||||
return; |
|
||||
} |
|
||||
} else { |
|
||||
dataObj = item.data; |
|
||||
} |
|
||||
|
|
||||
// 检查dataObj是否有效 |
|
||||
if (!dataObj) { |
|
||||
console.warn(`No data object found for item ${item.id || index}`); |
|
||||
dataWithModelsArray.push(itemWithModel); // 添加无数据对象的数据项 |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 获取坐标信息 - 更严格的验证 |
|
||||
let longitude, latitude; |
|
||||
let wgsLon, wgsLat; |
|
||||
if (dataObj.xy && Array.isArray(dataObj.xy) && dataObj.xy.length >= 2) { |
|
||||
const wgsCoords = coordtransform.wgs84togcj02(dataObj.xy[1], dataObj.xy[0]); |
|
||||
wgsLon = wgsCoords[0]; |
|
||||
wgsLat = wgsCoords[1]; |
|
||||
// 确保坐标是有效数字 |
|
||||
latitude = wgsLat; |
|
||||
longitude = wgsLon; |
|
||||
// 检查坐标是否为有效数字 |
|
||||
if (isNaN(latitude) || isNaN(longitude)) { |
|
||||
console.warn(`Invalid coordinates for item ${item.id || index}:`, dataObj.xy); |
|
||||
dataWithModelsArray.push(itemWithModel); // 添加坐标无效的数据项 |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 检查坐标范围（简单验证） |
|
||||
if (Math.abs(latitude) > 90 || Math.abs(longitude) > 180) { |
|
||||
console.warn(`Coordinates out of range for item ${item.id || index}:`, dataObj.xy[1], dataObj.xy[0]); |
|
||||
dataWithModelsArray.push(itemWithModel); // 添加坐标超出范围的数据项 |
|
||||
return; |
|
||||
} |
|
||||
} else { |
|
||||
console.warn('无效的坐标信息:', item); |
|
||||
dataWithModelsArray.push(itemWithModel); // 添加无有效坐标的数据项 |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
if (dataObj.icon === 'ship_green') { |
|
||||
const itemShipInfo = shipData.find(shipItem => (shipItem.shorePower.id === item.parentId) && item.type === 5) |
|
||||
const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 15); |
|
||||
const statusPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1); |
|
||||
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35); |
|
||||
// 投放船模型 |
|
||||
const shipModel = viewer.entities.add({ |
|
||||
name: 'Cargo Ship Model', |
|
||||
position: position, |
|
||||
orientation: Cesium.Transforms.headingPitchRollQuaternion( |
|
||||
position, |
|
||||
new Cesium.HeadingPitchRoll( |
|
||||
Cesium.Math.toRadians(dataObj.rotationAngle), // 航向角 (绕Z轴旋转) |
|
||||
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转) |
|
||||
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转) |
|
||||
) |
|
||||
), |
|
||||
model: { |
|
||||
uri: '/model/cargo_ship_07.glb', |
|
||||
scale: 1.5, // 调整模型大小 |
|
||||
// minimumPixelSize: 100, // 确保模型至少显示为50像素大小 |
|
||||
// 启用深度测试，使模型能够被地形遮挡 |
|
||||
enableDepthTest: true, |
|
||||
// 启用背光剔除，提高渲染性能 |
|
||||
backFaceCulling: true |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 保存模型实例到数据项 |
|
||||
itemWithModel.modelInstance = shipModel; |
|
||||
itemWithModel.modelType = 'ship'; |
|
||||
itemWithModel = { ...itemWithModel, ...itemShipInfo }; |
|
||||
|
|
||||
viewer.entities.add({ |
|
||||
position: labelPosition, // 船上方约10米 |
|
||||
label: { |
|
||||
text: itemShipInfo.shipBasicInfo.name || `Marker-${item.id || index}`, |
|
||||
font: '12px sans-serif', |
|
||||
fillColor: Cesium.Color.WHITE, |
|
||||
outlineColor: Cesium.Color.BLACK, |
|
||||
outlineWidth: 2, |
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
|
||||
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠 |
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见 |
|
||||
} |
|
||||
}); |
|
||||
const overlayBillboard = viewer.entities.add({ |
|
||||
position: statusPosition, |
|
||||
billboard: { |
|
||||
image: '/img/故障.png', |
|
||||
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.6 + Math.sin(t * 4) * 0.2; // (基准0.6, 幅度±0.2) |
|
||||
return pulse; |
|
||||
}, false) |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
if (dataObj.type === 'text') { |
|
||||
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 35); |
|
||||
viewer.entities.add({ |
|
||||
position: labelPosition, // 船上方约10米 |
|
||||
label: { |
|
||||
text: dataObj.name || `Marker-${item.id || index}`, |
|
||||
font: '20px sans-serif', |
|
||||
fillColor: Cesium.Color.WHITE, |
|
||||
outlineColor: Cesium.Color.BLACK, |
|
||||
outlineWidth: 2, |
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
|
||||
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠 |
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见 |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
if (dataObj.type === 'icon' && (dataObj.icon === 'interface_blue' || dataObj.icon === 'interface_red')) { |
|
||||
const position = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1); |
|
||||
const labelPosition = Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 5); |
|
||||
// 投放岸电箱模型 |
|
||||
const electricalBoxModel = viewer.entities.add({ |
|
||||
name: 'Electrical Box Model', |
|
||||
position: position, |
|
||||
orientation: Cesium.Transforms.headingPitchRollQuaternion( |
|
||||
position, |
|
||||
new Cesium.HeadingPitchRoll( |
|
||||
Cesium.Math.toRadians(dataObj.rotationAngle), // 航向角 (绕Z轴旋转) |
|
||||
Cesium.Math.toRadians(0), // 俯仰角 (绕Y轴旋转) |
|
||||
Cesium.Math.toRadians(0) // 翻滚角 (绕X轴旋转) |
|
||||
) |
|
||||
), |
|
||||
model: { |
|
||||
uri: '/model/electrical_box.glb', |
|
||||
scale: 1, // 调整模型大小 |
|
||||
// minimumPixelSize: 10, // 确保模型至少显示为50像素大小 |
|
||||
// 启用深度测试，使模型能够被地形遮挡 |
|
||||
enableDepthTest: true, |
|
||||
// 启用背光剔除，提高渲染性能 |
|
||||
backFaceCulling: true |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 保存模型实例到数据项 |
|
||||
itemWithModel.modelInstance = electricalBoxModel; |
|
||||
itemWithModel.modelType = 'electrical_box'; |
|
||||
|
|
||||
viewer.entities.add({ |
|
||||
position: labelPosition, // 船上方约10米 |
|
||||
label: { |
|
||||
text: '岸电箱' || `Marker-${item.id || index}`, |
|
||||
font: '10px sans-serif', |
|
||||
fillColor: Cesium.Color.WHITE, |
|
||||
outlineColor: Cesium.Color.BLACK, |
|
||||
outlineWidth: 2, |
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
|
||||
pixelOffset: new Cesium.Cartesian2(0, -30), // 偏移量，避免与模型重叠 |
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY // 始终可见 |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 创建红点标记 |
|
||||
/* const entity = viewer.entities.add({ |
|
||||
name: item.name || `Marker-${item.id || index}`, |
|
||||
position: Cesium.Cartesian3.fromDegrees(wgsLon, wgsLat, 1), |
|
||||
point: { |
|
||||
pixelSize: 10, |
|
||||
color: Cesium.Color.RED, |
|
||||
outlineColor: Cesium.Color.WHITE, |
|
||||
outlineWidth: 2 |
|
||||
}, |
|
||||
// 可以添加标签显示名称 |
|
||||
label: { |
|
||||
text: item.name || `Marker-${item.id || index}`, |
|
||||
font: '14px sans-serif', |
|
||||
fillColor: Cesium.Color.WHITE, |
|
||||
outlineColor: Cesium.Color.BLACK, |
|
||||
outlineWidth: 2, |
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
|
||||
pixelOffset: new Cesium.Cartesian2(0, -15) |
|
||||
} |
|
||||
}); |
|
||||
// 保存点标记实例到数据项 |
|
||||
itemWithModel.modelInstance = entity; |
|
||||
itemWithModel.modelType = 'point'; |
|
||||
*/ |
|
||||
|
|
||||
// 将处理后的数据项添加到新数组 |
|
||||
dataWithModelsArray.push(itemWithModel); |
|
||||
} catch (error) { |
|
||||
console.error('Error processing item:', item, error); |
|
||||
// 创建一个基本的数据项副本并添加到数组 |
|
||||
dataWithModelsArray.push({ ...item }); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
return dataWithModelsArray; |
|
||||
}; |
|
||||
|
|
||||
// 步骤 3: 将图层添加到 Viewer 中 |
|
||||
viewer.imageryLayers.addImageryProvider(gaodeImage); |
|
||||
|
|
||||
// 调用通用函数创建标记并获取带有模型实例的数据 |
|
||||
dataWithModels.value = addMarkersFromDataInfo(dataInfo); |
|
||||
|
|
||||
// 设置初始视角 |
|
||||
viewer.camera.flyTo(createView(presetViews.overview)); |
|
||||
// 设置显示高度阈值 |
|
||||
const SHOW_HEIGHT = 30000; // 高度 > 5000m 才显示模型等信息 |
|
||||
// const targets = []; // 把需要控制的 entities push 进来 |
|
||||
const targets = dataWithModels.value |
|
||||
.filter(item => item.modelInstance) |
|
||||
.map(item => toRaw(item.modelInstance)); |
|
||||
console.log('targets', targets) |
|
||||
viewer.camera.changed.addEventListener(() => { |
|
||||
// 这个函数会在相机的任何属性发生变化后立即被调用。 |
|
||||
const height = viewer.camera.positionCartographic.height; |
|
||||
// console.log("相机高度（即缩放级别）已变化:", height.toFixed(2), "米"); |
|
||||
|
|
||||
// 控制模型显示/隐藏 |
|
||||
const visible = height <= SHOW_HEIGHT; // 1000m内才显示模型等信息 |
|
||||
targets.forEach(entity => { |
|
||||
if (entity.show !== visible) { |
|
||||
entity.show = visible; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 其他缩放级别逻辑 |
|
||||
if (height < 100000) { |
|
||||
// 放大到街景级别 |
|
||||
console.log("当前处于近距离缩放级别。"); |
|
||||
} else if (height > 5000000) { |
|
||||
// 缩小到全球级别 |
|
||||
console.log("当前处于远距离缩放级别。"); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 添加地图点击事件 |
|
||||
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); |
|
||||
handler.setInputAction(function (movement) { |
|
||||
console.log('地图点击事件触发'); |
|
||||
|
|
||||
// 尝试多种方式获取点击位置 |
|
||||
const ray = viewer.camera.getPickRay(movement.position); |
|
||||
|
|
||||
// 方法1: 从地球表面拾取 |
|
||||
let cartesian = viewer.scene.globe.pick(ray, viewer.scene); |
|
||||
|
|
||||
// 如果从地球表面拾取失败，尝试从场景中拾取 |
|
||||
if (!cartesian) { |
|
||||
cartesian = viewer.scene.pickPosition(movement.position); |
|
||||
console.log('使用场景拾取方法'); |
|
||||
} |
|
||||
|
|
||||
// 如果仍然失败，尝试使用相机计算位置 |
|
||||
if (!cartesian) { |
|
||||
// 获取屏幕中心点作为替代方案（仅用于调试） |
|
||||
console.log('无法从点击位置获取精确坐标'); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
if (cartesian) { |
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian); |
|
||||
if (cartographic) { |
|
||||
const longitude = Cesium.Math.toDegrees(cartographic.longitude); |
|
||||
const latitude = Cesium.Math.toDegrees(cartographic.latitude); |
|
||||
const gcj02 = coordtransform.gcj02towgs84(longitude, latitude); |
|
||||
console.log('点击位置经纬度:', { |
|
||||
longitude: gcj02[0], |
|
||||
latitude: gcj02[1] |
|
||||
}); |
|
||||
} else { |
|
||||
console.log('无法从笛卡尔坐标转换为大地坐标'); |
|
||||
} |
|
||||
} else { |
|
||||
console.log('未能获取到地球表面的点击位置'); |
|
||||
} |
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
|
||||
|
|
||||
// 确保启用场景的鼠标事件 |
|
||||
viewer.scene.screenSpaceCameraController.enableInputs = true; |
|
||||
|
|
||||
// 启用拾取透明物体 |
|
||||
viewer.scene.useDepthPicking = true; |
|
||||
|
|
||||
console.log('Cesium 高德地图 Viewer 初始化成功'); |
|
||||
} catch (error) { |
|
||||
console.error('Cesium Viewer 初始化失败:', error); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 视角切换方法 |
|
||||
const switchView = (viewName) => { |
|
||||
const viewParams = presetViews[viewName]; |
|
||||
if (viewParams && viewer) { |
|
||||
viewer.camera.flyTo({ |
|
||||
...createView(viewParams), |
|
||||
duration: 2.0 // 动画持续时间（秒） |
|
||||
}); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 视角切换方法 |
|
||||
const switchModelView = (view) => { |
|
||||
const modelInstance = toRaw(view); |
|
||||
console.log(modelInstance) |
|
||||
if (viewer && view) { |
|
||||
viewer.flyTo(modelInstance); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
// 获取当前视角信息的方法 |
|
||||
const getCurrentViewInfo = () => { |
|
||||
if (!viewer) { |
|
||||
console.warn('Viewer 尚未初始化'); |
|
||||
return null; |
|
||||
} |
|
||||
const camera = viewer.camera; |
|
||||
|
|
||||
const position = camera.position; // 世界笛卡尔坐标系 x,y,z |
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(position); |
|
||||
console.log( |
|
||||
{ |
|
||||
longitude: Cesium.Math.toDegrees(cartographic.longitude), |
|
||||
latitude: Cesium.Math.toDegrees(cartographic.latitude), |
|
||||
height: cartographic.height, |
|
||||
heading: Cesium.Math.toDegrees(camera.heading), |
|
||||
pitch: Cesium.Math.toDegrees(camera.pitch), |
|
||||
roll: Cesium.Math.toDegrees(camera.roll) |
|
||||
} |
|
||||
) |
|
||||
|
|
||||
}; |
|
||||
|
|
||||
// 暴露方法和数据给父组件使用 |
|
||||
defineExpose({ |
|
||||
switchView, |
|
||||
dataWithModels, |
|
||||
switchModelView |
|
||||
}); |
|
||||
|
|
||||
onBeforeUnmount(() => { |
|
||||
// 销毁 Viewer，释放 WebGL 资源 |
|
||||
if (viewer) { |
|
||||
viewer.destroy(); |
|
||||
viewer = null; |
|
||||
console.log('Cesium Viewer 已销毁'); |
|
||||
} |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.cesium-container { |
|
||||
width: 100%; |
|
||||
height: 100vh; |
|
||||
margin: 0; |
|
||||
padding: 0; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.btn-group { |
|
||||
position: absolute; |
|
||||
top: 10px; |
|
||||
z-index: 1000; |
|
||||
display: flex; |
|
||||
gap: 12rpx; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,244 @@ |
|||||
|
import { RealtimeDeviceData, ShipRespVo } from "@/types/shorepower"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import { MapApi } from "@/api/shorepower/map"; |
||||
|
/** |
||||
|
* 将毫秒时间戳格式化为 'YYYY/MM/DD HH:mm:ss' 格式 |
||||
|
* @param timestamp 毫秒时间戳 |
||||
|
* @returns 格式化后的时间字符串 |
||||
|
*/ |
||||
|
export const formatTimestamp = ( |
||||
|
timestamp: number | null | undefined, |
||||
|
format = 'YYYY/MM/DD HH:mm:ss' |
||||
|
): string => { |
||||
|
if (!timestamp) return ''; |
||||
|
// 处理秒级时间戳（10位数字）
|
||||
|
if (timestamp < 1e12) { |
||||
|
timestamp *= 1000; |
||||
|
} |
||||
|
return dayjs(timestamp).format(format); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 将两个时间戳之间的差值格式化为 "X小时Y分钟Z秒" |
||||
|
* @param {number} startTime - 开始时间戳（毫秒） |
||||
|
* @param {number} endTime - 结束时间戳（毫秒） |
||||
|
* @returns {string} 格式化后的时间字符串，如 "2小时30分钟15秒" |
||||
|
*/ |
||||
|
export function formatDuration(startTime?: number, endTime?: number): string { |
||||
|
if (!startTime || !endTime) return '--'; |
||||
|
const diffMs = Math.max(0, endTime - startTime); |
||||
|
const totalSeconds = Math.floor(diffMs / 1000); |
||||
|
|
||||
|
const hours = Math.floor(totalSeconds / 3600); |
||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60); |
||||
|
const seconds = totalSeconds % 60; |
||||
|
|
||||
|
let result = ''; |
||||
|
if (hours > 0) result += `${hours}小时`; |
||||
|
if (minutes > 0) result += `${minutes}分钟`; |
||||
|
if (seconds > 0 || result === '') result += `${seconds}秒`; |
||||
|
|
||||
|
return result || '0秒'; |
||||
|
} |
||||
|
|
||||
|
// 岸电使用文本构建
|
||||
|
export function showStatus(ship: ShipRespVo, realtimeDeviceData?: RealtimeDeviceData[]): { statusClass: string, status: string, useTime: string, useValue: string } | null { |
||||
|
const { usageRecordInfo, applyInfo } = ship; |
||||
|
if (!applyInfo || !usageRecordInfo || !usageRecordInfo.beginTime) { |
||||
|
return null; |
||||
|
} |
||||
|
if (applyInfo.reason == 0 && usageRecordInfo && usageRecordInfo.beginTime) { |
||||
|
|
||||
|
const start = new Date(usageRecordInfo.beginTime); |
||||
|
const end = usageRecordInfo.endTime ? new Date(usageRecordInfo.endTime) : new Date(); |
||||
|
|
||||
|
// 校验日期有效性
|
||||
|
if (isNaN(start.getTime()) || isNaN(end.getTime())) { |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
// 校验时间顺序
|
||||
|
if (end < start) { |
||||
|
return null; // 或抛出错误、记录日志等
|
||||
|
} |
||||
|
|
||||
|
// 计算总毫秒差
|
||||
|
const diffMs = end.getTime() - start.getTime(); |
||||
|
|
||||
|
// 转换为秒
|
||||
|
const totalSeconds = Math.floor(diffMs / 1000); |
||||
|
|
||||
|
const hours = Math.floor(totalSeconds / 3600); |
||||
|
const minutes = Math.floor((totalSeconds % 3600) / 60); |
||||
|
const seconds = totalSeconds % 60; |
||||
|
|
||||
|
let useValue = 0; |
||||
|
|
||||
|
// 检查是否有结束读数
|
||||
|
const hasEndReading = usageRecordInfo.powerEndManualReading || usageRecordInfo.powerEndSystemReading; |
||||
|
|
||||
|
if (hasEndReading) { |
||||
|
// 有结束读数，使用常规计算方式
|
||||
|
// 优先计算人工差值
|
||||
|
const manualDiff = usageRecordInfo.powerStartManualReading !== undefined && usageRecordInfo.powerEndManualReading !== undefined |
||||
|
? usageRecordInfo.powerEndManualReading - usageRecordInfo.powerStartManualReading |
||||
|
: null; |
||||
|
// 然后计算系统差值
|
||||
|
const systemDiff = usageRecordInfo.powerStartSystemReading !== undefined && usageRecordInfo.powerEndSystemReading !== undefined |
||||
|
? usageRecordInfo.powerEndSystemReading - usageRecordInfo.powerStartSystemReading |
||||
|
: null; |
||||
|
// 使用人工差值优先，然后系统差值，最后默认0
|
||||
|
useValue = manualDiff ?? systemDiff ?? 0; |
||||
|
} else { |
||||
|
// 没有结束读数，使用实时数据计算
|
||||
|
const deviceId = ship.shorePower?.totalPowerDeviceId; |
||||
|
if (deviceId) { |
||||
|
try { |
||||
|
// 调用API获取实时数据
|
||||
|
const measureValueStr = getValueById(realtimeDeviceData || [], deviceId, |
||||
|
'measureValue') |
||||
|
if (measureValueStr !== undefined) { |
||||
|
|
||||
|
// 优先使用人工开始读数，然后系统开始读数
|
||||
|
const startReading = usageRecordInfo.powerStartManualReading ?? usageRecordInfo.powerStartSystemReading ?? 0; |
||||
|
const measureValue = typeof measureValueStr === 'string' ? parseFloat(measureValueStr) : measureValueStr; |
||||
|
useValue = measureValue - startReading; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取实时数据失败:', error); |
||||
|
useValue = 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
statusClass: 'status-using', |
||||
|
status: `使用岸电${hours}小时${minutes}分钟${seconds}秒,${useValue.toFixed(2)}kWH`, |
||||
|
useTime: `${hours}小时${minutes}分钟${seconds}秒`, |
||||
|
useValue: useValue.toFixed(2) + 'kWH' |
||||
|
} |
||||
|
} else if (applyInfo.reason != 0) { |
||||
|
// 状态码映射表 - 包含状态文本和颜色类型
|
||||
|
const statusMap: Record<string, { text: string; colorType: string }> = { |
||||
|
'-1': { text: '未知错误', colorType: 'default' }, |
||||
|
'1': { text: '岸电用电接口不匹配', colorType: 'default' }, |
||||
|
'2': { text: '岸电设施电压/频率不匹配', colorType: 'success' }, |
||||
|
'3': { text: '电缆长度不匹配', colorType: 'success' }, |
||||
|
'4': { text: '气象因素禁止作业', colorType: 'success' }, |
||||
|
'5': { text: '船电设施损坏', colorType: 'warning' }, |
||||
|
'6': { text: '岸电设施维护中', colorType: 'warning' }, |
||||
|
'7': { text: '无受电设备', colorType: 'danger' }, |
||||
|
'8': { text: '拒绝使用岸电', colorType: 'danger' }, |
||||
|
'9': { text: '其他', colorType: 'danger' } |
||||
|
} |
||||
|
|
||||
|
const reasonKey = applyInfo.reason?.toString() || '-1' |
||||
|
const statusInfo = statusMap[reasonKey] || { text: applyInfo.reason, colorType: 'default' } |
||||
|
|
||||
|
// 根据颜色类型设置对应的状态类
|
||||
|
let statusClass = 'status-cable' |
||||
|
switch (statusInfo.colorType) { |
||||
|
case 'danger': |
||||
|
statusClass = 'status-danger' |
||||
|
break |
||||
|
case 'warning': |
||||
|
statusClass = 'status-warning' |
||||
|
break |
||||
|
case 'success': |
||||
|
statusClass = 'status-success' |
||||
|
break |
||||
|
default: |
||||
|
statusClass = 'status-cable' |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
statusClass: statusClass, |
||||
|
status: statusInfo.text |
||||
|
} |
||||
|
} else { |
||||
|
return { |
||||
|
statusClass: '', |
||||
|
status: 'unknown' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 根据 id 查找对象数组中的指定字段值，并保留两位小数 |
||||
|
* @param list - 对象数组，每个对象必须包含 id 字段 |
||||
|
* @param id - 要查找的 id 值 |
||||
|
* @param valueField - 要返回的字段名（必须是对象中除 id 外的 key） |
||||
|
* @returns 字段值，未找到则返回 undefined |
||||
|
*/ |
||||
|
export function getValueById<T extends { id: number | string }, K extends keyof Omit<T, 'id'>>( |
||||
|
list: T[], |
||||
|
id: T['id'], |
||||
|
valueField: K |
||||
|
): T[K] extends number | string ? string | undefined : T[K] | undefined { |
||||
|
const item = list.find(item => item.id === id); |
||||
|
|
||||
|
if (!item) return undefined; |
||||
|
|
||||
|
const value = item[valueField]; |
||||
|
|
||||
|
// 如果值是数字或可以转换为数字的字符串，则保留两位小数
|
||||
|
if (typeof value === 'number') { |
||||
|
return Number(value).toFixed(2) as any; |
||||
|
} |
||||
|
|
||||
|
if (typeof value === 'string' && !isNaN(Number(value))) { |
||||
|
return Number(value).toFixed(2) 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]; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,479 @@ |
|||||
|
interface ShorePowerBerth { |
||||
|
id: number |
||||
|
berthId: number |
||||
|
equipmentId: number |
||||
|
name: string |
||||
|
totalPowerDeviceId: number |
||||
|
frequencyDeviceId: number |
||||
|
voltageDeviceId: number |
||||
|
currentDeviceId: number |
||||
|
status: number |
||||
|
createTime: number // Unix timestamp in milliseconds
|
||||
|
shorePowerEquipmentInfo: ShorePowerEquipmentInfo |
||||
|
storePowerStatus?: string |
||||
|
} |
||||
|
|
||||
|
interface ShorePowerEquipmentInfo { |
||||
|
id: number |
||||
|
dockId: number |
||||
|
name: string |
||||
|
capacity: string // 可考虑转为 number，但原始数据为字符串 "2000"
|
||||
|
voltage: string // 如 "0.4/0.44"
|
||||
|
frequency: string // 如 "50/60"
|
||||
|
createTime: number // Unix timestamp in milliseconds
|
||||
|
} |
||||
|
|
||||
|
interface shipHistoryPageRequest { |
||||
|
/** |
||||
|
* 查询编号 |
||||
|
*/ |
||||
|
ids?: number[] |
||||
|
/** |
||||
|
* 页码，从 1 开始 |
||||
|
*/ |
||||
|
pageNo: number |
||||
|
/** |
||||
|
* 每页条数，最大值为 100 |
||||
|
*/ |
||||
|
pageSize: number |
||||
|
/** |
||||
|
* 船舶编号 |
||||
|
*/ |
||||
|
shipId?: number |
||||
|
/** |
||||
|
* 查询类型 |
||||
|
*/ |
||||
|
type?: number |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* CommonResultPageResultShipRespVo |
||||
|
*/ |
||||
|
interface apiResponse<T> { |
||||
|
code?: number |
||||
|
data?: T |
||||
|
msg?: string |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* PageResultShipRespVo，分页结果 |
||||
|
*/ |
||||
|
interface PageResultShipRespVo<T> { |
||||
|
/** |
||||
|
* 数据 |
||||
|
*/ |
||||
|
list: T[] |
||||
|
/** |
||||
|
* 总量 |
||||
|
*/ |
||||
|
total: number |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* ShipRespVo，管理后台 - 船舶岸电使用情况 Response VO |
||||
|
*/ |
||||
|
export interface ShipRespVo { |
||||
|
/** |
||||
|
* 船舶状态 |
||||
|
*/ |
||||
|
shipStatus?: string |
||||
|
/** |
||||
|
* 用电申请信息 |
||||
|
*/ |
||||
|
applyInfo: ApplyRespVO |
||||
|
/** |
||||
|
* 船舶基础信息 |
||||
|
*/ |
||||
|
shipBasicInfo: ShipBasicInfoRespVO |
||||
|
/** |
||||
|
* 用电接口信息 |
||||
|
*/ |
||||
|
shorePower: ShorePowerRespVO |
||||
|
/** |
||||
|
* 岸电接口与船舶关系 |
||||
|
*/ |
||||
|
shorePowerAndShip: ShorePowerAndShipRespVO |
||||
|
/** |
||||
|
* 岸电设施信息 |
||||
|
*/ |
||||
|
shorePowerEquipment: ShorePowerEquipmentRespVO |
||||
|
/** |
||||
|
* 船舶用电信息 |
||||
|
*/ |
||||
|
usageRecordInfo: UsageRecordRespVO |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 用电申请信息 |
||||
|
* |
||||
|
* ApplyRespVO，管理后台 - 用电申请 Response VO |
||||
|
*/ |
||||
|
export interface ApplyRespVO { |
||||
|
/** |
||||
|
* 船方代理单位 |
||||
|
*/ |
||||
|
agentCompany: string |
||||
|
/** |
||||
|
* 代理人联系方式 |
||||
|
*/ |
||||
|
agentContact: string |
||||
|
/** |
||||
|
* 是否申请使用岸电 |
||||
|
*/ |
||||
|
applyShorePower: boolean |
||||
|
/** |
||||
|
* 到达泊位 |
||||
|
*/ |
||||
|
arrivalBerth: number |
||||
|
/** |
||||
|
* 到达码头 |
||||
|
*/ |
||||
|
arrivalDock: number |
||||
|
/** |
||||
|
* 到达港 |
||||
|
*/ |
||||
|
arrivalHarborDistrict: number |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 起运港 |
||||
|
*/ |
||||
|
departureHarborDistrict: string |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 货物类型（装货） |
||||
|
*/ |
||||
|
loadingCargoCategory: number |
||||
|
/** |
||||
|
* 货物名称（装货） |
||||
|
*/ |
||||
|
loadingCargoName: string |
||||
|
/** |
||||
|
* 货物吨数（装货） |
||||
|
*/ |
||||
|
loadingCargoTonnage: number |
||||
|
/** |
||||
|
* 装货/卸货 |
||||
|
*/ |
||||
|
operationType: number |
||||
|
/** |
||||
|
* 计划靠泊时间 |
||||
|
*/ |
||||
|
plannedBerthTime: Date |
||||
|
/** |
||||
|
* 计划离泊时间 |
||||
|
*/ |
||||
|
plannedDepartureTime: Date |
||||
|
/** |
||||
|
* 未使用岸电原因 |
||||
|
*/ |
||||
|
reason?: number |
||||
|
/** |
||||
|
* 备注 |
||||
|
*/ |
||||
|
remark?: string |
||||
|
/** |
||||
|
* 船舶编号 |
||||
|
*/ |
||||
|
shipId: number |
||||
|
/** |
||||
|
* 申请状态 |
||||
|
*/ |
||||
|
status: number |
||||
|
/** |
||||
|
* 内贸/外贸 |
||||
|
*/ |
||||
|
tradeType: number |
||||
|
/** |
||||
|
* 货物类型(卸货) |
||||
|
*/ |
||||
|
unloadingCargoCategory: number |
||||
|
/** |
||||
|
* 货物名称(卸货) |
||||
|
*/ |
||||
|
unloadingCargoName: string |
||||
|
/** |
||||
|
* 货物吨数(卸货) |
||||
|
*/ |
||||
|
unloadingCargoTonnage: number |
||||
|
/** |
||||
|
* 航次 |
||||
|
*/ |
||||
|
voyage: string |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 船舶基础信息 |
||||
|
* |
||||
|
* ShipBasicInfoRespVO，管理后台 - 船舶基础信息 Response VO |
||||
|
*/ |
||||
|
export interface ShipBasicInfoRespVO { |
||||
|
/** |
||||
|
* 船舶呼号 |
||||
|
*/ |
||||
|
callSign: string |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 满载吃水深度 |
||||
|
*/ |
||||
|
fullLoadDraft: number |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 船检登记号 |
||||
|
*/ |
||||
|
inspectionNo: string |
||||
|
/** |
||||
|
* 船舶长度 |
||||
|
*/ |
||||
|
length: number |
||||
|
/** |
||||
|
* 船名 |
||||
|
*/ |
||||
|
name: string |
||||
|
/** |
||||
|
* 英文船名 |
||||
|
*/ |
||||
|
nameEn: string |
||||
|
/** |
||||
|
* 航运单位名称 |
||||
|
*/ |
||||
|
shippingCompany: string |
||||
|
/** |
||||
|
* 岸电负责人 |
||||
|
*/ |
||||
|
shorePowerContact: string |
||||
|
/** |
||||
|
* 联系方式 |
||||
|
*/ |
||||
|
shorePowerContactPhone: string |
||||
|
/** |
||||
|
* 船舶吨位 |
||||
|
*/ |
||||
|
tonnage: number |
||||
|
/** |
||||
|
* 船舶宽度 |
||||
|
*/ |
||||
|
width: number |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 用电接口信息 |
||||
|
* |
||||
|
* ShorePowerRespVO，管理后台 - 岸电 Response VO |
||||
|
*/ |
||||
|
export interface ShorePowerRespVO { |
||||
|
/** |
||||
|
* 泊位编号 |
||||
|
*/ |
||||
|
berthId: number |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 岸电设备编号 |
||||
|
*/ |
||||
|
equipmentId: number |
||||
|
/** |
||||
|
* 频率设备编号 |
||||
|
*/ |
||||
|
frequencyDeviceId: number |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 名称 |
||||
|
*/ |
||||
|
name: string |
||||
|
/** |
||||
|
* 总电量设备编号 |
||||
|
*/ |
||||
|
totalPowerDeviceId: number |
||||
|
/** |
||||
|
* 电压设备编号 |
||||
|
*/ |
||||
|
voltageDeviceId: number |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 岸电接口与船舶关系 |
||||
|
* |
||||
|
* ShorePowerAndShipRespVO，管理后台 - 岸电接口与船舶关系 Response VO |
||||
|
*/ |
||||
|
export interface ShorePowerAndShipRespVO { |
||||
|
/** |
||||
|
* 申请单编号 |
||||
|
*/ |
||||
|
applyId: number |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 船舶编号 |
||||
|
*/ |
||||
|
shipId: number |
||||
|
/** |
||||
|
* 岸电接口编号 |
||||
|
*/ |
||||
|
shorePowerId: number |
||||
|
/** |
||||
|
* 靠泊状态 |
||||
|
*/ |
||||
|
status: number |
||||
|
/** |
||||
|
* 靠泊类型 |
||||
|
*/ |
||||
|
type: string |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 岸电设施信息 |
||||
|
* |
||||
|
* ShorePowerEquipmentRespVO，管理后台 - 岸电设施 Response VO |
||||
|
*/ |
||||
|
export interface ShorePowerEquipmentRespVO { |
||||
|
/** |
||||
|
* 装机容量 |
||||
|
*/ |
||||
|
capacity: string |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 码头编号 |
||||
|
*/ |
||||
|
dockId: number |
||||
|
/** |
||||
|
* 频率 |
||||
|
*/ |
||||
|
frequency: string |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 名称 |
||||
|
*/ |
||||
|
name: string |
||||
|
/** |
||||
|
* 电压 |
||||
|
*/ |
||||
|
voltage: string |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 船舶用电信息 |
||||
|
* |
||||
|
* UsageRecordRespVO，管理后台 - 用电记录 Response VO |
||||
|
*/ |
||||
|
export interface UsageRecordRespVO { |
||||
|
/** |
||||
|
* 实际靠泊时间 |
||||
|
*/ |
||||
|
actualBerthTime?: Date |
||||
|
/** |
||||
|
* 实际离泊时间 |
||||
|
*/ |
||||
|
actualDepartureTime?: number | null | undefined |
||||
|
/** |
||||
|
* 用电申请编号 |
||||
|
*/ |
||||
|
applyId: number |
||||
|
/** |
||||
|
* 用电开始时供电方操作人 |
||||
|
*/ |
||||
|
beginPowerSupplyOperator?: string |
||||
|
/** |
||||
|
* 用电开始时用电方操作人 |
||||
|
*/ |
||||
|
beginPowerUsageOperator?: string |
||||
|
/** |
||||
|
* 用电开始时间 |
||||
|
*/ |
||||
|
beginTime?: number |
||||
|
/** |
||||
|
* 创建时间 |
||||
|
*/ |
||||
|
createTime: Date |
||||
|
/** |
||||
|
* 用电结束时间 |
||||
|
*/ |
||||
|
endTime?: number |
||||
|
/** |
||||
|
* 编号 |
||||
|
*/ |
||||
|
id: number |
||||
|
/** |
||||
|
* 用电结束时供电方操作人 |
||||
|
*/ |
||||
|
overPowerSupplyOperator?: string |
||||
|
/** |
||||
|
* 用电结束时用电方操作人 |
||||
|
*/ |
||||
|
overPowerUsageOperator?: string |
||||
|
/** |
||||
|
* 用电结束时间人工读数 |
||||
|
*/ |
||||
|
powerEndManualReading?: number |
||||
|
/** |
||||
|
* 用电结束时间系统读数 |
||||
|
*/ |
||||
|
powerEndSystemReading?: number |
||||
|
/** |
||||
|
* 用电开始时间人工读数 |
||||
|
*/ |
||||
|
powerStartManualReading?: number |
||||
|
/** |
||||
|
* 用电开始时间系统读数 |
||||
|
*/ |
||||
|
powerStartSystemReading?: number |
||||
|
/** |
||||
|
* 船舶编号 |
||||
|
*/ |
||||
|
shipId: number |
||||
|
/** |
||||
|
* 作业单状态 |
||||
|
*/ |
||||
|
status: number |
||||
|
[property: string]: any |
||||
|
} |
||||
|
|
||||
|
interface RealtimeDeviceData { |
||||
|
createTime: number // 时间戳（毫秒）
|
||||
|
deviceCode: string |
||||
|
deviceId: number |
||||
|
deviceName: string |
||||
|
deviceStatus: number |
||||
|
id: number |
||||
|
incrementCost: number |
||||
|
incrementValue: number |
||||
|
measureTime: number // 时间戳（毫秒）
|
||||
|
measureValue: number |
||||
|
} |
||||
Loading…
Reference in new issue