-
+
-->
+ 开始时间:
+
+
+ 结束时间:
+
+
- {{timeRangeOptions.find(option => option.value === timeRange)?.label ||
- ''}}量:
-
{{ chartData[timeRange][card.value] }}
+ 区间量
+ {{ historyData[card.value] }}
@@ -288,6 +302,11 @@ interface CardInfo {
value: string;
}
+interface RawItem {
+ measureValue: number;
+ measureTime: Date;
+}
+
interface ShorePowerUsageData {
totalPower: number; // 累计用电（千瓦时）
fuelReduction: number; // 减少燃油（吨）
@@ -348,6 +367,8 @@ export interface deviceData {
const pageType = ref<'realtime' | 'history'>('realtime')
const dateRange = ref([])
+const startDate = ref('')
+const endDate = ref('')
const totalPower = ref('0')
const fuelReduction = ref('0')
const co2Reduction = ref('0')
@@ -395,23 +416,25 @@ const startTimeDisplay = computed(() => {
// 计算日期选择器选中的时间范围显示
const selectedDateRangeDisplay = computed(() => {
- if (!dateRange.value || dateRange.value.length !== 2) {
+ /* if (!dateRange.value || dateRange.value.length !== 2) {
return '';
- }
+ } */
- const [startDate, endDate] = dateRange.value;
+ // const [startDate, endDate] = dateRange.value;
+ // const startDate = startDate.value
+ // const endDate = endDate.value
// 根据不同的时间粒度格式化日期
switch (historyTimeGranularity.value) {
case 'year':
// 年格式: YYYY
- return `${startDate} - ${endDate}`;
+ return `${startDate.value} - ${endDate.value}`;
case 'month':
// 月格式: YYYY-MM
- return `${startDate} - ${endDate}`;
+ return `${startDate.value} - ${endDate.value}`;
default:
// 日格式: YYYY-MM-DD
- return `${startDate} - ${endDate}`;
+ return `${startDate.value} - ${endDate.value}`;
}
});
@@ -540,6 +563,64 @@ const calculateTotalDiff = (data) => {
}, 0);
}
+// 处理开始日期变化
+const handleStartDateChange = (date: string | null) => {
+ if (date) {
+ startDate.value = date
+ // 如果结束日期为空，自动设置一个合理的结束日期
+ if (!endDate.value) {
+ const start = new Date(date)
+ let end = new Date(date)
+
+ switch (historyTimeGranularity.value) {
+ case 'year':
+ end.setFullYear(start.getFullYear() + 1)
+ break
+ case 'month':
+ end.setMonth(start.getMonth() + 1)
+ break
+ default:
+ end.setDate(start.getDate() + 7) // 默认设置一周后
+ break
+ }
+
+ // 格式化结束日期
+ const formatEndDate = (date: Date) => {
+ const year = date.getFullYear()
+ const month = String(date.getMonth() + 1).padStart(2, '0')
+ const day = String(date.getDate()).padStart(2, '0')
+
+ switch (historyTimeGranularity.value) {
+ case 'year':
+ return year.toString()
+ case 'month':
+ return `${year}-${month}`
+ default:
+ return `${year}-${month}-${day}`
+ }
+ }
+
+ endDate.value = formatEndDate(end)
+ }
+
+ // 只有当开始和结束日期都设置时才触发查询
+ if (startDate.value && endDate.value) {
+ handleSelectDate([startDate.value, endDate.value])
+ }
+ }
+}
+
+// 处理结束日期变化
+const handleEndDateChange = (date: string | null) => {
+ if (date) {
+ endDate.value = date
+ // 只有当开始和结束日期都设置时才触发查询
+ if (startDate.value && endDate.value) {
+ handleSelectDate([startDate.value, endDate.value])
+ }
+ }
+}
+
const handleSelectDate = async (range: string[] | null) => {
if (!range || range.length !== 2) {
// 清空逻辑
@@ -952,10 +1033,10 @@ onMounted(() => {
handleGetRealTimeAllData(props.realtimeDeviceData)
// 添加卡片选择事件监听器
- cardSelectedHandler = (event: CustomEvent) => {
+ /* cardSelectedHandler = (event: CustomEvent) => {
selectedCard.value = event.detail
}
- window.addEventListener('cardSelected', cardSelectedHandler)
+ window.addEventListener('cardSelected', cardSelectedHandler) */
})
// 监听 activeHeadGroup 变化，当组件变为可见时触发 resize
@@ -1077,13 +1158,34 @@ onBeforeUnmount(() => {
}
.time-range-item {
- font-size: 16px;
+ font-size: 24px;
font-weight: 600;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
+.separate-date-pickers {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.date-picker-group {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.date-label {
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.8);
+ white-space: nowrap;
+}
+
+.date-picker {
+ width: 140px;
+}
.right {
/* gap: 0 */
diff --git a/public/map/components/ShorePowerUsageSingleData.vue b/public/map/components/ShorePowerUsageSingleData.vue
index d267493..5500b33 100644
--- a/public/map/components/ShorePowerUsageSingleData.vue
+++ b/public/map/components/ShorePowerUsageSingleData.vue
@@ -12,8 +12,7 @@
{{ card.title }}
- 
年环比
+
+
+ {{ (getYearlyData[0].growthRate * 100).toFixed(1) }}%
+
起始时间: {{ startTimeDisplay }}
- 更新时间: {{ realtimeDeviceDataTime }}
+ {{ startTimeDisplay }} 至 {{ realtimeDeviceDataTime }}
{{timeRangeOptions.find(option => option.value === timeRange)?.label ||
''}}量:
{{ chartData[timeRange][card.value] }}
@@ -34,9 +33,14 @@
年环比
+
+
+ {{ (getYearlyData[0].growthRate * 100).toFixed(1) }}%
+
-
@@ -45,10 +49,15 @@
月环比
+
+
+ {{ (getMonthlyData[0].growthRate * 100).toFixed(1) }}%
+
-
@@ -56,9 +65,14 @@
日环比
+
+
+ {{ (getDailyData[0].growthRate * 100).toFixed(1) }}%
+
日环比
+
+
+ {{ (getDailyData[0].growthRate * 100).toFixed(1) }}%
+
-
@@ -252,7 +266,7 @@ import WaveLineChart from './charts/WaveLineChart.vue'
import { MapApi } from "@/api/shorepower/map";
import dayjs from 'dayjs';
import ComparisonBarChart from './charts/ComparisonBarChart.vue'
-import { RealtimeDeviceData } from '@/types/shorepower';
+import { ComparativeData, RealtimeDeviceData } from '@/types/shorepower';
import { formatTimestamp, parseRangeToTimestamp } from './utils';
@@ -261,8 +275,11 @@ interface Props {
activeHeadGroup?: number;
handleGoBack: () => void;
realtimeDeviceDataTime: string;
+ comparativeData: ComparativeData;
}
+
+
const props = defineProps
-
-
+
+
+
+
@@ -49,6 +50,114 @@
+
+
+ ×
+
+
+ 船舶详情
+
+
+ 船舶详情
+
+
+
+
+
+ 名称:
+ {{ shipSelectedItem.shipBasicInfo.name + '-' +
+ shipSelectedItem.shipBasicInfo.nameEn
+ }}
+
+
+
+
+ 长度:
+ {{ shipSelectedItem.shipBasicInfo.length }} 米
+
+
+ 宽度:
+ {{ shipSelectedItem.shipBasicInfo.width }} 米
+
+
+ 吨位:
+ {{ shipSelectedItem.shipBasicInfo.tonnage }} 吨
+
+
+ 满载吃水深度:
+ {{ shipSelectedItem.shipBasicInfo.fullLoadDraft }} 米
+
+
+ 电压:
+ {{ getValueById(realtimeDeviceData,
+ shipSelectedItem.shorePower.voltageDeviceId,
+ 'measureValue') }}
+
+
+ 电流:
+ {{ getValueById(realtimeDeviceData,
+ shipSelectedItem.shorePower.currentDeviceId,
+ 'measureValue') }}
+
+
+ 频率:
+ {{ getValueById(realtimeDeviceData,
+ shipSelectedItem.shorePower.frequencyDeviceId,
+ 'measureValue') }}
+
+
+ 靠泊状态:
+ {{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.status,
+ SHORE_POWER_STATUS,
+ ) }}
+
+
+ 靠泊类型:
+ {{ getOperationTypeLabel(shipSelectedItem.shorePowerAndShip.type,
+ BERTH_TYPE)
+ }}
+
+
+ 靠泊时间:
+ {{
+ formatTimestamp(shipSelectedItem?.usageRecordInfo?.actualBerthTime) }}
+
+
+ 当前状态:
+ {{ shipSelectedItem.shipStatus }}({{
+ shipSelectedItem.StatusReason
+ }})
+
+
+ 岸电使用时长
+ {{ showStatus(shipSelectedItem, realtimeDeviceData)?.useTime }}
+
+
+ 岸电使用用量:
+ {{ showStatus(shipSelectedItem, realtimeDeviceData)?.useValue }}
+
+
+ 未使用岸电原因:
+ {{ getOperationTypeLabel(shipSelectedItem?.applyInfo?.reason,
+ UNUSED_SHORE_POWER_REASON) }}
+
+
+ 岸电联系人:
+ {{ shipSelectedItem?.shipBasicInfo?.shorePowerContact
+ }}
+
+
+ 联系方式:
+ {{ shipSelectedItem?.shipBasicInfo?.shorePowerContactPhone
+ }}
+
+
@@ -64,7 +173,7 @@
-
@@ -79,7 +188,7 @@
港区岸电使用情况
+港区岸电用电量统计
{{ portStartTime }} 至 {{ realtimeDeviceDataTime }}
-
+
@@ -113,7 +222,7 @@
{{ chartData[portActivePeriod].totalPower }}
累计用电 (千瓦时)
-
@@ -169,7 +278,7 @@
港口港区企业岸电使用
+港区企业岸电用电量统计
{{ enterpriseStartTime }} 至 {{ realtimeDeviceDataTime }}
-
@@ -259,6 +368,8 @@ import { CompanyShorePowerBuildDataItem, RealtimeDeviceData, ShipRespVo, TimeRan
import { ref, computed } from 'vue'
import { MapApi } from "@/api/shorepower/map";
import ShipHistoryDialog from './ShipHistoryDialog.vue'
+import { formatTimestamp, getValueById, showStatus } from './utils';
+import { BERTH_TYPE, getOperationTypeLabel, SHORE_POWER_STATUS, UNUSED_SHORE_POWER_REASON } from './dictionaryTable';
interface Props {
handleGoToModule: (moduleType: number) => void
realtimeDeviceDataTime: string
@@ -607,8 +718,14 @@ const handleShowShipList = (type: string) => {
// 关闭船舶列表面板
const handleCloseShipList = () => {
+ handleCloseShipDetail()
showShipList.value = false
}
+
+// 关闭船舶详情面板
+const handleCloseShipDetail = () => {
+ shipSelectedItem.value = null
+}
港区船舶岸电使用情况
+港区船舶岸电用电量统计
{{ shipStartTime }} 至 {{ realtimeDeviceDataTime }}