|
|
|
@ -8,9 +8,6 @@ |
|
|
|
<div class="vertical-line"></div> |
|
|
|
<img src="@/assets/svgs/data.svg" class="title-icon" /> |
|
|
|
<span class="title-text">码头与泊位信息</span> |
|
|
|
<div class="data-update-time">起始时间: 2025-01-01 00:00:00</div> |
|
|
|
<div class="data-update-time">更新时间: {{ realtimeDeviceDataTime }}</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 返回上个页面 --> |
|
|
|
<el-button type="primary" @click.stop="handleGoBack()">返回</el-button> |
|
|
|
@ -24,13 +21,23 @@ |
|
|
|
|
|
|
|
<div class="card-content"> |
|
|
|
<div v-for="company in companyComparisonData" :key="company.name" class="company-section"> |
|
|
|
<div class="data-update-time">起始时间: {{ getStartTimeByRange(getCompanyTimeRange(company.id)) }} 更新时间: {{ |
|
|
|
realtimeDeviceDataTime }}</div> |
|
|
|
<div class="company-header"> |
|
|
|
<div class="company-info"> |
|
|
|
<div class="company-name">{{ company.name }}</div> |
|
|
|
<div class="company-berth-count">泊位数: {{ company.children?.length || 0 }}</div> |
|
|
|
</div> |
|
|
|
<div class="time-range-container"> |
|
|
|
<button v-for="option in timeRangeOptions" :key="option.value" |
|
|
|
:class="['time-range-btn', { active: getCompanyTimeRange(company.id) === option.value }]" |
|
|
|
@click.stop="() => handleTimeRangeChange(company.id, option.value)"> |
|
|
|
{{ option.label }} |
|
|
|
</button> |
|
|
|
<div class="company-total">总量: {{ calculateTotal(company.children).toFixed(2) }}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="overview-grid"> |
|
|
|
<div v-for="(berth, index) in (company.children || [])" :key="index" class="overview-item" |
|
|
|
@click="handleClickBerthItem(berth)"> |
|
|
|
@ -45,17 +52,19 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right" v-if="selectedShorePowerItem"> |
|
|
|
<div class="card digital-twin-card--deep-blue"> |
|
|
|
<div class="right" style="width: 800px;" :style="{ width: selectedShorePowerItem ? '800px' : '420px' }"> |
|
|
|
<div style="display: flex; gap: 12px; height: 100%;"> |
|
|
|
<div v-if="selectedShorePowerItem" 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> |
|
|
|
<div style="ma"> |
|
|
|
<el-button class="close-btn" type="text" @click="closeShorePowerDetail">×</el-button> |
|
|
|
<!-- <div style="ma"> |
|
|
|
<el-button type="primary" @click="handleOpenHistory">查看历史记录</el-button> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
@ -108,6 +117,51 @@ |
|
|
|
</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="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> |
|
|
|
</div> |
|
|
|
<ship-history-dialog v-model="historyVisible.visible" :ship-param="historyVisible.searchParams" |
|
|
|
:realtime-device-data="realtimeDeviceData" /> |
|
|
|
@ -118,7 +172,7 @@ |
|
|
|
import { ref } from 'vue' |
|
|
|
import { MapApi } from "@/api/shorepower/map"; |
|
|
|
import ShipHistoryDialog from './ShipHistoryDialog.vue'; |
|
|
|
import { RealtimeDeviceData, ShorePowerBerth } from '@/types/shorepower'; |
|
|
|
import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower'; |
|
|
|
import { getValueById } from './utils'; |
|
|
|
// 定义组件属性 |
|
|
|
interface ChartDataItem { |
|
|
|
@ -147,6 +201,134 @@ interface Props { |
|
|
|
|
|
|
|
const props = defineProps<Props>() |
|
|
|
const selectedShorePowerItem = ref<ShorePowerBerth>() |
|
|
|
const shorepowerSelectedItem = ref<ShorePowerBerth & { position: string; } | null>(null) |
|
|
|
const storeSearchKeyword = ref('') |
|
|
|
// 时间范围选项定义 |
|
|
|
interface TimeRangeOption { |
|
|
|
value: 'day' | 'month' | 'year' | 'realtime'; |
|
|
|
label: string; |
|
|
|
} |
|
|
|
|
|
|
|
const timeRangeOptions: TimeRangeOption[] = [ |
|
|
|
{ value: 'day', label: '本日' }, |
|
|
|
{ value: 'month', label: '本月' }, |
|
|
|
{ value: 'year', label: '本年' }, |
|
|
|
{ value: 'realtime', label: '总' }, |
|
|
|
] |
|
|
|
|
|
|
|
const closeShorePowerDetail = () => { |
|
|
|
selectedShorePowerItem.value = undefined |
|
|
|
} |
|
|
|
|
|
|
|
// 处理岸电箱搜索输入 |
|
|
|
const handlStoreSearch = () => { |
|
|
|
// 输入处理逻辑（如果需要额外处理可以在这里添加） |
|
|
|
} |
|
|
|
|
|
|
|
const getStatusClass = (status: string | undefined) => { |
|
|
|
switch (status) { |
|
|
|
case '正常': |
|
|
|
return 'status-normal' |
|
|
|
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-normal' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 过滤后的岸电箱数据 |
|
|
|
const filteredShorePowerList = computed(() => { |
|
|
|
if (!storeSearchKeyword.value) { |
|
|
|
return props.shorePowerList |
|
|
|
} |
|
|
|
return props.shorePowerList.filter(shorepower => |
|
|
|
shorepower.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase()) |
|
|
|
) |
|
|
|
}) |
|
|
|
|
|
|
|
// 定义事件 |
|
|
|
const emit = defineEmits<{ |
|
|
|
(e: 'switch-ship', ship: ShipRespVo): void; |
|
|
|
(e: 'item-click', item: any): void; |
|
|
|
// handleSelectItem(ship) |
|
|
|
|
|
|
|
}>() |
|
|
|
|
|
|
|
const handleSelectShorePower = async (shorepower: ShorePowerBerth & { position: string }) => { |
|
|
|
// selectedItem.value = shorepower |
|
|
|
shorepowerSelectedItem.value = shorepower |
|
|
|
selectedShorePowerItem.value = shorepower |
|
|
|
emit('item-click', { |
|
|
|
type: 'shorepower_box', |
|
|
|
item: shorepower |
|
|
|
}) |
|
|
|
// const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId }) |
|
|
|
// console.log('voltageDeviceId', data) |
|
|
|
} |
|
|
|
|
|
|
|
// 为每个公司维护独立的时间范围状态 |
|
|
|
const companyTimeRanges = ref<Record<number, 'realtime' | 'day' | 'month' | 'year'>>({}) |
|
|
|
|
|
|
|
// 获取指定公司的时间范围设置，默认为'day' |
|
|
|
const getCompanyTimeRange = (companyId: number) => { |
|
|
|
return companyTimeRanges.value[companyId] || 'day' |
|
|
|
} |
|
|
|
|
|
|
|
// 根据时间粒度计算起始时间 |
|
|
|
const getStartTimeByRange = (range: 'realtime' | 'day' | 'month' | 'year') => { |
|
|
|
const now = new Date(); |
|
|
|
|
|
|
|
switch (range) { |
|
|
|
case 'day': |
|
|
|
// 当天的 00:00:00 |
|
|
|
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); |
|
|
|
return formatDate(today); |
|
|
|
case 'month': |
|
|
|
// 当月第一天的 00:00:00 |
|
|
|
const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); |
|
|
|
return formatDate(firstDayOfMonth); |
|
|
|
case 'year': |
|
|
|
// 当年第一天的 00:00:00 |
|
|
|
const firstDayOfYear = new Date(now.getFullYear(), 0, 1); |
|
|
|
return formatDate(firstDayOfYear); |
|
|
|
case 'realtime': |
|
|
|
// 固定起始时间，可以根据实际需求修改 |
|
|
|
return '2020-01-01 00:00:00'; |
|
|
|
default: |
|
|
|
return formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate())); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 格式化日期为 YYYY-MM-DD HH:mm:ss 格式 |
|
|
|
const formatDate = (date: Date) => { |
|
|
|
const year = date.getFullYear(); |
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); |
|
|
|
const day = String(date.getDate()).padStart(2, '0'); |
|
|
|
return `${year}-${month}-${day} 00:00:00`; |
|
|
|
} |
|
|
|
|
|
|
|
// 处理时间范围选择 |
|
|
|
const handleTimeRangeChange = (companyId: number, range: 'realtime' | 'day' | 'month' | 'year') => { |
|
|
|
companyTimeRanges.value[companyId] = range |
|
|
|
// 这里可以添加根据时间范围切换数据源的逻辑 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 计算总量的函数 |
|
|
|
const calculateTotal = (children?: ChartDataItem[]) => { |
|
|
|
@ -363,4 +545,27 @@ onMounted(() => { |
|
|
|
.card-content::-webkit-scrollbar-thumb:hover { |
|
|
|
background: rgba(17, 138, 237, 1); |
|
|
|
} |
|
|
|
|
|
|
|
.time-range-container { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.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); |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
margin-bottom: 8px; |
|
|
|
} |
|
|
|
</style> |
