diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue index b82dc71..c659656 100644 --- a/public/map/components/CompanyShorePower.vue +++ b/public/map/components/CompanyShorePower.vue @@ -8,9 +8,6 @@
码头与泊位信息 -
起始时间: 2025-01-01 00:00:00
-
更新时间: {{ realtimeDeviceDataTime }}
- 返回 @@ -24,12 +21,22 @@
+
起始时间: {{ getStartTimeByRange(getCompanyTimeRange(company.id)) }} 更新时间: {{ + realtimeDeviceDataTime }}
{{ company.name }}
泊位数: {{ company.children?.length || 0 }}
-
总量: {{ calculateTotal(company.children).toFixed(2) }}
+
+ +
总量: {{ calculateTotal(company.children).toFixed(2) }}
+
+
-
-
-
-
-
- - 岸电箱详情 -
-
- 查看历史记录 +
+
+
+
+
+
+ + 岸电箱详情 +
+ × +
-
-
-
-
- 名称: - {{ selectedShorePowerItem?.name }} -
-
- 位置: - {{ selectedShorePowerItem?.position }} -
-
- 电压: - {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.voltage }} -
-
- 频率: - {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.frequency }} -
-
- 容量: - {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.capacity }} -
-
- 当前电压: - {{ getValueById(realtimeDeviceData, selectedShorePowerItem.voltageDeviceId, - 'measureValue') }} -
-
- 当前电流: - {{ getValueById(realtimeDeviceData, selectedShorePowerItem.currentDeviceId, - 'measureValue') }} -
-
- 当前频率: - {{ getValueById(realtimeDeviceData, selectedShorePowerItem.frequencyDeviceId, - 'measureValue') }} +
+
+
+ 名称: + {{ selectedShorePowerItem?.name }} +
+
+ 位置: + {{ selectedShorePowerItem?.position }} +
+
+ 电压: + {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.voltage }} +
+
+ 频率: + {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.frequency }} +
+
+ 容量: + {{ selectedShorePowerItem?.shorePowerEquipmentInfo?.capacity }} +
+
+ 当前电压: + {{ getValueById(realtimeDeviceData, selectedShorePowerItem.voltageDeviceId, + 'measureValue') }} +
+
+ 当前电流: + {{ getValueById(realtimeDeviceData, selectedShorePowerItem.currentDeviceId, + 'measureValue') }} +
+
+ 当前频率: + {{ getValueById(realtimeDeviceData, selectedShorePowerItem.frequencyDeviceId, + 'measureValue') }} +
+
+ 当前总用量: + {{ getValueById(realtimeDeviceData, selectedShorePowerItem.totalPowerDeviceId, + 'measureValue') }} +
+
+ 当前状态: + {{ selectedShorePowerItem.storePowerStatus }} +
-
- 当前总用量: - {{ getValueById(realtimeDeviceData, selectedShorePowerItem.totalPowerDeviceId, - 'measureValue') }} +
+
+
+
+
+
+ + 岸电箱状态
-
- 当前状态: - {{ selectedShorePowerItem.storePowerStatus }} + +
+ +
+
+
+
岸电箱名称
+
状态
+
历史
+
+
+
+
+
⚡
+ {{ shorepower.name }} +
+
+
+ {{ shorepower.storePowerStatus }} +
+ +
+
+ 查看 +
+
+
@@ -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() const selectedShorePowerItem = ref() +const shorepowerSelectedItem = ref(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>({}) + +// 获取指定公司的时间范围设置，默认为'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; +} \ No newline at end of file diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue index e048618..cf65d36 100644 --- a/public/map/components/ShipShorePower.vue +++ b/public/map/components/ShipShorePower.vue @@ -76,11 +76,11 @@ {{ formatDateTime(scope.row?.usageRecordInfo?.endTime) }} - +