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 filteredShorePowerStatusData" :key="shorepower.id" class="ship-table-row"
                  @click="handleSwitch(shorepower, 'shorepower')">
                  <div class="ship-table-column ship-name">
                    <div class="ship-icon">⚡</div>
                    <span class="ship-name-text">{{ shorepower.shorePowerEquipment.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="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="selectedItem && 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">{{ selectedItem.shipBasicInfo.name }}</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">{{ selectedItem.shipBasicInfo.length }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">船宽:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.width }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">满载吃水深度:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.fullLoadDraft }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">吨位:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.tonnage }} 吨</span>
              </div>
              <div class="detail-item">
                <span class="label">航运单位:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.shippingCompany }}</span>
              </div>
              <div class="detail-item">
                <span class="label">岸电联系人:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.shorePowerContact }}</span>
              </div>
              <div class="detail-item">
                <span class="label">联系方式:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.shorePowerContactPhone }}</span>
              </div>
              <div class="detail-item">
                <span class="label">船检登记号:</span>
                <span class="value">{{ selectedItem.shipBasicInfo.inspectionNo }}</span>
              </div>
              <div class="detail-item">
                <span class="label">创建时间:</span>
                <span class="value">{{ new Date(selectedItem.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">{{ 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-if="selectedItem && 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">{{ selectedItem.shorePowerEquipment.name }}</span>
              </div>
              <div class="detail-item">
                <span class="label">位置:</span>
                <span class="value">{{ selectedItem.shorePowerEquipment.position }}</span>
              </div>
              <div class="detail-item">
                <span class="label">电压:</span>
                <span class="value">{{ selectedItem.shorePowerEquipment.voltage }}</span>
              </div>
              <div class="detail-item">
                <span class="label">频率:</span>
                <span class="value">{{ selectedItem.shorePowerEquipment.frequency }} </span>
              </div>
              <div class="detail-item">
                <span class="label">容量:</span>
                <span class="value">{{ selectedItem.shorePowerEquipment.capacity }}</span>
              </div>
              <div class="detail-item">
                <span class="label">当前电压:</span>
                <span class="value"></span>
              </div>
              <div class="detail-item">
                <span class="label">当前电流:</span>
                <span class="value"></span>
              </div>
              <div class="detail-item">
                <span class="label">当前频率:</span>
                <span class="value"></span>
              </div>
              <div class="detail-item">
                <span class="label">当前总用量:</span>
                <span class="value">{{ selectedItem.shorePowerEquipment.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" :data="shorePowerHistoryData"
      :ship-connection-data="shorePowerConnectionData" @search="handleShorePowerHistorySearch"
      @ship-connection-search="handleShorePowerConnectionSearch" />

    <!-- 船舶历史记录弹窗 -->
    <ShipHistoryDialog v-model="shipHistoryVisible" :berthing-data="shipHistoryData"
      :shore-power-connection-data="shipShorePowerConnectionData" @berthing-search="handleShipHistorySearch"
      @shore-power-connection-search="handleShipShorePowerConnectionSearch" />
  </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";
// 定义组件属性
interface ShipItem {
  id: string;
  shipBasicInfo: {
    name: string;
  };
  shorePowerEquipment: {
    name: string;
    measureValue: string;
  };
  shorePowerAndShip?: {
    status?: string;
    powerUsage?: number;
  };
  modelInstance?: any;
}

interface Props {
  shipStatusData: ShipItem[];
  shorePowerStatusData: ShipItem[];
  // selectedItem: ShipItem | null;
}

const props = defineProps<Props>()

// 搜索关键字
const searchKeyword = ref('')
const storeSearchKeyword = ref('')
const show_type = ref('ship')
const selectedItem = ref<ShipItem | null>(null)

// 历史记录弹窗相关
const shorePowerHistoryVisible = ref(false)
const shipHistoryVisible = ref(false)
const currentShorePower = ref<ShipItem | null>(null)
const currentShip = ref<ShipItem | null>(null)

// 岸电箱历史记录表格列
const shorePowerHistoryColumns = [
  { prop: 'id', label: '记录ID', width: 80 },
  { prop: 'time', label: '时间', width: 180 },
  { prop: 'operation', label: '操作类型' },
  { prop: 'voltage', label: '电压(V)' },
  { prop: 'current', label: '电流(A)' },
  { prop: 'power', label: '功率(kW)' },
  { prop: 'energy', label: '用电量(kWh)' }
]

// 船舶靠泊历史记录表格列
const shipHistoryColumns = [
  { prop: 'id', label: '记录ID', width: 80 },
  { prop: 'time', label: '时间', width: 180 },
  { prop: 'operation', label: '操作类型' },
  { prop: 'berthPosition', label: '泊位位置' },
  { prop: 'duration', label: '停泊时长(小时)' },
  { prop: 'powerConsumption', label: '用电量(kWh)' }
]
// 过滤后的船舶数据
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)
  selectedItem.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: ShipItem) => {
  currentShorePower.value = shorepower
  shorePowerHistoryVisible.value = true
}

// 显示船舶历史记录
const showShipHistory = (ship: ShipItem) => {
  currentShip.value = ship
  shipHistoryVisible.value = true
}

// 处理岸电箱历史记录搜索
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 shorePowerStatusMap = {
  1: '待靠泊',
  2: '靠泊中',
  3: '岸电接入中',
  4: '用电中',
  5: '岸电卸载中',
  6: '岸电卸载完成',
  7: '离泊',
  9: '未使用岸电'
}

// 状态转换函数
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-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'
  }
}

onMounted(() => {
  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>