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

<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="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="shorepower in ShorePowerList" :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(StatusText(shorepower.status))">
                      {{ StatusText(shorepower.status) }}
                    </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="handleSwitch(ship, '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('正常')">
                      正常
                    </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 class="right" :style="`width: ${show_type === 'ship' ? '45%' : '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?.actualDepartureTime) }}</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 class="detail-item">
                <span class="label">岸电使用时长:</span>
                <span class="value">{{ formatDuration(shipSelectedItem?.usageRecordInfo?.beginTime,
                  shipSelectedItem?.usageRecordInfo?.endTime
                ) }}</span>
              </div>
              <div v-if="shipSelectedItem.applyInfo.reason === 0" class="detail-item">
                <span class="label">岸电使用时长:</span>
                <span class="value">{{ showStatus(shipSelectedItem, realtimeDeviceData)?.status }}</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>
          </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>
          </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 class="detail-item">
                <span class="label">停泊状态:</span>
                <span class="value">{{ selectedItem.shorePowerAndShip.type === 'left' ? '左舷停泊' :
                  selectedItem.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedItem.shorePowerAndShip.type
                }}</span>
              </div>
              <div class="detail-item">
                <span class="label">靠泊状态:</span>
                <span class="value">{{ getShorePowerStatusText(selectedItem.shorePowerAndShip.status) }}</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>

    <!-- 岸电箱历史记录弹窗 -->
    <ShorePowerHistoryDialog v-model="shorePowerHistoryVisible.visible" :data="shorePowerHistoryData"
      :ship-connection-data="shorePowerConnectionData" @search="handleShorePowerHistorySearch"
      @ship-connection-search="handleShorePowerConnectionSearch"
      :shore-power-id="shorePowerHistoryVisible.shorePowerId" />

    <!-- 船舶历史记录弹窗 -->
    <ShipHistoryDialog v-model="shipHistoryVisible.visible" :berthing-data="shipHistoryData"
      :shore-power-connection-data="shipShorePowerConnectionData" @berthing-search="handleShipHistorySearch"
      @shore-power-connection-search="handleShipShorePowerConnectionSearch" :ship-id="shipHistoryVisible.shipId"
      :realtime-device-data="realtimeDeviceData" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ShorePowerHistoryDialog from './ShorePowerHistoryDialog.vue'
