g-cesium-map/public/map/components/ShipShorePower.vue

<template>
  <div class="ship-shore-power">
    <div class="left" style="width: 75%;">
      <div class="card digital-twin-card--deep-blue" style="flex: 1;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div class="card-title">
            <div class="vertical-line"></div>
            <img src="@/assets/svgs/data.svg" class="title-icon" />
            <span class="title-text">概览</span>
            <div class="time-range-item">起始时间: {{ startTimeDisplay }}</div>
            <div class="time-range-item">更新时间: {{ realtimeDeviceDataTime }}</div>
          </div>
          <el-button type="primary" @click.stop="handleGoBack()">返回</el-button>

        </div>

        <div class="card-content">
          <div class="overview-grid">
            <div class="overview-item">
              <div class="overview-value">{{ shipTotalData.berthingShips }}</div>
              <div class="overview-label">在港船舶数量</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ shipTotalData.shorePowerShips }}</div>
              <div class="overview-label">使用岸电船舶数量</div>
            </div>
            <div class="overview-item">
              <div class="overview-value">{{ shipTotalData.noShorePowerShips }}</div>
              <div class="overview-label">未使用岸电船舶数量</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card digital-twin-card--deep-blue" style="flex: 3;">
        <div class="card-title data-card-title">
          <div class="title-section">
            <div class="vertical-line"></div>
            <img src="@/assets/svgs/data.svg" class="title-icon" />
            <span class="title-text">数据</span>
          </div>
          <div class="filter-controls">
            <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-right: 10px;"
              @change="handleStatusFilterChange">
              <el-option label="全部" value="all" />
              <el-option label="使用岸电" value="using" />
              <el-option label="未使用岸电" value="not-using" />
            </el-select>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleDateRangeChange"
              class="date-range-picker" />
            <el-button @click="resetFilter" style="margin-left: 10px;">重置筛选</el-button>
          </div>
        </div>
        <div class="card-content">
          <div class="ship-data-table-container">
            <el-table :data="filteredShipData" class="ship-data-table" @row-click="handleClickShipItem"
              highlight-current-row>
              <el-table-column prop="shipBasicInfo.name" label="船名" />
              <el-table-column prop="applyInfo.arrivalDock" label="码头">
                <template #default="scope">
                  <span>{{ getOperationTypeLabel(scope.row.applyInfo?.arrivalDock, dockIdAndNameList) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="applyInfo.arrivalBerth" label="泊位">
                <template #default="scope">
                  <span>{{ getOperationTypeLabel(scope.row.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="beginTime" label="开始用电时间">
                <template #default="scope">
                  <span>{{ formatDateTime(scope.row?.usageRecordInfo?.beginTime) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="endTime" label="结束用电时间">
                <template #default="scope">
                  <span>{{ formatDateTime(scope.row?.usageRecordInfo?.endTime) }}</span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="shipStatus" label="船舶状态">
                <template #default="scope">
                  <span :class="[getStatusClass(scope.row.shipStatus)]">{{ scope.row.shipStatus }}</span>
                </template>
              </el-table-column> -->
              <el-table-column prop="status" label="岸电状态" width="400">
                <template #default="scope">
                  <span v-if="scope.row.applyInfo?.reason === 0"
                    :class="['shore-power-status', showStatus(scope.row, realtimeDeviceData)?.statusClass]">时长{{
                      showStatus(scope.row,
                        realtimeDeviceData)?.useTime }},用量{{
                      showStatus(scope.row, realtimeDeviceData)?.useValue }}
                  </span>
                  <span v-if="scope.row.applyInfo?.reason != 0" class="shore-power-status status-off">{{
                    getOperationTypeLabel(scope.row.applyInfo?.reason,
                      UNUSED_SHORE_POWER_REASON) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="applyInfo.departureHarborDistrict" label="起运港" />
              <el-table-column prop="arrivalHarborDistrict" label="到达港">
                <template #default="scope">
                  <span>{{ getOperationTypeLabel(scope.row.applyInfo?.arrivalHarborDistrict,
                    harborDistrictIdAndNameList) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="scope">
                  <el-button type="primary" size="small" @click.stop="showDetail(scope.row)">更多</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="right" v-if="selectedShip">
      <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">{{ selectedShip.shipBasicInfo.name + '-' + selectedShip.shipBasicInfo.nameEn
              }}</span>
            </div>
            <div class="detail-item">
              <span class="label">长度:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.length }} 米</span>
            </div>
            <div class="detail-item">
              <span class="label">宽度:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.width }} 米</span>
            </div>
            <div class="detail-item">
              <span class="label">吨位:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.tonnage }} 吨</span>
            </div>
            <div class="detail-item">
              <span class="label">满载吃水深度:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.fullLoadDraft }} 米</span>
            </div>
            <div class="detail-item">
              <span class="label">电压:</span>
              <span class="value">{{ getValueById(realtimeDeviceData, selectedShip.shorePower.voltageDeviceId,
                'measureValue') }}</span>
            </div>
            <div class="detail-item">
              <span class="label">电流:</span>
              <span class="value">{{ getValueById(realtimeDeviceData, selectedShip.shorePower.currentDeviceId,
                'measureValue') }}</span>
            </div>
            <div class="detail-item">
              <span class="label">频率:</span>
              <span class="value">{{ getValueById(realtimeDeviceData, selectedShip.shorePower.frequencyDeviceId,
                'measureValue') }}</span>
            </div>
            <div class="detail-item">
              <span class="label">靠泊状态:</span>
              <span class="value">{{ getOperationTypeLabel(selectedShip.shorePowerAndShip.status,
                SHORE_POWER_STATUS,
              ) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">靠泊类型:</span>
              <span class="value">{{ getOperationTypeLabel(selectedShip.shorePowerAndShip.type, BERTH_TYPE)
              }}</span>
            </div>
            <div class="detail-item">
              <span class="label">靠泊时间:</span>
              <span class="value">{{ formatTimestamp(selectedShip?.usageRecordInfo?.actualBerthTime) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">当前状态:</span>
              <span class="value">{{ selectedShip.shipStatus }}</span>
            </div>
            <div v-if="selectedShip.applyInfo.reason === 0" class="detail-item">
              <span class="label">岸电使用时长:</span>
              <span class="value">{{ showStatus(selectedShip, realtimeDeviceData)?.useTime }}</span>
            </div>
            <div v-if="selectedShip.applyInfo.reason === 0" class="detail-item">
              <span class="label">岸电使用用量:</span>
              <span class="value">{{ showStatus(selectedShip, realtimeDeviceData)?.useValue }}</span>
            </div>
            <div v-if="selectedShip.applyInfo.reason != 0" class="detail-item">
              <span class="label">未使用岸电原因:</span>
              <span class="value">{{ getOperationTypeLabel(selectedShip?.applyInfo?.reason,
                UNUSED_SHORE_POWER_REASON) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">岸电联系人:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContact }}</span>
            </div>
            <div class="detail-item">
              <span class="label">联系方式:</span>
              <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContactPhone }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 船舶详情对话框 -->
    <el-dialog v-if="detailDialogVisible" v-model="detailDialogVisible" title="更多信息" width="1000px"
      class="ship-detail-dialog">
      <el-tabs v-if="selectedShip" v-model="activeTab">
        <el-tab-pane label="用电申请信息" name="applyInfo">
          <el-form :model="selectedShip.applyInfo" label-width="200px">
            <!-- 船舶代理信息 -->
            <h3>船舶代理信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="船方代理单位:">
                  <span>{{ selectedShip.applyInfo?.agentCompany || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="代理人联系方式:">
                  <span>{{ selectedShip.applyInfo?.agentContact || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 航行计划信息 -->
            <h3>航行计划信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="起运港:">
                  <span>{{ selectedShip.applyInfo?.departureHarborDistrict || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到达港:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.arrivalHarborDistrict,
                    harborDistrictIdAndNameList)
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="到达码头:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.arrivalDock, dockIdAndNameList) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到达泊位:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.arrivalBerth, berthIdAndNameList) }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="计划靠泊时间:">
                  <span>{{ selectedShip.applyInfo?.plannedBerthTime ? new
                    Date(selectedShip.applyInfo.plannedBerthTime).toLocaleString() : '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划离泊时间:">
                  <span>{{ selectedShip.applyInfo?.plannedDepartureTime ? new
                    Date(selectedShip.applyInfo.plannedDepartureTime).toLocaleString() : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="航次:">
                  <span>{{ selectedShip.applyInfo?.voyage || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 货物信息 -->
            <h3>货物信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="装货/卸货:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.operationType, OPERATION_TYPE) || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货物类型（装货）:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.loadingCargoCategory, CARGO_CATEGORY) || '-'
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货物名称（装货）:">
                  <span>{{ selectedShip.applyInfo?.loadingCargoName || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货物吨数（装货）:">
                  <span>{{ selectedShip.applyInfo?.loadingCargoTonnage || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货物类型(卸货):">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.unloadingCargoCategory, CARGO_CATEGORY) || '-'
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="货物名称(卸货):">
                  <span>{{ selectedShip.applyInfo?.unloadingCargoName || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="货物吨数(卸货):">
                  <span>{{ selectedShip.applyInfo?.unloadingCargoTonnage || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 岸电申请状态 -->
            <h3>岸电申请状态</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否申请使用岸电:">
                  <span>{{ selectedShip.applyInfo?.applyShorePower ? '是' : '否' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="selectedShip.applyInfo?.reason !== 0">
                <el-form-item label="未使用岸电原因:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.reason, UNUSED_SHORE_POWER_REASON) || '-'
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="申请状态:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.status, APPLY_STATUS) || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="内贸/外贸:">
                  <span>{{ getOperationTypeLabel(selectedShip.applyInfo?.tradeType, TRADE_TYPE) || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 其他信息 -->
            <h3>其他信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间:">
                  <span>{{ selectedShip.applyInfo?.createTime ? new
                    Date(selectedShip.applyInfo.createTime).toLocaleString()
                    : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="船舶用电信息" name="usageRecordInfo">
          <el-form :model="selectedShip.usageRecordInfo" label-width="200px">
            <!-- 用电时间信息 -->
            <h3>用电时间信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="实际靠泊时间:">
                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.actualBerthTime) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际离泊时间:">
                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.actualDepartureTime) }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电开始时间:">
                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.beginTime) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用电结束时间:">
                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.endTime) }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 电量读数信息 -->
            <h3>电量读数信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电开始时间人工读数:">
                  <span>{{ selectedShip.usageRecordInfo?.powerStartManualReading !== undefined ?
                    selectedShip.usageRecordInfo?.powerStartManualReading : '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用电开始时间系统读数:">
                  <span>{{ selectedShip.usageRecordInfo?.powerStartSystemReading !== undefined ?
                    selectedShip.usageRecordInfo?.powerStartSystemReading : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电结束时间人工读数:">
                  <span>{{ selectedShip.usageRecordInfo?.powerEndManualReading !== undefined ?
                    selectedShip.usageRecordInfo?.powerEndManualReading : '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用电结束时间系统读数:">
                  <span>{{ selectedShip.usageRecordInfo?.powerEndSystemReading !== undefined ?
                    selectedShip.usageRecordInfo?.powerEndSystemReading : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 操作人员信息 -->
            <h3>操作人员信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电开始时供电方操作人:">
                  <span>{{ selectedShip.usageRecordInfo?.beginPowerSupplyOperator || '-' }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="用电结束时供电方操作人:">
                  <span>{{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电开始时用电方操作人:">
                  <span>{{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用电结束时用电方操作人:">
                  <span>{{ selectedShip.usageRecordInfo?.overPowerUsageOperator || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 状态信息 -->
            <h3>状态信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="作业单状态:">
                  <span>{{ getOperationTypeLabel(selectedShip.usageRecordInfo?.status, WORK_STATUS) || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 关联信息 -->
            <h3>其他信息</h3>
            <!-- <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用电申请编号:">
                  <span>{{ selectedShip.usageRecordInfo?.applyId || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="船舶编号:">
                  <span>{{ selectedShip.usageRecordInfo?.shipId || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row> -->

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间:">
                  <span>{{ formatDateTime(selectedShip.usageRecordInfo?.createTime) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="船舶基础信息" name="shipBasicInfo">
          <el-form :model="selectedShip.shipBasicInfo" label-width="200px">
            <!-- 船舶识别信息 -->
            <h3>船舶识别信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="船名:">
                  <span>{{ selectedShip.shipBasicInfo?.name || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="英文船名:">
                  <span>{{ selectedShip.shipBasicInfo?.nameEn || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="船舶呼号:">
                  <span>{{ selectedShip.shipBasicInfo?.callSign || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="船检登记号:">
                  <span>{{ selectedShip.shipBasicInfo?.inspectionNo || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 船舶技术参数 -->
            <h3>船舶技术参数</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="船舶长度:">
                  <span>{{ selectedShip.shipBasicInfo?.length !== undefined ? selectedShip.shipBasicInfo?.length : '-'
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="船舶宽度:">
                  <span>{{ selectedShip.shipBasicInfo?.width !== undefined ? selectedShip.shipBasicInfo?.width : '-'
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="船舶吨位:">
                  <span>{{ selectedShip.shipBasicInfo?.tonnage !== undefined ? selectedShip.shipBasicInfo?.tonnage : '-'
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="满载吃水深度:">
                  <span>{{ selectedShip.shipBasicInfo?.fullLoadDraft !== undefined ?
                    selectedShip.shipBasicInfo?.fullLoadDraft : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 联系信息 -->
            <h3>联系信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="岸电负责人:">
                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContact || '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式:">
                  <span>{{ selectedShip.shipBasicInfo?.shorePowerContactPhone || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 运营信息 -->
            <h3>运营信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="航运单位名称:">
                  <span>{{ selectedShip.shipBasicInfo?.shippingCompany || '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 系统信息 -->
            <h3>系统信息</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="创建时间:">
                  <span>{{ formatDateTime(selectedShip.shipBasicInfo?.createTime) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs';
import { RealtimeDeviceData, ShipRespVo } from '@/types/shorepower';
import { APPLY_STATUS, BERTH_DISTRICT, BERTH_TYPE, CARGO_CATEGORY, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, OPERATION_TYPE, SHORE_POWER_STATUS, TRADE_TYPE, UNUSED_SHORE_POWER_REASON, WORK_STATUS } from './dictionaryTable';
import { formatTimestamp, getValueById, showStatus } from './utils';


interface Props {
  shipData: ShipRespVo[];
  realtimeDeviceData: RealtimeDeviceData[];
  realtimeDeviceDataTime: string;
  shipTotalData: {
    berthingShips: number;
    shorePowerShips: number;
    noShorePowerShips: number;
  };
  handleGoBack: () => void;
}


const props = defineProps<Props>()
// 定义组件事件
const emit = defineEmits<{
  (e: 'switch-ship', ship: ShipRespVo): void;
  (e: 'item-click', ship: ShipRespVo): void;
}>()
const localShipData = ref<(ShipRespVo)[]>([])
const dateRange = ref<[string, string] | []>([])
const statusFilter = ref<string>('all') // 'all', 'using', 'not-using'

// 控制详情对话框显示
const detailDialogVisible = ref(false)
// 存储当前选中的船舶数据
const selectedShip = ref<ShipRespVo | null>(null)
// 控制tab标签页
const activeTab = ref('applyInfo')

// 存储从API获取的字典数据
const berthIdAndNameList = ref<{ value: number, label: string }[]>([])
const dockIdAndNameList = ref<{ value: number, label: string }[]>([])
const harborDistrictIdAndNameList = ref<{ value: number, label: string }[]>([])

// 从localShipData计算船舶数量指标（始终保持显示所有数据的统计）
const berthingShips = computed(() => localShipData.value.length)
const shorePowerShips = computed(() => localShipData.value.filter(ship => ship.applyInfo.reason === 0).length)
const noShorePowerShips = computed(() => localShipData.value.filter(ship => ship.applyInfo.reason !== 0).length)

// 计算当天零点作为起始时间
const startTimeDisplay = computed(() => {
  const startOfDay = dayjs().startOf('day');
  return startOfDay.format('YYYY-MM-DD HH:mm:ss');
})

// 根据船舶状态返回相应的CSS类
const getStatusClass = (status: string | undefined) => {
  switch (status) {
    case '正常':
      return 'status-normal-1'
    case '在线':
      return 'status-normal-1'
    case '空闲':
      return 'status-idle-1'
    case '故障':
      return 'status-fault-1'
    case '超容':
      return 'status-maintenance-1'
    case '异常':
      return 'status-abnormal-1'
    case '维修中':
      return 'status-maintenance-1'
    case '岸电使用中':
      return 'status-shorepower-1'
    // case '岸电故障':
    //   return 'status-fault'
    default:
      return 'status-default-1'
  }
}

const filteredShipData = computed(() => {
  // 先按状态筛选
  let statusFilteredData = localShipData.value;
  if (statusFilter.value === 'using') {
    statusFilteredData = localShipData.value.filter(ship => ship.applyInfo.reason === 0);
  } else if (statusFilter.value === 'not-using') {
    statusFilteredData = localShipData.value.filter(ship => ship.applyInfo.reason !== 0);
  }

  // 再按日期范围筛选
  if (!dateRange.value || dateRange.value.length !== 2) {
    return statusFilteredData;
  }

  const [startDate, endDate] = dateRange.value;
  if (!startDate || !endDate) {
    return statusFilteredData;
  }

  // 将字符串日期转换为时间戳进行比较
  const startTimestamp = new Date(startDate).getTime();
  const endTimestamp = new Date(endDate).getTime();

  return statusFilteredData.filter(ship => {
    // 检查船舶的开始用电时间是否存在
    const beginTime = ship.beginTime ? new Date(ship.beginTime).getTime() : null;

    // 如果开始时间不存在，则不包含在结果中
    if (!beginTime) {
      return false;
    }

    // 检查结束用电时间是否存在
    const endTime = ship.endTime ? new Date(ship.endTime).getTime() : null;

    // 如果开始时间和结束时间都存在，则检查是否在范围内
    if (beginTime && endTime) {
      return (beginTime >= startTimestamp && beginTime <= endTimestamp) ||
        (endTime >= startTimestamp && endTime <= endTimestamp) ||
        (beginTime <= startTimestamp && endTime >= endTimestamp); // 跨越整个范围的情况
    }

    // 如果只有开始时间存在
    if (beginTime && !endTime) {
      return beginTime >= startTimestamp && beginTime <= endTimestamp;
    }

    // 默认情况（应该不会到达这里）
    return false;
  });
});

// 处理日期范围变化
const handleDateRangeChange = (val: [string, string] | []) => {
  dateRange.value = val;
};

// 处理状态筛选变化
const handleStatusFilterChange = (val: string) => {
  statusFilter.value = val;
};

// 重置筛选
const resetFilter = () => {
  dateRange.value = [];
  statusFilter.value = 'all';
};

// 处理船舶列表点击事件
const handleClickShipItem = (row: ShipRespVo) => {
  console.log(row)
  selectedShip.value = row
}

// 格式化时间戳为可读时间格式
const formatDateTime = (timestamp: string | number | Date | undefined) => {
  if (!timestamp) return '-';
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
}
// 显示船舶详情
const showDetail = (row: ShipRespVo) => {
  console.log('first')
  selectedShip.value = row
  detailDialogVisible.value = true
}

onMounted(async () => {
  // 从API获取字典数据
  berthIdAndNameList.value = await BERTH_DISTRICT()
  dockIdAndNameList.value = await DOCK_DISTRICT()
  harborDistrictIdAndNameList.value = await HARBOR_DISTRICT()
  console.log('props.shipData', props.shipData)
  localShipData.value = props.shipData
})
</script>

<style scoped>
.ship-shore-power {
  display: flex;
  height: 100%;
  gap: 10px;
  color: #ffffff;
  background-color: transparent;
}

.ship-data-table-container {
  height: 100%;
  overflow-y: auto;
  background-color: transparent !important;
  overflow-x: hidden;
}

.ship-data-table {
  width: 100%;
  background-color: transparent !important;
  color: #ffffff !important;
  table-layout: auto;
}

.ship-data-table :deep(*) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table) {
  background-color: transparent !important;
  color: #ffffff !important;
  width: 100%;
}

.ship-data-table :deep(.el-table__body) {
  background-color: transparent !important;
  color: #ffffff !important;
}

.ship-data-table :deep(.el-table__header) {
  background-color: transparent !important;
  color: #ffffff !important;
}



.ship-data-table :deep(.el-table__body .shore-power-status.status-on) {
  color: #4CAF50 !important;
}

.ship-data-table :deep(.el-table__body .shore-power-status.status-off) {
  color: #F44336 !important;
}

.ship-data-table :deep(.el-table__body .shore-power-status.status-danger) {
  color: #F44336 !important;
}

.ship-data-table :deep(.el-table__body .shore-power-status.status-warning) {
  color: #FFC107 !important;
}

.ship-data-table :deep(.el-table__body .shore-power-status.status-success) {
  color: #4CAF50 !important;
}

.ship-data-table :deep(.el-table__body .shore-power-status.status-cable) {
  color: #2196F3 !important;
}

.ship-data-table :deep(.el-table__cell) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__header-wrapper) {
  background-color: rgba(30, 120, 255, 0.2) !important;
  font-weight: bold;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.ship-data-table :deep(.el-table__header th) {
  background-color: transparent !important;
  color: #fff !important;
  font-size: 16px;
  padding: 12px 0;
  white-space: nowrap;
}

.ship-data-table :deep(.el-table__body td .shore-power-status) {
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
}

.ship-data-table :deep(.el-table__body td) {
  background-color: transparent !important;
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ship-data-table :deep(.el-table__body td .shore-power-status) {
  font-weight: bold;
}

.ship-data-table :deep(.el-table__body-wrapper tr) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__row) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__row:hover) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  cursor: pointer;
}

.ship-data-table :deep(.el-table__row.current-row) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.ship-data-table :deep(.el-table__body-wrapper) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__header-wrapper tr th) {
  background-color: rgba(30, 120, 255, 0.2) !important;
  color: #ffffff !important;
}

.ship-data-table :deep(table) {
  background-color: transparent !important;
  color: #ffffff !important;
}

.ship-data-table :deep(.el-table__empty-block) {
  background-color: transparent !important;
}

.ship-data-table :deep(.el-table__placeholder) {
  background-color: transparent !important;
  color: #ffffff !important;
}

.ship-data-table :deep(.el-table__expanded-cell) {
  background-color: transparent !important;
  color: #ffffff !important;
}

.ship-data-table :deep(.el-table__footer-wrapper) {
  background-color: transparent !important;
}

/* 数据卡片标题样式 */
.data-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.title-section {
  display: flex;
  align-items: center;
  min-width: 0;
  /* 允许标题部分收缩 */
}

.filter-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-range-picker {
  width: 200px;
  flex-shrink: 0;
  /* 防止日期选择器收缩 */
}

/* 响应式设计：当屏幕较小时调整布局 */
@media (max-width: 1200px) {
  .data-card-title {
    flex-direction: column;
    align-items: stretch;
  }

  .title-section {
    justify-content: center;
    margin-bottom: 10px;
  }

  .filter-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .date-range-picker {
    width: 100%;
    max-width: 200px;
    align-self: center;
  }
}

.shore-power-status {
  font-weight: bold;
}

.shore-power-status.status-on {
  color: #4CAF50 !important;
}

.shore-power-status.status-off {
  color: #F44336 !important;
}

.shore-power-status.status-danger {
  color: #F44336 !important;
}

.shore-power-status.status-warning {
  color: #FFC107 !important;
}

.shore-power-status.status-success {
  color: #4CAF50 !important;
}

.shore-power-status.status-cable {
  color: #2196F3 !important;
}

.overview-value {
  font-size: 42px;
  font-weight: 700;
}

.overview-label {
  font-size: 32px;
  font-weight: 700;
}

.overview-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.overview-item {
  flex: 1;
  text-align: center;
}

/* 船舶详情对话框样式 */
.ship-detail-dialog :deep(.el-dialog) {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #ffffff;
}

.ship-detail-dialog :deep(.el-dialog__header) {
  background-color: rgba(30, 120, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 20px;
}

.ship-detail-dialog :deep(.el-dialog__title) {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.ship-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.ship-detail-dialog :deep(.el-form-item__label) {
  color: #ffffff;
  font-weight: bold;
}

.ship-detail-dialog :deep(.el-form-item__content) {
  color: #ffffff;
}

.ship-detail-dialog :deep(.el-row) {
  margin-bottom: 10px;
}

.ship-detail-dialog :deep(h3) {
  color: #409EFF;
  margin: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.ship-detail-dialog :deep(.el-dialog__footer) {
  background-color: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 20px;
}

.dialog-footer :deep(.el-button) {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.dialog-footer :deep(.el-button:hover) {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.time-range-item {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
}

.status-normal-1 {
  color: #00ff00;
  font-weight: bold;
}

/* 空闲状态 */
.status-idle-1 {
  color: #2196F3;
  /* 蓝色 */
  font-weight: bold;

}

/* 故障状态 */
.status-fault-1 {
  color: #F44336;
  /* 红色 */
  font-weight: bold;
}

.status-abnormal-1 {
  color: #F44336;
  font-weight: bold;
}

.status-maintenance-1 {
  color: #FF9800;
  font-weight: bold;
}

.status-shorepower-1 {
  color: #2196F3;
  font-weight: bold;
}

/* .status-fault {
  background-color: #9C27B0;
  box-shadow: 0 0 5px rgba(156, 39, 176, 0.5);
} */

.status-default-1 {
  color: #b4babd;
  font-weight: bold;
}
</style>