import ShipHistoryDialog from './ShipHistoryDialog.vue'
import { MapApi } from "@/api/shorepower/map";
import { RealtimeDeviceData, ShipRespVo, ShorePowerBerth } from '@/types/shorepower';
import { BERTH_TYPE, DOCK_DISTRICT, getOperationTypeLabel, HARBOR_DISTRICT, 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[];
  // 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 shorePowerHistoryVisible = ref({
  visible: false,
  shorePowerId: 0
})
const shipHistoryVisible = ref({
  visible: false,
  shipId: 0
})
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.shipStatusData
  }
  return props.shipStatusData.filter(ship =>
    ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 模拟岸电箱历史数据
const shorePowerHistoryData = ref<any[]>([
  { id: 1, time: '2023-05-01 08:30:00', operation: '连接', voltage: '380', current: '120', power: '45.6', energy: '12.5' },
  { id: 2, time: '2023-05-01 12:15:00', operation: '运行', voltage: '382', current: '118', power: '45.1', energy: '35.2' },
  { id: 3, time: '2023-05-01 16:45:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
  { id: 4, time: '2023-05-02 09:20:00', operation: '连接', voltage: '379', current: '122', power: '46.3', energy: '8.7' },
  { id: 5, time: '2023-05-02 14:30:00', operation: '运行', voltage: '381', current: '119', power: '45.4', energy: '28.9' },
  { id: 6, time: '2023-05-02 18:50:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
  { id: 7, time: '2023-05-03 07:45:00', operation: '连接', voltage: '380', current: '121', power: '45.9', energy: '15.3' },
  { id: 8, time: '2023-05-03 13:20:00', operation: '运行', voltage: '382', current: '120', power: '45.8', energy: '42.1' },
  { id: 9, time: '2023-05-03 17:30:00', operation: '断开', voltage: '0', current: '0', power: '0', energy: '0' },
  { id: 10, time: '2023-05-04 10:15:00', operation: '连接', voltage: '378', current: '123', power: '46.5', energy: '9.8' }
])

// 模拟船舶靠泊历史数据
const shipHistoryData = ref<any[]>([
  { id: 1, time: '2023-04-15 09:30:00', operation: '靠泊', berthPosition: '1号泊位', duration: '12.5', powerConsumption: '125.6' },
  { id: 2, time: '2023-04-16 14:20:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
  { id: 3, time: '2023-04-20 08:45:00', operation: '靠泊', berthPosition: '3号泊位', duration: '8.2', powerConsumption: '89.3' },
  { id: 4, time: '2023-04-21 16:30:00', operation: '离泊', berthPosition: '3号泊位', duration: '0', powerConsumption: '0' },
  { id: 5, time: '2023-04-25 11:15:00', operation: '靠泊', berthPosition: '2号泊位', duration: '15.7', powerConsumption: '156.8' },
  { id: 6, time: '2023-04-26 18:40:00', operation: '离泊', berthPosition: '2号泊位', duration: '0', powerConsumption: '0' },
  { id: 7, time: '2023-05-01 07:20:00', operation: '靠泊', berthPosition: '1号泊位', duration: '18.3', powerConsumption: '189.2' },
  { id: 8, time: '2023-05-02 15:50:00', operation: '离泊', berthPosition: '1号泊位', duration: '0', powerConsumption: '0' },
  { id: 9, time: '2023-05-05 09:10:00', operation: '靠泊', berthPosition: '4号泊位', duration: '6.4', powerConsumption: '67.5' },
  { id: 10, time: '2023-05-06 13:45:00', operation: '离泊', berthPosition: '4号泊位', duration: '0', powerConsumption: '0' }
])

// 模拟岸电箱连接船舶数据
const shorePowerConnectionData = ref<any[]>([
  { id: 1, shipName: '远航号', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
  { id: 2, shipName: '海鹰号', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
  { id: 3, shipName: '巨轮号', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
  { id: 4, shipName: '远洋号', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
  { id: 5, shipName: '海豚号', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
])

// 模拟船舶连接岸电箱数据
const shipShorePowerConnectionData = ref<any[]>([
  { id: 1, shorePowerName: '1号岸电箱', time: '2023-05-01 08:30:00', duration: '4.5', powerConsumption: '125.6', status: '已断开' },
  { id: 2, shorePowerName: '2号岸电箱', time: '2023-05-01 12:15:00', duration: '3.2', powerConsumption: '89.3', status: '已断开' },
  { id: 3, shorePowerName: '1号岸电箱', time: '2023-05-02 09:20:00', duration: '6.8', powerConsumption: '189.2', status: '连接中' },
  { id: 4, shorePowerName: '3号岸电箱', time: '2023-05-03 07:45:00', duration: '2.1', powerConsumption: '67.5', status: '已断开' },
  { id: 5, shorePowerName: '2号岸电箱', time: '2023-05-04 10:15:00', duration: '5.3', powerConsumption: '156.8', status: '连接中' }
])

const handleSelectItem = async (item: ShipItem) => {
  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',
    }
  }
}

const filteredShorePowerStatusData = computed(() => {
  if (!storeSearchKeyword.value) {
    return props.shipStatusData
  }
  return props.shipStatusData.filter(ship =>
    ship.shorePowerEquipment.name.toLowerCase().includes(storeSearchKeyword.value.toLowerCase())
  )
})

// 处理搜索输入
const handleSearch = () => {
  // 输入处理逻辑（如果需要额外处理可以在这里添加）
}

// 显示岸电箱历史记录
const showShorePowerHistory = (shorepower: ShorePowerBerth) => {
  console.log('shorepower', shorepower)
  currentShorePower.value = shorepower
  shorePowerHistoryVisible.value = {
    visible: true,
    shorePowerId: shorepower.id || 0
  }
}

// 显示船舶历史记录
const showShipHistory = (ship: ShipItem) => {
  console.log('ship', ship)
  currentShip.value = ship
  shipHistoryVisible.value = {
    visible: true,
    shipId: ship.shipBasicInfo.id
  }
}

// 处理岸电箱历史记录搜索
const handleShorePowerHistorySearch = (params: any) => {
  console.log('岸电箱历史记录搜索参数:', params)
  // 实际项目中这里会调用接口获取数据
  // 模拟延迟
  setTimeout(() => {
    console.log('岸电箱历史记录搜索完成')
  }, 500)
}

// 处理船舶历史记录搜索
const handleShipHistorySearch = (params: any) => {
  console.log('船舶历史记录搜索参数:', params)
  // 实际项目中这里会调用接口获取数据
  // 模拟延迟
  setTimeout(() => {
    console.log('船舶历史记录搜索完成')
  }, 500)
}

// 处理岸电箱连接船舶记录搜索
const handleShorePowerConnectionSearch = (params: any) => {
  console.log('岸电箱连接船舶记录搜索参数:', params)
  // 实际项目中这里会调用接口获取数据
  // 模拟延迟
  setTimeout(() => {
    console.log('岸电箱连接船舶记录搜索完成')
  }, 500)
}

// 处理船舶连接岸电箱记录搜索
const handleShipShorePowerConnectionSearch = (params: any) => {
  console.log('船舶连接岸电箱记录搜索参数:', params)
  // 实际项目中这里会调用接口获取数据
  // 模拟延迟
  setTimeout(() => {
    console.log('船舶连接岸电箱记录搜索完成')
  }, 500)
}

// 定义事件
const emit = defineEmits<{
  (e: 'switch-ship', ship: ShipItem): 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 }) => {
  console.log('shorepower', shorepower)
  // selectedItem.value = shorepower
  shorepowerSelectedItem.value = shorepower
  show_type.value = 'shorepower'
  // const data = await MapApi.getRealtimeDataByIdList({ ids: shorepower.totalPowerDeviceId })
  // console.log('voltageDeviceId', data)
}

const shorePowerStatusMap = {
  1: '待靠泊',
  2: '靠泊中',
  3: '岸电接入中',
  4: '用电中',
  5: '岸电卸载中',
  6: '岸电卸载完成',
  7: '离泊',
  9: '未使用岸电'
}

const StatusMap = {
  1: '故障',
  2: '故障',
  3: '在线',
  4: '在线',
  5: '离线',
  6: '在线',
  8: '故障',
  9: '离线',
}

// 状态转换函数
const StatusText = (status: number | string) => {
  const statusNum = Number(status);
  // console.log(status)
  return StatusMap[statusNum] || status;
}

// 状态转换函数
const getShorePowerStatusText = (status: number | string) => {
  const statusNum = Number(status);
  // console.log(status)
  return shorePowerStatusMap[statusNum] || status;
}

const getStatusClass = (status: string) => {
  switch (status) {
    case '正常':
      return 'status-normal'
    case '在线':
      return 'status-normal'
    case '空闲':
      return 'status-idle'
    case '故障':
      return 'status-fault'
    case '异常':
      return 'status-abnormal'
    case '维修中':
      return 'status-maintenance'
    case '岸电使用中':
      return 'status-shorepower'
    // case '岸电故障':
    //   return 'status-fault'
    default:
      return 'status-default'
  }
}

const handleGetStorePower = async () => {
  // console.log('loading')
  const harborDistrictId = 1
  const harborDistrictList = await HARBOR_DISTRICT()
  const dockDistrictList = await DOCK_DISTRICT()
  const res = await MapApi.getShorepowerIdAndNameListByHarborDistrictId(harborDistrictId)
  ShorePowerList.value = res.map(item => ({
    ...item,
    position: `${getOperationTypeLabel(harborDistrictId, harborDistrictList)}${getOperationTypeLabel(item.shorePowerEquipmentInfo.dockId, dockDistrictList)}${item.name} `,
  }))
  console.log('11', res)
}

onMounted(async () => {
  await handleGetStorePower()
  // console.log(props.shipStatusData)
})

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>